Способы добавления таблиц стилей на Web-страницы

Существуют следующие способы добавления стилей.

1. Встраивание стилей (внутрь тега). Под встроенным стилем подразумевается использование глобального атрибута style непосредственно в том элементе, который необходимо стилизовать. В качестве значения атрибута указываются CSS-свойства, например:

< div style=" border: 1px solid red; background-color: yellow; " > Элемент div< /div>

< p style = " color: red" >

< p style = " color: red; font-size: 60pt" >

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

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

2. Включение стилей (заголовочные стили) - набор стилей, который является частью кода веб-страницы, расположенная внутри элемента < style> в теле тега < head>:

< head>

< style>

p{color: blue;

background-color: yellow;

margin-left: 20px; }

body { background-image: url(" images/fon.jpg" ); }

< /style>

< /head>

Тег < style> сообщает браузеру, что данные, располагающиеся внутри, являются кодом CSS. Такие таблицы стилей являются не самым лучшим способом для проектирования дизайна сайта, состоящего из большого количества страниц. Во-первых, такой код придется копировать и вставлять в каждую страницу, а в случае ошибок или изменений редактировать каждую страницу отдельно. Во-вторых, такой вставленный код сильно увеличивает размер кода на странице в целом, вследствие чего страница будет дольше загружаться для просмотра.

3. Связывание. При этом способе добавления таблицу стилей создают в отдельном текстовом файле, имеющем расширение. css, имя файла может быть любым. В его содержимое не должны входить никакие HTML теги, поэтому тег < style> там указывать не нужно. Такой стиль можно применить к нескольким документам.

Для подключения внешней таблицы стилей нужно в области < head> указать тег < link> следующим образом:

< link rеl=" stylеshееt" typе=" tехt/сss" hrеf=" styles.css" >

Атрибуты тега < link>:

· rel=" stylesheet" - указывает тип ссылки; в данном случае это ссылка на таблицу стилей;

· type=" text/css" - указывает тип файла, на который ссылается тег;

· href=" styles.css" - определяет путь к внешнему CSS-файлу.

К страницам можно присоединять множество таблиц стилей, добавляя несколько тегов < link>, каждый из которых будет указывать на свой файл с таблицей.

Пример. Создадим файл my_style.css и напишем в нем следующий текст:

