Главная :: Архив рассылки :: Стильные сайты. Каскадные таблицы стилей.

Стильные сайты. Каскадные таблицы стилей.

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию восьмой выпуск рассылки "Уроки веб-дизайна в примерах".

Содержание выпуска:

Стильные сайты. Каскадные таблицы стилей.
Подключение каскадных таблиц стилей.
Анонс следующего выпуска.
Полезные ссылки.

Стильные сайты. Каскадные таблицы стилей

CSS (Cascading Style Sheets - Каскадные таблицы стилей) - это набор правил оформления и форматирования HTML страницы, позволяющий определять свойства элементов HTML для целого документа. В CSS Вы один раз описываете характеристики объекта и связываете объект со стилем. Для того, чтобы поменять характеристики объекта достаточно изменить описание стиля.

Подключение каскадных таблиц стилей

Существует четыре способа подключения CSS к документу:

Связывание - таблица стилей располагается в отдельном файле, который можно подключить к любому количеству HTML страниц.
Внедрение - табица стилей располагается непосредственно внутри HTML документа.
Встраивание в теги документа - позволяет определить оформление отдельных элементов страницы.
Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.

Связывание. Если Вы предполагаете использовать один стиль для нескольких станиц, то Вы можете описать стиль в отдельном файле. Для подключения стилевого файла используется команда <LINK>, расположенная внутри тега <HEAD>.

Первые два свойства указывают браузеру, что на страничке используется CSS. Значение последнего свойства - имя файла (с путем, абсолютным или относительным), в котором прописан стиль страницы.

Внедрение. Если Вам нужно задать стиль только для одной страницы, то описание стиля Вы можете внедрить в тело документа, в заголовке HEAD, между тегами <STYLE TYPE="text/css"> и </STYLE>.

Встраивание в теги документа. Вы можете задать стиль отдельно выбранного элемента в свойстве STYLE тега этого элемента, например:

Код	Отображение
<SPAN STYLE="color:red;background-color:yellow;font-variant:small-caps">Красный текст на желтом фоне, маленкими заглавными буквами.</SPAN>	Красный текст на желтом фоне, маленкими заглавными буквами.

Стоит отметить, что данный способ нарушает идеологию использования стилей (их универсальность), поэтому использование его не желательно (хотя, если редко и никому не говорить, то можно :).

Импортирование. В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей: @import: url(styles.css); Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей.

Анонс следующего выпуска

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

Полезные ссылки

Уроки по веб дизайну. Еженедельные обновления. Многое, что не вошло в выпуски рассылки, вы найдете на этом сайте. Если у Вас есть тематический сайт, предлагаю обмен ссылками.
Информационный сайт. Здесь каждый может разместить свою информационно-образовательную статью. Присоединяйтесь.
Рекламный брокер. Начни получать деньги от своего сайта уже сейчас.
Качественный, недорогой хостинг. Рекомендую.
Интернет приносящий доход + партнерская программа + обмен ссылками.

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").