Главная | Обратная связь | Поможем написать вашу работу!

Свойства списков (классификационные свойства)

Используются для указания того, как должен быть отображен список в окне браузера. Можно изменять изображение метки, ее положение.

Свойства списков наследуются, т. е., если свойство определено для тега <ul>, его наследуют все его <li>. Применимы только для списков.

1. list-style-image – определяет изображение, которое будет использоваться в качестве метки. Поддерживается всеми элементами.

Пример: ul{ list-style-image: url(“\picture\knopka1.gif”)}

2. list-style-position – определяет относительное расположение меток. Поддерживается всеми элементами. Значения:

· inside – текст пункта списка продолжается на следующей строке под меткой

· outside – текст пункта списка продолжается на следующей строке под текстом.

Пример: ul {list-style-position: inside}

3. list-style-type – определяет тип метки, которую будет отображать браузер. Поддерживается всеми элементами. Значения:

· disk –круг.

· circle –окружность.

· square – квадрат

· decimal – числа (1,2,3….)

· lower-roman – римские цифры нижнего регистра.

· upper-roman – римские цифры верхнего регистра.

· lower-alpha – алфавит нижнего регистра (a,b,c…)

· upper-alpha – алфавит верхнего регистра (A,B,C….)

· none – без меток.

Пример: ul{ list-style-type:square}

4. marker-offset – определяет расстояние между маркером и текстом в списке Значения:

· auto - пробел устанавливается браузером (по умолчанию).

· любая соответствующая стандартам длина – пробел между маркером и текстом.

· inherit - принимается значение родительского элемента.

Пример: h1 {marker-offset: 12px}

Свойства шрифта

1. font-family – определяет список семейств шрифтов элемента. Можно указать одно семейство или список возможных семейств. Поддерживается всеми элементами. Например: Font-family: Courier, Times, Serif.

Пример: p {font-family: "Times roman", courier, serif}

2. font–size – указывает размер шрифта в пунктах, дюймах, см, пикселах. Поддерживается всеми элементами.

3. font-style – позволяет изменять начертание шрифта. Поддерживается всеми элементами. Значения:

· normal (обычный),

· italic (курсив)

· oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив.

Пример: p{font-style: italic; }

4. font–weight – определяет толщину шрифта. Поддерживается всеми элементами. Значения:

· normal - обычное начертание (по умолчанию).

· bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.

· bolder - жирный шрифт.

· lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.

· 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.

Пример: p {font-weight: bold;}

5. font – удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию. Значения:

· font-style - начертание.

· font-variant - значение, определяющее вывод шрифта в виде малых прописных букв.

· font-weight- толщина.

· font-size - кегль.

· line-height - интерлиньяж.

· font-family - семейство шрифтов.

Пример: p {font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

Свойства текста

text-align – выравнивание текста в элементе. Значение:

· left - выравнивание по левому краю.

· center - выравнивание по центру.

· right - выравнивание по правому краю.

· justify - выравнивание по обоим краям.

Пример: p {text-align: center;}

text- indent – создание отступа в первой строке блока текста.

Пример: p {text-indent:20px;}

text-decoration – добавляет в текст элементы оформления, например, подчеркивание. Значения:

· None – отсутствие элементов оформления.

· Underline – подчеркивание.

· Overline – линия над текстом.

· Line-through-перечеркивание

Пример: p {text-decoration: underline }

text-transform – автоматически переводит в тексте буквы в верхний (нижний) регистр.Значения:

· none - отсутствие изменения регистра (по умолчанию).

· capitalize - переводит первую букву каждого слова в верхний регистр.

· uppercase - переводит все буквы в верхний регистр.

· lowercase -переводит все буквы в нижний регистр.

· inherit - применяется значение родительского элемента.

Пример: p {text-transform: uppercase }

text-shadow – определяет значения, устанавливающие эффект затенения текста. Может содержать несколько значений, которые следует отделить друг от друга запятыми. В каждом отдельном значении теневых эффектов обязательно должно быть значение смещения и возможны такие значения, как радиус резкости и цвет. Значения:

· none – отсутствие значения (по умолчанию).

· color – цвет затенения текста.

· первое числовое значение, соответствует стандарту - расстоянию по горизонтали вправо от текста. Отрицательное значение соответствует расстоянию влево от текста.

· второе числовое значение, соответствует стандарту - расстоянию по вертикали вниз от текста. Отрицательное значение соответствует расстоянию вверх от текста.

· третье числовое значение, соответствует стандарту - радиус нерезкости тени текста.

· inherit - применяется значение родительского элемента.

Пример: h1{text-shadow: blue 5px 5px 3px}

letter-spacing – определяет интервал между символами текста. Значения:

· none - интервал, обычные для используемого шрифта.

· любая длина, соответствующее стандартам, длина интервала между буквами.

· inherit - применяется значение родительского элемента.

Пример: p { letter-spacing: 5px }

word-spacing – определяет интервал между словами. Значения:

· none - интервал, обычный для используемого шрифта.

· любая длина, соответствующая стандарту, длина интервала между словами.

· inherit - применяется значение родительского элемента.

Пример: p{word-spacing: 2px}

Псевдоклассы

Псевдокласс – специальный селектор, определяющий, как выглядит HTML–элемент в определенный момент. Псевдоклассы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, можно задать свойства для первой буквы каждого параграфа. Для этого для тега P назначается псевдокласс:first-letter, в котором устанавливаются различные стили:

p:first-letter { float: right; font-size: 2em; color: red;}.

CSS определяет также псевдоклассы, которые устанавливают, как выглядят гиперссылки в различных состояниях:

A:link {color: #FFFFFF; text-decoration:none} – не посещенные ссылки.

A:visited {color: red; text-decoration:none} – посещенные ссылки.

A:hover{text-decoration:underline} – это свойство устанавливает, как выглядит ссылка при наведении на нее указателя мыши (фокуса).

A:active {color: black; text-decoration:none} – ссылка в момент щелчка по ней.

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

· link - это состояние ссылки до ее активизации.

· visited - состояние, в которое переходит ссылка после ее активизации.

· hover - состояние, когда указатель мыши наведен на ссылку.

· active - состояние, возникающее при щелчке на ссылке для ее активизации.

В языке CSS состояния link и visited относятся к категории псевдоклассов, а состояния hover и active - к категории динамических псевдоклассов. Состояния hover и active считаются динамическими, поскольку для их активации пользователь должен выполнить какие-то действия. Состояния link и visited активны до и после взаимодействия со ссылкой.

Чтобы эффекты ссылок функционировали правильно, описание их стилей необходимо располагать в следующем порядке: link, visited, hover, active. Другой порядок может привести к несоответствующему поведению.

В CSS2 определяются следующие псевдоклассы:

· :first-child – первый дочерний элемент другого элемента;

· :link – еще не посещенные ссылки;

· :visited – посещенные ссылки;

· :hover – элемент, над которым в настоящее время находится курсор;

· :active – активный в данный момент элемент;

· :focus – элемент, имеющий фокус ввода;

· :lang – этот псевдокласс определяет текущий язык;

· :first-line – первая формированая строка абзаца;

· :first-letter – первая буква абзаца;

· :before – определяет содержимое перед элементом;

· :after – определяет содержимое после элемента.

⇐ Предыдущая 12