Как называть css-классы

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior


tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Часть 2. CSS свойства

Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

color 960 раз Цвет текста элемента:
background-color 755 раз Цвет фона элемента:
font-size 524 раза Размер шрифта:
opacity 435 раз Уровень прозрачности элемента:
padding 372 раза Размер полей внутри элемента:
width 356 раз Ширина блочного элемента, не включая размеры границ и полей:
margin 311 раз Внешние отступы элемента:
height 305 раз Высота блочного элемента, не включая размеры границ и полей:
font-weight 280 раз Насыщенность шрифта:
text-align 245 раз Горизонтальное выравнивание текста:

Пример 1. Элемент без класса

Селектор может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков . Мы пишем код:

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются .

Мы ограничиваем область действия селектора:

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри , где тоже используются .

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те , у которых нет никаких классов вообще:

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

Этот прием — «выбирать только элементы без класса» — очень полезен для оформления пользовательского контента и его можно применять не только к спискам, но и для других случаев.

Братские селекторы (A ~ B)

Выбирает все братские элементы B, которые идут в коде после элемента A. К примеру, следующая запись изменит цвет всех абзацев после заголовка.

В примере 7 при наведении курсора мыши на любую звёздочку, все остальные, которые располагаются правее неё, меняют цвет с серого на красный. Поскольку братские селекторы работают только для элементов справа, а не слева от указанного, то мы идём на хитрость и переворачиваем все звёздочки с помощью атрибута dir со значением rtl. Это меняет текст и расположение элементов справа налево.

Пример 7. Братские селекторы

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рейтинг</title> <style> .star { color: gray; /* Серый цвет */ font-size: 24px; /* Размер звезды */ text-decoration: none; /* Убираем подчёркивание */ } .star:hover, .star:hover ~ .star { color: red; /* Красный цвет */ } </style> </head> <body> <div dir=»rtl»> <a href=»#» class=»star»>★</a> <a href=»#» class=»star»>★</a> <a href=»#» class=»star»>★</a> <a href=»#» class=»star»>★</a> <a href=»#» class=»star»>★</a> </div> </body> </html>

Результат данного примера показан на рис. 4.

Рис. 4. Использование братского селектора

Using The class Attribute

The attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three elements with a attribute with the value of «city». All of the three elements will be styled equally according to the style definition in the head section:

Example

<!DOCTYPE html><html><head><style> .city {  background-color: tomato;  color: white;  border: 2px solid black;  margin: 20px;   padding: 20px;} </style> </head><body><div class=»city»>   <h2>London</h2>  <p>London is the capital of England.</p> </div><div class=»city»>   <h2>Paris</h2>  <p>Paris is the capital of France.</p></div><div class=»city»>   <h2>Tokyo</h2>  <p>Tokyo is the capital of Japan.</p></div></body></html>

In the following example we have two elements with a attribute with the value of «note». Both elements will be styled equally according to the style definition in the head section:

Example

<!DOCTYPE html><html><head><style>.note {   font-size: 120%;  color: red;} </style></head><body><h1>My <span class=»note»>Important</span> Heading</h1><p>This is some <span class=»note»>important</span> text.</p></body></html>

Tip: The attribute can be used on any HTML element.


Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Дерево документа

Большинство комбинаций селекторов основано на их положении в дереве документа и относительно друг друга. Дерево документа — это схематичное изображение всех элементов, встречающихся в нашем коде HTML. Для иллюстрации возьмём произвольный документ, показанный в примере 3.

Пример 3. Код HTML

Дерево документа для этого HTML показано на рис. 1. Схема напоминает крону дерева из-за своей схожести с ветвями и листьями.

Рис. 1. Дерево документа

<!doctype> не считается элементом, поэтому его в расчёт не берём. Сама схема начинается с элемента <html>, он называется «корневой элемент». Все элементы связаны друг с другом сверху вниз и между ними есть следующие связи.

