Введение в CSS

 

Шаг 1 - Введение в CSS

 

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

один из способов оформления

HTML документа. Ни более, и не 

менее. Тем не менее, философия 

этого способа радикально

отличается от типично 

разметочного "сюда мы сунем 

<b>, а сюда, пожалуй, <font

face=arial>". Недостатки такого 

подхода видны сразу - при 

попытке сменить оформление

сайта придется менять все 

страницы и все элементы, один

за другим.

 

Таблицы CSS предлагают

логический способ оформления

документа. Т.е. в любом 

правильно сосотавленном тексте

можно отделить такие понятия,

как заголовки, параграфы,

термины, ссылки друг от друга.

К тому же CSS охватывает и 

такие области, как оформление

изображений, таблиц и прочих

визуальных элементов.

 

Более того, сейчас можно с 

уверенностью  сказать, что CSS

предоставляет гораздо более 

широкие возможности  для 

форматирования, нежели

собственно  стандарт HTML. К 

тому же ситуация с разными 

браузерами, по-разному 

понимающими различные 

атрибуты CSS, понемногу 

меняется. К примеру, браузеры IE

и Opera, которыми, как ни

крути, пользуется подавляющее 

большинство серферов,

отображают простые таблицы 

CSS практически одинаково. Ну 

там, где они отображают

неодинаково, должны помочь

будущие статьи.

 

На сегодняшний день официально

принятой стандартами W3C

версией CSS является 2, а в 

разработке находится 3 версия.

Повторюсь, что не все свойства

CSS2 поддерживаются 

браузерами. Тем не менее,

некоторые свойства CSS2

являются краеугольным камнем

важных аспектов DHTML

программирования - всяких там

менюшек всплывающих,

бегающих картинок и прочего 

мельтешения на экране.

 

Для начала мы рассмотрим

простейший синтаксис CSS и 

методы подключения таблиц.

 

Синтаксис CSS

 

Сама таблица - обычный 

текстовой файл, обычно

сохраняемый с расширением ".css

". Формат таблиц практически 

свободный, что и будет показано

далее. Файл состоит из

определений, или правил (rules).

В общем виде правило выглядит

так - сначала идет selector, я 

буду называть его 

определителем, который 

обозначает, к каким именно

элементам HTML нужно

применять оформление, затем 

идет открывающая фигурная

скобка, в ней через точку  с 

запятой перечисляются 

атрибуты  оформления CSS,

затем фигурная скобка

закрывается.

 

selector {attribute-name:attribute-

definition [;attribute-name:attribute-

definition[...]]}

 

Любое количество пробельных

(символов табуляции, пробела  и 

переноса строки) может быть

вставлено между селектором,

скобкой, атрибутами. Не

допускается никаких 

непробельных символов после 

закрытой скобки. Например, в 

следующем примере символ ";"

после скобки лишний:

 

selector {attributes};

 

Примером правильного кода

может быть следующий:

 

selector1 {attribute1; attribute2}

selector2 {attribute1;attribute2

;attribute3}

 

Оформление определителя

для всех элементов одного

типа

 

Первый (простейший) способ

указания определителя - задать

оформление для всего базового

класса элементов, например

элеменов параграфа <p> и <cite>

 

p {text-align: right } cite {font-

family: monospace }

 

В данном случае все параграфы 

документа, не имеюшие

уточняющих классовых или 

идентификаторных атрибутов,

будут иметь выравнивание по

правому краю, а аналогичные 

элементы cite- форматирование

моноширинным шрифтом.

Обратите внимание, что 

конкретный шрифт не задан,

поскольку на машине

пользователя, если он

использует один из вариантов 

Unix, может и не быть, скажем,

шрифта Courier (хотя надо

сказать его клоны имеются 

практически на всех Линуксовых

дистрибутивах). Тем не менее,

текст отобразится корректно -

установленным по умолчанию в

браузере моноширинным

шрифтом.

 

... одного класса

 

Другим способом, также очень 

популярным, является

субклассирование элементов. То

есть, у Вас есть параграфы 

заголовка, параграфы цитат,

параграфы копирайта. Для 

каждого из них можно создать 

свой класс:

 

p.head {text-align: center } p.cit

{text-align: left; text-indent: 5em }

p.copy {font-size:xx-small; color:

blue }.sans {color:red}

 

После точки пишется название

класса. Если имя основного тэга

не указано (то есть перед точкой

ничего нет), то оформление

будет применяться для всех

типов элементов, имеющих 

class=classname. Выглядит это 

так:

 

<p class=head>Параграф 

заголовка <p class=cit>Параграф

