Встроенные таблицы стилей

2015-11-10

1516

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 345 6 7 8 9 10 Следующая ⇒

Встроенные таблицы стилей позволяют управлять элементами в отдельном html-документе при помощи пары команд <style> и </style>. Эта пара со всем её содержимым помещается между командами <head> и </head>.

Пример:

<html>
<head>
<style>
H1 {color:green; text-align:center}
</style>
</head>
<body>
<H1>Зелёный заголовок по центру</H1>
</body>
</html>

Теперь рассмотрим ситуацию, когда в команде <style> для цвета заголовка задан зеленый цвет:

а внутри самого заголовка указано:

<H1 style="color:blue">Какого цвета будет заголовок?</H1>

В этом случае и будет применен принцип каскадирования, который позволит разрешить конфликт: приоритет имеет внутренняя таблица стилей (style="color:blue"), поэтому заголовок будет синим.

Синтаксис CSS

Синтаксис CSS отличается от синтаксиса HTML, в нем нет ни тегов, ни атрибутов. Но есть правила, каждое из которых описывает внешний вид одного или группы элементов HTML. Правило записываются следующим образом:

селектор {свойство: значение}

Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются парысвойство:значение.

Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:

H2 {color: red}

Селекторы могут описывать следующие элементы:

команды
Пример: P {color: red} стиль применяется к команде <P>
классы
Пример: .red {color: red} стиль применяется к любомым тэгам, у которых атрибут class равен red
псевдоклассы
Пример: A:visited {color: red} стиль применяется к посещенной гиперссылке (тэг <A>).
В том случае, если свойств у тэга несколько, то их разделяют точкой с запятой:
H2 {color: green; font-size: 15pt}.

Для пояснительной информации можно использовать комментарии, которые заключаются в скобки /* и */:

P {color: red} /* это абзац красного цвета */

Следующий пример демонстрирует задание встроенного стиля в html-документе:

<html> <head> <title>Style Sheets</title> <style> BODY {background: #FFFFFF} P {color: blue; font-size: 12pt;} H2 {color: green; font-family: Courier New; font-size: 18pt} UL {list-style-image: URL(ball.gif)} </style> </head> <body> <h2>Пример</h2> <ul> <li><p>текст 1 <li><p>текст 2 <li><p>текст 3 </ul> </body> </html>

Здесь задан цвет фона документа белый. Текст всех абзацев — синий, размер шрифта 12pt. Заголовок второго уровня зеленого цвета, гарнитура — Courier New, размер шрифта 18pt. Кроме того, именно средствами CSS задан вид маркера для элементов списка <ul> в виде картинкиball.gif. На экране это будет выглядеть так:

Основные элементы CSS

Задание цвета

BODY {color: blue} (цвет текста во всем документе)
P {color: #800000} (цвет текста в абзаце)

Задание размера

P {font-size: 2ex} (ex — размер, равный размерам буквы «x»)
P {font-size: 5em} (em — размер, равный ширине буквы «m»)
P {font-size: 32px} (px — размер в пикселах)
P {font-size: 32pt} (pt — размер в пунктах, 1 пункт равен 1/72 дюйма)

Задание курсива

P {font-style: italic}

Задание жирного шрифта

P {font-weight: bold}

Задание гарнитуры шрифтов

P {font-family: Arial} (имя гарнитуры шрифта)

Задание размещения

P {text-align: center} (варианты значений: center / left / right)
P {text-align: justify} (выравнивание по ширине)

Задание отступов

P {margin-top: 10px} — отступ сверху
P {margin-left: 20pt} — отступ слева (от края окна)
P {margin-right: -15pt} — отступ справа (возможно задать и отрицательное значение)
P {text-indent: 5em} — задание отступа в начале абзаца — «красная строка»

Маркированный список

UL {list-style-type: disc} (варианты значений: disc / circle / square)

Нумерованный список

OL {list-style-type: decimal} (арабские цифры, начиная с 1; установлено по умолчанию)
OL {list-style-type: lower-alpha} (строчные латинские буквы: a, b, c, ..., z, aa, ab, ac и т.д.)
OL {list-style-type: lower-roman} (строчные римские цифры: i, ii, iii, iv и т.д.)
OL {list-style-type: upper-roman} (заглавные римские цифры: I, II, III, IV и т.д.)

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

Оформление интервала между словами

P {word-spacing: normal} или
P {word-spacing: 3em} — к обычному пробелу прибавляется ширина одной буквы m или нескольких.

Оформление интервала между символами

P {letter-spacing: 2em} — увеличенный интервал, т.н. «разрядка»
P {letter-spacing: normal}

2015-11-10

1516

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 345 6 7 8 9 10 Следующая ⇒

Обсуждение в статье: Встроенные таблицы стилей

Обсуждений еще не было, будьте первым... ↓↓↓