Предок
Элемент, внутри которого располагаются другие элементы с произвольным уровнем вложения. Для <p> предками будут <main>, <body> и <html>.
Потомок
Элемент, расположенный внутри одного или нескольких предков. К примеру, <a> является потомком как <li>, так и <ul>, поскольку располагается внутри них.
Родитель
Непосредственный предок элемента, который располагается выше на один уровень в дереве документа. <header> будет родителем для <ul>, но уже не для <li>, для него родителем будет выступать <ul>.
Ребёнок (дочерний элемент)
Непосредственный потомок элемента, который располагается ниже на один уровень в дереве документа. К примеру, дочерним для <main> будет элемент <p>; для <ul> дочерними элементами выступают <li>, но не <a>. У родителя может быть произвольное число дочерних элементов, но у дочернего элемента только единственный родитель.
Братья (сиблинги)
Элементы, расположенные на одной ветке и имеющие общего родителя, называются братскими или сиблинги, если пользоваться термином из генетики. Братскими являются элементы <header>, <main> и <footer>, а также <li>. Элементы <a> братскими не являются из-за того, что у них разные родители.
Смежные
Братские элементы, расположенные рядом друг с другом. Смежными будут элементы <header> и <main>, а также <main> и <footer>, но никак не <header> и <footer>, потому что они располагаются «через одного».

Группирование селекторов (А, B)

Группирование применяет один и тот же стиль сразу к нескольким селекторам. Это делается для удобства представления и сокращения кода CSS. В примере 1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.

Пример 1. Стиль для каждого селектора

Из данного примера видно, что стиль для элементов <h1>, <h2>, <h3> содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.

Пример 2. Сгруппированные селекторы

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

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

Здесь свойство background применяется одновременно к элементу <h2> и к классам block и msg.

Каскадирование css стилей

Важно: В случае, если пользовательская таблица стилей содержит , то это правило имеет приоритет над любым правилом, описанным в таблице стилей:

P { font-size 24pt!important; }

Пример: создать правило для дочернего класса , исходя из того, что тег данного класса вложен в родительский тек с классом

Тег с классом будет иметь цвет , а тег с классом — . Однако, если мы уберем свойство у селектора , то цвет дочернего элемента наследуется от родителя и станет равным . В этом заключается особенность наследования.

Селекторы потомка (A B)

Эти селекторы также называются вложенными или контекстными. Такие селекторы состоят из базовых селекторов разделённых пробелом.

Такую запись удобнее читать справа налево: стиль применяется к элементу <a>, который является потомком элемента <footer>. В примере 4 показано изменение цвета ссылок, в зависимости от того, где они располагаются — вверху или внизу.

