1. Тег <style>
Если у HTML-элемента слишком много стилей, то можно вынести их в специальный элемент — тег style. Его обычно размещают в теге <head> и выглядит он так:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Пример CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Это пример использования стилей в теге <style>.</p>
</body>
</html>
Теперь можно не писать длинную строчку стилей для тега <body> внутри его атрибута style, а перенести их в тег style. Это очень удобно.
То же самое касается и тега <p> (параграф). Более того, стиль, прописанный в теге <style> в <head>, будет применяться вообще ко всем параграфам в документе, даже если их будет несколько тысяч. А все потому, что в теге <style> стили описаны внутри селекторов.
1.2 Селекторы
Селекторы — это способ выбора элементов HTML, к которым будут применяться CSS-свойства. Существуют различные типы селекторов:
Селектор тега
Применяет стиль ко всем элементам определенного типа. Вы просто указываете название тега и фигурные скобки после него.
tagname {
// стили
}
tagname может быть любым: body, image, a, p, … любым
Селектор класса
Тоже можно привязать CSS-свойства не к какому-то тегу, а просто дать группе CSS-свойств какое-то имя. Такая группа в CSS называется классом. Применяется такой стиль ко всем элементам с определенным классом. Классы задаются атрибутом class в HTML.
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">Это важный текст.</p>
<p>Это обычный текст.</p>
</body>
</html>
В примере выше жирным будет выделен только текст первого параграфа, к которому применили стиль/класс «important». У второго параграфа такого стиля нет.
При описании стилей в теге <style> можно задать его 3 способами:
- tagname { …}
- tagname.classname { …}
- .classname { …}
Подробнее тему с селекторами мы с вами разберем, когда будет изучать CSS. Сейчас же я вам об этом рассказываю, поскольку в HTML-примерах будет встречаться CSS, и я часто буду выносить его в тег style и использовать селекторы для назначения стиля определенному HTML-элементу.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