Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
6
Добавлен:
01.04.2025
Размер:
8 Мб
Скачать

Псевдостили текста

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

first-letter - применяется к первой букве первой строки абзаца:

p:first-letter { font-size: 200%; font-weight: bold; }

Рассмотрим пример:

<html>

<head>

<style type="text/css">

p:first-letter {

color: red;

font-size: 12px

}

</style>

</head>

<body>

<р>Использование псевдокласса first-lette.</р>

</body>

</html>

first-line - применяется к первой строке абзаца.

{Задание стиля абзаца}:first-line{Определение стиля};

Пример:

p:first-line {text-decoration: underline;}

Псевдоэлементы

Свойство

Описание

:after

Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. элемент:after { content: "текст" }

:before

Псевдоэлемент :before применяется для отображения желаемого контента до элемента, к которому он добавляется. Работает совместно со свойством content:before { content: "текст" }

:first-letter

Применяется к первой букве первой строки абзаца. Может использоваться для создания буквиц:first-letter {Определение стиля};

Пример: st:first-letter {font-size: 16pt;}

:first-line

Применяется к первой строке абзаца:first-line{Определение стиля};

Пример: st:first-line {text-decoration: underline;}

Форматирование псевдоклассов и псевдоэлементов

Псевдоклассы это - ссылки, first-child и lang:

a: link - свойства обычной ссылки; a: active - свойства активной ссылки; a: visited - свойства посещенной ссылки; a: hover - свойства ссылки при наведении на неё мыши; a: focus - свойство ссылки при фокусе. first-child - выделяет первый элемент среди последующих. lang - форматирование элементов в зависимости от применения язы­ков на странице.

В каскадных листах стилей при форматировании ссылок применяются те же значения, что и к обычному тексту. При описании других псевдоклассов в CSS перед их значениями указывается символ ">".

К псевдоэлементам в стилях относятся свойства: first-letter - форма­тирует первый символ для первой строки; first-line - назначается отдель­ное форматирование первой строки блока текста; after - назначает место­расположения объекта после текущего элемента; before - назначает ме­сторасположения объекта до текущего элемента.

Для задания размеров в CSS используется несколько способов: относительный размер в процентах, относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large), абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), пикселях (px), средней шириной буквы "m" (em), средней шириной буквы "x" (eх) , абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in), абсолютный в пикселях (px)

Цвет может быть определен одним из трех способов: при помощи названия цвета: yellow, red, green, grey,.. ; шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..; десятичным зада­нием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..

Приведем несколько примеров описания таблицы стилей:

.epigraph {

font-size: 12pt;

font-style: italic;

text-align: right;

color: rgb(127,127,0);

}

p.big {

font-size: 16px;

font-weight: bold;

color: #ff0000;

}

.menu {

font-weight: bold;

font-size: 9pt;

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

}

a:hover {

color: #b63a3a;

text-decoration: none;

}