CSS/Селекторы

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

Пример:

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 type="text/css">

         p.ask {
            font-style: italic; 
            font-weight: bold; 
            font-family: Arial, sans-serif; 
            font-size: 10px; 
            color: gray; 
            margin-left: 15px; 
         }
         p.answer {
            font-family: 'Times New Roman', serif; 
            font-size: 12px; 
            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 для таких элементов. Пример:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Шрифт Courier
      </title>
      <meta charset="utf-8" />
      <style type="text/css">

         #onlyThisOne {
            font-family: Courier;  
         }

      </style>
   </head>
   <body>
      <p id="onlyThisOne">
         Courier
      </p>
   </body>
</html>

Отобразится как:

Courier

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

<!DOCTYPE html>
<html>
   <head>
      <title>
         Форма
      </title>
      <meta charset="utf-8" />
      <style type="text/css">

         input#green {
            color: green; 
         }
         input#red {
            color: red; 
         }

      </style>
   </head>
   <body>
      <form action="handler.php" method="get">
         <p>
            Текст, введенный в это поле, будет отображен зеленым цветом: 
            <input type="text" id="green" name="info1" size="20" />
         </p>
         <p>
            Текст, введенный в это поле, будет отображен красным цветом: 
            <input type="text" id="red" name="info2" size="20" />
         </p>
         <input type="submit" value="Отправить" />
      </form>
   </body>
</html>