Всё для Web Дизайнера - CSS: назначение CSS, cпособы применения CSS,синтаксис, переопределение и наследование описаний, понятие блочного и строкового элемента, свойства блочных элементов(block или box), отступы(margin), набивка(padding), границы(border), обтекание(float,clear), цвет, цвет текста(color), цвет фона текста(background-color), шрифт(font), гарнитура(font-family), кегль(font-size), начертание(font-style,font-variant,font-weight), свойства текста, межбуквенные расстояния, выравнивание, трансформации(подчеркивание, прописные, строчные), первая строка параграфа, высота строки, списки и отображение элементов, форма "пулек", пульки"-картинки, позиционирование, координаты и размеры, управление видимостью,порядок наложения.

Программирование

Web мастеру

3D Графика и анимация

Назад Читать дальше
На главную страницу > > В раздел программирование > > В раздел CSS

Способы применения CSS.

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

Итак, различают четыре способа применения стилей:

переопределение стиля в элементе разметки
размещение описания стиля в заголовке документа в элементе STYLE
размещение ссылки на внешнее описание через элемент LINK
импорт описания стиля в документ

Здесь мы следуем за George Young из Microsoft (Cascading Style Sheets in Internet Explorer 4.0. Microsoft, 1997). Следует отметить, что импорт стиля не поддерживается в браузерах других производителей. Однако, т.к. патент на CSS1 принадлежит Microsoft, опустить импорт в нашем описании мы считаем неправильным.

Переопределение стиля

Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки:

<h1 style="font-weight:normal;
font-style:italic;
font-size:10pt;">
Заголовок первого уровня
</h1>

Заголовок первого уровня

Атрибут style можно применить внутри любого элемента разметки. Например, мы можем через style определить ширину и выравнивание элемента hr(горизонтальное отчеркивание):

<hr style="width:100px;">

Очевидно, что не всякие параметры стиля можно установить для конкретного элемента разметки. О типах элементов и соответсвующих парамерах стилей мы поговорим в разделе "Понятие блочного и строкового элемента".

Здесь же следует отметить следующее: стили разработаны в первую очередь для управления отображением текста. Не следует увлекаться стилями при управлении отображением нетекстовых элементов HTML-разметки.

[ начало страницы ]

Элемент STYLE

Применение элемента STYLE - это основной способ внедрения каскадных таблиц стилей в ткань HTML-документа. Кроме управления отображением элементов разметки элемент STYLE позволяет описывать стилевые свойства элементов, которые можно изменять при программировании на JavaScript.

Элемент STYLE позволяет определить стиль отображения для:

стандартных элементов HTML-разметки
произвольных классов (селектор class)
HTML-объектов (селектор id)

К сожалению, работа с селекторами в браузерах различных производителей может преподнести различного рода сюрпризы. Особенно это касается работы с селектором ID. Будем считать правильной интерпретацию Microsoft как держателя патента на спецификацию CSS.

Понятие селектора, применение селекторов и формальный синтаксис CSS мы обсудим в разделах "Синтаксис" и "Наследование и переопределение".

Стандартные элементы разметки описываются в элементе STYLE следующим способом:
<head>
<style>
p {color:darkred;text-align:justify;font-size:8pt;} </style>
</head>
<body>
...
<p>
Этот параграф мы используем в качестве примера применения описания стиля для стандартного элемента HTML-разметки.
</p>
...
</body>

Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет переопределен каким-либо способом. В STYLE можно определить стиль любого элемента разметки.

[ начало страницы ]

Ссылка на внешнее описание

Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. Внешнее описание может представлять из себя файл, содержание которого - описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.

Ниже приведен пример ссылки на внешнее описание стилей:

<link type="text/css" rel="stylesheet" href="http://kuku.ru/my_css.css">

Важными здесь являются значения атрибутов rel и type. Rel обязан иметь значение "stylesheet". Type может принимать значения: "text/css" или "text/javascript". Второй тип описания стилей введен Netscape. Его мы в данном учебном курсе не обсуждаем.

Атрибут href задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.

[ начало страницы ]

Импорт описания стилей

Импорт описателей стилей - это в некотором смысле конкурент описанному выше указанию на внешний описатель стиля.

Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:

<style>
@import:url(http://kuku.ru/style.css)
a {color:cyan;text-decoration:underline;}
</style>

Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента style.

Назад Читать дальше

На главную страницу > > В раздел программирование > > В раздел CSS