цитат <p class=copy>Параграф

копирайта <a class=sans>Ссылка

класса sans</a>.

 

Следующим способом является

задание оформления для 

именованных (определенный

идентификаторами) элементов 

документа. Выглядит это так:

 

...идентификатора

 

#menu {position:absolute; top:0;

left:0; width:100; height:40}

 

А применяется  так:

 

<div id=menu>Это кусочек 

будущего меню</div>

 

Необходимо заменить, что 

каждый элемент, определенный

таким образом, является для 

браузера логически уникальным.

Поэтому использовать ID

определение с одним именем для 

нескольких  элементов крайне не

рекомендуется ввиду 

непредсказуемости реакции.

Используйте вместо этого 

определение класса.

 

Оформление  контекстного

определителя

 

Предположим, Вы хотели бы,

чтоб все  ссылки отображались

обычным шрифтом  голубого

цвета, но ссылки внутри

таблицы должны быть мельче, и 

не должны подчеркиваться.

Можно, конечно, определить для 

этого отдельный  класс, но есть

более изящное  решение - указать,

в каком  именно контексте (то

есть, внутри какого элемента)

для данного  тэга применять 

оформление. Т.е.:

 

a {color: blue; text-decoration:

underline } td a {font-size:xx-small;

text-decoration: none} td.menu a

{color:red;} td cite a {color:green;

text-decoration:overline}

 

Как видите, число вложений

неограничено. Однако я не

советовал слишком уж

увлекаться. Одного контекста 

обычно бывает вполне

достаточно (максимум двух).

Таким образом, для этой

таблицы стилей мы имеем:

 

Обычная ссылка

Ссылка внутри таблицы

Ссылка внутри таблицы и внутри

тэга cite

 

Ну и напоследок...

 

Группировка определителей

 

При необходимости, можно 

указать общее оформление для

целого набора определителей.

Ясно будет из примера:

 

a, h2, h3, td, td.menu {text-

decoration: none; font-face: Arial;

font-size:x-small}

 

Элементы a, h2, h3, td, td.menu

не будут подчеркиваться,

выводится будут шрифтом Arial,

а размер у них будет

(догадались? :) x-small.

 

И самое последнее. Все 

последующие определения с тем 

же именем (например, два подряд

определения для элемента a)

всегда добавляют оформление.

То есть если у Вас для элемента a

был введен какой-то цвет и 

шрифт, а впоследствии где-

нибудь (не обязательно в той  же

таблице) было введен атрибут 

цвета и выравнивания, то цвет и 

выравнивание изменятся, а 

шрифт останется прежним.

Вообще, любой параметр

таблицы стилей можно 

впоследствии перегрузить (в 

смысле дополнить).

 

 

Следующий Шаг | Оглавление

Автор Аванесов Самвел.

 

 

 

Шаг 2 - Подключение  таблиц

стилей

 

 

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

можно выполнять  разными 

способами. Наиболее экономный 

с точки  зрения расходования

траффика - подключение 

внешней таблицы (поскольку

файлы CSS, как  правило,

кэшируются  браузером).

Достигается это вставкой

следующего  тэга в заголовок 

(<head></head>) документа:

 

<link rel=stylesheet type=text/css hr

ef='some/where/togo/tofind/mypreci

ous/csstable.css'> <link

rel=stylesheet type=text/css

media="screen,print" href='thatswha

twe/use/for/theprinter.css'> <link

rel=stylesheet type=text/css

media="screen, aural" href='andthis/

for/both/screenandspeech.css'>

 

В данном случае первый вариант 

задает таблицу стилей по

умолчанию для всех устройств

вывода. Параметр media,

используемый для этого тэга,

позволяет задавать

предпочтительные таблицы для 

разных устройств (можно через 

запятую). Список

подтвержденных на данный

момент стандартами устройств 

вывода:

 

screen- для отображения на

компьютерных дисплеях (или 

всем, что себя самонадеянно к 

этому классу причисляет)

print- для вывода на печать

tty- для вывода на консольные 

терминалы

aural- на устройства 

звукосинтеза

projection- на проекционные 

установки

braille- на тактильные

устройства Брайля

tv- на экраны телевизоров

all- на все устройства

 

Другой вариант - описание

таблицы прямо внутри

документа HTML. Выглядит это 

так:

 

<html> <head> <style> body

{font-family: Verdana; color: black }

p {margin-left: 1.5em } </style>

<body> <p>Параграф,

выведенный  шрифтом Вердана, с 

отступом 1.5em, и черного 

цвета. </body> </html>

 

Также таблицы  можно 

импортировать методом, сходим

