Назначение языка css
 Скачать 1.07 Mb.
|
|
Каскадные таблицы стилей Назначение языка CSSЯзык HTML позволяет описать структуру м содержание документа (что и в какой последовательности разместить в окне браузера) Первоначально язык HTML описывал еще и представление документа (атрибуты height, width, bgcolor; теги font, b…) Начиная с версии HTML 3 язык разметки тесно интегрируется с языком описания Каскадных Стилевых Таблиц (Cascading Style Sheets, CSS) Из назначение – описание внешнего вида эле-ментов документа и места его размещения в окне Почему CSSКаскадные Элементам могут соответствовать несколько стилевых правил (каскад). Таблицы Способ описания представления элемента напоминает таблицу с заголовком – селектором элемента и строками, описывающими тот или иной аспект его представления #parent { color: red; } div { border: 1px solid black; } … Стилей Описание внешнего вида элементов (стиля оформления) сводится к формальному описанию на основе правил и определений CSS Преимущества CSSОтделение представления о разметки позволяет гибче настраивать внешний вид документа - изменение стилевого оформления не влияет на разметку Стилевое оформление позволяет адаптировать внешний вид к носителю, на котором будет отображаться страница Стилевое оформление позволяет вносить динамику в отображение документа (например, псевдокласс :hover) Иерархия описания стилей позволяет наследовать способы представления элементов от контейнера к внутренним элементам Возможность определения альтернативных стилей для документа позволяет варьировать его внешний вид Способы описания CSSВ документе стили можно описывать тремя способами: 1. В виде ссылки на внешний файл 2. Определение таблиц стилей в теге style в теле самого документа (обычно в теге head) 3. Описать стиль элемента в его атрибуте style Внешний блок 4. В таблицу, описанную по варианту 1 или 2 можно импортировать внешнюю таблицу стилей с использованием команды @import @import “dialogs.css” @import url(“http//www.sit.com/outer.css”) Использование внешних файлов со ссылками предпочтительно из-за их кеширования браузером Описание стиля CSSТаблица стилей строится из совокупности описаний, состоящих из селектора и определения шаблона: Селектор задает условие отображения стиля в виде имени тега, названия класса или идентификатора элемента Определение шаблона заключается в {} и содержит перечисленные через ; описания стилевых правил в формате Свойство: Значение H1 {font-size: 18px; color: grey;} селектор - тег .infoBlock {background: yellow;} селектор - класс #wrapper {padding: 10px; width: 75%;} селектор - идентификатор
Новости |