Игорь Квинт - HTML, XHTML и CSS на 100% Страница 30

Допустим, что разрыв строки произойдет до слова «разделенный», тогда последовательность функциональных тегов для данного фрагмента может быть следующей:

<p>

<p:first-line>

<p:first-letter>

Не

</p:first-letter>который текст,

</p:first-line>

разделенный на две строки

</p>

Обратите внимание, что элемент: first-letter находится внутри элемента: first-line. Свойства, установленные для элемента: first-line, наследуются: first-letter, но могут быть переназначены, если в элементе: first-letter этому же свойству присваивается значение.

Псевдоэлементы :before и: after

Псевдоэлементы: before и: after можно использовать для вставки генерируемого содержимого до или после содержимого элемента.

h1:before {content: counter(chapno, upper-roman) ". "}

Когда псевдоэлементы: first-letter и: first-line сочетаются с псевдоэлементами: before и: after, они применяются к первой букве или строке элемента, включая вставляемый текст.

p.special:before {content: "Важно! "}

p.special:first-letter {color: gold}

Буква В слова Важно! будет представлена золотистым цветом.

7.5. Правило @media

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

Например:

@media print {

body { font-size: 10pt }

}

@media screen {

body { font-size: 12pt }

}

В примере при просмотре документа на экране размер шрифта будет 10 пунктов, а при печати 12 пунктов.

Рассмотрим еще один пример:

@media screen, print {

body { font-size: 14pt }

}

В этом примере и при печати, и при просмотре размер шрифта будет одинаковый – 14 пунктов.

Рассмотрим список всех устройств, поддерживаемых CSS. Значение указывает, что документ предназначен:

• all – для всех устройств;

• aural – речевых синтезаторов;

• braille – устройств чтения азбуки Брайля;

• embossed – печати азбуки Брайля;

• handheld – переносимых портативных устройств (небольшие монохромные экраны с ограниченной полосой частот);

• print – страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати;

• projection – настенных презентаций, например для проекторов или для печати плакатов;

• screen – цветных дисплеев;

• tty – устройств, использующих набор символов с фиксированной шириной, например телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения; для устройств типа tty не следует использовать пикселы;

• tv – устройств типа телевизора, для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране и возможность передачи звука.

Следует отметить, что названия типов устройств не зависят от регистра.

Как правило, для схожих устройств задаются схожие правила CSS, поэтому все устройства в CSS разбиты по типам. В табл. 7.1 представлены взаимоотношения между группами и типами устройств.

Значение both в таблице означает, что используются устройства всей группы.

Приведу перевод названий типов устройств:

• без разбивки – continuous;

• с разбивкой – paged;

• визуальные – visual;

• звуковые – aural;

• тактильные – tactile;

• сеточные – grid;

• растровые – bitmap;

• интерактивные – interactive;

• статичные – static.

Попробуйте в качестве эксперимента создать простую страницу с различными свойствами и значениями для устройств screen и print и посмотреть ее на экране и в окне предварительного просмотра.

7.6. Правила !important

В CSS предпринята попытка установить баланс между возможностями таблиц стилей разработчика и пользователя. По умолчанию правила в таблице стилей разработчика имеют приоритет над правилами пользовательской таблицы стилей.

Однако для соблюдения баланса объявление!important наделяется преимуществом перед обычным объявлением. Таблицы стилей как разработчика, так и пользователя могут содержать объявления!important, но пользовательские правила!important имеют приоритет над правилами!important разработчика. Эта особенность CSS улучшает возможность доступа к документам, предоставляя пользователям со специальными требованиями (большие размеры шрифтов, сочетания цветов и т. д.) более гибкий контроль над представлением.

Надо отметить, что объявление свойства стенографического типа (например, background) как !important равнозначно объявлению всех содержащихся в нем свойств как !important.

В следующем примере первое правило пользовательской таблицы стилей содержит объявление!important, которое имеет приоритет над соответствующим объявлением в таблице стилей разработчика. Второе объявление также имеет больший приоритет, так как оно помечено !important. Однако третье правило в пользовательской таблице стилей не является правилом!important, и поэтому более высокий приоритет будет иметь второе правило в таблице стилей разработчика (которое устанавливает стиль в свойстве стенографического типа). Кроме того, третье правило разработчика имеет меньший приоритет, чем второе, так как последнее является!important. Это говорит о том, что объявления!important работают и в таблицах стилей разработчика.

/* Из пользовательской таблицы стилей */

p { text-indent: 1em ! important }

p { font-style: italic ! important }

p { font-size: 18pt }

/* Из таблицы стилей разработчика */

p { text-indent: 1.5em !important }

p { font: 12pt sans-serif !important }

p { font-size: 24pt }

7.7. Правило @import

Правило @import позволяет импортировать правила стилей из других таблиц стилей. Массив правил @import должен предшествовать всем другим правилам в таблице стилей. После ключевого слова @import должен следовать URL-адрес таблицы стилей, которую необходимо импортировать. Допускается использование строки. В этом случае подразумевается, что она заключена в url(…).

Следующие строки эквивалентны по значению и представляют два варианта синтаксиса правила @import (один с использованием url(…) и один с открытой строкой):

@import «mystyle.css»;

@import url("mystyle.css");

Вы также можете задать правила @import, зависящие от устройств. Тогда в этих правилах импортирования после URL задается список типов устройств, разделенных запятыми.

Действие приведенных ниже правил происходит так, как если бы импортируемая таблица стилей при прочих равных условиях присоединялась посредством правила @media, с той лишь разницей, что они позволяют пользовательскому агенту не выполнять бесполезную загрузку.

@import url(«fineprint.css») print;

@import url("bluish.css") projection, tv;

При отсутствии каких-либо типов устройств импорт не зависит ни от каких условий. Если при этом использовать значение all для импортируемых аппаратных средств, то будет достигнут аналогичный эффект.

Резюме

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

Глава 8

Форматирование текста средствами CSS

8.1. Выделение текста цветом

8.2. Шрифты

8.3. Форматирование текста

В этой главе мы разберем основные приемы работы с текстом средствами CSS. Форматирование и установка стиля, выбор шрифта и задание цвета – все это с легкостью решается средствами CSS.

Изначально язык CSS был разработан для управления видом текста, поэтому он предоставляет веб-разработчику впечатляющие средства по работе с текстом. Как правило, обычного набора элементов HTML недостаточно, чтобы оформить текст на странице. Здесь на помощь и приходит CSS.

Чтобы понять всю мощь CSS по работе с текстом и в то же время освоить основные приемы создания таблиц стилей, создадим простую HTML-страницу, которая и будет служить примером (листинг 8.1, рис. 8.1).

<html>

<head>

<title>Глава 8. Форматирование текста средствами CSS</title>

<link href="my_style.css" rel="stylesheet">

</link>

</head>

<body>

<h1>Форматирование текста средствами CSS</h1>

<p class="namek">Намек: добивается успеха только тот, кто старается.</p>

<h2>Предисловие</h2>

<p>В CSS нет ничего сложного, к концу данной главы вы научитесь изменять

цвет текста, шрифт, размер. Научитесь управлять его положением на

странице и выучите еще много других приемов форматирования,

которые сделают вас настоящим профессионалом веб-дизайна.</p>

<p>Вам будет под силу отформатировать любой текст. И вы сделаете это

так же просто, как в обычном текстовом редакторе.

Вы сможете заставить читать посетителя по буквам.</p>

<p class="w_600">К примеру, задать "жирность" в 600 для данного абзаца

средствами HTML просто невозможно.