Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задается свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4).

Пример 5.4. Разные значения у одного свойства

p { color: green; }p { color: red; }

В данном примере для селектора p цвет текста вначале задается зеленым, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

На самом деле такой записи лучше вообще избегать и удалять повторяющиеся значения. Но подобное может произойти не явно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы.

Значения

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

Комментарии

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /*... */ (пример 5.5).

Пример 5.5. Комментарии в CSS-файле

/* Стиль для сайта htmlbook.ru Сделан для ознакомительных целей*/ div { width: 200px; /* Ширина блока */ margin: 10px; /* Поля вокруг элемента */ float: left; /* Обтекание по правому краю */}

Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.

 

Значения стилевых свойств

 

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

Строки

Любые строки необходимо брать в двойные или одинарные кавычки. Если внутри строки требуется оставить одну или несколько кавычек, то можно комбинировать типы кавычек или добавить перед кавычкой слэш (пример 6.1).

Пример 6.1. Допустимые строки

'Гостиница " Турист" '
" Гостиница 'Турист'"
" Гостиница \" Турист\" "

В данном примере в первой строке применяются одинарные кавычки, а слово «Турист» взято в двойные кавычки. Во второй строке все с точностью до наоборот, в третьей же строке используются только двойные кавычки, но внутренние экранированы с помощью слэша.

Числа

Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой (пример 6.2).

Пример 6.2. Числа в качестве значений

 

<! 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: 600; /* Жирное начертание */ line-height: 1.2; /* Межстрочный интервал */ } < /style> < /head> < body> < p> Пример текста< /p> < /body> < /html>

Если в десятичной дроби целая часть равна нулю, то ее разрешается не писать. Запись.7 и 0.7 равнозначна.

Проценты

Процентная запись обычно применяется в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна (пример 6.3).

Пример 6.3. Процентная запись

 

<! 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" > TABLE { width: 100%; /* Ширина таблицы в процентах */ background: #f0f0f0; /* Цвет фона */ } < /style> < /head> < body> < table> < tr> < td> Содержимое таблицы< /td> < /tr> < /table> < /body> < /html>

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

Размеры

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

Относительные единицы

Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В табл. 6.1 перечислены основные относительные единицы.

Табл. 6.1. Относительные единицы измерения
Единица	Описание
em	Размер шрифта текущего элемента
ex	Высота символа x
px	Пиксел
%	Процент

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик. В примере 6.4 показано применение пикселов и em для задания размера шрифта.

Пример 6.4. Использование относительных единиц

 

<! 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: 30px; } P { font-size: 1.5em; } < /style> < /head> < body> < h1> Заголовок размером 30 пикселов< /h1> < p> Размер текста 1.5 em< /p> < /body> < /html>

Результат данного примера показан ниже (рис. 6.1).

Рис. 6.1. Размер текста при различных единицах

Абсолютные единицы

Абсолютные единицы применяются реже, чем относительные и обычно при работе с текстом. В табл. 6.2 перечислены основные абсолютные единицы.

Табл. 6.2. Абсолютные единицы измерения
Единица	Описание
in	Дюйм (1 дюйм равен 2, 54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта. Хотя мы привыкли измерять все в миллиметрах и подобных единицах, пункт, пожалуй, единственная величина из не метрической системы измерения, которая используется у нас повсеместно. И все благодаря текстовым редакторам и издательским системам. В примере 6.5 показано использование пунктов и миллиметров.

Пример 6.5. Использование абсолютных единиц

 

<! 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: 24pt; } P { margin-left: 30mm; } < /style> < /head> < body> < h1> Заголовок размером 24 пункта< /h1> < p> Сдвиг текста вправо на 30 миллиметров< /p> < /body> < /html>

Результат использования абсолютных единиц измерения показан ниже (рис. 6.2).

Рис. 6.2. Размер текста при различных единицах

При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).

Цвет

Цвет в стилях можно задавать тремя способами: по шестнадцатеричному значению, по названию и в формате RGB.

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: