Вы можете применять CSS-селекторы к таким элементам, как абзацы и упорядоченные списки. Однако ничто не запрещает вам использовать их иначе.
Как вы увидите в этом руководстве, вы также можете управлять поведением содержимого, используя пользовательские или ID-стили, псевдоклассы и наследование, и все это за счет использования селекторов.
Селекторы CSS выбирают HTML-элементы на основе их тегов, атрибутов, классов, ID или их расположения в структуре документа. Когда селектор находит элемент, к нему применяются стили, которые были определены в соответствующем CSS-правиле.
Ниже приведен код, которые иллюстрирует то, как селекторы могут управлять различными элементами. Просмотрите его и попробуйте понять, что он делает, а затем мы разберем его по блокам.
<!DOCTYPE html>
<html>
<head>
<style>
/* Target elements with a class */ { /* Выбор элементов по классу */ }
.highlight {
background-color: yellow;
font-weight: bold;
}
/* Target elements with an ID */ { /* Выбор элементов по ID */ }
#special {
color: red;
text-decoration: underline;
}
/* Target elements based on their tag name */ { /* Выбор элементов по их тегам */ }
p {
font-size: 16px;
}
/* Target elements based on their relationship */ { /* Выбор элементов по их отношению к другим элементам */ }
ul li {
list-style-type: square;
}
/* Target elements based on attribute values */ { /* Выбор элементов по значениям атрибутов */ }
input[type="text"] {
border: 1px solid gray;
}
</style>
</head>
<body>
<h1 id="special">Welcome to my Website</h1>
<p>This paragraph will have a font size of 16 pixels.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li class="highlight">List item 3</li>
</ul>
<input type="text" placeholder="Enter your name">
</body>
</html>Пользовательские и ID-стили в CSS
Первый стиль – это пример пользовательского селектора под названием highlight.
/* Target elements with a class */ { /* Выбор элементов по классу */ }
.highlight {
background-color: yellow;
font-weight: bold;
}Этот HTML-код может выглядеть как-то так:
<li class="highlight">List item 3</li>
Далее, ID-селектор (#special):
/* Target elements with an ID */ { /* Выбор элементов по ID */ }
#special {
color: red;
text-decoration: underline;
}…будет применяться в HTML через атрибут id =:
<h1 id="special">Welcome to my Website</h1>Мы с вами уже видели, как работает привязывание стиля к элементу HTML, например, p:
/* Target elements based on their tag name */ { /* Выбор элементов по их тегам */ }
p {
font-size: 16px;
}…однако форма окраски заднего фона, применяемая к тегам <ul>, и цвет рамки поля для ввода текста контролируются вот этими двумя стилями:
/* Target elements based on their relationship */ { /* Выбор элементов по их отношению к другим элементам*/ }
ul li {
list-style-type: square;
}
/* Target elements based on attribute values */ { /* Выбор элементов по значениям атрибутов */ }
input[type="text"] {
border: 1px solid gray;
}А теперь, в придачу к HTML-фрагментам, которые мы уже изучили, мы также можем увидеть, что третий пункт списка содержит атрибут класса highlight, а значит, его фон будет желтым и квадратным. И наконец, поле <input type="text"> будет иметь серую рамку.
<body>
<h1 id="special">Welcome to my Website</h1>
<p>This paragraph will have a font size of 16 pixels.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li class="highlight">List item 3</li>
</ul>
<input type="text" placeholder="Enter your name">
</body>Если вы сохраните весь это код в файл .html и загрузите его в ваш любимый браузер, вы увидите, что все выглядит точно так, как мы задумывали. Во всяком случае, я на это надеюсь.
Как работать с псевдоклассами CSS
В CSS есть еще один тип классов – псевдоклассы. Их называют «псевдо», так как это не совсем обычные классы, это средства управления классами.
Вполне возможно, что вы уже видели, как работают псевдоклассы на страницах, которые вы посещали. Ссылки или элементы страницы будут менять свой внешний вил при возникновении в их окрестности различных действий.
Например, взглянув на этот код, вы можете увидеть, что здесь имеется определение нормального состояния, состояния при наведении, фокусе и активного состояния.
/* Normal state */ { /* Нормальное состояние */ }
button {
background-color: blue;
color: white;
}
/* Hover state */ { /* Состояние при наведении */ }
button:hover {
background-color: lightblue;
}
/* Focus state */ { /* Состояние при фокусе */ }
button:focus {
outline: 2px solid red;
}
/* Active state */ { /* Активное состояние */ }
button:active {
background-color: darkgreen;
}Возьмите эти стили CSS и примените их к простому HTML-коду. В примере ниже показано, как их можно применить к тексту кнопки Click me.
<button>Click me</button>Давайте посмотрим, как это работает.
Внешний вид кнопки в состоянии покоя (нормальном состоянии) имеет синий цвет фона и белый текст. Но когда вы наводите указателем мыши на кнопку, фон становится светло-голубым.
/* Hover state */ { /* Состояние при наведении */ }
button:hover {
background-color: lightblue;
}Если вы будете циклически перемещаться по всем элементам страницы с помощью клавиши Tab, то, дойдя до этой кнопки, состояние перейдет в режим «фокус», и обрамление кнопки станет красным.
/* Focus state */ { /* Состояние при фокусе */ }
button:focus {
outline: 2px solid red;
}А когда я попробую нажать и удержать кнопку, ее фон измениться на темно-зеленый.
/* Active state */ { /* Активное состояние */ }
button:active {
background-color: darkgreen;
}Наследование CSS
Наследование CSS – это механизм, который позволяет дочерним элементам наследовать свойства, определенные в родительских элементах. То есть если свойство задано для родительского элемента, то его значение (если оно не было переопределено) автоматически наследуется его потомками.
Наследование распространяется на различные свойства CSS, например, стили шрифтов, цвета текста и некоторые свойства макета. Например, если вы установите для родительского элемента семейство шрифтов или размер шрифта, то дочерние элементы, расположенные внутри него, унаследуют эти значение (если не было явно указано иное).
В ряде случаев определенные свойства не наследуются по умолчанию. Например, цвет фона, свойства рамок и свойства рамочной модели, как правило, не наследуются. В таком случае дочерние элементы не будут наследовать значения своих родителей, если только это не указано явно.
Наследование в CSS упрощает процесс стилевого оформления за счет того, что позволяет единожды установить свойства родительских элементов и убирает, таким образом, необходимость повторной стилизации дочерних элементов. И тем не менее, чтобы получить именно то оформление, которое вы задумывали, необходимо знать, какие свойства могут наследоваться, а какие нет.
Данный код создает стиль #parent, который устанавливает шрифт и цвет шрифта. Кроме того, он создает еще один стиль, который будет применяться к абзацам. Но этот второй стиль также является дочерним.
<style type="text/css">
#parent {
font-family: Arial, sans-serif;
color: blue;
}
p {
font-size: 24px;
}
</style>HTML существует внутри <div>, который использует атрибут id= для того, чтобы перенимать родительский стиль. Есть две строки текста, одна из которых находится внутри тега <p>, а вторая – вне.
<div id="parent">
Here is some regular text.
<p>This is a paragraph inside the parent element.</p>
</div>Когда мы загрузим наш код в браузер, мы увидим, что обе эти строки напечатаются синим цветом, а это значит, что дочерний элемент и правда перенял значения родительского элемента. Но при этом он получит более крупный шрифт. Такой способ форматирования может оказаться довольно полезным, так как вы можете контролировать общее поведение, сохраняя при этом возможность определения дополнительных элементов.
Для того, чтобы запретить наследование и установить принципиально новое значение, можно воспользоваться ключевым словом inherit, которое переопределит унаследованное значение. Более того, вы можете использовать ключевое слово initial, чтобы сбросить свойства к их значениям по умолчанию.
Еще один важный момент, который будет вдвойне полезным, если вы работаете с несколькими стилями CSS. Что будет, если между вашим встроенным CSS, несколькими отдельными CSS-файлами и слоями родительских и дочерних элементов возникнет стилевой конфликт? Ну что ж, существует набор правил, которые определяют то, как все будет обрабатываться.
Первым идет встроенный код в тегах <style>. Чем более конкретно определен селектор, тем выше будет его приоритет. Чем ниже в коде находится стиль, тем больше у него будет приоритет. И наконец, победителем всегда будет атрибут !important.
Приоритет правил в CSS
Ниже приведено краткое описание приоритета правил в CSS:
- Встроенный CSS переопределяет правила CSS в теге style и CSS-файле.
- Селектор, который был определен более конкретно, имеет приоритет над селектором, который был определен менее конкретно.
- Правила, которые появляются в коде позже, переопределяют правила, которые появились раньше (если оба имеют одинаковую конкретику).
- Правило CSS в атрибутом !important всегда имеет приоритет.
Заключение
Вы увидели, как настройка CSS-стилей с помощью таких атрибутов, как id, и применения структур, таких как псевдоклассы, может поспособствовать оживлению ваших HTML-страниц. И вы увидели, как это можно сделать с помощью селекторов CSS.
Кроме того, вы увидели, как наследование CSS может помочь вам контролировать поведение объектов на ваших веб-страницах.
Так что, вы вполне готовы к тому, чтобы приступить к созданию сложных веб-сайтов. Так, почему бы не начать уже сейчас?
