Документы - Web-дизайнер

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://mysite.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). Вот так!
А как это вставить?
Сами таблицы стилей можно по-разному встраивать в ваши документы:
Связывание - это когда ваша таблица стилей расположена в отдельном файле, а вы во всех своих документах на нее ссылаетесь. Вы создаете файл, например myfile.css, в котором пишете все правила форматирования. А в своих документах, между тегами <HEAD></HEAD>,
помещаете строку:
<LINK REL="stylesheet" TYPE="text/css" HREF="myfile.css">

И все. Если надо что-то подправить, то исправляете это в myfile.css
Внедрение - вы все правила форматирования записываете в каждом документе между тегами <STYLE></STYLE>,
которые записываются между <HEAD></HEAD>,
т.е. выглядеть это будет так:
<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>


мы вставляем на случай, если браузер не распознает CSS, то он не будет извращаться над содержимым самой таблицы!
Импортирование - вы можете ссылаться на таблицу(цы), расположенную у вас на сервере. От первого способа этот отличается тем, что мы обращаемся к файлу CSS, и дополнительно можем задать еще несколько правил. Импортирование осуществляется так:
@import: url(myfile.css) А смотреться это будет так:
<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

Обратите внимание, что импорт таблицы осуществляется перед всеми другими правилами, т.е. сразу после <STYLE TYPE="text/css">
Встраивание в теги документа - довольно неудобно и неэффективно, но применяется, особенно, когда какое-то форматирование встречается редко. А заключается это в том, что прям в HTML коде, прописывая какой-то тег мы указываем и его стиль, например:
<H4 STYLE="letter-spacing: 0.5em; text-align:left; text-transform:uppercase; padding-left:35px"> Текст заголовка</H4>
Конечно тут никакого удобства не наблюдается, но иногда может понадобиться и такое... Закругляемся/ Довольно утомительно получилось, не правда ли? Но я старался как мог, и возможно все выше написанное окажется для кого-нибудь весьма полезным, а может и не окажется... Могу сказать вам одно: лучший способ разобраться - это попробовать самому, и тогда даже мои самые дремучие высказывания станут для вас понятными! Я не рассказал многого, даже ОЧЕНЬ много важного не рассказал, например про селекторы типа "CLASS", "ID", про наследование, про позиционирование, перечислил лишь мизерное число свойств элементов, но... надеюсь, прочитав эту статью вы захотите освоить CSS, и в этом вам помогут нижеприведенные ссылки.