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

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

Подключение 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 элемента, чтобы задать правила стиля. Эти правила будут применяться только к этому элементу. Вот общий синтаксис:

<element style="Здесь указываются стили CSS">

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

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

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

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


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

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

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

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

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

<head>

<link type="text/css" href="..." media="..." /> 

</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>

<link type="text/css" href="style.css" media="all" />

</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}

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


<<< Предыдущая статья Меню категории Следующая статья >>>

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

Статьи по теме:
Рейтинг:
5.0/5 из 2
Категория: Учебник CSS | Добавил: zaharchuk (21.01.2015)
Просмотров: 967
Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]