РЕЗУЛЬТАТ:

Серый цвет текста во всех абзацах Web-страницы

Серый цвет текста во всех абзацах Web-страницы

Внешние (связанные) стили

Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.

Для связи с файлом, в котором описаны стили, используется тег , расположенный в контейнере ... .

В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.

Пример

Подключение стилей

Правило подключения глобальных и внешних стилей состоит из селектора и объявлений стиля .

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

P { text-indent: 30px; font-size: 14px; color: #666; }

Объявление стиля – это пара свойство CSS: значение CSS .

Например: color: red

При внутреннем подключении стиля правило CSS, которое является значением атрибута style , состоит из объявлений стиля, разделенных точкой с запятой. Например:

Селекторы CSS

Универсальный селектор

Универсальный селектор соответствует любому элементу html-документа.

Для обозначения универсального селектора применяется символ "звёздочка" (*).

Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например:

* { margin: 0; padding: 0; }

В некоторых случаях символ "звёздочка" (*) может быть опущен:
*.myclass и .myclass эквиваленты,
*#myid и #myid эквивалентны

Селекторы тегов

В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например:

H1 {color: red; text-align: center;}

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

H1, h2, h3, h4 {color: red; text-align: center;}

Селекторы идентификаторов

HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:

Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.

В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:

Div#a1 {color: green;}

аналогично

#a1 {color: green;}

Желательно использовать id не для стилевого оформления элемента, а для обращения к нему через скрипты или перехода по ссылке.

Селекторы классов

Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:

Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.

В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:

I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}

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

Если некоторые из этих классов содержат одинаковые свойства стиля, но с разными значениями, то будут применены значения стиля класса, который в CSS-коде расположен ниже.

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

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

Между именем тега и квадратной скобкой ([) не должно быть пробела!

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

Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами.

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

Один из самых часто используемых комбираторов – контекстный селектор.

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

Пример

1. Пушкин А.С.
   • «Выстрел»
   • «Метель»
   • «Дубровский»
2. Гоголь Н.В.
   • «Ревизор»
   • «Тарас Бульба»
   • «Мертвые души»
3. Толстой Л.Н.
   • «Война и мир»
   • «Анна Каренина»
   • «Воскресение»

РЕЗУЛЬТАТ:

1. Пушкин А.С.
   • «Выстрел»
   • «Метель»
   • «Дубровский»
2. Гоголь Н.В.
   • «Ревизор»
   • «Тарас Бульба»
   • «Мертвые души»
3. Толстой Л.Н.
   • «Война и мир»
   • «Анна Каренина»
   • «Воскресение»

Дочерние селекторы

Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).

Пример

1. Пушкин А.С.
   • «Выстрел»
   • «Метель»
   • «Дубровский»
2. Гоголь Н.В.
   • «Ревизор»
   • «Тарас Бульба»
   • «Мертвые души»
3. Толстой Л.Н.
   • «Война и мир»
   • «Анна Каренина»
   • «Воскресение»

РЕЗУЛЬТАТ:

1. Пушкин А.С.
   • «Выстрел»
   • «Метель»
   • «Дубровский»
2. Гоголь Н.В.
   • «Ревизор»
   • «Тарас Бульба»
   • «Мертвые души»
3. Толстой Л.Н.
   • «Война и мир»
   • «Анна Каренина»
   • «Воскресение»

Соседние селекторы

Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.

Пример

РЕФЛЕКСОТЕРАПИЯ

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПИЯ

Смежные селекторы

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

Пример

РЕФЛЕКСОТЕРАПИЯ

"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПИЯ

"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

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

• Селектор по элементу;
• Селектор по классу;
• Селектор по id;
• Контекcтный селектор;

Селектор по элементу

До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.

P {
font-size: 12px
}

А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу .

Селектор по классу

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

.green {
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}

Как применить данный стиль?

Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:

Текст параграфа...

Как видите, используется атрибут class со значением названия стиля.

ПРИМЕР:

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