body {font-family: Verdana;

background-color: #ccddaa}

em { font-size: 30pt;

color: #ddccaa;

В документе, к которому подключаем стиль, пишем:

< hеаd>

< link rеl = " stylеshееt" tуpе = " tехt/сss" hrеf = " my_style.css " >

< /hеаd>

4. Импортирование позволяет использовать в текущем web-документе таблицу стилей, которая расположена на сервере. С этой целью в области заголовка размещают следующий код:

< style type=" text/CSS" >

@ import url (http: //www.myserver.ru/CSS/line.CSS)

@import url(main.css);

@import " dir/main2.css";

< / style>

В отличие от тега < link>, правило @import используется внутри тега < style>. Для подключения внешней таблицы стилей после ключевого слова @import используется url(), в скобках указывается путь к внешнему CSS-файлу, который может быть заключен в кавычки: url(" main.css" ).

Использование url() для указания пути к CSS-файлу необязательно, можно просто написать: @import " путь_к_файлу";, в этом случае путь обязательно должен быть указан в кавычках.

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

Команды @import должны располагаться до всех остальных элементов, за исключением @charset. Правило @import не обязательно должно располагаться в теге < style>, его можно включать во внешние таблицы стилей.

Наследование

При указании стиля для элемента часть свойств может быть унаследована его дочерними элементами и потомками. Этот эффект называется наследованием.

Пример.

< p> Белеет парус < em> одинокий < /em> < /p>

Автор < em> М.Ю. Лермонтов < /em>

В данном примере содержимое тега < em> внутри параграфа унаследует стиль тега < p>, если для тега < em> не указан собственный стиль.

Наследуемые свойства можно переопределить, применив индивидуальное правило для нужного элемента.

Контекстные селекторы

Контекстные селекторы позволяют применять стилевые свойства к элементам, выбираемым на основе ситуации – контекста – или его связи с другим элементом. Существует несколько типов контекстных селекторов: потомки, дочерние элементы и элементы-братья.

Селекторы потомков указывают на элементы, которые содержатся внутри другого элемента. Они образуют список, разделенный символами пробела, который является комбинатором для селекторов потомков, начиная с элемента верхнего уровня. Для построения контекстного селектора необходимо перечислить элементы в том порядке, в каком они должны встретиться в документе: например, в следующем правиле указывается, что элементы em должны быть оливкового цвета, но только в том случае, если они являются потомками пункта списка (li). Все прочие элементы em данное правило не затрагивает.

li em {color: olive; }

Селекторы потомков могут также иметь несколько уровней вложения, как показано в следующем примере, где выбирается только выделенный текст (em), находящийся внутри анкеров (а), расположенных, в свою очередь, внутри сортированных списков (ol).

ol a em {font-weight: bold; }

Селектор дочерних элементов сходен с селектором потомков, но он ссылается только на непосредственных потомков данного элемента. Иными словами, элемент должен содержаться прямо внутри элемента верхнего уровня, без элементов других уровней между ними. Селекторы дочерних элементов разделяются символами «больше» (> ). Правило, приведенное в следующем примере, делает серым цвет фона выделенного текста (em), но только если этот текст является дочерним элементом абзаца (р):

р > em {background-color: gray; }

Селектор элементов-братьев используется для ссылки на элемент, идущий сразу после другого элемента, имеющего того же родителя. Комбинатором для таких селекторов служит знак «плюс» (+). Например, если нужно сделать специальное оформление для первого абзаца, идущего после заголовка первого уровня, правило должно быть таким:

H1 + p {padding-left: 40px; }

Селектор соседних элементов используется для ссылкина элемент, которому предшествует определенный элемент. Разделителем служит знак «тильда» (~). Например, если нужно выбрать все упорядоченные списки, которым предшествует параграф, используют запись:

p~ol {margin-top: 20px; }

Использование классов

Рассмотренные ранее селекторы были привязаны к конкретным элементам документа. Селекторы классов и селекторы идентификаторов (id) дают возможность создавать стили для элементов, имя которым присвоил сам разработчик, независимо от тегов документа.

Применить стиль для элемента можно с помощью атрибутов class и id. Применение атрибута class используется обычно для того, чтобы объединить несколько элементов в логическую группу. Оформление этих элементов можно будет изменять при помощи свойств класса.

В отличие от id, селектор class позволяет применить свой стиль не к одному, а сразу к нескольким элементам на веб-странице.

Правила для имен классов:

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

· имя класса начинается с буквы, включает буквы, числа, дефис и знак подчеркивания

· имена классов чувствительны к регистру.

Описание класса вылядит так:

.имя класса {свойство: значение; }

Пример: каждый второй абзац (параграф) отобразить с отступом вправо. Описываем класс space:

<! DOCTYPE html>

< html> < head> < title> Использование классов < /title>

< style>

.space {margin-left: 100px; }

< /style> < /head>

У того элемента (тега), к которому хотим применить данный класс, добавляется атрибут: < тег class = " имя класса" >:

< body>

< p> Этот абзац будет выровнен как обычно< /p>

< p class=" center" > Этот абзац будет отображен с отступом 100px< /p>

< p> Этот абзац тоже будет выровнен как обычно < /p>

< p class=" center" > А этот абзац тоже будет с отступом 100px < /p>

< /body>

< /html>

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

тег. имя класса {...}

Пример: h1.new_class {color: red; }

p.my_class {color: #ddccaa; }

Селектор id

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

Для использования селектора id нужно создать идентификатор(id), придумав ему уникальное имя, и прописать его в атрибуте id элемента, к которому будет применяться стиль. При описании стиля селектор id начинается с символа # сразу после которого идет название идентификатора.

Пример.

<! DOCTYPE html> < html> < head> < title> Использование ID < /title>

< style>

#sidebar1 {text-align: right;

background-color: red; }

< /style> < /head>

< body>

< div id=" sidebar1" > Это - колонка новостей! < /div>

< p> К этому параграфу не применен стиль< /p> < /body>

Примечание: При использовании контекстных селекторов селекторы потомков можно объединять с селекторами классов, например:

table.clr p {color: red}

table p.clr {color: red}

table#red p {color red}

table p#clr {color: red}

Можно организовывать и более " хитрые" комбинации:

table#red td.txt p.clr {color: red}

Группировка

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

Пример.

h1, h2, h3 {text – align: center;

background – color: #ccddaa}

чтобы отличались по размерам:

h1 {font – size: 150%;

color: red}

h2 {font – size: 100%}

h3 {font – size: 80%}

В примере заголовки 1, 2 и 3 уровней будут выровнены по центру, с одинаковым фоновым цветом, однако шрифт заголовка 1 уровня будет красным и шрифты будут разного размера.

Псевдоклассы

Псевдокласс в HTML похож на обычный класс, но разница состоит в том, что такой элемент явно не указан в HTML разметке документа. Псевдоклассы применяют стиль к элементам согласно их состоянию, которое может изменяться с помощью действий пользователя. Селекторы псевдоклассов начинаются с двоеточия (": " ) и обычно добавляются сразу же после селектора типа без дополнительных пробелов между ними:

div: hover {background-color: red; }

Чаще всего селекторы псевдоклассов можно встретить, когда они применяются к гиперссылкам. Как известно, ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (в момент нажатия мыши) и при наведении указателя мыши. В CSS есть возможность изменить представление ссылки в каждом ее состоянии:

Чтобы задать свойства гиперссылок, используется следующая конструкция:

a {text – decoration: none} Определяются общие свойства для всех состояний гиперссылок. В данном случае отменяется подчеркивание ссылки.

a: link {color: red} непросмотренная гиперссылка

a: visited {color: white} просмотренная гиперссылка

a: hover {color: green} когда на нее навели указатель мыши

a: active {color: blue} активная гиперссылка.

Love, НА!

Чтобы псевдоклассы ссылок (анкеров) функционировали правильно, они должны находиться в таблице стилей в определенном порядке. Аббревиатура LVHA (популярный способ произношения – Love, НА! ) позволяет запомнить правильный порядок: : link, : visited, : hover, : active. Это относится и к порядку, и к специфичности. Если поместить: link или: visited в конец, они подменят собой состояния: hover и: active, и тогда эти стили отображаться не будут.

Другие псевдоклассы

Помимо анкерных псевдоклассов, в спецификации 3 вводятся дополнительные селекторы псевдоклассов. Покажем роль некоторых из них.

: focus

Выбираются элементы, получившие фокус, например текстовое поле формы, в котором установлен курсор.

Пример: #enter.form_text: focus {

background: #ffe; /* Цвет фона */

border: 1px solid #29B0D9; /* Параметры рамки */

: first-child и: last-child

Псевдокласс: first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него: last-child, наоборот, ссылается на последний дочерний элемент. В следующем примере текст в первом параграфе тега div будет красным, в последнем параграфе - синим.

div p: first-child {color: #ff0000; }

div p: last-child {color: #0000ff; }

: lang

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

Пример.

q: lang(de) { quotes: " \201E" " \201C"; /* Кавычки для немецкого текста*/ }

q: lang(en) {quotes: " \201C" " \201D"; /* Кавычки для английского текста */ }

q: lang(fr), q: lang(ru) { quotes: " \00AB" " \00BB"; /* Кавычки для русского и французского текста */ }

: first-of-type: last-of-type

: first-of-type и: last-of-type являются псевдоклассами и задают правила стилей, соответствено, для первого и последнего элемента в списке дочерних элементов своего родителя. Например, в примере добавление: first-of-type к селектору td устанавливает стиль для всех первых ячеек таблицы, поскольку родителем для тега < td> выступает тег < tr>, а добавление: last-of-type устанавливает стиль для всех последних в строке ячеек таблицы.

Пример.

tr: first-of-type { background-сolor: #808990; /* Цвет фона первой ячейки*/

color: #00ff00; /* Цвет текста первой ячейки */ }

td: first-of-type { background: #CFE6D3; /* Цвет фона первой ячейки*/

td: last-of-type { background: #CСE699; /* Цвет фона последней ячейки */ }

Все превдоклассы перечислены в таблице 5. При их использовании следует учесть, что те псевдоклассы, которые появились в CSS3 поддерживаются не всеми браузерами.

Таблица 5 – Псевдоклассы.

Название псевдокласса	Пример	Описание действия	Версия CSS
: link	a: link	Выбор всех непосещенных ссылок	CSS1
: visiteеd	а: visitеd	Посещенные ссылки	СSS1
: асtivе	а: аctivе	Активные ссылки	СSS1
: hоvеr	а: hоvеr	Ссылки во время наведения курсора мыши	СSS1
: fосus	input: fосus	Выбор находящегося в фокусе элемента формы input	СSS2
: first-сhild	td: first-сhild	Выбор всех элементов < td>, которые являюется первыми дочерними элементами своего родительского элемента	СSS2
: lаng(язык)	р: lаng(ru)	Выбор всех элементов < р>, у которых значение атрибута lang начинается с ru	СSS2
: first-оf-tуpе	p: first-оf-tуpе	Выбор всех элементов < р>, которые являются первыми среди элементов < p> своего родителя	СSS3
: lаst-оf-tуpе	p: lаst-оf-tуpе	Выбор всех элементов < р>, которые являются последними среди элементов < p> своего родителя	СSS3
: оnlу-оf-tуpе	р: оnlу-оf-tуpе	Выбор каждого элемента < р>, который является единственным элементом < p> своего родительского элемента	СSS3
: only-child	p: only-child	Выбор всех элементов < р>, которые являются единственными дочерними элементами своего родителя	СSS3
: nth-сhild(n)	р: nth-сhild(3)	Выбор всех элементов < р>, являющихся третьими дочерними элементами своего родителя	СSS3
: nth-lаst-сhild(n)	p: nth-lаst-сhild(3)	Выбор всех элементов < р>, являющихся третьими дочерними элементами своего родителя, если считать от последнего дочернего элемента	СSS3
: nth-оf-tуре(n)	p: nth-оf-tуре(3)	Выбор всех элементов < р>, которые являются третьими дочерними элементами < p> своего родителя	СSS3
: nth-last-of-type(n)	p: nth-last-of-type(3)	Выбор всех элементов < p>, которые являются третьими дочерними элементами < p> своего родителя, считая от последнего дочернего элемента	СSS3
: lаst-сhild	р: lаst-сhild	Выбор всех элементов < р>, которые являются последними элементами своего родителя	СSS3
: rооt	: rооt	Выбор в документе корневого элемента	СSS3
: еmрty	р: еmрtу	Выбор всех элементов < p>, которые не содержат текста и дочерних элементов	СSS3
: tаrgеt	: tаrgеt	Выбор на странице активного элемента, имеющего якорную ссылку	СSS3
: еnаblеd	inрut: еnаblеd	Выбор всех включенных элементов < input>	CSS3
: disаblеd	input: disаblеd	Выбор всех выключенных элементов < input>	СSS3
: сhесkеd	inрut: сhесkеd	Выбор всех выбранных элементов < input>	СSS3
: nоt(селектор)	: nоt(еm)	Выбор всех элементов, кроме < em>	СSS3

Селекторы псевдоэлементов

Псевдоэлементы позволяют стилизовать определенные части документа. Селекторы псевдоэлементов работают так, как если бы они вставляли в структуру документа фиктивные элементы для применения стилей. Например псевдоэлемент:: first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия - ":: ":

p:: first-letter { font-size: 30pt; }

Двойное двоеточие было введено в CSS3 для визуального различия псевдо-классов и псевдо-элементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (такие как: first-letter, first-line, before и after), могут быть записаны и с одним двоеточием, такой синтаксис использовался до появления спецификации CSS3 и поддерживается всеми браузерами. Синтаксис с двойным двоеточием поддерживается только в новых версиях браузеров и в обязательном порядке должен применяться только к псевдо-элементу:: selection, который был добавлен в CSS3.

Примечание: каждый селектор может содержать только один псевдо-элемент, который указывается в самом конце селектора:

#header.menu span:: first-letter { color: green; }

Доступны следующие псевдоэлементы:

after – позволяет добавить контент после указанного элемента;

before – позволяет добавить контент до указанного элемента.

Для задания добавляемого содержимого используется CSS свойство content. Следующий код добавляет кавычки крупного размера до и после длинной цитаты:

blockquote: before {content: " & #8220; "; font-size: 24px; color: purple; }

blockquote: after {content: " & #8221; "; font-size: 24px; color: purple; }

first-letter – задает стиль для первого символа в тексте элемента. В следующем примере первая буква абзаца отображается крупным шрифтом и красным цветом.

p.opener: first-letter {font-size: 300%; color: red; }

first-line – задает стиль первой строки текста элемента. Следующий код добавляет дополнительный интервал между символами в первой строке текста каждого абзаца:

р: first-line {letter-spacing: 12pt;

color: blue; }

Особенность псевдоэлемента:: first-line состоит в том, что он будет применять стиль только к первой строке, то есть на различной ширины экранах или при масштабировании окна браузера будет меняться и ширина первой строки, но ее оформление будет оставаться неизменным.

Селекторы атрибутов

Селекторы атрибутов позволяют выбрать определенный элемент без использования идентификатора или класса. Селекторы атрибутов привязываются к элементу, имеющему соответствующий атрибут.

элемент [атрибут=«значение атрибута»] {стиль}

Стиль a[href=" index.html" ] будет применен только к содержимому тега < a>, значение атрибута href которого соответствует index.html.

Можно использовать следующие формы записи значений атрибута:

· элемент[атрибут^=" значение" ] - оператор « ^=» означает «начинается с...». Ищется совпадение по подстроке.

· элемент[атрибут$=" значение" ] - оператор « $=» означает «заканчивается на...». Ищется совпадение по подстроке.

· элемент[атрибут*=" значение" ] - оператор « *=» означает «содержит подстроку...». Ищется совпадение по подстроке.

Пример.

a[href^=" http: " ] {background-image: url(" image1.jpg" ); }

a[href^=" mailto: " ] {background-image: url(" image2.jpg " ); }

a[href$=".pdf" ] {background-image: url(" image3.jpg " );

Селекторы атрибутов не обязательно должны содержать значение атрибута:

img[title] {border: 1px double black}

Такой стиль будет применен ко всем изображениям, содержащим атрибут title.

Вычисление специфичности (приоритета) селекторов

Как видим, существует множество способов применить стиль оформления к нужному элементу. Но что будет, если один и тот же элемент описывается сразу несколькими селекторами? Например, ячейка таблицы является частью строки, может входить в группу строк (tbody, thead, tfoot) или столбцов (col, colgroup). Какой стиль победит? Эта задача решается с помощью двух принципов CSS: специфичности селекторов и каскада.

Специфичность селекторов (selector's specificity) определяет их приоритет в таблице стилей. Чем специфичнее селектор, тем выше его приоритет. Для вычисления специфичности селектора используются три группы чисел (a, b, c), расчёт производится следующим образом:

· Группа a: считается число идентификаторов в селекторе.

· Группа b: считается число селекторов классов, атрибутов и псевдоклассов в селекторе.

· Группа c: считается число селекторов типа (тегов) и псевдоэлементов в селекторе

· Универсальный селектор (*) и комбинаторы не участвуют в вычислении веса селектора

В примере селекторы упорядочены по возрастанию их специфичности:

* a=0 b=0 c=0 специфичность = 0

strong a=0 b=0 c=1 специфичность =1

ol li a=0 b=0 c=2 специфичность = 2

ol ul+li a=0 b=0 c=3 специфичность = 3

h2 + *[type=”text”] a=0 b=1 c=1 специфичность =11

ol ul li.red a=0 b=1 c=3 специфичность =13

li.red.level a=0 b=2 c=1 специфичность =21

#z333x a=1 b=0 c=0 специфичность = 100

#sidebar^not(p) a=1 b=0 c=1 специфичность = 101

Самый высокий приоритет имеет число из группы a, средний приоритет - число группы b, самый низкий - число из группы c. Числа из разных групп не суммируются.

Встроенный стиль имеет более высокий приоритет, чем стиль определённый во внутренней или внешней таблице стилей. Но, если для конкретного свойства во внутренней или внешней таблице стилей указать специальное объявление! important, то оно будет иметь больший приоритет, чем значение аналогичного свойства, у внутреннего стиля. Объявление! important указывается после значения свойства перед точкой с запятой:

#sidebar {color: red! important; }

Каскад

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

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

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

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

Расположим различные способы объявления стилей в порядке от наименьшего веса к наибольшему.

- Связанные (при помощи элемента link) внешние таблицы стилей

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

< hеаd>

< link rеl=" stуlеshееt" hrеf=" style_l.сss" type=" tехt/сss" />

< link rеl=" stуlеshееt" hrеf=" style_2.сss" type=" tехt/сss" />

< /hеаd>

Если стилевое правило, указанное в файле style_2.css, конфликтует со стилевым правилом, указанным в файле style_l.css, то правило из style_2.css будет иметь более высокий приоритет, поскольку данная таблица стилей находится ниже в исходном документе.

- Импортированные внешние таблицы стилей (с помощью @import)

Импортированная информация о стилях подменяет связанные элементом link стили.

- Встроенные таблицы стилей (при помощи элемента style)

Стили, применяемые в конкретном документе, подменяют те, которые берутся извне.

- Внутристрочные стили (использующие атрибут style в теге элемента)

Внутристрочные стили подменяют собой все прочие объявления стилей, относящиеся к данному элементу, за одним исключением.

Объявления стилей, помеченные индикатором! important

Любой стиль, помеченный индикатором! important, подменяет собой все прочие конфликтующие с ним правила стилей.

Единицы измерения, используемые в каскадных таблицах стилей

При указании значений правил, учитывайте следующее:

• Не ставится пробел между числом и единицей измерения.

• Значения могут содержать дробную часть, например 13.5cm.

• В некоторых свойствах допустимы отрицательные значения, например, margin-left: -500px. Ниже перечислены возможные единицы измерений.

in – дюйм = 2, 54 сантиметра;

сm – сантиметр;

mm – миллиметр;

рх – пиксели;

рt – пункты = 1/72 дюйма приблизительно 0, 375 миллиметра;

рс – пика = 12 пунктов;

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

еm – относительная единица измерения. Она равна ширине заглавной буквы М текущего шрифта. В CSS эта единица измерения используется для указания размеров и по вертикали, и по горизонтали, равна она размеру шрифта в пунктах, например, если размер шрифта 24pt, то один еm равен 24 пунктам.

ex – тоже является относительной единицей измерения, равной высоте буквы х текущего шрифта в нижнем регистре. Один ex равен приблизительно половине em.

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

rem – размер шрифта корневого элемента html, Эта единица измерения может использоваться вместо em для предотвращения влияния размеров шрифта родительских элементов на текущий размер шрифта.

ch – равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, так как один ch примерно соответствует одному символу.

vw (ширина) и vh (высота) позволяют масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы. Например:

width: 40vw; /* 50% от ширины области просмотра */

height: 50vh; /* 25% от высоты области просмотра */

vmin и vmax - задают минимальное или максимальное значение размера области просмотра.

width: 1vmin; /* 1vh или 1vw, в зависимости от того что меньше */

height: 1vmax; /* 1vh или 1vw, в зависимости от того что больше

Способы задания цвета

Цвет можно задать:

1) Названием цвета: green, black, blue и т.д.;

2) Шестнадцатиричным кодом, например #f2c0d6;

3) Шестнадцатиричным кодом #a0f. Трехзначное значение цвета используется, если каждая цифра повторяется, то есть, в нашем случае # a0f аналогично # aa00ff.

4) Использованием функции rgb (R, G, B), например color: rgb (60, 255, 30); color: rgb(60; 255; 210).

5) С помощью функции RGBA. Значение A (альфа) описывает прозрачность цвета. Её значение может варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный), например: color: rgba(204, 51, 255, 0.5);

6) С помощью функции HSL. Цветовая модель HSL (hue, saturation, lightness) описывает цвет тремя числами: оттенок (hue), измеряемый в градусах от 0 до 360, определяющих позицию цвета на цветовом круге; насыщенности (saturation), заданной в процентах от 0% до 100%, указывающей, насколько ярким будет цвет; светлота (lightness), заданной в процентах от 0% до 100%, указывающей, насколько светлым или темным будет цвет. Напимер: color: hsl(285, 100%, 60%).

7) С помощью функции HSLA. Как и RGBA, четвертое число определяет прозрачность цвета в диапазоне от 0 до 1. Например: color: hsla(285, 100%, 60%, 0.5);

Замечание. Браузеры, не поддерживающие цветовые значения rgba, hsl и hsla игнорируют объявление цвета. В этом случае для фона элемента используется значение по умолчанию (он становится полностью прозрачным), а для текста используется либо значение по умолчанию (черный), либо цвет, унаследованный от родительского элемента.

Поэтому следует добавлять дополнительное правило, определяющее цвет в формате RGB, шестнадцатеричном значении или с помощью имени. Такое правило должно располагаться перед правилом, указывающим цвет в формате RGBA, HSL или HSLA. Это обеспечит страховку для цвета, поскольку, как мы уже знаем, в CSS при наличии двух правил, устанавливающих значение для одного и того же свойства, приоритет всегда получает правило, установленное ниже в коде.

Тема 3. Свойства СSS

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

Цвета и фоны

Сегодня CSS позволяет виртуозно управлять цветами и фоном. В данном разделе рассмотрим свойства:

color bасkgrоund-imаgе bасkgrоund-pоsitiоn backgrоund-color bасkground-repeat bасkground

bасkgrоund-attachment bасkground-clip background-origin

background-size

Color

Это свойство используется для задания основного цвета, то есть цвета текста и границ, если для них не заданы собственные стили. CSS 1 и CSS 2 различают 17 разрешенных названий цвета: white, black, silver, aqua, blue, red, yellow, fuchsia, lime, gray, teal, navy, orange, green, olive, purple, maroon. В CSS3 были добавлены еще 130 дополнительных цветов. Здесь мы не будем приводить список этих цветов, их можно найти в онлайн справочниках по CSS3.

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

Background-color

Данное свойство задает цвет фона элемента. Принимаемые значения: цвет | transparent | inherit. По умолчанию используется значение: transparent. Например:

#main.content {background-color: #00ccdd; }

Background-image

Это свойство задает фоновое изображение. Принимаемые значения: путь к изображению | none | inherit. Значение по умолчанию: none. Пример:

body {background-image: url(star.gif); }

p.light {background-image: url(dots.png); }

Background-repeat

Запретить или разрешить повторение фонового рисунка можно, используя свойство background-repeat.

Принимаемые значения:

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

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

Рисунок 27 – Результат использования значения background-repeat: space

При использовании значения round изображение повторяется таким образом, чтобы в области поместилось целое число рисунков; если это не удаётся, то фоновые рисунки масштабируются, как это видно на рисунке 28.

Рисунок 28 – Результат использования значения background-repeat: round: изображения растянулись, заняв свободное место

Пример:

div.one {background-image: url(star.png);

background-repeat: no-repeat}

div.horiz {bасkgrоund-imаgе: url(star.png);

bасkgrоund-rеpеаt: rеpеаt-х; }

div.vеrt {bасkgrоund-imаgе: url(star.png);

bасkgrоund-rеpеаt: rеpеаt-у; }

Свойство background-repeat может содержать два значения: для тиражирования по горизонтали и по вертикали, например:

background-repeat: round space; /* ширина меняется, высота нет */

background-repeat: space round; /*ширина исходная, высота меняется */

background-repeat: space no-repeat; /*повторение только по горизонтали*/

Background-position

Свойство background-position указывает позицию исходного изображения на фоне данного элемента. Принимаемые значения: следует указать два значения через пробел. Первое означает положение по горизонтали, второе – по вертикали. В качестве значений могут выступать проценты, длина (в любых допустимых в CSS единицах), ключевые слова left (слева), center (по центру), right (справа), bottom (снизу), top (сверху) и inherit (унаследованное от родителя).

Начальное значение: 0% 0%; или, что то же самое, left top.

Расстояния откладываются относительно левого верхнего угла области заполнения. Например:

background-position: top center;

bасkgrоund-rеpеаt: nо-rеpеаt; }

baсkgrоund-pоsitiоn: cеntеr bottom;

background-position: right;

background-position: 0% 70%;

background-position: 100px 20%;

Если указано только одно значение свойства background-position, то недостающим считается значение center (50%). Как видим, задавать позицию изображения можно и в единицах длины, и процентах. Первым указывается значение по горизонтали. Допустимо указывать отрицательные значения расстояний, смещающих изображение за пределы видимой области фона данного элемента.

⇐ Предыдущая 6 7 8 9 101112 13 14 15 Следующая ⇒