Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Znacheniya-klassifikaciya-znachenij

Значения. Классификация значений

Значения стилевых свойств имеет большое разнообразие, поэтому все значения можно классифицировать по-разному. Предлагаю вам вот такую простенькую классификацию, которую мы рассмотрим более подробно в этом уроке:

Числа

Числа в значении могут быть любые целые числа, а также десятичные дроби. Например, числовое значение стиля для текста можно задать вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Числа</title>
  <style type="text/css">
  p {
    font-weight: 800; /* Жирное начертание текста */
    line-height: 1.3; /* Междустрочный интервал */
   }
  </style>
 </head>
 <body>
  <h1>Пример использования числового значения для заголовка 
первого уровня</h1>
 </body>
</html>

Результат вы можете видеть на рисунке:

Числовые значения css

При использовании десятичной дроби в «значении» для разделения целой части от десятичной используют точку. Если целая часть дроби равна нулю, то при написании значения её «нуль» можно не писать.

Размеры

Все значения размеров в CSS можно разделить на абсолютные и относительные. Рассмотрим их поподробнее. Каждое значение размера имеет свою единицу измерения.

Абсолютные значения размеров

Абсолютные значения применяются в основном для редактирования текста и значительно реже чем относительные. Ниже я приведу основные единицы, которые используются для значений размеров:

 

in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)

Ниже я приведу небольшой пример использования абсолютных значений размеров:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Абсолютные значения</title>
  <style type="text/css">
   h1 { font-size: 23pt; }
   p { margin-left: 35mm; }
  </style>
 </head> 
 <body>
   <h1>Заголовок размером 23 пункта</h1> 
   <p>Сдвигаем текст вправо на 35 миллиметров</p> 
 </body>
</html>

Результат должен получиться следующим:

абсолютные значения в css

Относительные значения размеров

Как и абсолютные значения часто используют для редактирования текста. Вот основные единицы, которые используются в CSS:

em Размер шрифта текущего элемента
ex Высота символа x
px Пиксель
% Процент

Чтобы легче было понять, как можно использовать относительные единицы. Просто взгляните на этот пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Относительные единицы размеров в CSS</title>
<style type="text/css">
h1 { font-size: 20px; }
p { font-size: 1.7em; }
  </style>
 </head> 
 <body>
  <h1>Заголовок размером 20 пикселей</h1> 
  <p>Размер текста 1.7 em</p> 
 </body>
</html>

В результате должно получиться следующее:

относительные значения в css

Цвета

Здесь я не буду рассказывать вам какие есть цвета в CSS, а скажу одно, что задать цвет в CSS можно тремя разными способами:по названию, по шестнадцатеричному значению и в формате RGB. Для наглядности взгляните на небольшой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Цвета</title>
<style type="text/css">
body {
background-color: #c0c0c0; /* Цвет фона страницы HTML */
} 
h1 {
background-color: RGB(232, 201, 16); /* Цвет фона под 
заголовком */
}
p {
color: white; /* Цвет текста */
background-color: orange; /* Цвет фона под текстом абзаца */
}
  </style>
 </head>
 <body>
   <h1>Цветной заголовок</h1>
   <p>Белый текст на оранжевом поле))</p>
 </body>
</html>

В результате должно получиться следующее:

значения цветов в css

Адреса

Адреса (url) используют для задания пути к определённому файлу. Например для установления фоновой картинки можно записать:

background: url(img/ваш_файл.png) no-repeat;

Причем можно использовать как абсолютный, так и относительный путь ссылки.

Ключевые слова

Ключевые слова в CSS для задания значений используются довольно часто. К ним можно отнести такие слова как top, left, right и т.п. Они служат в основном для определения позиций элемента, тега, селектора.



наверх