|
CSS "От А до Я"
Представьте себе такую ситуацию: вы сделали
серьезный сайт. И вдруг через некоторое время понимаете: шрифт не тот, фон
не тот, цвета не те и т.д. Все надо менять. Обремененный заботой о любимых
посетителях, вы спешите исправить недоработки во всех 500 (к примеру)
страницах вашего сайта. На это уходит целый день. В лучшем случае… Как
этого избежать? Ответ прост - использовать каскадные таблицы
стилей.
Прежде всего, хочу вас предупредить: если вы не знаете
HTML, то из этой статьи ничего нового вы не узнаете. Просто потому, что не
поймете. CSS придуманы специально для расширения возможностей HTML,
поэтому прежде чем браться за каскадные таблицы, я советовал бы вам
изучить язык маркировки гипертекстов (то бишь HTML). Тем более что много
времени это не займет, а учебников по HTML вы сможете найти великое
множество.
Но вернемся к нашим баранам :) .
Все, кто делал
веб-страницы, так сказать, вручную (на HTML, а не в WYSIWYG-редакторах),
знают, как мало возможностей предоставляет этот язык, когда он
используется "в чистом виде" (я имею в виду, без каких-либо
вспомогательных средств). К примеру, позиционирование элементов,
форматирование списков, работа с фоновыми изображениями - это далеко не
полный список того, что может принести головную боль программистам на
HTML. И действительно, гипертекстовый язык настолько несовершенен, что
порой несложные странички могут иметь огромный нечитаемый код. К тому же,
автор страницы не может заранее определить настроек браузера пользователя,
что существенно ограничивает число вариантов представления информации на
странице.
Нельзя сказать, что разработчики браузеров не
предпринимали попыток изменить данную ситуацию. В ранних версиях браузеров
CERN для платформы NEXT автору страницы давалась возможность
переопределять настройки умолчания браузера через HTML-разметку. Но этот
подход не получил продолжения в коммерческих продуктах и постепенно
"завял".
Другой способ управления настройками браузера -
программирование на JavaScript. Этот язык сейчас становится все более и
более популярным, однако имеет один недостаток - большой объем кода, что
делает его не самым оптимальным средством. По крайней мере, на ближайшие
несколько лет.
Но выход все же есть. И имя ему - CSS
(Cascading Style Sheets). Или, по-русски, каскадные таблицы стилей.
Разработала спецификации каскадных таблиц небезызвестная фирма Microsoft.
Наверно поэтому, кстати, Internet Explorer поддерживает CSS в несколько
большей степени, чем Netscape (хотя NN6 сделал в этой области огромнейший
шаг вперед). Да, кстати, неплохо поддерживает каскадные таблицы браузер
Opera (хотя и хуже, чем ее "старшие братья"). Посему советую всем, кто
будет использовать на своих страницах CSS, обзавестись хотя бы Нетскейпом
и Эксплорером и проверять свои творения и там, и там.
Изначально
CSS создавались для того, чтобы отделить содержание страницы от
сопутствующих дополнительных тэгов описания. Предположим, нам надо писать
некое выражение, часто повторяющееся в тексте, зеленым цветом, шрифтом
отличным от шрифта текста и, к тому же, выделять курсивом. Если вы хотите
обойтись только средствами HTML, то вам необходимо будет каждый раз писать
что-то типа:
<font color=green
face="ваш_шрифт"><i>текст</i></font>
Не
слишком трудно, но если эту запись приходится повторять десятки раз, то
это уже не очень удобно. CSS дает возможность задать описание объекта
только однажды. Мало того, можно описать все стили для нескольких страниц
или всего сайта в одном отдельном файле и все ваши странички будут иметь
совершенно одинаковый вид - одинаковые шрифты, таблицы, рамки. При этом,
если вы что-либо захотите изменить в оформлении своего сайта, вам нужно
будет поменять только один файл - тот, в котором содержаться
соответствующие стили описания. Кроме того, CSS позволяет использовать
множество дополнительных эффектов для оформления страниц. Что тоже
важно.
Таким образом, задумка была хорошая. Но получилось сами
знаете как. До сих пор ни один браузер не поддерживает каскадные таблицы
на все 100%. Даже IE. И поэтому многие возможности CSS остаются пока
невостребованными. Когда ко мне в руки впервые попал перевод спецификаций
CSS в оригинале, я читал их как научную фантастику: столько всего
полезного предоставляют в наше распоряжение каскадные таблицы стилей. Но,
увы, корректно поддерживается пока только определенная часть из
них.
Итак, начнем.
А начнем мы с того, как таблицы стилей включаются в
HTML-документ. Информация о стилях может располагаться либо в отдельном
файле, либо непосредственно в коде веб-странички. Речь пойдет о том, где и
в какой форме в документе автор страницы может описать стиль и как он
может сослаться на стиль, определенный в другом документе.
Для
применения CSS в HTML-страничке существует четыре основных способа.
Рассмотрим подробно каждый из них.
Переопределение стиля в элементе разметки.
Вообще
говоря, этот метод приводит к потере главного преимущества CSS -
возможности отделения информации от описания представления этой
информации. Однако им все равно часто пользуются. Для того чтобы описать
стиль таким способом необходимо применить атрибут STYLE у данного
элемента HTML-страницы. Его общий синтаксис таков:
<элемент
STYLE="свойство: значение; свойство: значение">текст или любой другой
объект</элемент>
Рассмотрение конкретных свойств мы
оставим на потом, а пока посмотрим, как вообще работают каскадные
таблицы.
А вот и первый пример:
<P STYLE="font-size:
10pt; font-style: italic; background-color: lime">Этот абзац будет
напечатан курсивом, шрифтом с размером 14 пунктов, и на светло-зеленом
фоне.</P>
В результате выполнения данного
фрагмента кода, вы увидите следующее:
Этот
абзац будет напечатан курсивом, шрифтом с размером 14 пунктов, и на
светло-зеленом фоне.
Таким образом, к тексту, заключенному между
тегами <P> и </P>, были применены соответствующие стили,
описанные за атрибутом STYLE. Этот атрибут можно применить внутри любого
элемента разметки. Однако допустимый набор пар "свойство: значение" в
каждом конкретном случае будут несколько различаться (об этом мы
поговорим в дальнейшем).
Хотел бы сразу сказать несколько
замечаний касательно синтаксиса. Атрибут STYLE написан большими буквами
только ради удобства. Его можно писать как угодно, так: style или даже
так: sTyLe - эффект будет абсолютно одинаковым. Совокупность пар
"свойство: значение" обязательно берется в кавычки, каждая пара
отделяется от последующей точкой с запятой.
Размещение описания стиля в заголовке
документа.
Описание стилей этим способом осуществляется с помощью
элемента (а не атрибута) 'STYLE', размещенного в заголовке документа,
т.е. между тегами <HEAD> и </HEAD>.
Это самый
распространенный способ применения каскадных таблиц. При этом он самый
надежный. Общий синтаксис при этом способе
таков:
<HEAD>
<STYLE
TYPE="text/css">
элемент {свойство: значение; свойство:
значение}
</STYLE>
</HEAD>
Теперь во всем
документе элемент, описанный с помощью 'STYLE' в заголовке, будет
форматироваться и представляться на экране в соответствии с
установленным для него стилем, если только он не будет переопределен с
помощью атрибута STYLE (см. пункт 1) или средствами обычного HTML.
Кстати, параметр TYPE="text/css" является обязательным и служит для
указания браузеру использовать CSS.
Приведу
пример:
<HEAD>
<STYLE TYPE="text/css">
B
{color: red; font-size:
120%}
</STYLE>
</HEAD>
<BODY>
...
<B>Этот
текст будет отображен в соответствии с описанием в заголовке: красным
цветом и размером шрифта в 120% от размера, принятого по умолчанию.
</B><BR>
<B STYLE="color:blue">А этот текст будет
отображаться синим цветом, так как это свойство переопределено. Однако
размер будет тот же.</B>
...
</BODY>
Вот что мы
увидим:
Этот текст будет
отображен в соответствии с описанием в заголовке: красным цветом и
размером шрифта в 120% от размера, принятого по умолчанию.
А этот текст будет отображаться
синим цветом, так как это свойство переопределено. Однако размер будет
тот же.
Чтобы определить несколько элементов одинаковыми
стилями, можно использовать группирование. Тогда все элементы нужно
перечислить друг за другом через запятую, вот так:
H1, H2, H3
{text-decoration: line-though}
Такая запись означает, что
заголовки первого, второго и третьего уровней будут отображаться
перечеркнутыми.
CSS предоставляет нам еще одну замечательную
возможность: определение классов. С помощью классов можно присваивать
стили не всем одинаковым элементам страницы, а избирательно. Хотя классы
плохо поддерживаются Нетскейпом, однако они предоставляют такую гибкость
контроля над элементами, что подчас от них просто невозможно отказаться.
Для того чтобы использовать класс, его необходимо вначале определить
внутри элемента 'STYLE', а затем сослаться на этот класс в каком-либо
элементе внутри 'BODY' с помощью атрибута
CLASS:
<HEAD>
<STYLE
TYPE="text/css">
.имя_класса {свойство: значение; свойство:
значение}
</STYLE>
</HEAD>
<BODY>
...
<элемент
CLASS="имя класса">что-то, что будет форматироваться в соответствии с
заданными в классе
стилями</элемент>
...
</BODY>
Вот
пример:
<HEAD>
<STYLE TYPE="text/css">
.x
{width: 160px}
.y {padding:
15px}
</STYLE>
</HEAD>
<BODY>
<TABLE
BORDER=1 BGCOLOR=gray
BORDERCOLOR=white>
<TR>
<TD>Ячейка1</TD>
<TD
CLASS="x">Ячейка2</TD>
</TR>
<TR>
<TD
CLASS="y">Ячейка3</TD>
</TR>
</TABLE>
</BODY>
Результат:
В этом
примере Ячейка2 отформатирована в соответствии с классом "x", для
элементов которого установлена ширина в 160 пикселей, а Ячейка3 - в
соответствии с классом "y", для всех элементов которого устанавливается
внутренний отступ ("набивка") в 15 пикселей. Ячейке1 ни один из классов
не присваивается, поэтому она форматируется в соответствии с
общепринятыми стандартами HTML, а также согласно описанным в теге
<TABLE> атрибутам.
Допустим, что по замыслу автора все
элементы 'CITE' (логическая разметка, используется обычно для выделения
названия какой-либо книги или статьи и отображается курсивом),
расположенные внутри заголовков 'H3', должны быть выведены фиолетовым
цветом. При этом все элементы 'CITE' вне заголовка 'H3' должны иметь
цвет по умолчанию (то бишь черный). Для удобного использования каскадных
таблиц в этом случае существует так называемые контекстные
селекторы. Например, в нашем случае необходимого результата можно
достигнуть так:
H3 CITE {color: purple}
Здесь элемент 'H3'
является как бы маской поиска. Описанный стиль (color: purple)
применяется только к последнему элементу (в данном случае 'CITE'), и
только тогда, когда результат поиска является положительным.
Продемонстрируем работу контекстного селектора на данном
примере:
<BODY>
<H3>В этом заголовке используется
<CITE>элемент логической разметки 'CITE'
</CITE></H3>
</BODY>
Эта запись выведет на
страничке следующее:
В этом заголовке используется элемент логической
разметки 'CITE'
Ссылка на внешний файл описания стилей.
В любую
страничку описание стилей можно импортировать из внешнего файла, который
необходимо создать заранее и присвоить ему расширение .css. Содержанием
этого файла должны быть описания стилей, построенные с синтаксисом,
рассмотренным в пункте 2. Подключение внешнего файла осуществляется с
помощью элемента 'LINK', который может располагаться как в заголовке,
так и в теле документа:
<LINK TYPE="text/css"
REL="stylesheet" HREF="http://path/to/your/css">
Значение
атрибута REL обязательно должно быть "stylesheet".
Импорт описания стилей.
Это аналог описанному выше
способу задания описаний. С его помощью также можно ссылаться на внешние
файлы каскадных таблиц:
<STYLE
type="text/cs">
@import: url
(http://path/to/your/css)
</STYLE>
Импортируемый
стиль можно переопределить с помощью любых перечисленных ранее методов.
Однако такой способ подключения внешних файлов не рекомендуется по той
причине, что он поддерживается далеко не всеми браузерами.
Привет, начинающие веб-дизайнеры и просто
интересующиеся! Продолжаю свой рассказ о применении каскадных таблиц
стилей.
Напомню, в первой статье я рассказал о том, что же
вообще представляют из себя CSS, и как их можно задать в
HTML-документе.
Итак, продолжим. Все объекты html-страницы в
применении к каскадным таблицам могут быть строковыми или блочными:
| Элемент |
Строковый |
Блочный |
| Текст |
+ |
+ |
| Графика |
- |
+ |
| Списки |
+ |
+ |
| Таблицы |
+ |
+ |
В зависимости от того, в каком
контексте (блочном или строковом) рассматривается элемент, к нему можно
применить те или иные правила CSS.
К примеру, возьмем текстовую
информацию в html-документе. Текст, заключенный в теги параграфа
(<P>, </P>) - это блочный элемент разметки, а выделение
курсивом (<I>, </I>) - строковый. Если необходимо строковый
элемент "принудительно" сделать блочным, то нужно задать параметру
display значение "block". Например: I {display:
block}
Блочные элементы можно вкладывать друг в друга, но нельзя
пересекать друг с другом. Строковые элементы можно и вкладывать, и
пересекать.
По набору стилей, которые можно применять к элементам,
блочные и строковые элементы отличаются. При этом, к блочным элементам
можно применять "строковые" стили, но не наоборот.
Мы пойдем по
пути от простого к сложному, и остановимся пока на строковых элементах
разметки - они легче для понимания.
Строковые элементы могут
включаться в блочные: <P>Несколько <EM>подчеркнутых</EM>
слов <STRONG>имеется</STRONG> в этой
строке.</P>
Элемент 'P' - блочный, и содержит внутри себя
строковые элементы 'EM' и 'STRONG'.
До сих пор мы
оперировали HTML-тегами. Но настало время перейти непосредственно к
применению каскадных таблиц. Для того, чтобы задать стили для строковых
элементов, необходимо воспользоваться элементом разметки 'SPAN'. Он может
заменять собой любые "строковые" теги: 'FONT', 'I', 'B', 'U', 'SUB', 'SUP'
и т.д.: <div style="border-style:solid"<P>Начало абзаца. <SPAN
style="color: red">Красный текст в середине абзаца.</SPAN> Конец
абзаца.</P>
Вот резльтат:
Начало абзаца. Красный текст в середине абзаца. Конец
абзаца.
"Ну и что тут такого? - спросите вы, - Ведь то же самое
можно сделать и без CSS":
<P>Начало абзаца. <FONT
color=red>Красный текст в середине абзаца.</FONT> Конец
абзаца.</P>
Да, можно, и так даже удобнее, если подобное
выделение нужно сделать только один раз. Но когда нам необходимо применить
определенный стиль форматирования раз эдак 40, то, согласитесь, CSS в этом
случае - наше единственное спасение от рутинной работы.
К примеру,
пусть в html-страничке присутствует 40 слов, которые определяют некие
понятия или термины. Допустим, нам захотелось выделить их зеленым цветом,
отобразить полужирным курсивом и к тому же шрифтом, бОльшим по размеру,
чем шрифт родительского элемента. Если пользоваться только средствами
HTML, то получим следующее: <P><FONT size=+1
color=green><I><B>Бригантина</B></I></FONT>
- двухмачтовое морское судно.</P>
Очень просто, не правда ли?
Но напомню: нам необходимо применить подобное форматирование в 40 местах,
поэтому на деле получится гораздо труднее и утомительнее. А если потом нам
захочется поменять, скажем, цвет с зеленого на синий? Представьте, сколько
это займет времени! Куда проще было бы применить CSS. В заголовке
документа (между тегами <HEAD> и </HEAD>) определим класс с
необходимыми стилями: <STYLE type="text/css"> .terms {font-size:
larger; color: green; font-weight: bold; font-style: italic}
</STYLE>
а потом применим его в нужных местах:
<P><SPAN class="terms">Бригантина</SPAN> - двухмачтовое
морское судно.</P>
Получим следующее:
Бригантина - двухмачтовое морское
судно.
Преимуществ у такого подхода много: во-первых, запутаться
(как в случае с HTML-тегами) практически невозможно; во-вторых, удобство
этого способа возрастает пропорционально увеличению элементов, к которым
нужно применить одинаковое форматирование. Если они встречаются не на
одной, а на нескольких страницах, то описание класса "terms" можно вынести
в отдельный файл и подключить его ко всем документам - сэкономим еще
больше времени. И, в-третьих, все описания содержаться в одном месте,
поэтому если вы захотите, к примеру, изменить цвет, то вам придется
править код только в одном месте и один раз - а цвет поменяется везде!
Впрочем, о преимуществах CSS мы уже говорили в первой статье, и больше
останавливаться на них не будем.
Прежде чем перейти к детальному
описанию "строковых" стилей, приведу еще один, более сложный пример:
<P>Изучаем <SPAN style="font-variant: small-caps;
background-color: orange; letter-spacing: 4pt; text-decoration:
line-through">каскадные таблицы</SPAN></P>
Что мы
видим?
Изучаем каскадные
таблицы
Средствами HTML сделать такое будет довольно
сложно!
Ну а теперь - самое интересное. Какие же конкретно
возможности предоставляет нам CSS для форматирования строчных элементов?
Начнем со свойств шрифта.
Свойства
шрифта.
Покажу все в одной таблице - так будет
нагляднее.
| # п/п |
Свойство |
Значение |
Описание |
| 1 |
font-family |
список шрифтов |
Задание гарнитуры (наименования) шрифта |
| 2 |
font-style |
normal
italic |
Задание начертания (курсив) |
| 3 |
font-variant |
normal
small-caps |
Задание капители |
| 4 |
font-weight |
normal
bold
bolder
lighter |
Задание жирности |
| 5 |
font-size |
px, pt, em, %
xx-small, x-small, small, medium, large,
x-large, xx-large, smaller, larger |
Задание кегля (размера) |
Рассмотри
каждое свойство отдельно.
- 'font-family'
Определяет гарнитуру
(наименование) шрифта. Можно (и даже нужно) указать не один, а несколько
шрифтов через запятую. В этом случае шрифты будут рассматриваться
браузером в порядке приоритетности слева направо: <H2
style="font-family: a_Bragga, Arial, sans-serif">К этому заголовку
применено форматирование гарнитуры шрифта</H2>
Посмотрим на
результат:
К этому заголовку
применено форматирование гарнитуры шрифта
На 99% ваш браузер
выведет эту надпись шрифтом Arial. Почему?
Никакой веб-дизайнер
не может знать на 100%, какой набор шрифтов установлен на компьютере
пользователя. Если задавать шрифт явно с помощью <FONT
face=название_шрифта>, то есть большая вероятность того, что заданный
шрифт на компьютере пользователя не поддерживает русские кодировки или
вообще не установлен. Браузер автоматически подставит шрифт по
умолчанию, но тогда могут произойти нежелательные изменения на странице
или, как минимум, задумка автора останется не
реализованной.
Проблема решается приведенным выше способом, т.е.
с помощью CSS. Браузер проверяет весь список шрифтов слева направо и
применяет первый же шрифт из этого списка, который оказывается
установленным на компьютере пользователя. И если у вас не установлен
шрифт a_Bragga (что очень и очень вероятно), то вы увидите надпись в
приведенном примере в шрифте Arial.
Это очень удобно. К примеру,
на вашем сайте используется в качестве основного шрифт Verdana. А
определенную надпись вы непременно хотите вывести каким-нибудь
экзотическим шрифтом Х. Но при этом вы понимаете: этот шрифт Х окажется
установленным только у небольшого числа пользователей. У остальных он
будет автоматически заменен шрифтом по умолчанию (чаще всего это Times).
Шрифт Times никак не впишется в общий дизайн странички, на которой
использована Verdana, поэтому было бы неплохо обеспечить "запасной"
вариант: в случае, если шрифта Х у пользователя все-таки не окажется,
выводить надпись, как и весь остальной текст, шрифтом Verdana. Тогда
пишем так: <SPAN style="font-family: Х, Verdana,
sans-serif>Надпись</SPAN>
В конце списка советую
указывать предпочтительную группу шрифтов: serif, sans-serif или
monospace. Делается это вот для чего: если браузер не обнаружит в
системе ни одного из перечисленных шрифтов, то он применит любой
доступный шрифт из указанной группы. Вот перечень наиболее употребляемых
семейств шрифтов с примерами:
| Группа |
Шрифты |
Описание |
| serif |
Times |
Шрифт с засечками |
| sans-serif |
Arial, Verdana, Helvetica |
Шрифт без засечек |
| monospac |
Courier |
Моноширинный шрифт |
- 'font-style'
Тут вроде бы все ясно. Этот стиль
- замена тега <I>
- 'font-variant'
Если этому свойству присвоено
значение "small-caps", то текст будет отображаться малыми прописными
буквами. Сравните: <SPAN>ЭКСПЕРИМЕНТИРУЕМ С
FONT-VARIANT</SPAN><BR> <SPAN style="font-variant:
small-caps">Экспериментируем с font-variant</SPAN>
Вот,
что получилось:
ЭКСПЕРИМЕНТИРУЕМ С
FONT-VARIANT
Экспериментируем с font-variant
- 'font-weight'
Задает жирность шрифта (bold).
Значения "bolder" и "lighter" определяют жирность шрифта по отношению к
тексту родительского элемента: <P style="font-weight: bold;
font-size: 20px; color: #191970"><SPAN style="font-weight:
lighter">Обычный текст</SPAN> внутри жирного</P>
Обычный текст внутри
жирного
Вообще говоря, существует специальная "шкала жирности",
определяющая жирность текста в интервале от 100 до 900 с интервалом в
100. Например, normal (обычный текст) соответствует по этой шкале 400, а
bold - 700. Но, по-моему, нет ни одного браузера, который поддерживал бы
эту шкалу хотя бы наполовину.
- 'font-size'
С помощью этого правила можно
задавать размер (кегль) шрифта. Размер может задаваться в пикселях (px),
пунктах (pt), условных единицах (em) или процентах (%). Также существует
специальная таблица размеров, содержащая следующие индексы (перечислены
в порядке возрастания размера шрифта): "xx-small", "x-small", "small,
medium", "large", "x-large", "xx-large". Для указания размера шрифта
можно также воспользоваться и этими индексами. По умолчанию принято
"medium".
При этом, как и в случае с font-weight, существует
возможность задания относительного размера с помощью "smaller" и
"larger".
Но, как говорится, лучше один раз увидеть, чем сто раз
услышать. Вот пример: <SPAN>Размер по умолчанию, <SPAN
style="font-size: large">больше<SPAN style="font-size: larger">
и еще больше</SPAN></SPAN></SPAN>
А что
получилось смотрите ниже. Размер по умолчанию, больше и еще
больше
Что касается единиц измерения, то тут
CSS (в отличие от обычного HTML) предоставляет довольно большой выбор.
Есть абсолютные единицы, которые ни от чего не зависят и выглядят
одинаково независимо от экранного разрешения, параметров родительского
элемента и т.д. Есть и относительные единицы, на которые влияют
какие-нибудь "внешние" факторы. С помощью таких единиц (абсолютных и
относительных) можно задавать значение многих свойств каскадных таблиц,
и 'font-size' - одно из них.
К абсолютным единицам относятся
пиксели (px) и пункты (pt). К относительным - условные единицы (em) и
проценты (%). Свойства, размер которых определен с помощью относительных
единиц, зависят от соответствующего размера родительского элемента.
Например: <P style="font-size: 12pt">Родительский элемент<SPAN
style="font-size: 3em">Внутренний
элемент</SPAN></P>
эквивалентно <P
style="font-size: 12pt">Родительский элемент<SPAN
style="font-size: 36pt">Внутренний
элемент</SPAN></P>
Напоследок хотелось бы сказать,
что абсолютно все примеры, которые я привел выше, корректно отрабатывают
и в Опере 5.02, и в шестом Нетскейпе. Кое с чем справляется даже
Netscape 4. На сегодня все. Удачи вам!
Приветствую! Продолжаю знакомить Вас с
основами CSS. В предыдущей статье я подробно рассказывал о том, как с
помощью каскадных таблиц можно форматировать текст. Но рассмотренные
правила относились скорее к шрифту, чем к тексту как таковому. Тем
временем существует еще много правил, относящихся непосредственно к
тексту. Их мы сейчас и рассмотрим.
Эти правила (также как и
свойства шрифта, рассмотренные ранее) применимы как к строковым, так и
блочным элементам html-разметки. Например, с их помощью можно описать
элементы 'H1' - 'H6', 'I' (строковые), а также 'P', 'DIV' (блочные) и т.д.
Если определенное форматирование необходимо применить к выборочному
фрагменту текста, то следует воспользоваться тегом <SPAN>:
<H3>Начало заголовка<SPAN>Конец
заголовка</SPAN></H3>
Итак, приступим.
Свойства текста.
| # п/п |
Свойство |
Значение |
Описание |
| 1 |
word-spacing |
px, pt, em, % |
Устанавливает интервалы между словами |
| 2 |
letter-spacing |
px, pt, em, % |
станавливает интервалы между буквами |
| 3 |
text-decoration |
underline
overline
line-through
blink
none |
Подчеркнутость, надчеркнутость, перечеркнутость |
| 4 |
text-transform |
capitalize
uppercase
lowercas
blink
none |
Преобразует регистр текста |
| 5 |
vertical-align |
baseline
middle
sub
super
text-top
text-bottom
top
bottom |
Устанавливает вертикальное положение элемента |
| 6 |
text-align |
left
right
center
justify |
Устанавливает горизонтальное выравнивание |
| 7 |
text-indent |
px, pt, em, % |
Управляет величиной отступа первой строки абзаца |
| 8 |
line-height |
px, pt, em, %
число |
Устанавливает расстояние между строками |
| 9 |
color |
мнемоника, RGB |
Задает цвет текста |
- Ну, тут вроде все ясно. А вот правило 'text-decoration'
требует более детального пояснения. Как видно из таблицы, это свойство
может иметь несколько значений: "underline", "overline", "line-through",
"blink" и "none". С "none" все понятно. Оно принято по умолчанию.
Значение "underline" аналогично элементу 'U' и служит для отображения
подчеркнутого текста. Значение "overline" делает текст надчеркнутым, а
"line-through" - зачеркнутым. Существует также значение "blink". Оно
служит для того, чтобы сделать текст мерцающим. Непонятно, правда, кому
это надо. Точно также посчитали и парни из Microsoft и норвежские
разработчики Opera, а потому "blink" работает только в Нетскейпе: <P
style="font-size:24px"><SPAN style="text-decoration:
underline">Подчеркнуто</SPAN>, <SPAN style="text-decoration:
overline">надчеркнуто</SPAN>, <SPAN style="text-decoration:
line-through">перечеркнуто</SPAN></P>
Вот что
получилось:
Подчеркнуто, надчеркнуто, перечеркнуто
- Теперь рассмотрим свойство 'text-transform'. Значение
"capitalize" устанавливает первую букву каждого слова прописной,
"uppercase" делает все буквы прописными, "lowercase" - наоборот,
строчными. Но не понятно только, зачем все это надо, ведь буквы можно
сразу сделать такими, какими нужно - прописными или строчными. Хотя кто
знает… По умолчанию, понятное дело, установлено "none".
- А вот весьма полезное свойство - 'line-height'. Оно задает
расстояние между строками. Точнее говоря, между базовыми линиями строк.
Это значит, что 'line-height' задает расстояние между одинаковыми
точками одинаковых букв, расположенных друг под другом, например, между
точками пересечения двух "палочек" в букве "Х".
Значение этого
свойства может задаваться в px, pt, %, em. Например: <SPAN
style="line-height: 11pt; font-size: 14pt">В данном примере мы
уменьшили межстрочное расстояние с помощью line-height. Иногда такой
метод можно применить,чтобы "уплотнить" текст на странице. А вообще,
действуйте по обстоятельствам, ведь Вы -
веб-дизайнер!</SPAN>
А вот что получилось: В данном примере мы уменьшили
межстрочное расстояние с помощью line-height. Иногда такой метод можно
применить,чтобы "уплотнить" текст на странице. А вообще, действуйте по
обстоятельствам, ведь Вы - веб-дизайнер!
Значением
'line-height' также может быть просто число. Тогда межстрочное
расстояние определяется как высота шрифта, умноженная на это
число:
<SPAN style="line-height: 2; font-size:
12pt">Экспериментируем с line-height. В этом примере расстояние между
базовыми линиями строк будет равно 24pt</SPAN>
Следующее свойство - 'text-indent'. Оно дает нам
возможность установить "красную" строку, то есть отступ первой строки
абзаца. Значение может быть задано в px, pt, % или em: <P
style="text-indent: 30px">Этот параграф начинается с "красной" строки
в 30 пикселей. Как видите, все очень просто! Вообще, так делать намного
удобнее, чем отдельно форматировать каждый абзац, "подгоняя" его к
"красной" строке искусственными методами (например, с помощью нескольких
  в начале абзаца)</P>
Вот что получилось:
Этот
параграф начинается с "красной" строки в 30 пикселей. Как видите, все
очень просто! Вообще, так делать намного удобнее, чем отдельно
форматировать каждый абзац, "подгоняя" его к "красной" строке
искусственными методами (например, с помощью нескольких   в
начале абзаца)
Также очень часто практикуется применение
отрицательных значений 'text-ident'. Рассмотрим пример: <P
style="text-indent: -10px">В этом параграфе мы применили
отрицательный отступ первой строки. Такой прием часто применяется на
веб-страницах. Например, для того, чтобы сделать акцент на словах,
стоящих в начале абзаца. Была бы фантазия!</P>
А вот что мы
получим:
В
этом параграфе мы применили отрицательный отступ первой строки. Такой
прием часто применяется на веб-страницах. Например, для того, чтобы
сделать акцент на словах, стоящих в начале абзаца. Была бы
фантазия!
Забегая вперед, скажу, что примерно такую же функцию,
что и 'text-indent', может выполнять также т.н. псевдо-класс
'first-line', но его мы рассмотрим немного позже.
- Теперь поговорим о выравнивании. С горизонтальным выравниванием
'text-align' вроде все понятно. Возможные значения здесь: "left",
"right", "central", "justify". Они устанавливают выравнивание
соответственно по левому, правому краю, по центру и по обоим.
У
вертикального выравнивания 'vertical-align' может быть целых 8
значений (см. таблицу). Но большинство из них не представляется мне
полезными. Кроме двух: "sub" и "super". Первое делает элемент
подстрочным, а второе - надстрочным. Такие возможности можно
использовать, например, при написании химических и математических
формул. Хотя получается довольно громоздко, но это все-же, по-моему,
лучше, чем отливать формулы в графике:
<HEAD>
<STYLE>
.a {font-size: 48px; color: red;
font-weight: bold}
.b {font-size: 32px; vertical-align: sub; color:
red; font-weight:
bold}
</STYLE>
...
</HEAD>
<BODY>
<P><SPAN
class="a">C</SPAN>
<SPAN
class="b">2</SPAN>
<SPAN
class="a">H</SPAN>
<SPAN
class="b">5</SPAN>
<SPAN
class="a">OH</SPAN></P>
Пусть не очень удобно,
зато формула спирта получилась очень даже ничего :) :
C 2 H 5 OH
- Теперь поговорим о цвете текста. За это отвечает свойство
'color'.
Этот атрибут уже не раз использовался в
предыдущих примерах, поэтому вы должны быть с ним уже немного знакомы.
Это свойство определяет цвет шрифта. Все вроде бы
просто.
Единственная сложность заключается в том, как это
свойство задать. Для этого существует два способа:
- мнемоническое имя цвета;
- код RGB.
Мнемоническое имя означает, что цвет
можно обозначить "по имени". Но это возможно не для всех цветов.
Официальные документации говорят, что задание цвета мнемоническим именем
допустимо только для следующих цветов: aqua (светло-голубой), black
(черный), blue (синий), fuchsia (светло-фиолетовый),gray (серый), green
(зеленый), lime (светло-зеленый), maroon (коричневый), navy
(темно-синий), olive (оливковый), purple (фиолетовый), red (красный),
silver (светло-серый), teal (сине-зеленый), white (белый), gold
(желтый). Для остальных цветов рекомендуется использовать RGB-формат,
хотя современные браузеры "понимают" мнемонику намного большего
количества цветов.
Но, несмотря на это, в любом случае для
задания цвета желательно использовать его код RGB. Этот код состоит из
шести шестнадцатеричных символов. Первая пара символов кодирует
"интенсивность" красного, вторая - "интенсивность" зеленого, третья -
синего. Этот код обязательно должен начинаться знаком #. Например,
#FF0000 кодирует красный цвет (интенсивность красного, как видим,
максимальная, а зеленого и синего - нулевая), кодом #FFFFFF обозначается
белый цвет, #000000 - черный.
Таким образом, каждый цвет цветовой
гаммы может быть однозначно определен любым браузером. Кстати, можно
задавать подобный код и с помощью трех символов; тогда он
преобразовывается в шестисимвольный путем дублирования каждого символа.
Например, #FB2 эквивалентен #FFBB22 и т.д.
Вот вроде бы
и все, что хотелось рассказать по поводу атрибутов CSS, позволяющих
управлять свойствами текста.
Но мой рассказ был бы неполным, если
бы я не рассказал о т.н. псевдо-элементах, об одном из которых было
вскользь сказано ранее.
Сразу хочу предупредить всех (и расстроить
поклонников дядюшки Билла): как это ни странно, но псевдо-элементы
поддерживает только Netscape, и никак не IE. Не знаю, чем это объяснить,
но тем не менее, это так... Я прекрасно понимаю, что NN сегодня пользуются
единицы, но все-таки хотел бы для полноты изложения рассказать и о
псевдо-элементах. Примеры сопровожу скриншотами, снятыми с
Нетскейпа.
Псевдо-элементов в CSS два: 'first-line' и
'first-letter'. Как видно из названия, они позволяют форматировать
соответственно первую строку и первую букву какого-либо элемента html.
Чаще всего таким элементом выступает элемент 'P'.
Псевдо-элементы
задаются в соответствии со следующим синтаксисом:
элемент:псевдо-элемент {свойство: значение}
Какой же
предварительный вывод можно сделать, исходя из такого синтаксиса?
Псевдо-элементы в CSS - это не свойства какого-либо элемента html, это его
составные части, так сказать, подэлементы. И действительно, первая строка
и первая буква абзаца - это как бы его составляющие.
И еще.
Псевдо-классы можно определять в отдельном файле, подключаемом к
документу, можно задавать внутри тегов <STYLE>, </STYLE>, но с
помощью атрибута 'style' их задавать нельзя. Но давайте перейдем к
конкретике.
'first-line'
Псевдо-элемент 'first-line'
используется для применения особых стилей к первой строке элемента (чаще
всего это элемент 'P'). Вот пример: <STYLE TYPE =
"text/css">
P:first-line {text-decoration:
underline}
</STYLE>
...
К 'first-line' могут быть
применены только следующие свойства: свойства цвета и фона, свойства
шрифтов, 'word-spacing', 'letter-spacing', 'text-decoration',
'vertical-align', 'text-transform', 'line-height', 'clear'. С большинством
из них вы уже знакомы.
'first-letter'
Псевдо-элемент
'first-letter' используется для создания эффекта буквицы и, кстати
сказать, употребляется очень и очень часто. К нему применимы следующие
свойства: свойства шрифтов, свойства цвета и фона, 'text-decoration',
vertical-align', 'text-transform', 'line-height', свойства границ,
отступов и рамок (о них я расскажу в следующей статье), а также 'float' и
'clear'.
Следующий пример позволит создать эффект буквицы, когда
высота первой буквы равна высоте двух строк: <STYLE
TYPE="text/css">
P {font-size: 12pt; line-height:
12pt}
P:first-letter {font-size: 200%; float:
left}
</STYLE>
...
В этом примере вам, видимо, не все
понятно, так как использовалось свойство 'float', о котором я еще ничего
не говорил. Оно будет рассмотрено в следующей главе. Сейчас же я могу
только прокомментировать его функцию в данном примере. Запись "float:
left", примененная к первой букве абзаца, делает эту букву "плавающей".
Это значит, что остальной текст будет ее обтекать (в данном случае
справа). Это и приводит к эффекту буквицы.
Но чаще всего одинаково
форматировать первые строки или буквы абсолютно всех абзацев в документе
оказывается не нужным. Или же другой вариант: один абзац надо
отформатировать одним способом, другой - другим. Как поступить? Правильно,
надо прибегнуть к классам. Вот тут внимание! В связи с тем, что классы
применяются к псевдо-элементам, их синтаксис будет несколько необычен:
элемент.имя_класса:псевдо-элемент {свойство: значение}
Вызов
класса осуществляется как обычно. При этом он может быть применен только к
тому элементу, для которого он описан: <элемент
class="имя_класса">
Давайте рассмотрим это на примере. <STYLE
TYPE="text/css">
P {color:green}
P.a:first-letter
{font-size:200%; color:red}
P.a:first-line {letter-spacing: 2pt;
text-decoration: overline; color: navy}
P.b:first-letter
{font-size:200%; color: blue}
P.b:first-line {background-color:grey;
color:navy}
</STYLE>
...
<P class="a">У этого абзаца
первая буква размером в два раза больше основного текста. Первая буква в
соответствии с правилами наследования - красная, а не темно-синяя, как вся
первая строка и не зеленая, как весь абзац. У первой строки межбуквенное
расстояние равно 2 pt, первая строка надчеркнута</P> <P
class="b">Этот абзац формируется аналогично. Первая строка, включая и
первую букву, напечатана на фоне серого и, к тому же, темно-синим цветом.
Первая буква - светло-синяя</P>
Но должен вас огорчить (хотя
вы наверно уже и так догадались по скриншотам последних примеров):
"народный" браузер IE 5 псевдо-элементы не поддерживает, а примеры я
представил в Нетскейпе.
|
