Таблицы 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>
|
