» читаем |
 |
|
 |
» голосуем |
 |
|
 |
» новости |
 |
|
 |
» подписываемся |
 |
|
 |
|
 |
 |
А как это вставить?
Автор: Green Kakadu (gnezdo@webscript.ru)
Дата публикации: 03/02/2002
Категория: Web-Стройка
Версия для печати
Сами таблицы стилей можно по-разному встраивать в ваши документы:
Связывание - это когда ваша таблица стилей расположена в отдельном файле, а вы во всех своих документах на нее ссылаетесь. Вы создаете файл, например myfile.css, в котором пишете все правила форматирования. А в своих документах, между тегами
<HEAD></HEAD>,
помещаете строку:
<LINK REL="stylesheet" TYPE="text/css" HREF="myfile.css">
И все. Если надо что-то подправить, то исправляете это в myfile.css
Внедрение - вы все правила форматирования записываете в каждом документе между тегами
<STYLE></STYLE>,
которые записываются между
<HEAD></HEAD>,
т.е. выглядеть это будет так:
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY {background-color:white; font-family: Verdana, sans-serif, serif}
A:Link {color:#000}
A:Visited {color:#666}
A:Active {color:#000}
A:Hover {color:#666; text-decoration:none}
И т.д
-->
</STYLE>
</HEAD>
<!-- и -->
мы вставляем на случай, если браузер не распознает CSS, то он не будет извращаться над содержимым самой таблицы!
Импортирование - вы можете ссылаться на таблицу(цы), расположенную у вас на сервере. От первого способа этот отличается тем, что мы обращаемся к файлу CSS, и дополнительно можем задать еще несколько правил. Импортирование осуществляется так:
@import: url(myfile.css)
А смотреться это будет так:
<HEAD>
<STYLE TYPE="text/css">
<!--
@import: url(myfile.css)
BODY {background-color:white; font-family: Verdana, sans-serif, serif}
A:Link {color:#000}
A:Visited {color:#666}
A:Active {color:#000}
A:Hover {color:#666; text-decoration:none}
И т.д
-->
</STYLE>
</HEAD>
Обратите внимание, что импорт таблицы осуществляется перед всеми другими правилами, т.е. сразу после
<STYLE TYPE="text/css">
Встраивание в теги документа - довольно неудобно и неэффективно, но применяется, особенно, когда какое-то форматирование встречается редко. А заключается это в том, что прям в HTML коде, прописывая какой-то тег мы указываем и его стиль, например:
<H4 STYLE="letter-spacing: 0.5em; text-align:left; text-transform:uppercase; padding-left:35px"> Текст заголовка</H4>
Конечно тут никакого удобства не наблюдается, но иногда может понадобиться и такое...
Закругляемся/
Довольно утомительно получилось, не правда ли? Но я старался как мог, и возможно все выше написанное окажется для кого-нибудь весьма полезным, а может и не окажется... Могу сказать вам одно: лучший способ разобраться - это попробовать самому, и тогда даже мои самые дремучие высказывания станут для вас понятными! Я не рассказал многого, даже ОЧЕНЬ много важного не рассказал, например про селекторы типа "CLASS", "ID", про наследование, про позиционирование, перечислил лишь мизерное число свойств элементов, но... надеюсь, прочитав эту статью вы захотите освоить CSS, и в этом вам помогут нижеприведенные ссылки.
Каталог Гнездо: Вебмастеру - раздел каталога Гнездо, где вы сможете отыскать ссылки на статьи, вебмастерскую литературу, тематические сайты
Каскадные таблицы стилей. Учебник
- Учебник по CSS. Всем рекомендую скачать (200 kb). Очень приятно оформленный, с примерами.
И там изложены необходимые основы - он просто необходим!
Спецификация CSS2 (webclub.ru) -
Такое всегда полезно иметь под рукой!
CSS home page
- Официальная домашняя страница CSS - тут вы сможете узнать последние события из жизни CSS
 страницы: 1 2
Статьи по теме:
|
|