с препроцессорным #include.

Директива вставляется в сам 

файл таблицы  и выглядит так:

 

@import url(http://some.place.to/gr

ab/a/good.css) @import url(http://a

nother.place.to/grab/a/fine.css)

body {backgound: yellow

url(mybgpicture.png)}

 

Эффект при этом будет такой 

же, как если бы последовательно 

в таблицу было вставлено 

содержимое good.css, затем

fine.css, а затем еще добавлено 

определение для body.

 

Ну и наконец, самой последний 

(вроде бы) вариант - описание 

стиля внутри самого элемента.

Вообще, смысл этого во многом

сомнтителен, поскольку стиль 

будет применен только к 

данному элементу, и, как

следствие, утрачивается главное 

преимущество CSS - единая

логика оформления. Вместо

inlineописания лучше 

использовать определитель по id

. В любом случае всегда лучше 

иметь перед собо все 

возможности. Описание стиля в 

таком случае выглядит так:

 

<div style="font-family:fantasy;

color: red; text-align:justify"> <h1

style="font-size: xx-large">

 

 

Предыдущий Шаг | Следующий 

Шаг | Оглавление

Автор Аванесов Самвел.

 

 

 

Шаг 3 - Отображение текста -

Шрифты

 

 

Одни из наиболее часто 

используемых  свойств CSS -

атрибуты, свзязанные с 

начертанием текста. Это 

собственно  гарнитура шрифта

(имя), начертание (нормальное 

или курсивное), жирность (вес),

размер  и приведение. Особенно

ничего  нового тут нет, поэтому 

перейдем  к рассмотрению

свойств.

 

Font-family

 

Гарнитура шрифта. Включает

себя наименование шрифта или 

его стиль (семью), или и то, и 

другое  вместе. Записывается

этот атрибут  так:

 

body { font-family: "Arial Narrow",

Arial, sans-serif} p { font-family:

"Times New Roman", serif} pre

{font-family: Courier}

 

Здесь "Arial Narrow" - полное

наименование шрифта, Arial -

укороченный вариант 

(альтернативный вариант 

шрифта), sans-serif - его основной

стиль. Количество вариантов 

записи связано в первую очередь 

с тем, что конкретно этого 

(указанного в наименовании)

шрифта у пользователя может  и 

не быть, в таком случае

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

вариант, или шрифт, указанный в 

настройках браузера для данного 

стиля шрифта. В общем случае:

 

serif- шрифт типа Times New

Roman, пропорциональный, с

засечками.

sans-serif- шрифт типа Arial,

попрорциональный, рубленый.

cursive- тип Calligraph,

имитирующий рукпописный 

текст, наклонный.

monospace- моноширинный 

шрифт, как Courier New, например.

fantasy- шрифт наподобие Comic

Sans.

 

Сейчас даже на системах Linux

чаще всего  стоят шрифты,

аналогичные шрифтам Windows

(и чаще  всего с такими же 

именами). Но все равно, всегда

предпочтительней  указывать 

дополнительно generic-family

шрифта.

 

Font-Style

 

Начертание  шрифта. Вообще

говоря, бывает трех типов -

normal, italic, oblique. Но разницу 

между italic и oblique я так и не

увидел. Первый (normal) дает нам 

прямой  текст, а два остальных -

наклонный (курсивный).

Записывается  это дело так:

 

p { font-family: "Times New

Roman", serif; font-style:italic} pre

{font-style: normal}

 

Font-Variant

 

На мой взгляд, довольно

ненужный атрибут,

обозначающий приведение

текста по высоте - обычный 

(прописные  и строчные буквы) 

или smallcaps (строчные буквы 

как малые  прописные).

Записывается  так:

 

span {font-variant: smallcaps} span

{font-variant: normal}

 

... а выглядит так:

 

... Председатель призвал зал  к 

тишине. "А теперь... Выступит

заведующий Транспортным

отделом"

... Председатель призвал зал  к 

тишине. "А теперь... Выступит

заведующий Транспортным

отделом"

 

Font-Weight

 

Вес (жирность) шрифта. Вообще

говоря, может принимать 

числовые значения от 100 до

800, или же именованные: normal,

bold, bolder, lighter. Однако 

значения, отличные от bold и 

normal, как правило, внешним 

видом друг от друга не

отличаются (во всяком случае,

на экране монитора в окне

браузера). Возможно, при 

использовании CSS для 

форматирования  печатных

документов  результат будет 

виден хотя бы на печати. В 

любом случае лучше 

индивидуально все это 

проверять для данного браузера

и конкретной программы вывода

на печать. Выглядят же

различные градации жирности