Глава 7. Каскадные таблицы стилей — CSS

⇐ ПредыдущаяСтр 41 из 44Следующая ⇒

Что такое CSS и для чего это нужно? CSS — Cascading Style Sheets, что означает дословно «каскадные таблицы стилей». Смысл — описывается стиль всего документа или сайта в целом, либо отдельных его элементов. Т.е. вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут их! ). И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк!

Чтобы сразу объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая страница:

< HTML>

< HEAD>

< TITLE> Изучим таблицы стилей! < /TITLE>

< /HEAD>

< BODY>

< H1> Большой заголовок< /H1>

< H2> Заголовок поменьше< /H2>

< P> А это уже абзац — самый обычный абзац.< /P>

< /BODY>

< /HTML>

А теперь где-нибудь в заголовке страницы (т.е. в секции HEAD ) разместим тэг < STYLE>:

< STYLE TYPE=" text/css" >

<! --

H1 {font-size: 40px; background: red; text-align: right;

font-family: helvetica, arial, sans-serif}

H2 {font-size: 20px; font-style: italic; font-family: helvetica,

arial, sans-serif}

P {background: silver; text-align: center; font-family: courier,

fixed, monospace}

-->

< /STYLE>

Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика! ), а можете сразу посмотреть этот пример в действии.

Теперь разберем этот пример подробнее.

Атрибут TYPE=" text/css" и информация в комментарии (между " <! --" и " --> " ) как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров — они просто проигнорируют незнакомый тэг < STYLE > и содержимое комментария, и ваша страница будет показана как самая обычная HTML-страница. Строка H1 указывает браузеру, что всякий текст, находящийся между метками < H1 > и < /H1 >, должен отображаться шрифтом helvetica, arial или sans-serif высотой в 40 пикселов на красном фоне и быть выровнен вправо. Строка H2 определяет, что шрифт в заголовках < H2 > должен быть наклонным и высотой в 20 пикселов из семейства helvetica. И, наконец, строка P определяет поведение всех абзацев на странице: на сером фоне, выровнены по центру, шрифт — courier, fixed или monospace.

Вот и все. Как говорится, просто и со вкусом. Таким образом вы можете управлять практически всем, что появляется на вашей странице. Т.е. практически любому тэгу можно придать новые свойства. А теперь подробнее.

Font-family — шрифт, используемый для отображения данного элемента. В идеале, конечно, было бы неплохо, если бы у всех ваших посетителей были одинаковые наборы шрифтов. На практике же такого не бывает. Поэтому указывайте список шрифтов. Браузер просматривает этот список пока не встретит имеющийся в наличии шрифт. Например, компьютер с ОС Windows как правило имеет шрифт Arial, в компьютерах Macintosh наиболее похож на него шрифт Helvetica. В конце списка желательно иметь один из следующих: serif, sans-serif, monospace, fantasy или cursive. Пример: " P {font-family: arial, helvetica, sans-serif}"

Font-size — размер шрифта. Может указываться в точках (pt), пикселах (px).

Font-style: italic — курсив (наклонный шрифт).

Font-weight: bold — жирный шрифт. Значение может быть также числовым, только различные браузеры реагируют на это по-разному.

Text-transform — преобразование текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase (все буквы будут строчные), capitalize (каждое слово будет начинаться с заглавной буквы) и none (т.е. никаких действий).

Text-decoration — выделение текста, допустимые значения: underline (подчеркнутый), line-through (перечеркнутый), blink (мигающий) и none (ничего). Например, чтобы ссылки в тексте не выделялись подчеркиванием, можно включить в заголовок документа следующий текст:

< STYLE TYPE=" text/css" >

<! --

a: link {text-decoration: none}

a: visited {text-decoration: none}

a: active {text-decoration: none}

-->

< /STYLE>

Color — изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE TYPE. ..будут опускаться):

body {color: black}

a: link {color: black; text-decoration: none}

a: visited {color: black; text-decoration: none}

Т.е. цвет текста на странице — черный (1-я строчка), ссылки (обычно голубого цвета) — неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно фиолетовые) — также черного цвета и неподчеркнутые (3-я строчка).

Background-color — определяет цвет фона для какого-либо элемента. Например:

strong {background-color: yellow}

Текст между метками < STRONG> и < /STRONG> будет показан на желтом фоне.

Background-image — позволяет сделать фон в виде рисунка. Пример:

blockquote {background-image: url(../pictures/million.jpg)}

В результате цитаты (т.е. текст между метками < BLOCKQUOTE> и < /BLOCKQUOTE> ) будет размещен на фоне рисунка «million.jpg».

Text-align — выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово «text»). Например:

IMG {text-align: center}

Text-indent — позволяет делать отступ в первой строке абзаца (красная строка — как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применен к этому абзацу):

p {text-indent: 10pt}

Margin — устанавливает отступ текста. Пример использования:

body {margin-left: 10pt; margin-right: 15pt}

В результате текст на странице будет отступать слева на 10 точек от края страницы, справа — на 15 точек. Также возможны варианты: margin-top (отступ сверху) и margin-bottom (отступ снизу).

Рамки

Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:

border-width — ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов — thin (тонкая), medium (средняя), thick (толстая);
border-color — цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
border-style — стиль рамки. Может иметь следующие значения:
dashed — пунктирная в виде черточек
dotted — пунктирная в виде точек
double — двойная линия
inset — с эффектом вдавленности
outset — с эффектом выпуклости
ridge — выпуклая рамка
groove — врезанная рамка
solid — непрерывная линия

Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:

blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double } Здесь определена рамка со следующими границами: верхняя — красная двойная в 3 пиксела шириной, правая и левая — зеленые двойные в 5 пикселов шириной, нижняя — синяя сплошная шириной в 3 пиксела.

А что, если захочется изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать атрибут STYLE с необходимыми свойствами. Например:

< P STYLE=" text-indent: 15pt; color: red; background-color:

white" >

или

< H3 STYLE=" background-color: silver; border-width: 3px;

border-style: groove;

border-color: #F0F0F0; text-align: center" >

Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не писать атрибут STYLE каждый раз, можно поступить следующим образом: определить в заголовке документа в тэге STYLE необходимый стиль и дать ему название, например:

< style type=" text/css" >

<! --

.krasota {text-indent: 20px; background-color: aqua; color: red; }

-->

< /style>

Точку перед названием надо ставить обязательно! В примере стиль назван «krasota», вы же, естественно, можете обозвать его как угодно, хоть «vasja» или «MySuperStyle». Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:

< P CLASS=" krasota" >

И напоследок. Можно определить стиль для всего сайта! Для этого создается текстовый документ, где перечисляются все стили, используемые на страницах сайта (заголовки и т.п. не требуются) и сохраняется с расширением.css (например, «stili.css»). Потом достаточно с каждой страницы сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в заголовке страницы (в секции HEAD ) и имеет такой вид:

< LINK REL=stylesheet HREF=" stili.css" TYPE=" text/css" >

Теперь достаточно сделать изменения в одном файле — в «stili.css» (или как вы там его назовете) — чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц!

Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в.css файле, то на ней будут применены ее стили (т.е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например, < P STYLE= " ....... " > ), то к данному тэгу будет применяться второй стиль.

Вопросы и ответы

⇐ Предыдущая 35 36 37 38 39 404142 43 44 Следующая ⇒