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

CSS
Cascading Style Sheets
суббота, 7 мая 2016 г.
Подключение CSS
Внутренние листы стилей:
<style type=“text/css”>
<!-- -->
</style>
Внешние листы стилей:
<link rel=“stylesheet” href=“style.css” type=“text/css” media=“handheld”/>
Комбинированный вариант:
<style type=“text/css”>
<!-@media print
@import url (style.css)
-->
</style>
Синтаксис правил
селектор
{
свойство_1: значение_1;
свойство_2: значение_2;
…
свойство_N: значение_N;
}
Разновидности селекторов
селекторы типов элементов
селекторы атрибутов
селекторы уникальных элементов
селекторы классов
селекторы псевдоклассов
селекторы псевдоэлементов
сложные селекторы
Примеры селекторов
*{}
h1 { }
XHTML:
CSS:
XHTML:
CSS:
<div id=“header”>…</div>
div#header { }
<p class=“comment”>…</p>
p.comment { }
Псевдоклассы и псевдоэлементы
Псевдоклассы:
Псевдоэлементы:
link
first-line
visited
first-letter
active
before
hover
after
focus
first-child
E:псевдоэлемент
E:псевдокласс
Селекторы атрибутов
E[attr]
E[attr=value]
E[attr~=value]
E[attr|=value]
Сложные селекторы
E, F
EF
E>F
E+F
Блочная модель
Top
Margin
Border
Padding
Left
Content
Bottom
Right
Виды позиционирования
position:
static
relative
absolute
fixed
z-index