Способы задания CSS-стилей

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

  1. Связанные стили
  2. Глобальные стили
  3. Встроенные (внутренние, inline) стили
  4. Импорт CSS

Связанные стили

задаются в отдельном файле *.css ссылка на файл помещается в тег <head>
вот так:

<link rel="stylesheet" href="http://site.ru/mysite.css">
<link rel="stylesheet" href="http://www.site.ru/main.css">


пути могут быть абсолютными и относительными, возможно подключение таблицы стилей с другого сайта

Глобальные стили

При использовании глобальных стилей, они описываются непосредственно в теге <head>

<!DOCTYPE HTML>
<html>
<head>
<style>
H1 {
бла-бла
}
</style>
</head>

 

Встроенные (внутренние, inline) стили

Встроенные стили ставятся прямо в тег, например:

<p style="font-size: 200%; font-family: Georgia, serif; color: #red">
Текст абзаца 
</p>

использование встроенных стилей следует избегать, т.е. можно но не желательно.

Импорт CSS

Команда @import позволяет импортировать стили из внешнего файла в глобальные стили или в таблицу стилей

@import url("newstyle.css");
@import "newstyle.css";

например, импорт в глобальные стили:
  

<style>
   @import url("style/newstyle.css");
   H1 { 
    font-size: 110%; 
    font-family: Georgia, serif; 
    color: gray; 
   }


импорт в таблицу связанных стилей

@import "/style/newstyle.css";
body  {
 font-family: Georgia, serif; 
 font-size: 110%;
 color: gray;
}

 

Приоритет использования стилей

  1. Связанные стили.
  2. Импортированные стили.
  3. Внедрённые стили.
  4. Встроенные стили

Т.е. у встроенных стилей самый высокий приоритет, они перекрывают остальные, далее идут внедренные, потом ипортированные и на последнем месте связанные

 

Категория: CSS - заметки
Время чтения: 1 мин