Пример 4. Цвет ссылок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Сальса</title> <style> header { background: #e2edc1; } footer { background: #f4783b; } ul { margin: 0; padding: 10px; } li { display: inline; margin-right: 10px; } header a { color: #333391; } footer a { color: #fff; } </style> </head> <body> <header> <ul> <li><a href=»#»>Uno</a></li> <li><a href=»#»>Dos</a></li> <li><a href=»#»>Tres</a></li> </ul> </header> <main> <p>Сальса — современный социальный танец. Как многие латиноамериканские танцы, сальса экспрессивна, разнообразна и богата импровизацией.</p> </main> <footer> <ul> <li><a href=»#»>Cinco</a></li> <li><a href=»#»>Seis</a></li> <li><a href=»#»>Siete</a></li> </ul> </footer> </body> </html>

Результат данного примера показан на рис. 2. Для изменения цвета ссылок вверху мы использовали селектор header a, а для ссылок внизу — footer a.

Рис. 2. Ссылки разного цвета

Селекторов не обязательно должно быть только два, можно комбинировать произвольное количество.

Здесь серый фон добавляется к ячейкам таблицы <td> когда они располагаются внутри <thead>, а тот в свою очередь внутри элемента с классом tbl.

Часть 3. Медиа-запросы

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


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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта; Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через id=»решетку» и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом; Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов

Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной — это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов; Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews, otzivy и т.д

Лучше назвать carousel-once, если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным; Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: Sass для самых маленьких — подробное руководство; Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css, который входит в состав CSS фреймворка Bootstrap; Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки — переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по-умолчанию также радует; Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.

Другие уроки по теме «HTML и CSS»

  • Адаптивная вёрстка галереи без JS. CSS target. Работа с изображениями — Retina img. HTML сниппеты #5
  • Адаптивная верстка вертикального таймлайна. HTML Сниппеты #4
  • Bootstrap 4. Сетка. Подробное руководство
  • CSS Grid: адаптивная верстка реального макета
  • CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство
  • CSS анимация для самых маленьких

Смежные селекторы (A + B)

Выбирает элемент B, который является смежным для элемента A, иными словами, идёт в коде сразу же после него. К примеру, следующая запись изменит цвет только первого абзаца после заголовка.

Смежные селекторы обычно применяются для стилизации полей формы или создания разных эффектов. В примере 6 текстовый абзац с классом hidden прячется с помощью свойства display со значением none. При наведении курсора мыши на абзац с классом more смежный с ним абзац с классом hidden становится виден. Подробнее об использовании :hover говорится в разделе про псевдоклассы.

Пример 6. Смежные элементы

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Далее</title> <style> .hidden { display: none; /* Прячем элемент */ } .more:hover + .hidden { display: block; /* Показываем элемент */ } </style> </head> <body> <p>Глубокий белый саксаул</p> <p class=»more»>Далее</p> <p class=»hidden»>Производство зерна и зернобобовых отталкивает холодный ксерофитный кустарник</p> </body> </html>

Универсальные классы или CSS селектор ID

Универсальные классы необходимы для того, чтобы оформить определенным стилем один единственный элемент на странице (на разных страницах сайта).

Синтаксис:

#имя_класса{
  свойство1 значение;
  свойство2 значение;
}

Подробнее:

Пример: для первого заголовка h2 создать универсальный стиль, оформив его каким-либо цветом и увеличив жирность шрифта

Выполнение:

<html>
<head>
<style type="text/css">
#steel {
  color RGB(155,180,190); /* изменили цвет в системе RGB */
  font-weightbold /* установили жирный шрифт */
}
<style>
<head>
<body>
<h2 id="steel">Заголовок со стилем<h2>
<h2>Заголовок без стиля<h2>
<body>
<html>

Результат:

Заголовок со стилем

Заголовок без стиля

Стиль универсального селектора также может быть определен для конкретного тега:

h2#steel {
  color RGB(155,180,190); /* изменили цвет в системе RGB */
  font-weightbold /* установили жирный шрифт */
}

В таком случае стиль будет влиять только на селекторы , другие теги с атрибутом оформлены стилем не будут.

Задание: Задайте уникальный стиль для главного заголовка сайта. Опишите стиль в отдельном файле style.css и подключите стилевой файл к странице. В качестве свойств созданного стиля желательно использовать следующие:

{
text-aligncenter|right|left|justify;
}
{
text-decorationoverline|line-through|underline|blink;
}
{
text-transformuppercase|lowercase|capitalize;
}
{
font-stylenormal|italic|oblique;
}
{
font-size30px|2.5em;
}

Дочерние селекторы (A > B)

Селекторы потомка выбирают всех заданных потомков указанного элемента, независимо от их уровня вложенности. Чтобы выбрать только дочерние элементы, между селекторами вставляется угловая скобка.

Данная запись означает применить стиль к элементу <h2>, который является дочерним по отношению к <section>. Для следующего фрагмента HTML красным цветом будет оформлен первый заголовок <h2>, поскольку только он непосредственно располагается внутри <section> и выступает его дочерним элементом.

Дочерние селекторы обычно применяются для ситуаций, когда одинаковые элементы вкладываются внутрь другого несколько раз, но выделить нужно не все, а только определённые элементы. В примере 5 показано создание меню, когда один <ul> располагается внутри другого. Чтобы стилизовать пункты списка первого уровня, не затрагивая остальные, и требуются дочерние селекторы.

