CSS/Селекторы: различия между версиями
Содержимое удалено Содержимое добавлено
Oleg4280 (обсуждение | вклад) Нет описания правки |
Нет описания правки |
||
Строка 1:
Селектор выбирает элементы, для которых применяются пары свойство и значение.
Пример:
<source lang="css">
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>class</code> и необходимым значением.
▲* Универсальный селектор, который обозначается символом * и применяется для изменения необходимых свойств всех элементов на странице.
*
*[[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>), а также позволяют генерировать и
*
*Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
▲* [[CSS/Псевдо-элементы и Псевдо-классы|Псевдо-элементы]] определяют стиль элементов, чётко не определённых в структуре документа (:first-letter, :first-line), а также позволяют генерировать и стилизировать несуществующее содержимое (:before, :after и свойство content). В CSS3 псевдо-элементы начинаются с двух двоеточий :: (::first-letter, ::first-line, ::before, ::after).
*
▲* Селекторы атрибутов. Позволяют стилизировать элемент не только по значению тега, но и по значению атрибута. (a[attr])
*
*
▲* Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком. (a > b)
▲* Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизируются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)
== Селектор class ==
Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <code><nowiki><p></nowiki></code>, причём оба вида будут постоянно чередоваться и часто повторяться. ▼
Пример такой страницы — интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так: ▼
▲Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <nowiki><p></nowiki>, причём оба вида будут постоянно чередоваться и часто повторяться.
▲Пример такой страницы — интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:
<!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;
</head>▼
}
<body>▼
</source>
<source lang="html5">
<p class="ask">вопрос журналиста</p>▼
▲ </style>
<p class="answer">ответ</p>▼
▲ </head>
<
<p class="ask">
</p>
ответ
</p>
▲ </body>
</html>
</source>
В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15
{{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">
font-family: courier;
</source>
| |||