CSS/Селекторы: различия между версиями

921 байт добавлено ,  6 лет назад
Нет описания правки
Селектор выбирает элементы, для которых применяются пары свойство и значение.
 
Пример:
 
<source lang="css">
body {
background-image: url("image.gif");
font-size: 18px;
}
</source>
 
Где <code>body</code> — это селектор, <code>background-image</code> и <code>font-size</code> — это свойства, а <code>url("image.gif")</code> и <code>18px</code> — значения.
 
== Виды селекторов: ==
* Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
 
* Универсальный селектор, который обозначается символом <code>*</code> и применяется для изменения необходимых свойств всех элементов на странице.
* Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
*Классы, применяются для элементов с атрибутом <code>class</code> и необходимым значением.
* Универсальный селектор, который обозначается символом * и применяется для изменения необходимых свойств всех элементов на странице.
* КлассыИдентификаторы, применяются для элементов с атрибутом class<code>id</code> и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами ([[Книга JavaScript|JavaScript]]).
*[[CSS/Псевдо-элементы и Псевдо-классы|Псевдо-классы]] предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со [[CSS/Гиперссылки|ссылками]] (<code>:link</code>, <code>:visited</code>, <code>:hover</code>, <code>:active</code>, <code>:focus</code>). [[CSS/Псевдо-элементы и Псевдо-классы|Псевдо-элементы]] определяют стиль элементов, чётко не определённых в структуре документа (<code>:first-letter</code>, <code>:first-line</code>), а также позволяют генерировать и стилизироватьстилизовать несуществующее содержимое (<code>:before</code>, <code>:after</code> и свойство <code>content</code>). В CSS3 псевдо-элементы начинаются с двух двоеточий :: (<code>::first-letter</code>, <code>::first-line</code>, <code>::before</code>, <code>::after</code>).
* Идентификаторы, применяются для элементов с атрибутом id и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами ([[Книга JavaScript|JavaScript]]).
* Селекторы атрибутов. Позволяют стилизироватьстилизовать элемент не только по значению тега, но и по значению атрибута. (a[attr]).
* [[CSS/Псевдо-элементы и Псевдо-классы|Псевдо-классы]] предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со [[CSS/Гиперссылки|ссылками]] (:link, :visited, :hover, :active, :focus).
*Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
* [[CSS/Псевдо-элементы и Псевдо-классы|Псевдо-элементы]] определяют стиль элементов, чётко не определённых в структуре документа (:first-letter, :first-line), а также позволяют генерировать и стилизировать несуществующее содержимое (:before, :after и свойство content). В CSS3 псевдо-элементы начинаются с двух двоеточий :: (::first-letter, ::first-line, ::before, ::after).
* Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком. (a > b).
* Селекторы атрибутов. Позволяют стилизировать элемент не только по значению тега, но и по значению атрибута. (a[attr])
* КонтекстныеСоседние селекторы. СтилизацияПредназначены для стилизации соседних элементов, находящихсяу внутрикоторых другогообщий элементародитель. (a + b)
* Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизируютсястилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)
* Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком. (a > b)
* Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
* Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизируются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)
 
== Селектор class ==
Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <code><nowiki><p></nowiki></code>, причём оба вида будут постоянно чередоваться и часто повторяться.
 
Пример такой страницы — интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:
Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <nowiki><p></nowiki>, причём оба вида будут постоянно чередоваться и часто повторяться.
 
<source lang="html4stricthtml5">
Пример такой страницы — интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:
<!DOCTYPE html>
 
<source lang="html4strict">
<html>
<head>
<title>
...
Вопросы и ответы
<style>
</title>
...
<meta charset="utf-8" />
p.ask {
<style>
font-style: italic;
</source>
font-weight: bold;
<source lang="css">
font-family: Arial, sans-serif;
p.ask {
font-size: 10pt;
font-style: italic;
color: gray;
font-weight: bold;
margin-left: 15px;
font-family: Arial, sans-serif;
}
font-size: 10pt;
p.answer {
color: gray;
font-family: 'Times New Roman', serif;
margin-left: 15px;
font-size: 12 pt; color: black;
}
}
p.answer {
...
font-family: 'Times New Roman', serif;
</style>
font-size: 12pt;
...
font-size: 12 pt; color: black;
</head>
}
<body>
</source>
...
<source lang="html5">
<p class="ask">вопрос журналиста</p>
</style>
<p class="answer">ответ</p>
</head>
...
</body>
<p class="ask">
<p class="ask"> вопрос журналиста</p>
</p>
<p class="answer">ответ</p>
ответ
</p>
</body>
</html>
</source>
 
В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселейпикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.
{{CSS:rendered|1=<p style="font-style: italic; font-weight: bold; font-family: Arial, sans-serif; font-size: 10pt; color: gray; margin-left: 15px; ">вопрос журналиста</p><p style="font-family: 'Times New Roman', serif; font-size: 12pt; color: black; ">ответ</p>}}
 
== Селектор id ==
 
Возьмём следующий пример. Например, вы хотите создать на странице какие-либо уникальные элементы, к которым в будущем захотите вернуться из программ [[Книга JavaScript|JavaScript]]. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификатор (id). Вот пример назначения идентификатора и правило CSS для таких элементов:
 
<source lang="css">
#onlyThisOne {
font-family: courier;
}
</source>
 
92

правки