CSS selectors
CSSКаскадные таблицы стилей (CSS) используются для описания внешнего вида документа, написанного языком разметки
Объявление стиля состоит из двух частей:
- селектора
- блока объявления, заключенного в фигурные скобки
Селектор |
Блок объявления стиля | ||||
|---|---|---|---|---|---|
Атрибут |
: | Значение |
; | ||
div |
{ | ||||
color |
: | green |
; | ||
font-size |
: | 16px |
; | ||
| } | |||||
В блоке объявления перечисляются пары: имя атрибута: значение атрибута:
color: blue;здесь color - имя атрибута, blue - значение
значение отделяется от имени двоеточием
каждая пара атрибут: значение заканчивается точкой с запятой
В примере выше атрибут color определяет цвет текста элемента
Определим стиль всех заголовков h2 на странице:
h2 {
font-size: 28px;
line-height: 32px;
}Здесь установлен размер шрифта ( font-size ) и высота строки ( line-height ) для заголовков h2
внешняя таблица стилейподлинковывается к странице тегом <link>
Атрибут rel="stylesheet" указывать обязательно
<link media="all" rel="stylesheet" href="css/main.css">Вставляются на страницу тегом <style>
<style>
h2 {
font-size: 28px;
line-height: 32px;
}
</style>Добавляются элементу с помощью атрибута style
<h2 style="font-size: 32px;">Heading 2</h2>Селекторы указывают на элементы веб-страницы, к которым будут применены атрибуты стиля, заключенные в фигурных скобках
Селекторы могут быть:
- теговыми
- классовыми
- идентификаторными
- контекстными
- селекторами псевдоклассов и псевдоэлементов
- атрибутивными
- дочерними
- соседними
- родственными
<nav class="main-menu">
<a href="#">About</a>
<a href="#">Team</a>
<a href="#">Contacts</a>
</nav>.main-menu {
background-color: black;
font-family: Arial;
font-size: 16px;
}
.main-menu a {
text-decoration: none;
color: white;
}Здесь для элемента с классом main-menu установлен цвет фона ( background-color: black ), шрифт ( font-family: Arial ) и размер шрифта ( font-size: 16px )
Для дочерних элементов <a> элемента с классом main-menu отменяется подчеркивание текста ( text-decoration: none ) и устанавливается цвет текста ( color: white ) и размер шрифта ( font-size )
указывает на все элементы с заданным именем тега
h1 {
font-family: Arial;
font-size: 18px;
color: darkblue;
}указывает на все элементы с заданным именем класса
.main-menu {
display: inline-block;
background-color: black;
padding: 5px 10px;
color: white;
}позволяет задавать стили для элемента с уникальным id
#container {
width: 100%;
height: 300px;
overflow: auto;
box-sizing: border-box;
}указывает на элементы, расположенные внутри элемента-контейнера
.main-menu a {
border: solid 1px gray;
}здесь устанавливается сплошная серая рамка ( border ) толщиной 1px для всех элементов <a>, находящихся внутри элементов с классом main-menu на любом уровне вложенности
указывает на элементы, которые являются прямыми потомками ( т.е. расположены непосредственно в родительском элементе, а не внутри других элементов, которые находятся в родителе )
.wrapper {
background-color: black;
}
article > h3 { color: yellow; }
.wrapper p { color: gray; }
.wrapper > p { color: red; }<section class="wrapper">
<p>Hello!</p>
<article>
<h3>Grid Layout</h3>
<p>The CSS Grid Layout Module offers a grid-based layout system,
with rows and columns, making it easier to design web pages
without having to use floats and positioning</p>
</article>
<p>Read more...</p>
</section>Здесь текст Hello! и Read more... будет красным, а внутри элемента <article> текст будет серым, а заголовок - желтым
указывают на элементы, имеющие общего родителя
-
p + p- смежные -
p ~ p- родственные
<section class="wrapper">
<p>Hello!</p>
<p>Welcome</p>
<p>Where are you from ?</p>
<article>
<h3>Grid Layout</h3>
<p>Flex</p>
</article>
<p>Read more...</p>
</section>.wrapper {
background-color: black;
}
.wrapper p {
color: gray;
}
.wrapper > p {
color: blue;
}
.wrapper p + p {
color: yellow;
}
.wrapper p + p + p {
color: green;
}
p ~ p {
font-style: italic;
}Здесь текст "Hello!" и "Read more..." будет синим, "Welcome" - желтым, "Where are you from ?" - зеленым
Текст "Grid Layout" будет серым, а "Flex" - желтым
Стиль italic будет у текста "Welcome", "Where are you from ?", "Flex" и "Read more..."
позволяет задавать стили к элементам на основе имени атрибута или значения атрибута
input[type=”text”] {
font-size: 28px;
}Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам
Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу
Примеры псевдоклассов:
- :link — не посещенная ссылка
- :visited — посещенная ссылка
- :hover — любой элемент, по которому проводят курсором мыши
- :focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши
- :disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии
- :not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not([type="submit"])
- :checked — выделенные (выбранные пользователем) элементы формы
Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром
- :nth-child(odd) — нечётные дочерние элементы
- :nth-child(even) — чётные дочерние элементы
- :nth-child(3n) — каждый третий элемент среди дочерних
- :nth-child(n+2) — выбирает все элементы, начиная со второго
- :nth-child(3) — выбирает третий дочерний элемент
- :first-child — позволяет оформить только самый первый дочерний элемент тега
- :last-child — позволяет форматировать последний дочерний элемент тега
- :only-child — выбирает элемент, являющийся единственным дочерним элементом
- :empty — выбирает элементы, у которых нет дочерних элементов
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
}
div:nth-child(odd) {
background-color: #00999990;
}
div:nth-child(even) {
background-color: #99990090;
}
</style>
</head>
<body>
<figure>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
</body>
</html>____________________________________________________________________________________________________
- ::first-letter — выбирает первую букву каждого абзаца;
- ::first-line — выбирает первую строку текста элемента;
- ::before — вставляет генерируемое содержимое перед элементом;
- ::after — добавляет генерируемое содержимое после элемента.
p::before {
content: 'read-this';
display: block;
} Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:
a[href][title] {
color: red;
}Один и тот же стиль можно одновременно применить к нескольким элементам
Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:
p,
span {
color: black;
}Наследование - механизм, с помощью которого определенные свойства передаются от предка (родителя) к его потомкам
Наследуются свойства, относящихся к текстовому содержимому страницы, таких как color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform...
С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента
Это работает даже для тех свойств, которые не наследуются по умолчанию
Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила
Существует три критерия, которые определяют порядок применения свойств:
- правило !important ( самый сильный приоритет ):
h3 {
font-size: 20px !important;
}- специфичность ( "вес" селектора):
/* tag name - 1 */
p {
font-size: 20px;
}
/* class - 10 */
.content {
font-size: 22px;
}
/* id - 100 */
#content {
font-size: 24px;
}- порядок:
p {
font-size: 20px;
}
p {
font-size: 22px;
}
Всемирная паутина
Пример
Flexbox Froggy
