Css part2

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

Дерево
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<div class = "mainWrap">
<h1>Основной заголовок</h1>
<p>какой-то текст</p>
<ul>
<li>пункт 1</li>
</ul>
</div>
<div class = "sideBar">
<h2>Второй заголовок</h2>
<p>еще текст</p>
</div>
</body>
</html>

Предки и потомки
Элементы, которые содержат другие, являются предками (ancestor) по
отношению к во всем вложенным в него. Вложенные в свою очередь являются
его потомками (descendant).

Каждый предок может иметь неограниченное число потомков.

Селектор потомков состоит из двух или более селекторов, разделенных
пробелом. Такие селекторы называются контекстными.
cелектор-предок селектор-потомок … селектор-потомок потомка{правило CSS}

Например:
В HTML:
<h1>Это заголовок <em>для
предков</em> потомков</h1>
В CSS:
h1 em { color: Aqua; }

Результат в браузере:

Отметим, что при такой записи стиль будет применяться к последнему тегу в списке
и ко всем его потомкам:
В HTML:
<body>

Результат в браузере:

<div>
<p>
<span>Should <i>be</i>
green</span>
</p>
</div>
</body>
В CSS:
body div p span { color: Green;}

В нашем примере текст, выделенный курсивом, так же зеленого цвета.

Бывает, что при разработке таблицы стилей неизвестно, какой элемент будет
размещен внутри какого. В таком случае используется символ *. С обеих сторон
обязательно должны ставится пробелы. * заменяет любой тег, но только один. В
нашем примере * заменила тег div:
В HTML:
<body>
<h1>Это заголовок <em>для предков</em> потомков</h1>
<span>Should be not green</span>
<div>
<span>Should be green</span>
<p>
<span>Should <i>be</i> green</span>
</p>
</div>

В CSS:
body * span
{
color:Green;
}

</body>

Примечание:
Если нам нужно найти все
теги между body и span,
то * не ставится, а
остается только пробел.

Родители и дочери
Родитель (parent) — это непосредственный предок (предок первого уровня)
элемента. И наоборот, непосредственный потомок (потомок первого уровня)
называется дочерним элементом (child).

В этом случае синтаксис написания CSS селектора будет следующим:
селектор-родитель > дочерний селектор{правило CSS}

Например:
div > p {color: Red;}
<p>это абзац какого-то текста и должен быть черным стандартно</p>
<div>
<h1>Основной заголовок</h1>
<p>какой-то текст. покрашен в красный</p>
</div>
<div>
<h2>Второй заголовок</h2>
<p>еще текст</p>
</div>

<div>
<p>Этот абзац включает
<strong>
<em>теги форматирования em и strong</em>
</strong>, которые выделяют текст
<strong>жирным</strong>
и
<em>курсивом</em>.
</p>
</div>
div em {color: Red;}
p > em {color: Green;}

Дело в том, в CSS действует закон приоритета для CSS свойств, находящихся ниже.
То есть в данном случае правило дочернего селектора находится в документе
ниже, чем CSS стили, прописанные для контекстного селектора.

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

Для работы с сестринскими элементами используется символ +.
Например, у нас есть сестринские элементы списка <li>. Мы можем
увеличить расстояние по вертикали между ними, используя следующую
конструкцию:
В HTML:
<ul>
</ul>

В CSS:
li + li {margin-top: 5em;}

Следует отметить, что если сестринские элементы однотипные, то независимо
от их количества, достаточно сложить оба два. Но если вставить между
такими однотипными элементами «чужого», то такая конструкция уже
работать не будет.
В HTML:
<ul>
<p>gbhgvufrghekag</p>
</ul>
В CSS:
li + li {margin-top: 5em;}

Однако, если сделать в сумме больше двух не однотипных слагаемых, то стиль
будет применен к последней паре, а все которые перед ним будут
игнорироваться.

Универсальный селектор
Иногда требуется установить одновременно один стиль для всех элементов вебстраницы, например, задать шрифт или начертание текста.
В этом случае поможет универсальный селектор, который соответствует любому
элементу веб-страницы.
Для обозначения универсального селектора применяется символ звёздочки (*) и в
общем случае синтаксис будет следующий:
*{список стилей}

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

