CSS "От А до Я" - 2

Никита Е. Сенченко

🕛 13.10.2006, 14:57

http://webmoney.kharkov.ua

Привет, начинающие веб-дизайнеры и просто интересующиеся! Продолжаю свой рассказ о применении каскадных таблиц стилей.

Напомню, в первой статье я рассказал о том, что же вообще представляют из себя CSS, и как их можно задать в HTML-документе.

Итак, продолжим. Все объекты html-страницы в применении к каскадным таблицам могут быть строковыми или блочными:
Элемент Строковый Блочный
Текст + +
Графика - +
Списки + +
Таблицы + +

В зависимости от того, в каком контексте (блочном или строковом) рассматривается элемент, к нему можно применить те или иные правила CSS.

К примеру, возьмем текстовую информацию в html-документе. Текст, заключенный в теги параграфа (, ) - это блочный элемент разметки, а выделение курсивом (, ) - строковый. Если необходимо строковый элемент "принудительно" сделать блочным, то нужно задать параметру display значение "block". Например: I {display: block}

Блочные элементы можно вкладывать друг в друга, но нельзя пересекать друг с другом. Строковые элементы можно и вкладывать, и пересекать.

По набору стилей, которые можно применять к элементам, блочные и строковые элементы отличаются. При этом, к блочным элементам можно применять "строковые" стили, но не наоборот.

Мы пойдем по пути от простого к сложному, и остановимся пока на строковых элементах разметки - они легче для понимания.

Строковые элементы могут включаться в блочные: Несколько подчеркнутых слов имеется в этой строке.

Элемент 'P' - блочный, и содержит внутри себя строковые элементы 'EM' и 'STRONG'.

До сих пор мы оперировали HTML-тегами. Но настало время перейти непосредственно к применению каскадных таблиц. Для того, чтобы задать стили для строковых элементов, необходимо воспользоваться элементом разметки 'SPAN'. Он может заменять собой любые "строковые" теги: 'FONT', 'I', 'B', 'U', 'SUB', 'SUP' и т.д.: <div style="border-style:solid"Начало абзаца. Красный текст в середине абзаца. Конец абзаца.

Вот резльтат:

Начало абзаца. Красный текст в середине абзаца. Конец абзаца.

"Ну и что тут такого? - спросите вы, - Ведь то же самое можно сделать и без CSS":

Начало абзаца. Красный текст в середине абзаца. Конец абзаца.

Да, можно, и так даже удобнее, если подобное выделение нужно сделать только один раз. Но когда нам необходимо применить определенный стиль форматирования раз эдак 40, то, согласитесь, CSS в этом случае - наше единственное спасение от рутинной работы.

К примеру, пусть в html-страничке присутствует 40 слов, которые определяют некие понятия или термины. Допустим, нам захотелось выделить их зеленым цветом, отобразить полужирным курсивом и к тому же шрифтом, бОльшим по размеру, чем шрифт родительского элемента. Если пользоваться только средствами HTML, то получим следующее: Бригантина - двухмачтовое морское судно.

Очень просто, не правда ли? Но напомню: нам необходимо применить подобное форматирование в 40 местах, поэтому на деле получится гораздо труднее и утомительнее. А если потом нам захочется поменять, скажем, цвет с зеленого на синий? Представьте, сколько это займет времени! Куда проще было бы применить CSS. В заголовке документа (между тегами <HEAD> и </HEAD>) определим класс с необходимыми стилями: <STYLE type="text/css"> .terms {font-size: larger; color: green; font-weight: bold; font-style: italic} </STYLE>

а потом применим его в нужных местах: Бригантина - двухмачтовое морское судно.

Получим следующее:

Бригантина - двухмачтовое морское судно.

Преимуществ у такого подхода много: во-первых, запутаться (как в случае с HTML-тегами) практически невозможно; во-вторых, удобство этого способа возрастает пропорционально увеличению элементов, к которым нужно применить одинаковое форматирование. Если они встречаются не на одной, а на нескольких страницах, то описание класса "terms" можно вынести в отдельный файл и подключить его ко всем документам - сэкономим еще больше времени. И, в-третьих, все описания содержаться в одном месте, поэтому если вы захотите, к примеру, изменить цвет, то вам придется править код только в одном месте и один раз - а цвет поменяется везде! Впрочем, о преимуществах CSS мы уже говорили в первой статье, и больше останавливаться на них не будем.

Прежде чем перейти к детальному описанию "строковых" стилей, приведу еще один, более сложный пример: Изучаем каскадные таблицы

Что мы видим?

Изучаем каскадные таблицы

Средствами 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 Задание кегля (размера)

Рассмотри каждое свойство отдельно.
1. 'font-family'
Определяет гарнитуру (наименование) шрифта. Можно (и даже нужно) указать не один, а несколько шрифтов через запятую. В этом случае шрифты будут рассматриваться браузером в порядке приоритетности слева направо: <H2 style="font-family: a_Bragga, Arial, sans-serif">К этому заголовку применено форматирование гарнитуры шрифта</H2>
Посмотрим на результат: К этому заголовку применено форматирование гарнитуры шрифта

