Существует несколько способов задания стилей, которые различаются своими возможностями и приоритетом.
- Связанные стили
- Глобальные стили
- Встроенные (внутренние, inline) стили
- Импорт 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;
}
Приоритет использования стилей
- Связанные стили.
- Импортированные стили.
- Внедрённые стили.
- Встроенные стили
Т.е. у встроенных стилей самый высокий приоритет, они перекрывают остальные, далее идут внедренные, потом ипортированные и на последнем месте связанные