p {
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green {color:green;}
.big_red{
font-size:28px;
color:red;
}

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

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

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

P.green {color:green;}

Теперь класс green не будет действовать ни на что другое, кроме элемента P.

Селектор по id

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

html- часть:

<Н1 id="firstheader"> Первый заголовок на странице

css - часть:

H1#firstheader { color: red; font-weight: bold; text-align: center }

Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #.

В принципе, то же самое можно сделать и с использованием селектора по классу J

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

Это очень полезная вещь. Допустим, у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом(strong) слова. Необходимо сделать так, чтобы слова в параграфе, которые выделены жирным, стали зеленого цвета. Так вот:

p strong {color:green }

Т.е. в начале P затем пробел, затем STRONG, а уже потом стиль. Читается эта строчка примерно так: Если внутри элемента P имеется элемент STRONG то элементу strong присвоить стиль зеленого цвета.

Вложенность может быть любого уровня. Вот еще пример: «Если вдруг внутри ячейки таблицы (td ) , встретится параграф (P) , внутри которого будет слово выделенное жирным (STRONG ), то пусть это слово станет красным! «

td p strong {color:red;}

CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.

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

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

Объявление стиля состоит из двух частей: селектора и объявления . В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

Хотя приведенный пример пытается влиять только на пару свойств, необходимых для рендеринга HTML-документа, он сам по себе квалифицируется как таблица стилей. В сочетании с другими таблицами стилей (одна фундаментальная особенность CSS заключается в том, что таблицы стилей объединяются), правило будет определять окончательное представление документа.

Виды каскадных таблиц стилей и их специфика

1. Виды таблиц стилей

1.1. Внешняя таблица стилей

Внешняя таблица стилей представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега , расположенного внутри раздела . Такие стили работают для всех страниц сайта.

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

1.2. Внутренние стили

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

...

1.3. Встроенные стили

Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

Обратите внимание на этот текст.

Такие стили действуют только на тот элемент, для которого они заданы.

1.4. Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

Правило @import также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Виды селекторов

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

2.1. Универсальный селектор

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

2.3. Селектор класса

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

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

Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами.

Инструкция пользования персональным компьютером

2.4. Селектор идентификатора

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

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

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

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

2.6. Дочерний селектор

Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

2.7. Сестринский селектор

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

h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

, не затрагивая остальные абзацы;

h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

2.8. Селектор атрибута

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

2.9. Селектор псевдокласса

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

:hover — любой элемент, по которому проводят курсором мыши;

:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

:active — элемент, который был активизирован пользователем;

:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

:invalid — поля формы, содержимое которых не соответствует указанному типу данных;

:enabled — все активные поля форм;

:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

:in-range — поля формы, значения которых находятся в заданном диапазоне;

:out-of-range — поля формы, значения которых не входят в установленный диапазон;

:lang() — элементы с текстом на указанном языке;

:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

:target — элемент с символом # , на который ссылаются в документе;

:checked — выделенные (выбранные пользователем) элементы формы.

2.10. Селектор структурных псевдоклассов

Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

:nth-child(odd) — нечётные дочерние элементы;

:nth-child(even) — чётные дочерние элементы;

:nth-child(3n) — каждый третий элемент среди дочерних;

:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

:nth-child(n+2) — выбирает все элементы, начиная со второго;

:nth-child(3) — выбирает третий дочерний элемент;

:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

:first-child — позволяет оформить только самый первый дочерний элемент тега;

:last-child — позволяет форматировать последний дочерний элемент тега;

:only-child — выбирает элемент, являющийся единственным дочерним элементом;

:empty — выбирает элементы, у которых нет дочерних элементов;

:root — выбирает элемент, являющийся корневым в документе — элемент html .

2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

:first-of-type — выбирает первый дочерний элемент данного типа;

:last-of-type — выбирает последний элемент данного типа;

:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

2.12. Селектор псевдоэлемента

Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:

:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

:before — вставляет генерируемое содержимое перед элементом;

:after — добавляет генерируемое содержимое после элемента.

3. Комбинация селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

4. Группировка селекторов

Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:

H1, h2, p, span { color: tomato; background: white; }

5. Наследование и каскад

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

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

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

Принудительное наследование

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

Как задаются и работают CSS-стили

1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

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

4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

5.2. Каскад

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

Правило!important

Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Специфичность

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

для id добавляется 0, 1, 0, 0 ;
для class добавляется 0, 0, 1, 0 ;
для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный селектор не имеет специфичности.

H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.

Порядок подключённых таблиц

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

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

Селектор по элементу

До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.

P {
font-size: 12px
}

А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу .

Селектор по классу

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

.green {
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}

Как применить данный стиль?

Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:

class ="green "> ... текст параграфа...