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

Содержимое удалено Содержимое добавлено

Линейный

Версия от 13:39, 9 ноября 2014

Селектор выбирает элементы, для которых применяются пары свойство и значение.

Пример:

body {
   background-image: url("image.gif"); 
   font-size: 18px; 
}

Где body — это селектор, background-image и font-size — это свойства, а url("image.gif") и 18px — значения.

Виды селекторов

Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
Универсальный селектор, который обозначается символом * и применяется для изменения необходимых свойств всех элементов на странице.
Классы, применяются для элементов с атрибутом class и необходимым значением.
Идентификаторы, применяются для элементов с атрибутом id и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами (JavaScript).
Псевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками (:link, :visited, :hover, :active, :focus). Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа (:first-letter, :first-line), а также позволяют генерировать и стилизовать несуществующее содержимое (:before, :after и свойство content). В CSS3 псевдо-элементы начинаются с двух двоеточий :: (::first-letter, ::first-line, ::before, ::after).
Селекторы атрибутов. Позволяют стилизовать элемент не только по значению тега, но и по значению атрибута (a[attr]).
Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком (a > b).
Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)

Селектор class

Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <p>, причём оба вида будут постоянно чередоваться и часто повторяться.

Пример такой страницы — интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Вопросы и ответы
      </title>
      <meta charset="utf-8" />
      <style>

         p.ask {
            font-style: italic; 
            font-weight: bold; 
            font-family: Arial, sans-serif; 
            font-size: 10pt; 
            color: gray; 
            margin-left: 15px; 
         }
         p.answer {
            font-family: 'Times New Roman', serif; 
            font-size: 12pt; 
            color: black; 
         }

      </style>
   </head>
   <body>
      <p class="ask">
         вопрос журналиста
      </p>
      <p class="answer">
         ответ
      </p>
   </body>
</html>

В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.

вопрос журналиста

ответ

Селектор id

Возьмём следующий пример. Например, вы хотите создать на странице какие-либо уникальные элементы, к которым в будущем захотите вернуться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификатор (id). Вот пример назначения идентификатора и правило CSS для таких элементов:

#onlyThisOne {
   font-family: courier; 
}

В HTML к нужному тегу добавляется атрибут id с именем селектора:

<p id="onlyThisOne">Courier</p>

Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице.

<html>
<head>
...
<style>
input#green {
  color: green;
}
input#red {
  color: red;
}
...
</style>
...
</head>
<body>
...
<form ...>
<p>Текст, введенный в это поле, будет отображен зеленым цветом:
<input type="text" id="green" name="info1" size="20"></p>
<p>Текст, введенный в это поле, будет отображен красным цветом:
<input type="text" id="red" name="info2" size="20"></p>
</form>
...
</body>
</html>

@@ Строка 1: / Строка 1: @@
 Селектор выбирает элементы, для которых применяются пары свойство и значение.
 Пример:
 <source lang="css">
- body {
+body {
    background-image: url("image.gif");
    font-size: 18px;
- }
+}
 </source>
-Где body — это селектор, background-image и font-size — это свойства, а url("image.gif") и 18px — значения.
+Где <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)
+*Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
+*Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)
-* Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком. (a > b)
-* Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
-* Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизируются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)
 == Селектор class ==
+Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <code><nowiki><p></nowiki></code>, причём оба вида будут постоянно чередоваться и часто повторяться.
+Пример такой страницы — интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:
-Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <nowiki><p></nowiki>, причём оба вида будут постоянно чередоваться и часто повторяться.
+<source lang="html5">
-Пример такой страницы — интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:
+<!DOCTYPE html>
-<source lang="html4strict">
 <html>
-<head>
+   <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;
-...
+            color: black;
-</head>
+         }
-<body>
+</source>
-...
+<source lang="html5">
-<p class="ask">вопрос журналиста</p>
+      </style>
-<p class="answer">ответ</p>
+   </head>
-...
-</body>
+   <body>
+      <p class="ask">
+         вопрос журналиста
+      </p>
+      <p class="answer">
+         ответ
+      </p>
+   </body>
 </html>
 </source>
-В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселей от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.
+В приведённом примере вопросы журналиста будут отображаться шрифтом 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 {
+#onlyThisOne {
-   font-family:courier;
+   font-family: courier;
- }
+}
 </source>