Селекторы атрибутов
CSS позволяет создавать правила, сопоставляемые элементам с атрибутами,
которые определены в исходном коде HTML-дока. Селекторы атрибутов могут
сопостовляться в следующих случаях:
1. [att] — если для элемента установлен атрибут att независимо от значения
этого атрибута
<p align=center>Header</p>
p[align]{color: Blue;}

2. [att=val] — если значение атрибута att данного элемента в точности совпадает
с val
<h1 rel="external">Attribute Equals</h1>
h1[rel=external] { color: red; }

3. [att~=val] — если значением атрибута att является список слов, разделенных
пробелами, одно из которых в точности равно val
<h1 rel="friend external sandwich">Attribute Space Separated</h1>
h1[rel~=external] { color: red; }

4. [att|=val] — если значением атрибута att является начинающийся со слова val
список разделенных дефисом слов
<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>
h1[rel|=external] { color: red; }

5. [att*=val] — если атрибут att содержит значение val в любом месте
<h1 rel="xxxexternalxxx">Attribute Contains</h1>
h1[rel*=external] { color: red; }

6. [att^=val] — если атрибут att начинается с определенного значения val
<h1 rel="external-link yep">Attribute Begins</h1>
h1[rel^=external] { color: red; }

7. [att$=val] — если атрибут att оканчивается определенным значением val
<h1 rel="friend external">Attribute Ends</h1>
h1[rel$=external] { color: red; }

8. [att1=val1][att2^=val2] — совпадение нескольких атрибутов
<h1 rel="handsome" title="Important note">Multiple Attributes</h1>
h1[rel=handsome][title^=Important] { color: red; }

