tehnopost.info > site > 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 с присвоенным атрибутом class указанного в селекторе имени. Имя слагается из цифр и латинских символов в любой комбинации. Желательно использовать человеко-понятную форму имени, отличимую от названий тегов спецификации HTML и литеры нижнего регистра. Селектору классов в CSS характерна точка перед именем: Селектор идентификаторовДействие селектора идентификатора ничем не отличается от работы селектора классов, кроме одного: идентификатор «id» присваивается исключительно одному элементу HTML. Свойства правила, обозначенные селектором идентификаторов, применятся в одном единственном экземпляре с уникальным атрибутом «id» – универсальным индивидуальным идентификатором. Имя идентификатора формируется (придумывается автором) по принципу имени селектора классов и прибавляется спереди решетка. Принципиальное отличие идентификатора от класса: идентификаторы универсальны, они используются в якорях-html и jаvascript для нахождения уникального места в документе. Выбирая имя, важно не повториться и не сбить работу страницы. Классы и идентификаторы элементовОсновное отличие класса от идентификатора – идентификатор предназначен для одного элемента, класс присваивают сразу нескольким. Для идентификаторов такое невозможно, два идентификатора с одинаковым именем не работают. Верстальщики практикуют комбинирование селекторов с указанием уровня наследственности и расширение возможностей основных селекторов селекторов за счет добавления атрибутов, псевдо-классов и псевдоэлементов. Комбинирование селекторовВ качестве комбинаций селекторов выступают расширенные вариации селекторов тегов, классов, идентификаторов. Настоящий цирк и поле чудес для любителей изысканного CSS-кода.
Селекторы псевдоклассов и псевдоэлементовОтдельный интерес представляют селекторы псевдоклассов и псевдоэлементов, образуемые при обращении к интерактивному html-элементу, как правило – ссылке или якорю: Селектор псевдоклассов Селектор псевдоэлементов Разница не только в лишнем двоеточии. В CSS существует ограниченный набор псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Псевдоэлементов в CSS существует четыре: первая буква, первая строка, стили «до» и «после» элемента. {color: blue;} Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв. Вестимо, внешние стили CSS находятся в отдельных (внешних) файлах, внутренние – в теле веб-документа, встроенные – непосредственно в открывающем теге html-элемента. CSS описывает свойства элемента – в CSS-стили определяют внешний вид и свойства HTML-элементов. Подключаются CSS-стили к веб-странице: встроенно, внутренне и внешне. html-элемент и стиль отображения могут находиться в разных местах веб-страницы, в разных файлах и на разных сайтах (серверах, адресах). Чтобы связать html-элемент и код нужного стиля – в CSS используют селекторы. Подключаются или внедряются CSS-стили в документ следующим образом: В html назначаю тегу <section> класс <section class="mainpage">. Дело в пробеле. "section .mainpage {}" - Тут под него попадут все элементы с классом 'mainpage', которые идут после любого <section>. "section.mainpage" - правила применятся только к <section class="mainpage"> , но не к вложенным в него элементам. Распечатано на сайте tehnopost.info |