К примеру, зададим особый стиль для тега <b>. Этот тег выделяет текст жирным. А мы сделаем такой текст ещё и красным. Для этого используем следующий CSS код:
b {
color: red;
}Строчка «color: red;» называется свойством и его значением. Нетрудно догадаться из названия, что это свойство отвечает за цвет. А значение, которое пишется через двоеточие, делает его красным. В итоге, на странице браузера текст, выделенный тегом <b>, будет автоматически становиться красным:
Часть текста выделена жирным шрифтом
Есть возможностьзадавать сразу несколько свойств для одного селектора. Тогда надо разделять из через точку с запятой «;«. Об этом читайте далее в статье.
Где хранится CSS код?
Стили для элементов страницы задаются несколькими способами. Самый простой — это внутри тега <style> в любом месте страницы. В таком случае HTML код выглядит так:
<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
<style>
b {
color: green;
font-size: 120%;
}
i {
color: red;
font-size: 80%;
}
</style>
</body>
</html>Свойство «font-size: 120%;» задаёт размер шрифта относительно общего размера шрифта. При значении больше 100% оно увеличивает шрифт. Получится такой результат:
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха.В этом примере продемонстрировано как задавать несколько свойств для разных селекторов. Обратите внимание, что свойства применяются ко всем тегам на странице.
Тег <style>, внутри которого пишется CSS код, может быть где угодно на странице. Часто этот тег ставят в раздел <head>.
CSS правила могут переопределять друг-друга. Если несколько раз написать один и тот же селектор с одним и тем же свойством, то применится только последний:
b {
color: red;
}
b {
color: green;
}— в таком случае текст внутри тега <b> будет зелёным, а не красным, потому что значение свойства будет переопределено последним совпадением.
При таком способе записи CSS и HTML перемешиваются, что сильно усложняет работу программисту. Логичным выходом является сбор всех стилей в одно место. А точнее — в один отдельный файл, который загружается при загрузке страницы. Такой файл можно подключить к HTML с помощью тега <link> внутри блока <head>:
<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
<link rel="stylesheet" href="
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
</body>
</html>На пятой строчке примера видно, что в блоке <head> появился подключаемый файл со стилями:
<link rel="stylesheet" href="По аналогии со ссылками в href=» можно писать как относитльный путь к файлу стилей, так и абсолютный.
Подключаемый файл стилей «style.css» будет содержать всё, что было внутри тега <style>…</style> из предыдущего примера. То есть:
b {
color: green;
font-size: 120%;
}
i {
color: red;
font-size: 80%;
}Последний способ указать CSS свойство — это непосредственно внутри тега, в атрибуте style=». В таком случае свойством будет обладать только один тег, а не все теги на странице. Применять это можно так:
Часть текста <b style="color: red;">выделена</b> жирным шрифтомМожно указать сразу несколько свойств через «;«. Результат на странице будет таким:
Часть текста выделена жирным шрифтом
