Подключение CSS
Подключение CSS происходит несколькими способами, которые используются в зависимости от ситуации. Сейчас мы рассмотрим эти способы поподробнее. Информации будет довольно много, поэтому заучивать ее наизусть даже не пытайтесь, а вот разобраться что к чему, обязательно постарайтесь.
Да, и еще один момент, который уже затрагивался в предыдущем уроке, но я его повторю еще раз. Часто многие новички боятся уже одного словосочетания «Каскадные таблицы стилей» или просто «таблицы стилей», поэтому, когда они встречают подобные выражения в тексте, то подсознательно им кажется, что они не понимают о чем идет речь. Так вот, на самом деле нет никаких таблиц в том виде, к которому вы привыкли — нет. А эти слова описывают только одно — все то, что относится к CSS, то есть различные правила CSS, свойства, значения и так далее. В общем, все то, что мы с вами будем изучать в этом учебнике. Кстати, сюда же можно отнести и просто слова «CSS» и «стили».
Встроенные стили
Подключение встроенных стилей (inline) заключается в применении атрибута style к определенному тегу на странице. В этом случае значением атрибута является одно или несколько (через точку с запятой) свойств CSS с соответствующими значениями. Как правило, такой способ используется в тех случаях, когда надо изменить характеристики конкретного элемента на одной определенной странице.
Общий синтаксис
<тег style="свойство:значение; свойство:значение; ...">...</тег>Пример подключения в CSS встроенных стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Подключение встроенных стилей</title>
</head>
<body>
<p style="color:#ff0066; text-align:center">Параграф 1</p>
<p style="color:#0066ff; font-size:120%">Параграф 2</p>
</body>
</html>Результат в браузере
Параграф 1
Параграф 2
Внутренние стили
Внутренние стили указываются в «шапке» документа и подключаются с помощью тега <STYLE>. В этом случае CSS воздействует уже не на один элемент, а на все указанные в стилях элементы, которые имеются на данной странице. Обычно данный способ применяется, когда необходимо изменить стили сразу у нескольких одинаковых элементов в пределах одной HTML-странице.
Пример подключения в CSS внутренних стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Подключение встроенных стилей</title>
<style type="text/css">
body {
background: #ccccff; /* цвет фона страницы */
}
p {
color: red; /* цвет текста параграфов */
font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */
font-size: 150%; /* размер шрифта */
text-align: center; /* текст по центру */
border: 5px green double; /* стили рамки */
}
</style>
</head>
<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
</body>
</html>Результат в браузере
Параграф 1
Параграф 2
Внешние стили
Внешние стили подключаются отдельным файлом при помощи тега <LINK>. В этом случае все стили располагаются в обычном текстовом файле с расширением .css и влияют на элементы всех страниц, к которым этот файл подключается. Обычно создание стилей сайта начинается именно с этого способа, так как только с его помощью ощущаются все плюсы CSS, ведь изменяя данные всего в одном файле можно управлять отображением сразу большого числа страниц. А уже в процессе работы над сайтом добавляются внутренние или встроенные стили, если это необходимо.
При использовании внешних стилей авторы поступают совершенно по-разному. Одни хранят все стили сайта в одном файле, другие — в нескольких. Например, один файл содержит стили для всего сайта и присутствует на всех страницах, другой — дополнительно подключается только к определенным разделам, третий — к определенным подразделам и т.д. Как будете поступать вы — решать только вам.
Пример подключение в CSS внешних стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Подключение внешних стилей</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
</body>
</html>Содержимое файла style.css
body {
background: #ccccff; /* цвет фона страницы */
}
p {
color: red; /* цвет текста параграфов */
font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */
font-size: 150%; /* размер шрифта */
text-align: center; /* текст по центру */
border: 5px green double; /* стили рамки */
}Результат в браузере
Параграф 1
Параграф 2
Как видите все очень просто. Вообще, по названиям практически всех свойств CSS уже можно понять, что за изменения они осуществляют, конечно, если вы хоть чуть-чуть знаете английский.
В большинстве примеров этого учебника по CSS я буду использовать внутренние стили, так как они наиболее наглядные для демонстрации. Вам же для дальнейшего изучения лучше сразу создать файл внешних стилей и привыкать применять именно их. Например, сделайте подпапку style, в ней создайте файл style.css и подключите его к вашей HTML-странице.
Подключение CSS через правило @import
Еще один способ подключения стилей, находящихся в отдельных файлах заключается в использовании правила @import. Это правило служит для объединения нескольких таблиц стилей в одну, что иногда бывает достаточно удобно. Подключение происходит во внешние или внутренние таблицы стилей, для этого после имени правила записывается конструкция url(), где в кавычках (" ") указывается адрес файла с CSS. Либо url() вообще не пишется, а сразу идут кавычки и адрес файла. Общий синтаксис следующий.
Во внешней таблице стилей
@import url("адрес файла");
@import "адрес файла";
...Во внутренней
<style type="text/css">
@import url("адрес файла");
@import "адрес файла";
...
</style>Давайте рассмотрим использование этого правила во внешних таблицах стилей, для этого я вам приведу два примера для сравнения.
Пример 1: обычное подключение внешних стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Внешние стили</title>
<link rel="stylesheet" type="text/css" href="style/style1.css">
<link rel="stylesheet" type="text/css" href="style/style2.css">
<link rel="stylesheet" type="text/css" href="style/style3.css">
</head>
<body>
<p>Содержимое страницы.</p>
</body>
</html>Пример 2: подключение внешних стилей совместно с CSS-правилом @import
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Внешние стили с @import</title>
<link rel="stylesheet" type="text/css" href="style/style1.css">
</head>
<body>
<p>Содержимое страницы.</p>
</body>
</html>Содержимое файла style1.css
@import url("style/style2.css");
@import url("style/style3.css");
Ниже здесь дополнительно могут идти обычные стили со свойствами, значениями и т.д.
Чтобы правило @import правильно работало, оно обязательно должно указываться в самом начале таблицы стилей. Единственное исключение здесь правило @charset, которое всегда идет самым первым, правда на практике используется оно вообще крайне редко.
Не рекомендую вам сразу же использовать все это разнообразие способов подключения CSS — сконцентрируйтесь на обычных внешних таблицах стилей, так как это основной вариант. Если есть желание, то можете, конечно, поэкспериментировать, но не более того. В общем, как подключить CSS вы всегда сможете решить, главное было бы что подключать. :)
Пользовательские стили
Во многих браузерах есть возможность для подключения файла с CSS самими пользователями, чтобы они могли менять внешний вид просматриваемых сайтов, как говорится, «под себя». Например, изменить размер и гарнитуру шрифта, цвет текста и фона каких-то элементов и т.д. Естественно в этом случае стили создаются уже самим пользователем. Допустим, в Internet Explorer подключить пользовательские стили можно перейдя в: Сервис → Свойства обозревателя → Общие → Оформление.
| Что такое CSS? | ← Содержание → | Типы устройств |