CSS или слон в полоску...

Все, или почти все, слышали о том что есть нечто такое под названием CSS, кто-то даже знает расшифровку этой аббревиатуры: CSS - Cascade Style Sheets, а по-русски, Каскадные Таблицы Стилей. Многие также слышали, что эта технология облегчает создание и смену дизайна сайта, а дальше... Если ваши знания CSS этим и ограничиваются, то нужно срочно принять меры по устранению этой вопиющей безграмотности... Да это каждый вебмастер должен знать с пеленок, также как и HTML! Чем же они хороши, эти CSS?

Так чем же они хороши?

мысль, которая приходит при поверхностном ознакомлении с CSS, возможности форматирования текста расширяются настолько, что даже дух захватывает! Кроме того, использование CSS несколько сокращает объем HTML кода, а значит уменьшается и объем ваших страниц, но главное, вам самим будет намного проще! Вот очень жизненный пример. Допустим, вы захотели писать заголовки вразрядку, и с заглавными буквами. Вот так:

Вот такой заголовок

Для достижения такого эффекта необязательно знать CSS, это можно сделать нехитрыми дедовскими способами:

Почти такой же результат, что правда, то правда! Но одним заголовком мы не обойдемся, у нас таких будет парочка на каждой странице, а страниц десятка два. И везде мы так все это пишем. А потом, кто-то вам скажет, что заголовки ваши отвратительны, поисковые роботы не понимают, что в них написано (из-за пробелов между буквами в слове, робот воспримет это как набор букв). И вот решили вы это поменять, на всех страницах... Тяжело будет, а используя CSS можно (и нужно!) сделать это таким образом:
создаем файлик gnezdo.css, в котором делаем такую запись:
H3 {letter-spacing: 0.5em; text-transform:uppercase}
И в начале каждой нашей странички, между
<HEAD></HEAD>
помещаем такую строку:

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

И все! Теперь на всех этих страницах, когда вы просто пишете
<H2>Что-то</H2>
у вас это будет написано разреженными и большими (заглавными) буквами. Хотите что бы все заголовки были выделены другим цветом, подчеркивались и располагались всегда справа? Нет проблем! Исправляем ту несчастную строку в gnezdo.css и готово! Все наши 10, 20, 100 страниц сменили вид заголовков! И это только заголовки, а CSS позволяют определить параметры любого HTML тэга! Поэтому, не поленившись и определив большую часть своих элементов (шрифты, заголовки, фон, параграфы, цвет фона, параметры ссылок и т.д.), записав их в один файл, вы в последствии сможете изменять дизайн своего сайта в широких пределах, изменив лишь пару строк в вашем *.css файле. Неплохо, правда?

Я тоже так хочу!

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

