CSS (cascading style sheets) - формальный язык описания внешнего вида документа, написанного и использованием языка разметки.
Набор правил CSS представляет собой последовательность вида:
header {
color: white;
background-color: #333;
font-size: 1.5em;
}
где header - селектор, текст внутри фигурных скобок - блок объявлений, состоящий из отдельных объявлений. Каждое объявление представляет собой пару вида атрибут: значение;.
CSS можно включить в страницу четырьмя способами:
1) Используя атрибут style любого тега HTML:
<h1 style="color: blue; background-color: #333;">RecipeFinder</h1>
Это определение действует только для конкретного тега, для которого оно описано. Способ не рекомендуется к использованию.
2) Используя тег style HTML (внутри тега <head></head>), внутри которого можно расположить набор правил:
<style>
header {
color: white;
background-color: #333;
font-size: 1.5em;
}
</style>
Правила действую в пределах документа, для которого они описаны.
3) Подключая внешний файл при помощи директивы @import
<style>
@import url(css/style.css);
</style>
Это наименее рекомендуемый способ, связанный с рядом проблем (включая проблемы с производительностью)
4) Подключая внешний файл при помощи тега <link>
<link rel="stylesheet" href="css/style.css">
Это наиболее рекомендуемый способ, отделяющий разметку от стилей.
Простые селекторы (типа Х):
1. Универсальный селектор ( * )
* {} - применяет правила ко всем элементам. Может использоваться для обнуления правил.
2. Селектор типа элемента ( tag )
ul {} - применяет правила ко всем элементам типа ul.
3. Селектор класса ( .class )
.box {} - применяется ко всем элементам с атрибутом class = "box"
4. Селектор id ( #id )
#navbar {} - применяется к элементу с атрибутом id="navbar"
Предполагается, что класс - групповая характеристика, которую может иметь ряд объектов страницы (тегов), тогда как id - уникальная характеристика, которую должен иметь только единственный объект.
5. Селектор атрибутов ( [attr] )
[title] {} - применяется ко всем элементам, имеющим атрибут title.
6. Селекторы псевдоклассов ( :class )
7. Селекторы псевдоэлментов ( ::element )
Теоретически могут использоваться самостоятельно, но практически всегда используются в комбинации с селектором типа. Псевдоэлементы по стандарту используют двойное двоеточие, однако т.к. старые версии IE его не поддерживают, лучше использовать одинарное двоеточие.
8. Селектор группировки ( s1, s2, s3 )
ul, .box, #navbar {} - применяется ко всем элементам с типом ul или с классом .box или с id === #navbar. (Или в определении не исключающее).
9. Селектор мультикласса (.class1.class2.class3)
Каждый тег может иметь несколько классов, имена которых разделены пробелами. Селектор мультикласса применяется только к тем элементам, которые содержат имена всех классов, перечисленных в селекторе:
.class1.class2 { font-size: 2em }
...
<ul class="class1">Text1</ul>
<ul class="class1 class2">Text2</ul> <!-- селектор применится здесь-->
<ul class="class2">Text3</ul>
10. Селектор мультиатрибутов ([attr1][attr2="value"][attr3|="value2"])
Каждый тег может иметь несколько атрибутов, для которых применяются различные формы селектора атрибутов.
Комбинированные селекторы (типа XY). Допускается комбинировать следующие селекторы:
11. Типа и (мульти)класса элемента (2 и 3, 2 и9):
ul.box {} - все элементы типа ul и класса .box
li.calss1.class2 {} - применяется ко всем элементам типа li и классов class1 и class2.
При этом комбинация *.class эквивалентна обычному селектору класса .class .
12. Типа и (мульти)атрибутов (2 и 5, 2 и 10):
p[title] - все элементы типа p, имеющие атрибут типа title.
13. Типа и псевдоклассов (2 и 6): a:visited {} - применяется ко всем элементам типа a и состоянием visited.
14. Типа и псевдоэлементов (2 и 7): p::before {} - вставка заданного контента перед всеми элементами типа p.
Селекторы иерархии. Теги в дереве могут находиться в следующих отношениях:
а) предок-потомок - тег потомок находится внутри тега предка на произвольном уровне вложенности;
б) родитель-ребёнок - тег ребёнок является непосредственным потомком тега предка;
в) сиблинги (братья, сёсты) - теги, расположенные на одном уровне иерархии.
<body>
<p>Hello, <b>cruel <i>world</i></b></p>
<br />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
p, b, i, br, ul, все li являются потомками body, однако только p, br, ul являются его детьми.
p, br, ul являются сиблингами, также как и все li
15. Селектор потомков (X Y (разделитель пробел))
Правило применяется ко всем тегам с селектором Y, предком которых является селектор X. Возможно несколько уровне вложенности (X Y Z T), в качестве селекторов могут применяться в т.ч. и комбинированные селекторы, а также универсальный селектор:
ul.class1 * {} - применяется ко всем потомкам типа ul со классом class1.
body * p {} - применяется ко всем потомкам типа p, содержащихся в теге body но обязательно отделённых от body каким-либо другим тегом:
<body>
<article>
<p>One</p> <!-- стиль применяется -->
<p>Two</p> <!-- и здесь -->
</article>
<p>Three</p> <!-- а здесь нет - p - дочерний элемент относительно body -->
</body>
16. Селектор прямых потомков (X > Y)
Выбирает только прямого потомка (ребенка) Y селектора X. Также возможно наличие нескольких уровней вложенности и использование универсального селектора.
17. Строгий селектор сиблингов (X + Y)
Выбирает сиблингов определяемых селектором Y, строго следующих за элементами, опредляемыми селектором X.
div + p {} - правило применяется к тегу p, следующему за тегом div (точнее, </div> - речь идёт о сиблингах, которые находятся на одном уровне иерархии).
18. Нестрогий селектор сиблингов (X ~ Y)
Выбирает всех сиблингов, определяемых селектором Y и следующих за элементами, определяемыми селектором X.
ul ~ li {} - правило применяется ко всем тегам li (расположенным на одном уровне иерархии), следующим за тегом ul .
[title] {} - применяется ко всем элементам, имеющим атрибут title.
Селекторы атрибутов имеют как ряд особенностей, так и ряд дополнительных возможностей. Помимо проверки на наличие атрибута можно проверять его на равенство некоторой величине:
Селектор атрибутов со строгим равенством. Выбираются все элементы, имеющие атрибуты с некоторым строго определенным значением:
[attr=value]
id и классы являются атрибутами, поэтому фактически, вместо селекторов id и класса можно использовать следующие конструкции:
[id="#idname"] [class="className"]
хотя так писать не принято.
Селекторы атрибутов с регулярными выражениями. Выбираются элементы, имеющие атрибуты со значениями, соответствующими некоторому регулярному выражению:
[attr*=value] - значение атрибута attr содержит подстроку value
[attr^=value] - значение атрибута attr начинается с подстроки value
[attr$=value] - значение атрибута attr заканчивается подстрокой value
[attr~=value] - атрибут находится в списке, разделённом пробелами
[attr|=value] - атрибут находится в списке, разделённом дефисами
Последние два типа селекторов, в принципе, могут быть заменены селектором *=, однако они являются более специфичными и исключают ложные срабатывания.
[attr|=value] - атрибут находится в списке, разделённом дефисами
Последние два типа селекторов, в принципе, могут быть заменены селектором *=, однако они являются более специфичными и исключают ложные срабатывания.
7. Селекторы псевдоэлментов ( ::element )
Теоретически могут использоваться самостоятельно, но практически всегда используются в комбинации с селектором типа. Псевдоэлементы по стандарту используют двойное двоеточие, однако т.к. старые версии IE его не поддерживают, лучше использовать одинарное двоеточие.
8. Селектор группировки ( s1, s2, s3 )
ul, .box, #navbar {} - применяется ко всем элементам с типом ul или с классом .box или с id === #navbar. (Или в определении не исключающее).
9. Селектор мультикласса (.class1.class2.class3)
Каждый тег может иметь несколько классов, имена которых разделены пробелами. Селектор мультикласса применяется только к тем элементам, которые содержат имена всех классов, перечисленных в селекторе:
.class1.class2 { font-size: 2em }
...
<ul class="class1">Text1</ul>
<ul class="class1 class2">Text2</ul> <!-- селектор применится здесь-->
<ul class="class2">Text3</ul>
10. Селектор мультиатрибутов ([attr1][attr2="value"][attr3|="value2"])
Каждый тег может иметь несколько атрибутов, для которых применяются различные формы селектора атрибутов.
Комбинированные селекторы (типа XY). Допускается комбинировать следующие селекторы:
11. Типа и (мульти)класса элемента (2 и 3, 2 и9):
ul.box {} - все элементы типа ul и класса .box
li.calss1.class2 {} - применяется ко всем элементам типа li и классов class1 и class2.
При этом комбинация *.class эквивалентна обычному селектору класса .class .
12. Типа и (мульти)атрибутов (2 и 5, 2 и 10):
p[title] - все элементы типа p, имеющие атрибут типа title.
13. Типа и псевдоклассов (2 и 6): a:visited {} - применяется ко всем элементам типа a и состоянием visited.
14. Типа и псевдоэлементов (2 и 7): p::before {} - вставка заданного контента перед всеми элементами типа p.
Селекторы иерархии. Теги в дереве могут находиться в следующих отношениях:
а) предок-потомок - тег потомок находится внутри тега предка на произвольном уровне вложенности;
б) родитель-ребёнок - тег ребёнок является непосредственным потомком тега предка;
в) сиблинги (братья, сёсты) - теги, расположенные на одном уровне иерархии.
<body>
<p>Hello, <b>cruel <i>world</i></b></p>
<br />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
p, b, i, br, ul, все li являются потомками body, однако только p, br, ul являются его детьми.
p, br, ul являются сиблингами, также как и все li
15. Селектор потомков (X Y (разделитель пробел))
Правило применяется ко всем тегам с селектором Y, предком которых является селектор X. Возможно несколько уровне вложенности (X Y Z T), в качестве селекторов могут применяться в т.ч. и комбинированные селекторы, а также универсальный селектор:
ul.class1 * {} - применяется ко всем потомкам типа ul со классом class1.
body * p {} - применяется ко всем потомкам типа p, содержащихся в теге body но обязательно отделённых от body каким-либо другим тегом:
<body>
<article>
<p>One</p> <!-- стиль применяется -->
<p>Two</p> <!-- и здесь -->
</article>
<p>Three</p> <!-- а здесь нет - p - дочерний элемент относительно body -->
</body>
16. Селектор прямых потомков (X > Y)
Выбирает только прямого потомка (ребенка) Y селектора X. Также возможно наличие нескольких уровней вложенности и использование универсального селектора.
17. Строгий селектор сиблингов (X + Y)
Выбирает сиблингов определяемых селектором Y, строго следующих за элементами, опредляемыми селектором X.
div + p {} - правило применяется к тегу p, следующему за тегом div (точнее, </div> - речь идёт о сиблингах, которые находятся на одном уровне иерархии).
18. Нестрогий селектор сиблингов (X ~ Y)
Выбирает всех сиблингов, определяемых селектором Y и следующих за элементами, определяемыми селектором X.
ul ~ li {} - правило применяется ко всем тегам li (расположенным на одном уровне иерархии), следующим за тегом ul .
Комментариев нет :
Отправить комментарий