Wiki-учебник по веб-технологиям: CSS/Стили ...

Главная | |

Предназначение стилей


Язык HTML был создан для описания содержимого документа. Его теги были предназначены для определения «заголовка», «параграфа», «таблицы» (<h1>, <p>, <table> и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится браузер.

Но это породило процесс создания своих тегов и атрибутов к исходной спецификации HTML-браузерами Netscape и Internet Explorer (такие, например, как тег <font> и атрибут color), что затруднило создание Web-сайтов, на которых содержимое документов HTML было четко отделено от уровня представления документа.

В этой ситуации консорциум W3C создала при разработке стандарта HTML 4.0 каскадные таблицы стилей.

Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии CSS.

Сегодня эту технологию поддерживают все основные браузеры (Internet Explorer, Mozilla Firefox, Opera и др.).

Таблицы стилей могут существенно сократить объем работы

Таблицы стилей определяют вывод элементов HTML (как, например, тег font и атрибут color в HTML 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .css. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в Web, редактируя только один, единственный документ CSS.

Приоритет использования стилей

Для каскадных таблиц стилей определен приоритет использования. Если для элемента HTML определено более одного стиля, то все стили будут последовательно «каскадированы» в новую «виртуальную» таблицу стилей, согласно следующим правилам:

Эти правила определяют порядок увеличения приоритета стилей.

Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, т.е. будет переопределять стиль, который объявлен в теге <head>, во внешней таблице стилей или в браузере (значение по умолчанию).

Синтаксис

Синтаксис CSS состоит из трех частей: селектора, свойства и значения:

селектор {свойство: значение} 


Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.
p {font-size: 75%} 

h1 {font-family: "lucida calligraphy"} 

table { font-family: arial, "sans serif"; border-style: dotted} 

h2
{
font-family: arial;
margin-right: 20pt;
color:#ffffff } 

sans serif:
p,table,li
{
font-family: "sans serif";
} 


Селектор класса (class)

При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.

Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей:

h1.steleft {margin-left: 10pt}
h2.steright {margin-left: 20pt} 


Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:
<h1 class="steleft">
Заголовок с внешним отступом 10 пунктов.
</h1>
<h2 class="steright">
Заголовок с внешним отступом 20 пунктов.
</h2> 


В тоже время не допускается следующее определение атрибута class:

< h1 class="steleft" h2 class="steright"> 


т.е. можно определить только один атрибут class

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

left {margin-left: 40pt} 


В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.

В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе “.left”:

<table class="left">
Эта таблица будет иметь внешний отступ, равный 40 пунктам.
</table>

<p class="left">
Этот параграф будет иметь внешний отступ, равный 40 пунктам.
</p> 


Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.

Селектор идентификатора (id)
Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #.

Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением “fontsz”:

#fontsz{font-size: 50%} 


Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением “first”:

ul#first
{
list-style: disc;
color: #ffffff
} 


Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.