CSS (англ. "Cascading Style Sheets" - каскадные таблицы стилей) служит для дополнения HTML, т.е HTML и CSS взаимодействуют вместе. С помощью CSS задается оформление страниц, либо их отдельных элементов (заголовков, изображений и т.д.).
Привязка стилей к документу
Существует несколько способов добавления стилей в документ. Первый и наиболее часто используемый вариант - присоединение отдельного файла CSS с помощью тега <link>:
<link rel="stylesheet" type="text/css" href="styles/style.css">
Мы используем атрибуты rel со значением stylesheet, указываем тип содержимого (type="text/css") и путь к css-файлу, в моем случае это файл style.css, находящийся в папке styles.
Для того чтобы создать css-файл, откройте свой любимый текстовый редактор (вполне подойдет "Блокнот" ), введите в нем параметры оформления и сохраните этот файл с расширением .css
Примечание: такой файлик должен содержать только правила оформления селлекторов и больше ничего. Все очень легко, позже убедитесь сами ;).
Второй способ заключается в задании стилей в самом документе, а именно в его заголовке (между тегами <head> и </head>). Делается это при помощи тега <style>:
<style type="text/css">
Параметры оформления...
</style>
Третий способ заключается в применении атрибута style в самом элементе:
<h1 style="параметры оформления...">Заголовок</h1>
Примечание: не путайте тег <style> и атрибут тега style!
И наконец последний способ привязки стилей - импортировать стили в документ. Делается это с помощью команды @import. Эту команду возможно использовать для привязки стилей в css-файл, либо между тегами <style> и </style>.
Примеры использования @import:
<style>
@import url("styles/style.css") /* Импортирование стилей из css-файла style.css в документе */
Другие параметры оформления...
</style>
@import url("styles/style.css") /* Импортирование стилей внутри css-файла */
Другие параметры оформления...
Примечание: по моим наблюдениям, @import используется реже всего. Предыдущих трех способов привязки стилей вам вполне хватит.
Синтаксис CSS
Рассмотрим синтаксис CSS:
Селектор { параметр1: значение; параметр2: значение; ... параметрN: значение;}
Также возможна такая запись:
Селектор {
параметра: значение;
имя_параметра2: значение;
...имя_параметраN: значение;
}
Как видите, после селектора, который может быть тегом, идентификатором (id) или классом (их рассмотрим позже) идет фигурная скобка, за ней идет имя параметра, далее двоеточие и значение. Параметры отделяются друг от друга точкой с запятой.
В тегах с ипользованием атрибута style запись будет выглядеть так:
<имя_тега style="параметр: значение; параметр2:значение; ...параметрN: значение">...
Примечание: атрибут style действует только в том теге, в котором он был записан. Помните об этом!
Покажу более наглядно:
Обычный заголовок h4 без применения стилей
Подчеркнутый заголовок h4 красного цвета
<h4 style="color: red; text-decoration: underline;">Подчеркнутый заголовок h4 красного цвета</h4>
Здесь мы делаем заголовок <h4> красным и добавляем к нему подчеркивание.
Примечание: не злоупотребляйте применением в тегах атрибута style, т.к. это не способствует хорошей читаемости кода, да и страницы от этого "разбухают". Старайтесь выносить параметры либо в css-файл, либо в тег <style>.
Для того чтобы сделать все заголовки h4 красными и подчеркнутыми, в документе нужно сделать такую запись:
<style>
h4 { color: red; text-decoration: underline; }
</style>
Либо в css-файле:
h4 { color: red; text-decoration: underline; }
Примечание: не забудьте привязать файл к документу с помощью <link>.
Что узнали
В этом уроке мы рассмотрели, что такое CSS и для чего оно нужно, научились привязывать разными способами стили к документу. Также были рассмотрены основы синтаксиса CSS и на примере заголовка h4 увидели наглядное применение CSS.