Интернетчик » site » CSS | Селектор правила

CSS | Селектор правила

Селектор CSS – указатель (маркер) браузеру выполнения внешнего или внутреннего стилевого правила отображения выбранного html-элемента

  1. Стилевое правило
  2. CSS-стили
  3. Правило CSS
  4. Селектор правила CSS
  5. Селектор html-тегов
  6. Селектор классов
  7. Селектор идентификаторов

Стилевое правило

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


свойство: значение;

CSS-стили

CSS-стили определяют внешний вид и расположение html-элемента на странице – цвет, шрифт, размер блока, списка, абзаца … Различают встроенный стиль html-элемента и таблицы стилей CSS (внутренние и внешние). Таблицы стилей CSS, в отличие от встроенного стиля – находятся за пределами html-элемента. Связать воедино правило стиля html-элемента и сам элемент, указать браузеру конкретный html-элемент выполнения правила стиля, требуется маркер – CSS-селектор правилаСелектор правила CSS указывает браузеру место на странице (html-элемент) применения прописанных CSS-стилей. CSS-селектор – неотъемлемая часть внешних и внутренних таблиц CSS. Справка:

Правило CSS

Подключенные (внутренние и внешние) таблицы CSS-стилей состоят из правил и содержат минимум одно правило отображения html-элемента. Текст правила начинается его селектором. Селектор правила располагается до знака фигурной открывающей скобки «{» и определяет элемент html-документа, подчиненный правилу.
Блок объявлений правила расположен за селектором, заключен в фигурные скобки и содержит объявления стилей, разделённых знаком «;». В объявлении стиля указано конкретное свойство элемента и его значение.

Правило таблицы CSS - селектор и блок объявлений

Допускается (но, не приветствуется) сокращенная форма записи правила таблицы CSS, без пробелов и перевода строки: селектор{свойсто:значение;}

Селектор правила CSS

Селектор правила CSS – неотъемлемая часть CSS-стиля, находящегося за пределами html-элемента документа. Cелектор CSS указывает браузеру html-элемент для применения CSS-стилей, содержащихся в блоке объявлений возглавляемого им правила и определяющих внешний вид и расположение html-элемента на странице – цвет, шрифт, размер, обтекание блока, списка, абзаца …

Селектор html-тегов

Селектором html-тегов (селектором по типу элементов) выступает непосредственно html-тег спецификации HTML. Правило селектора тегов распространяется на элементы страницы с прописанным html-тегом и применяется браузером при отсутствии указания иного:
/* Кроссбраузерный сброс отступов */
html, body, div, p, a, span, h1, dl, dt, dd, ol, ul, li, form, label, table, caption, tr, th, td, article, aside, menu, nav, output, section, audio, video {margin:0;}

Селектор классов

Правило селектора классов верно для элементов HTML с присвоенным атрибутом class указанного в селекторе имени. Имя слагается из цифр и латинских символов в любой комбинации. Желательно использовать человеко-понятную форму имени, отличимую от названий тегов спецификации HTML и литеры нижнего регистра. Селектору классов в CSS характерна точка перед именем:
CSS
.red123{color:red;}
HTML
<div class=”red123”>красный текст</div>
<p class=”red123”>красный текст</p>
<h3 class=”red123”>красный текст</h3>

Селектор идентификаторов

Действие селектора идентификатора ничем не отличается от работы селектора классов, кроме одного: идентификатор «id» присваивается исключительно одному элементу HTML. Свойства правила, обозначенные селектором идентификаторов, применятся в одном единственном экземпляре с уникальным атрибутом «id» – универсальным индивидуальным идентификатором. Имя идентификатора формируется (придумывается автором) по принципу имени селектора классов и прибавляется спереди решетка. Принципиальное отличие идентификатора от класса: идентификаторы универсальны, они используются в якорях-html и jаvascript для нахождения уникального места в документе. Выбирая имя, важно не повториться и не сбить работу страницы.
CSS
#red123{color:red;}
HTML
<div id=”red123”>красный текст исключительно здесь !!!</div>

Классы и идентификаторы элементов

Основное отличие класса от идентификатора – идентификатор предназначен для одного элемента, класс присваивают сразу нескольким. Для идентификаторов такое невозможно, два идентификатора с одинаковым именем не работают.

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

Комбинирование селекторов

В качестве комбинаций селекторов выступают расширенные вариации селекторов тегов, классов, идентификаторов. Настоящий цирк и поле чудес для любителей изысканного CSS-кода.

Селектор атрибутов тегов
Расширенный вариант селектора html-тегов. Своего рода – известное действие «изменить по маске». Смысл заключается в добавлении к селектору html-тега существующего его атрибута, требующего отображения в другом стиле. Атрибут html-тега целиком или частями прописывается в селекторе, в квадратных скобках вслед за названием html-тега:

– атрибут target="_blank" тега «а» в селекторе атрибутов тегов
а [target="_blank"] {свойство: значение;}
– атрибут href="ссылка" тега «а» в селекторе атрибутов тегов

а [href="http://tehnopost.info/html/76-selektory-v-css.html"] {свойство: значение;}

– часть атрибута, разница в добавлении знаков ^, *, $, обозначающих начало, содержание или окончание строки:
[атрибут^="начало_"]
а[href^="http://"] {свойство: значение;}

– часть атрибута, любое слово в маске*
а[атрибут*="любое_слово_в_маске"]

a[href*="tehnopost "]{свойство: значение;}

– часть атрибута, окончание маски$:
ссылки на домен «. Info»
[атрибут$="_окончание"]
а[href$=". info"] {свойство: значение;}
ссылки на фото «.jpg»:
а[href$=".jpg"]

Браузер выберет элементы с указанным атрибутом и отобразит в описанном стиле. В учебниках приводятся в основном, примеры со ссылками.

Селектор потомков
Селектор потомков (контекстный селектор, селектор вложений) используется в стилизации подчиненных элементов. Классика примера – оформление списка:
1. #menu {свойство: значение;}
2. #menu ul {свойство: значение;}
3. #menu ul li {свойство: значение;}
4. #slidemenu ul li a {свойство: значение;}
5. #slidemenu ul li a span{свойство: значение;}
/* Глубже вкладывать и засовывать свойства не надо. */
Селектор дочерних элементов
ul > b {свойство: значение;}
Селектор дочерних элементов (селектор вложений) выберет прямого потомка (элемент b) в первой строке и не выберет элемент b в остальных строках html-кода:
1.  <ul><b>текст</b>
2.   <li><b>текст</b>
3.    <ul>
4.     <li><b>текст</b></li>
5.    </ul>
6.    <ul>
7.     <li><b>текст</b></li>
8.    </ul>
9.   </li>
10.  <li><b>текст</b></li>
11. </ul>
Селектор элементов одного уровня
Селектор элементов одного уровня (соседний селектор) поможет выбрать элемент, следующий сразу же за указанным элементом. Выберем первый абзац текста, следующий за тэгом h1 (первый абзац на каждой странице):
h1 + p {свойство: значение;}

Селекторы псевдоклассов и псевдоэлементов

Отдельный интерес представляют селекторы псевдоклассов и псевдоэлементов, образуемые при обращении к интерактивному html-элементу, как правило – ссылке или якорю:

Селектор псевдоклассов
a:active {color: blue;}
a:link { color: red; }
a:visted { color: purple; }

Селектор псевдоэлементов
/* Выделение первой буквы абзаца*/
p::first-line {font-weight:bold; font-size: 1.2em;}

Разница не только в лишнем двоеточии.

В CSS существует ограниченный набор псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Псевдоэлементов в CSS существует четыре: первая буква, первая строка, стили «до» и «после» элемента.

{color: blue;}
{font-size: 32px;}
{color: red;}
дальше по тексту:
{свойство: значение;}

Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.


Вестимо, внешние стили CSS находятся в отдельных (внешних) файлах, внутренние – в теле веб-документа, встроенные – непосредственно в открывающем теге html-элемента.

CSS описывает свойства элемента – в CSS-стили определяют внешний вид и свойства HTML-элементов. Подключаются CSS-стили к веб-странице: встроенно, внутренне и внешне. html-элемент и стиль отображения могут находиться в разных местах веб-страницы, в разных файлах и на разных сайтах (серверах, адресах). Чтобы связать html-элемент и код нужного стиля – в CSS используют селекторы.

Подключаются или внедряются CSS-стили в документ следующим образом:
CSS-стили указаны в атрибутах отдельного html-элемента, в открывающем теге:
<p style="правила">
CSS-стили внутри документа заключаются в элемент <style>, находящийся в теле веб-документа. Место нахождения элемента <style> на поле веб-страницы для браузера не имеет значения. CSS-код отработается браузером в любом случае:
<style type="text/css">селектор{правила}</style>
CSS-стили находятся в отдельном внешнем файле, подключаемом к документу посредством элемента <link>, включённом в элемент <head>:
<link rel="stylesheet" type="text/css" href="style.css">


В html назначаю тегу <section> класс <section class="mainpage">.
В style.css прописываю свойства и значения классу:
section .mainpage {...} - свойства и значения игнорируются (смотрю в последнем Хроме).
Пишу:
section.mainpage {...} (без пробела между тегом и классом) - свойства и значения срабатывают.

Под селектор "section .mainpage" попадает любой элемент с классом mainpage, НАХОДЯЩИЙСЯ ВНУТРИ элемента section. Под селектор "section.mainpage" попадает любой элемент section, которому назначен класс mainpage.

Дело в пробеле. "section .mainpage {}" - Тут под него попадут все элементы с классом 'mainpage', которые идут после любого <section>. "section.mainpage" - правила применятся только к <section class="mainpage"> , но не к вложенным в него элементам.