CSS | Селектор правила
Селектор CSS – указатель (маркер) браузеру выполнения внешнего или внутреннего стилевого правила отображения выбранного html-элемента
- Стилевое правило
- CSS-стили
- Правило CSS
- Селектор правила CSS
- Селектор html-тегов
- Селектор классов
- Селектор идентификаторов
Стилевое правило
Стилевое правило определяет браузеру порядок отображения 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-стиля, находящегося за пределами 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"> , но не к вложенным в него элементам.