Подключение CSS к странице

Есть четыре способа присвоения CSS стилей HTML документу. Но в наше время чаще всего используются такие методы, как встроенный CSS и внешний CSS.

Встроенный CSS - тег <style>

Задать правила CSS в HTML документе можно, используя тег <style>. Этот тег находится внутри тегов <head> и </head>. Правила, определенные с помощью этого синтаксиса будут применяться ко всем элементам, которые есть на странице. Вот общий синтаксис:

<head>
<style type="text/css" media="...">
Здесь указываются стили CSS
</style>
</head>

Атрибуты тега <style>

Атрибуты, связанные с тегом <style> смотрите в таблице ниже:

Атрибут	Значение	Описание
type	text/css	Говорит о том, что на странице используются каскадные таблицы стилей CSS. Этот атрибут является обязательным.
media	screen tty tv projection handheld print braille aural all	Определяет, как документ будет отображаться на устройствах. Значение по умолчанию "all" . Это необязательный атрибут.

Ниже - пример встраивания CSS на основе вышеупомянутого синтаксиса:

<head>
<style type="text/css" media="all">
h1{color: #36C}
</style>
</head>

Атрибут style

Вы можете использовать атрибут style для любого HTML элемента, чтобы задать правила стиля. Эти правила будут применяться только к этому элементу. Вот общий синтаксис:

Ниже пример встроенного CSS на основе вышеописанного синтаксиса:

<p style ="color:#36C; font-weight: normal;">Это встроенный CSS</p>

Это даст следующий результат:

Это встроенный CSS

Внешний CSS – тег <link>

Тег <link> может использоваться для подключения внешнего файла таблицы стилей в HTML документе. Внешняя таблица стилей является отдельным текстовым файлом с расширением ***.css.

Примечание: рекомендуется называть файл стилей style.css. Это общепринятое название.

Вы определяете все правила стиля внутри этого текстового файла, а затем можно подключить этот файл в любом HTML документе с помощью тега <link>.

Вот общий синтаксис внешнего файла CSS:

<head>

</head>

Как видно с примера, в теге <link> используются следующие атрибуты: type, media и href. С первыми мы уже ознакомились, а в атрибуте href указывается путь к файлу css. Рассмотрим простую таблицу стилей, которая находится в файле с названием style.css:

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase}

Теперь мы можем подключить файл style.css в любой HTML документ следующим образом:

<head>

</head>

Импорт CSS – правило @import

Правило @import используется для импорта внешней таблицы стилей. Это делается по аналогии как в случае с тегом <link>. Вот общий синтаксис правила @import:

<head>

<@import "URL";

</head>

В этом примере, URL является ссылкой на файл о стилями CSS. Можно использовать другой синтаксис:

<head>

<@import url("URL");

</head>

Ниже пример, показывающий, как импортировать файл стиля в документ HTML:

<head>

@import "style.css";

</head>

Комментарии в CSS

В CSS существует возможность проставления дополнительных комментариев непосредственно в таблице стилей. Таким образом, для себя можно составить какую-то заметку или для удобства разметить код CSS. На пример:

/ * Стили для заголовков* /

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase}

/*Конец стилей для заголовков*/

<<< Предыдущая статья

Меню категории

Следующая статья >>>

Ставив лайк Вы помогаете сайту :)