BODY {background-color:white; font-family: Verdana, sans-serif, serif}
A:Link {color:#000}
A:Visited {color:#666}
A:Active {color:#000}
A:Hover {color:#666; text-decoration:none}

Грубо говоря, CSS это набор правил форматирования элементов HTML, и каждое такое правило состоит из двух частей: Cелектора и Определения.

Селектор - это любой тег HTML.
Определение состоит из набора свойств, и каждое свойство имеет свое значение. Должно выглядеть это так:

Селектор {свойство#1:значение#1; свойство#2:значение#2 и т.д.}

Смотрим первую строку:
BODY {background:white; font-family: Verdana, sans-serif, serif}
BODY - селектор, один из основных тегов HTML, задающий основные параметры всего документа. И что там я понаписал?
background-color:white - задаем цвет фона. Несколько основных цветов определены словесно, например, white - это тоже самое, что и #FFFFFF, поэтому можно было записать и так:
background-color:#FFFFFF

font-family: Verdana, sans-serif, serif - задаем шрифты. Можно задать конкретный шрифт (Verdana например) или просто класс шрифтов, тогда выбирается наиболее удобный шрифт из данного класса:

serif - шрифты Times и т.д.

sans-serif - шрифты Arial, Helvetica, Verdana

cursive - затрудняюсь даже пример привести, а то ляпну чего-нибудь...

fantasy - наверное вы сами догадываетесь, что это за шрифты.

monospace - например Courier

Я задал список шрифтов через строку, это значит если не будет шрифта Verdana, то броузер подбирает любой шрифт из семейства sans-serif, а если таковых тоже не окажется (что маловероятно), то из семейства serif.

Раз уж речь пошла о шрифтах... Помните был вопрос о том, как же положить на сайт шрифт, и если у посетителя необходимого нужного шрифта не окажется, то этот шрифт будет автоматически скачан сервером? Это реализуется в CSS, надо просто написать такой параметр:

@font-face { font-family: NashFont; src:url(http://nashsite.ru/NashFont.ttf)}

Хотя я не советую вам заниматься шрифтовым извратом - пытайтесь использовать общеупотребительные шрифты, и все будут довольны!

Есть еще у шрифтов и другие свойства:

font-style:
- normal - обычный, прямой шрифт
- italic - курсивный
- obligue - наклонный (легкий наклон нормального шрифта)
font-weight - жирность. Существует 9 степеней жирности - самый тощий font-weight:100, а самый жирный font-weight:900 (т.е. числа 100, 200 и т.д.). Например bold соответствует 700, а normal 400.
font-size - размер шрифта (там есть тонкости относительно единиц измерения, посмотрите сами)
font-variant - задание капители шрифта (значения: или normal - ничего не меняет, или small-caps - все строчные буквы выглядят как прописные, но у них меньший размер и несколько изменены пропорции)

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

Так о чем это я?

Если вы помните, то начинали мы с форматирования тега BODY - это меня не в ту степь занесло! К тому что там написано можно прибавить еще одно свойство - загрузка фонового рисунка (если он нужен), тогда вместо
{background-color:white}
надо написать следующее:
{background-color:white; background: url(http://mysite.ru/textura.gif)}
Т.е. мы устанавливаем белый фон и текстуру, если вдруг картинка не загрузится, то будет просто белый фон. Существует еще несколько свойств для работы с текстурой (каким образом ее копировать, будет ли она подвижной и т.д.), но не буду на это отвлекаться. Если же вдруг вы нигде этого не найдете - напишите мне, расскажу...

Оформление ссылок

A:Link {color:#000} - цвет ссылок. "#000", "#666", "#FFF" - это соответствует "#000000" , "#666666", "#FFFFFF" и т.д.(можно не выпендриваться и писать без сокращений: #000000, #009933 и т.д.) Т.е. ссылки у меня тут черные. Можно при желании определить и шрифт, которым они будут отображаться (см. выше - правила, свойства, значения для всех одинаковы).

A:Visited {color:#666} - цвет посещенной ссылки (можно и тут шрифт поменять!)

A:Hover {color:#666; text-decoration:none} - а это уже намного интереснее! Свойства ссылки, на которую наведен курсор мыши. У меня тут меняется цвет и исчезает подчеркивание ссылки, это достигается с помощью свойства text-decoration, которое может иметь следующие значения:

text-decoration:underline - подчеркивание

text-decoration:line-through - перечеркивание

text-decoration:overline - подчеркивание, но не снизу (как обычно), а сверху!

text-decoration:none - нет никаких текстовых финтифлюшек (поэтому и ссылка становится неподчеркнутой).

Довольно интересно и такое свойство:

text-transform:uppercase - ВСЕ БУКВЫ становятся заглавными

text-transform:lowercase - все буквы маленькие (прописные)

text-transform:capitalize - Каждое Слово В Предложении начинается с большой буквы

Показательное вскрытие...

Надеюсь, что у вас теперь есть с чем и над чем поэкспериментировать! Напоследок такой примерчик:

H4 {letter-spacing: 0.5em; text-align:left; text-transform:uppercase; padding-left:35px}

Я не буду объяснять все свойства, лишь перечислю. Этот заголовок H4 будет писаться разреженными буквами (letter-spacing: 0.5em), с промежутками между буквами 0.5 высоты самой большой буквы, причем все буквы будут заглавными (text-transform:uppercase), сам заголовок будет располагаться слева (text-align:left), с отступом от внешней левой границы 35 пикселей (padding-left:35px). Вот так!