Подключение CSS.

В этой статье мы разберем различные способы подключения CSS стилей в HTML документ. Существует четыре способа подключения.

1. Встроенные стили

Встроенные стили используются для определения стилей элементов целой web-страницы. В теге <head> определяется тег style, в котором задаются все стили для web-страницы. Пример подключения:

<head>
<title>Пример CSS</title>
<style type="text/css">
      p {
         color: green;
      }
      a {
         color: blue;
      }
</style>
</head>

Данный способ рекомендуется избегать т.к. лучше когда HTML документ полностью свободен от элементов и атрибутов визуального представления.

2. Внутриэлементные стили

При внутриэлементном подключении стиля, он определяется непосредственно внутри тега HTML при помощи атрибута style. Рассмотрим пример где сделаем текст зеленого цвета:

<p style="color: green">текст</p>

Данный способ лучше избегать как и в первом варианте.

3. Внешние стили

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

p {
   color: green;
}

a {
   color: blue;
}

Если имя этого файла будет “style.css”, то его подключают к HTML документу следующим образом при помощи тега <link>:

<head>
   <title>Пример CSS</title>
   <link href='style.css' type="text/css" rel="stylesheet" />
</head>

Атрибут href указывает на путь до файла стилей. Тут можно указывать, как абсолютные, так и относительные пути. В данном случае подразумевается, что наш файл style.css находится в одной директории с файлом, в котором мы подключаем стили. Атрибут type=”type/css” указывает, что тип документа — css, атрибут rel=”stylesheet” говорит браузеру, что мы подключаем стили (rel с англ “relationship” — отношения).

Данный способ подключения CSS является самым лучшим т.к. эти стили подключаются отдельным файлом и как говорилось ранее может использоваться на всех страницах.

4. Импортированные стили

@import подключает одну каскадную таблицу стилей к другой. Например, если вы хотите добавить стили другой каскадной таблицы стилей к своей, то вам нужно написать:

@import url(mystyle.css);

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

<style type="text/css" media="all">@import url(mystyle.css);</style>

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: