Таблицы CSS
Таблицы CSS делятся на два вида, в зависимости от места их размещения.
Внешние таблицы стилей
Внешние таблицы CSS хранятся в отдельном файле, который имеет расширение .css (например, style.css).
ПРИМЕР 1:
body { background: #FFFFFF; color: #000000; font: serif } a { color: Blue } p { margin: 0.95em 0.15em; font: serif; text-indent: 0.5em; text-align: justify } |
Для того, чтобы "привязать" таблицу CSS к конкретной html-странице, используют метатег LINK, который встраивается в секцию HEAD html-страницы:
ПРИМЕР 2:
<HEAD> ... <link rel="stylesheet" href="style.css" type="text/css"> ... </HEAD> |
Адрес файла таблицы стилей style.css прописан в атрибуте HREF. Веб-мастер должен следить, чтобы путь к файлу таблицы стилей был прописан правильно для каждой конкретной html-страницы. Чтобы не было путаницы, рекомендуется указывать абсолютный адрес, например href="http://my-site.com/style.css". Остальные атрибуты тега LINK не изменяются.
При необходимости, можно к html-странице, привязывать несколько таблиц CSS:
ПРИМЕР 3:
<HEAD> ... <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style-2.css" type="text/css"> <link rel="stylesheet" href="style-3.css" type="text/css"> ... </HEAD> |
Главное преимущество внешних таблиц стилей состоит в том, что они привязываются ко всем html-страницам веб-сайта. Таким образом, веб-мастер, изменяя файл таблицы CSS, сразу меняет вид всех страниц сайта.
Недостаток у внешних таблиц стилей всего один - в случае утери файла таблицы стилей, весь сайт лишается своего оформления.
Внутренняя таблица стилей
Внутренние таблицы CSS встраиваются непосредственно в html-код веб-страницы. Селекторы таблицы встраиваются в парный тег STYLE, который помещается в секцию HEAD.
ПРИМЕР 4:
<HEAD> ... <STYLE> body { background: #FFFFFF; color: #000000; font: serif } a { color: Blue } p { margin: 0.95em 0.15em; font: serif; text-indent: 0.5em; text-align: justify } </STYLE> ... </HEAD> |
Главное преимущество внутренних таблиц стилей состоит в том, что они встроены в тело html-страницы, поэтому, никогда не "потеряются".
Недостатки внутренних таблиц CSS:
- несоответствие концепции Web 2.0,
- внутренние стили воздействуют только на ту html-страницу, в теле которой они находятся.
В одной и той же html-странице можно использовать как внутренние, так и внешние таблицы CSS. В таком случае действие таблиц складывается по определенным правилам, которые будут рассмотрены на других уроках.
ПРИМЕР 5:
<HEAD> ... <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style-2.css" type="text/css"> <link rel="stylesheet" href="style-3.css" type="text/css"> <STYLE> body { background: #FFFFFF; color: #000000; font: serif } a { color: Blue } p { margin: 0.95em 0.15em; font: serif; text-indent: 0.5em; text-align: justify } </STYLE> ... </HEAD> |