Theory and Tasks for Students - Spring 2019
Введение в CSS и Селекторы

CSS (Cascading StyleSheets) - язык описания таблицы стилей, используемый для изменения отображения элементов веб-страницы. Код таблицы стилей представляет собой набор правил. Каждое правило состоит из двух частей:

  • Selector (дословно "выбиратор") - строка, определяющая элементы, к которым должны применяться стили этого правила;
  • Список стилей - пары названий стилей и их значений.

Например: selector { style1: value1; style2: value2; } Код таблицы стилей может находиться в трёх местах:

  • Отдельный файл, обычно с расширением .css, подключается к документу с помощью тега <link>, например: <link href="./styles.css" rel="stylesheet" type="text/css">
  • Внутри тега <style>, который принято располагать в <head>, но не обязательно;
  • Как значение атрибута style у конкретного тега - в этом случае пишется только список стилей без фигурных скобок, а стиль применяется только конкретно к этому элементу, например:
    sample <span style="text-decoration: underline;">text</span> sample text

Простые селекторы

  • Селектор тега:
    /* все теги <div> */ div { ... } <body> <div> <a></a> </div> <p></p> </body>
  • Селектор идентификатора (атрибут id):
    #my_id { ... } /* тег с id="my_id" */ <body> <div> <a></a> </div> <p id="my_id"></p> </body>
  • Селектор класса (атрибут class):
    /* как минимум тег с class="nav-link" */ .nav-link { ... } <body> <div> <a class="nav-link"></a> <a class="nav-link"></a> </div> <p id="my_id"></p> </body>
  • Селектор любого элемента (wildcard):
    * { ... } <body> <div> <a class="nav-link"></a> <a class="nav-link"></a> </div> <p id="my_id"></p> </body>
  • Комбинированный селектор:
    /* теги <a class="nav-link js-link">...</a> */ a.nav-link.js-link { ... } <body> <div> <a class="nav-link"></a> <a class="nav-link js-link"></a> </div> <p id="my_id"></p> </body>
    /* тег <p id="my_id">...</p>, то же, что #my_id */ p#my_id { ... } <body> <div> <a class="nav-link"></a> <a class="nav-link js-link"></a> </div> <p id="my_id"></p> </body>
    /* то же, что и .text-center */ *.text-center { ... } <body> <div> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> </div> <p id="my_id" class="text-center"></p> </body>

Селекторы отношений

  • Вложенный элемент (дочерний элемент любого уровня):
    /* все теги <a> внутри тегов <div> */ div a { ... } <body> <div> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> <p> <a></a> </p> </div> <p id="my_id" class="text-center"></p> </body>
    /* все теги с классом nav-link внутри тегов с классом nav-bar */ .navbar .nav-link { ... } <body> <div class="nav-bar"> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> <p> <a></a> </p> </div> <p id="my_id" class="text-center"></p> </body>
    /* все теги с классом text-underline внутри тега с id="my_id" */ #my_id .text-underline { ... } <body> <div class="nav-bar"> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> <p> <a></a> </p> </div> <p id="my_id" class="text-center"> <span class="text-underline"></span> </p> </body>
  • Дочерний элемент:
    /* все теги ссылок, находящихся непосредственно * в тегах с классом nav-bar */ .nav-bar > a { ... } <body> <div class="nav-bar"> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> <p> <a></a> </p> </div> <p id="my_id" class="text-center"> <span class="text-underline"></span> </p> </body>
  • Следующий соседний элемент:
    /* тег ссылки, следующий за каждым элементом, * имеющим классы nav-link и text-center */ .nav-link.text-center + a { ... } <body> <div class="nav-bar"> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> <a class="nav-link js-link"></a> <p> <a></a> </p> </div> <p id="my_id" class="text-center"> <span class="text-underline"></span> </p> </body>
  • Все следующие соседние элементы:
    /* теги ссылок, следующий за каждым элементом, * имеющим классы nav-link и text-center */ .nav-link.text-center ~ a { ... } <body> <div class="nav-bar"> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> <a class="nav-link js-link"></a> <p> <a></a> </p> </div> <p id="my_id" class="text-center"> <span class="text-underline"></span> </p> </body>

Селекторы атрибутов и псевдоклассы

  • Селектор наличия атрибута:
    /* все элементы, у которых указан класс */ *[class] { ... } <body> <div class="nav-bar"> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> <a class="nav-link js-link"></a> <p> <a></a> </p> </div> <p id="my_id" class="text-center"> <span class="text-underline"></span> </p> </body>
  • Селектор значения атрибута:
    /* все элементы, у которых указан класс */ *[target="_blank"] { ... } <body> <div class="nav-bar"> <a class="nav-link text-center"></a> <a class="nav-link js-link"></a> <a class="nav-link js-link" target="_blank"></a> <p> <a target="_blank"></a> </p> </div> <p id="my_id" class="text-center"> <span class="text-underline"></span> </p> </body>
  • Некоторые псевдоклассы - применяются браузером автоматически при взаимодействии клиента с элементами: /* Mouse (H)Over */ *:hover { ... } /* Посещённая ссылка */ a:visited { ... } /* Нажимаемый элемент */ a:active { ... } /* Если является первым дочерним элементом своего родителя */ *:first-child { ... } /* Если является последний дочерним элементом своего родителя */ *:last-child { ... }