Пример 5. Дочерние селекторы

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Меню</title> <style> .menu > li { border: 3px double black; /* Двойная рамка */ padding: 10px; /* Поля */ list-style: none; /* Убираем маркеры */ } </style> </head> <body> <ul class=»menu»> <li>Пункт 1</li> <li>Пункт 2 <ul> <li>Пункт 2.1</li> <li>Пункт 2.2</li> <li>Пункт 2.3</li> </ul> </li> <li>Пункт 3</li> </ul> </body> </html>


Результат данного примера показан на рис. 3.

Рис. 3. Изменение стиля дочерних элементов

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS – Подклассы или селекторы

HTML – Часть

Фактически подклассы или селекторы в CSS достаточно просты для понимания. Они позволяют наследовать свойства родительского компонента и иметь свои собственные, которые будут использовать или переписывать значения от родителя. Соответственно это пригодится в случаях, когда у вас два компонента имеют одно описание стилей. Давайте разберем подобную ситуацию на примере.

Например у вас есть подобный div:

<div className=»bodytext»> Какой-то текст про то, се, третье, пятое и десятое… </div>

1 2 3

<div className=»bodytext»>

Какой-тотекстпрото,се,третье,пятоеидесятое…

</div>

И есть div, который предназначен для информации с примечанием, но тоже относящийся к классу “bodytext”:

<div className=»bodytext»> Примечание: … </div>

1 2 3

<div className=»bodytext»>

Примечание…

</div>

Вас до нынешнего момента устраивало оформление, но вдруг вы поняли, что пришло время перемен. При этом вы не хотите писать отдельный класс, вас устроил бы вариант, в котором содержатся все стили текущего класса bodytext, но именно для блока с примечаниями, хотите дописать свои стили. Тогда все, что вам необходимо сделать, это дописать в строке с классом селектор для конкретного блока:

<div className=»bodytext note»> Примечание: … </div>

1 2 3

<div className=»bodytext note»>

Примечание…

</div>

Теперь вы сможете пользоваться селекторами или подклассами в CSS для добавления или переписывания стилей под этот блок. Давайте взглянем на примеры:

CSS – Часть

Наш текущий класс содержит стандартный цвет текста, размер 12 пикселей, рамочку вокруг текста, фон за текстом и отступы от рамок примерно по 5 пикселей с каждой стороны, и фиксированную ширину блока с текстом:

CSS

.bodytext { font-size: 18px; background-color: lightgrey; padding: 5px; border: 1px solid #ddd; max-width: 300px; }

1 2 3 4 5 6 7

.bodytext {

font-size18px;

background-colorlightgrey;

padding5px;

border1pxsolid#ddd;

max-width300px;

}

Выглядит это так:

Какой-то текст про то, се, третье, пятое и десятое… Примечание: …

Но мы хотим, чтобы примечание, было например зеленым! Таким образом мы например под основным текстом укажем какую-то подсказку. Для этого в наш css файл добавляем строки, которые будут переписывать и дорисовывать стили класса bodytext и при этом обладать своими собственными:

CSS

.bodytext { font-size: 18px; background-color: lightgrey; padding: 5px; border: 1px solid #ddd; max-width: 300px; }

.bodytext.note { font-size: 14px; background-color: limegreen; padding: 10px; border: 5px solid #ddd; max-width: 150px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.bodytext {

font-size18px;

background-colorlightgrey;

padding5px;

border1pxsolid#ddd;

max-width300px;

}  

.bodytext.note {

font-size14px;

background-colorlimegreen;

padding10px;

border5pxsolid#ddd;

max-width150px;

}

В свою очередь блоки преобразятся в такой вид:

Какой-то текст про то, се, третье, пятое и десятое… Примечание: …

Собственно мы переписали несколько свойств класса bodytext: font-size, background-color, padding и максимальную ширину блока. С помощью селекторов… как же меня бесите это название! 

Новое!

Селекторы и подклассы в CSS позволяют вам оперировать со стилями одного класса. Это удобно в случаях, когда вам нельзя писать например новый класс из-за нецелесообразности. В целом надеюсь данная статья была для вас информативна! Подписывайтесь на наш ВК и ютуб-канал!


С этим читают