На 99% ваш браузер выведет эту надпись шрифтом Arial. Почему?
Никакой веб-дизайнер не может знать на 100%, какой набор шрифтов установлен на компьютере пользователя. Если задавать шрифт явно с помощью , то есть большая вероятность того, что заданный шрифт на компьютере пользователя не поддерживает русские кодировки или вообще не установлен. Браузер автоматически подставит шрифт по умолчанию, но тогда могут произойти нежелательные изменения на странице или, как минимум, задумка автора останется не реализованной.
Проблема решается приведенным выше способом, т.е. с помощью CSS. Браузер проверяет весь список шрифтов слева направо и применяет первый же шрифт из этого списка, который оказывается установленным на компьютере пользователя. И если у вас не установлен шрифт a_Bragga (что очень и очень вероятно), то вы увидите надпись в приведенном примере в шрифте Arial.
Это очень удобно. К примеру, на вашем сайте используется в качестве основного шрифт Verdana. А определенную надпись вы непременно хотите вывести каким-нибудь экзотическим шрифтом Х. Но при этом вы понимаете: этот шрифт Х окажется установленным только у небольшого числа пользователей. У остальных он будет автоматически заменен шрифтом по умолчанию (чаще всего это Times). Шрифт Times никак не впишется в общий дизайн странички, на которой использована Verdana, поэтому было бы неплохо обеспечить "запасной" вариант: в случае, если шрифта Х у пользователя все-таки не окажется, выводить надпись, как и весь остальной текст, шрифтом Verdana. Тогда пишем так: Надпись
В конце списка советую указывать предпочтительную группу шрифтов: serif, sans-serif или monospace. Делается это вот для чего: если браузер не обнаружит в системе ни одного из перечисленных шрифтов, то он применит любой доступный шрифт из указанной группы. Вот перечень наиболее употребляемых семейств шрифтов с примерами: Группа Шрифты Описание serif Times Шрифт с засечками sans-serif Arial, Verdana, Helvetica Шрифт без засечек monospac Courier Моноширинный шрифт 2. 'font-style'
Тут вроде бы все ясно. Этот стиль - замена тега 3. 'font-variant'
Если этому свойству присвоено значение "small-caps", то текст будет отображаться малыми прописными буквами. Сравните: ЭКСПЕРИМЕНТИРУЕМ С FONT-VARIANT Экспериментируем с font-variant
Вот, что получилось:
ЭКСПЕРИМЕНТИРУЕМ С FONT-VARIANT Экспериментируем с font-variant 4. 'font-weight'
Задает жирность шрифта (bold). Значения "bolder" и "lighter" определяют жирность шрифта по отношению к тексту родительского элемента: Обычный текст внутри жирного
Обычный текст внутри жирного
Вообще говоря, существует специальная "шкала жирности", определяющая жирность текста в интервале от 100 до 900 с интервалом в 100. Например, normal (обычный текст) соответствует по этой шкале 400, а bold - 700. Но, по-моему, нет ни одного браузера, который поддерживал бы эту шкалу хотя бы наполовину. 5. 'font-size'
С помощью этого правила можно задавать размер (кегль) шрифта. Размер может задаваться в пикселях (px), пунктах (pt), условных единицах (em) или процентах (%). Также существует специальная таблица размеров, содержащая следующие индексы (перечислены в порядке возрастания размера шрифта): "xx-small", "x-small", "small, medium", "large", "x-large", "xx-large". Для указания размера шрифта можно также воспользоваться и этими индексами. По умолчанию принято "medium".
При этом, как и в случае с font-weight, существует возможность задания относительного размера с помощью "smaller" и "larger".
Но, как говорится, лучше один раз увидеть, чем сто раз услышать. Вот пример: Размер по умолчанию, больше и еще больше
А что получилось смотрите ниже. Размер по умолчанию, больше и еще больше
Что касается единиц измерения, то тут CSS (в отличие от обычного HTML) предоставляет довольно большой выбор. Есть абсолютные единицы, которые ни от чего не зависят и выглядят одинаково независимо от экранного разрешения, параметров родительского элемента и т.д. Есть и относительные единицы, на которые влияют какие-нибудь "внешние" факторы. С помощью таких единиц (абсолютных и относительных) можно задавать значение многих свойств каскадных таблиц, и 'font-size' - одно из них.
К абсолютным единицам относятся пиксели (px) и пункты (pt). К относительным - условные единицы (em) и проценты (%). Свойства, размер которых определен с помощью относительных единиц, зависят от соответствующего размера родительского элемента. Например: Родительский элементВнутренний элемент
эквивалентно Родительский элементВнутренний элемент
Напоследок хотелось бы сказать, что абсолютно все примеры, которые я привел выше, корректно отрабатывают и в Опере 5.02, и в шестом Нетскейпе. Кое с чем справляется даже Netscape 4. На сегодня все. Удачи вам!