Селекторы классов
Селекторы класса позволяют задавать различные стилевые описания для
одного и того же HTML-элемента. Название класса указывается после названия
элемента и отделяется точкой.
div.red { color: #FF0000; }
div.blue { color: #0000FF; }
div.fantasy { color: brown; font-size: 24px; }

При определении с помощью универсального селектора класс не
связывается с конкретным элементом. Такой класс можно применять с
любыми элементами, для которых объявленные стилевые свойства имеют
смысл. Формально, в таком описании вместо имени элемента следует
ставить символ * , например,
*.spring { color: mediumspringgreen; }

однако на практике допустима следующая запись без * :
.spring { color: mediumspringgreen; }

Определенный в таблице стилей класс связывается с HTML-элементм
при помощи атрибута class. Для объявленных выше классов в
документе HTML (XHTML) это можно сделать, например, так:
<div class="red">Red Text</div>

ID-селекторы
Наряду с селекторами классов CSS предоставляет так же ID-селекторы или
уникальные идентификаторы. Так же как и классы, они позволяют создавать
свои собственные селекторы и применять их к любому блоку
h1#chapter7 {text-align: right;}
Или
<p id="para1">К этому параграфу будет применен стиль id para1, то есть текст
параграфа будет выровнен по центру и будет окрашен в красный цвет.</p>
#para1
{
text-align:center;
color:red;
}

В чем различие
1. Один и тот же селектор уникального идентификатора можно назначать лишь
одному на тегу в HTML-документе, а селектор класса можно назначать сразу
нескольким тегам в HTML-документе.
2. Приоритет селектора уникального идентификатора, выше приоритета селектора
класса, поэтому при вёрстке сайтов более удобно назначать шапке сайта, подвалу,
основному меню, основному контенту и сайдбару (боковой панели) уникальные
идентификаторы нежели классы (об этом более подробно вы можете узнать в
учебнике по блочной вёрстке или дивовой вёрстке сайтов).
3. В JavaScript для того чтобы управлять
элементами на странице, присваивают HTML-тегам
уникальные идентификаторы, для того, чтобы
получить к ним доступ через функцию
getElementId().

Псевдоклассы
Псевдоклассы определяют динамическое состояние элементов, которое
изменяется с помощью действий пользователя, а также положение в
дереве документа. Примером такого состояния служит текстовая ссылка,
которая меняет свой цвет при наведении на неё курсора мыши. При
использовании псевдоклассов браузер не перегружает текущий документ,
поэтому с помощью псевдоклассов можно получить разные динамические
эффекты на странице
:first-child
:link, :visited, :hover, :active, :focus
:lang(код языка)
Например:
a:link {color: Fuchsia;} - непросмотренная ссылка
a:visited {color: Green;} - просмотренная ссылка
a:hover {color: Red;} - ссылка, на которой в данный момент находится указатель
a:active {color: Aqua;} - момент когда пользователь кликает на ссылку и отпускает
кнопку мыши

Псевдоэлементы
Псевдоэлементы позволяют задать стиль логических элементов, не
определенных в дереве элементов документа, а также генерировать
содержимое, которого нет в исходном коде текста.
Замечание
Псевдоэлементы
не
могут
применяться
к
внутренним стилям, только к таблице связанных
или глобальных стилей.
Примеры псевдоэлементов:
:first-line, :first-letter
:before, :after — применяется для вставки генерируемого содержимого

<head>
<link rel="stylesheet" href="StyleSheet1.css" type="text/css">
<title>Untitled Page</title>
<style>
h1 {color: green !important}
p.new:after {
content: " - Новьё!"; /* Добавляем после текста параграфа */
}
p:first-letter {
font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */
font-size: 200%; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<div class="mainWrap">
<h1 style="color: Blue;">Это заголовок
первого уровня</h1>
<p class="new">Ловля льва в пустыне
с помощью метода золотого сечения.</p>
<p>Метод ловли льва простым перебором.</p>
<ul>
</ul>
</div>
<div class="sideBar">
<h2>Это заголовок второго уровня</h2>
</div>
</body>

Каскадирование
CSS не зря расшифровывается как каскадные таблицы стилей.
Правила каскадирования позволяют разрешать ситуации, когда
для
одного
элемента
прописано
несколько
стилей.
Каскадирование основано на присвоении некоторого приоритета
каждому правилу.
Правила каскадирования определяют следующие
приоритеты:
1. пользовательские стили, отмеченные !important
2. авторские стили, отмеченные !important
3. авторские стили
4. пользовательские стили
5. стили по умолчанию

После каскадирования правила
специфичности селекторов.

упорядочиваются

на

основе

Специфичность
Специфичность — это некоторое число в системе с неопределенно
высоким основанием, которое является отражением приоритета
какого-либо правила. Вычисляется оно на основе специфичности
каждого из селекторов, входящих в правило CSS.
Специфичность селектора разбивается на 4 группы — a b c d:






если стиль встроенный, т.е. определен как style="", то а=1
значение b равно количеству селекторов идентификаторов
значение c равно количеству классов, псевдоклассов и селекторов
атрибутов
значение d равно количеству селекторов типов

Пример вычисления специфичности:
Селектор

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

Специфичность в системе
с основанием 10

Style=""

1,0,0,0

1000

#wrapper #content {}

0,2,0,0

200

#content .datePosted {}

0,1,1,0

110

div#content {}

0,1,0,1

101

#content {}

0,1,0,0

100

p.comment .datePosted {}

0,0,2,1

21

p.comment {}

0,0,1,1

11

div p {}

0,0,0,2

2

p {}

0,0,0,1

1

Ну, а в случае равенства баллов, более сильный приоритет имеет селектор,
расположенный ниже в файле стилей.

Полезные ссылки
С помощью CSS
Перейдя по данной ссылке можно найти много полезной информации
касательных локаторов и их связи с CSS:
http://practices.issoft.by/rabota-s-lokatorami-v-selenium-webdriver/
Перейдя по этой ссылке, можно найти информацию о селекторах и попробовать
их применять:
http://www.w3schools.com/css/
Еще одна ссылка о связи локаторов и CSS
http://autotestgroup.com/ru/blog/85.html

Css part2

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a Css part2

Similar a Css part2 (20)

Más de ISsoft

Más de ISsoft (20)

Css part2