CSS. Селекторы и идентификаторы

Вэб-страница состоит из HTML-кода различных элементов, это блоки, ссылки, списки, изображения и т.д. опытный верстальщик глядя на код, видит уже готовый каркас, которому придает необходимый вид с помощью CSS. Чтобы визуально изменить элемент, его форму и расположение на странице используются CSS-свойства, которые записываются к селектору определенного элемента.

Основное;
- Не желательно использовать в значениях id и class цифры.
- В значениях допустимо использовать дефис(-), строчные и заглавные(нежелательно) буквы.
- Идентификатор(id) не может быть одинаковым у разных элементов или блоков на странице, т.е. у каждого элемента должен быть свой уникальный id.
- Для атрибута class допустимо использовать несколько значений разделенных пробелом.
Для примера возьмем такую конструкцию:
<div id="myDiv" class="my-class first">
 <a href="./site/static-page.html" target="_blank">Моя страница</a>
</div>

Варианты селекторов

В качестве селектора могут выступать:
  - универсальный селектор(ко всем элементам будут применены указанные свойства):
* {
  overflow: auto;
}
  - имя тега:
div {
  padding: 10px;
}
  - идентификатор (значение HTML-атрибута id):
#myDiv {
  margin: 15px 10px;
}
  - класс (значение HTML-атрибута class):
.my-class {
  background: lightblue;
}
  - HTML-атрибут и его значение
В данном случаи будут выбраны все элементы, у которых имеется атрибут class со значением my-class
[class="my-class"] {
  text-trensform: uppercase;
}
  - селектор и HTML-атрибут:
Здесь будут выбраны только элементы тега DIV, у которых имеется атрибут class со значением my-class
div[class="my-class"] {
  text-trensform: uppercase;
}

Варианты селекторов по атрибутам

Чтобы указать нужный стиль элемента по атрибуту, кроме комбинации [атрибут="значение"], можно использовать следующие варианты:
  - только имя атрибута:
[class] {
  ...
}
  - если значение в атрибуте начинается с определенного текста:
[class^="my"] {
  ...
}
  - если значение оканчивается определенным текстом:
a[href$="page.html"] {
  ...
}
  - если значение содержит определенный текст в месте(в начале, конце ли середине):
a[href*="static"] {
  ...
}
  - если значение содержит одно из значений:
div[class~="first"] {
  ...
}
  - если значение содержит одно из значений указанных c применением дефиса(-):
div[class|="class"] {
  ...
}

Типы и комбинации селекторов

Для отдельного или более точного выбора необходимого элемента могут использоваться разные типы селекторов, которые конкретно указывают местоположение элемента в наборе:
  - вложенные - находящиеся в любом месте внутри родительского элемента:
div a {
  text-decoration: none;
}
  - дочерние - находящиеся непосредственно вначале родительского элемента:
div > a {
  text-decoration: none;
}
  - соседние - находящиеся непосредственно рядом друг с другом элементы:
.first + .second {
  border: 1px solid #000000;
}
<div class='first'>...</div>
<div class='second'>...</div>
  - родственные - однотипные элементы находящиеся в одном родительском блоке без дополнительных оберток:
.first ~ p {
  font-style: italic;
}
<div class='first'>...
  <p>...</p>
  <div><p>...</p></div><!-- этот элемент не является родственным -->
  <p>...</p>
 </div>

Для более глубокой и интерактивной стилизации элементов страница также используются псевдоэлементы и псевдоклассы селекторов.
©http://magentawave.com

Комментариев нет:

Отправить комментарий

Следующее Предыдущее

BestProject