- •2.2.3. Вынесение таблицы стилей в отдельный файл
- •2.2.4. Приоритет применения стилей
- •2.6.2. Внутренние отступы
- •2.7. Рамки
- •2.7.1. Стиль линии рамки
- •2.14. Позиционирование элемента. Размещаем элемент в произвольном месте окна Web-браузера
- •2.15. Управление отображением элемента. Скрываем и отображаем абзацы
Глава 2. Основы CSS. Форматируем Web-страницу при помощи стилей
2.1. Основные понятия
<FONT size="3">Текст</FONT>
<FONT style="font-size: 12pt">Текст</FONT>
2.2. Способы встраивания определения стиля
2.2.1. Встраивание определение стиля в тэг
<FONT style="font-size: 12pt">Текст</FONT>
<FONT style="font-size: 12pt; color: red">Текст</FONT>
<FONT style="font-size: 12pt; color: red; font-family: 'Arial'">Текст</FONT>
2.2.2. Встраивание определения стилей в заголовок HTML-документа
Листинг 2.1. Пример использования стилей
<HTML>
<HEAD>
<TITLE>Пример использования стилей</TITLE>
<STYLE>
.text1 { font-size: 12pt; color: red; font-family: "Arial" }
FONT { font-size: 12pt; color: green; font-family: "Arial" }
FONT.text2 { font-size: 12pt; color: blue; font-family: "Arial" }
</STYLE>
</HEAD>
<BODY>
<FONT class="text1">Текст1</FONT><BR><!-- Красный текст -->
<FONT>Текст2</FONT><BR><!-- Зеленый текст -->
<FONT class="text2">Текст3</FONT><BR><!-- Синий текст -->
<P class="text2">Текст4</P><BR><!-- Цвет по умолчанию -->
<P class="text1">Текст5</P><BR><!-- Красный текст -->
</BODY>
</HTML>
FONT { font-size: 12pt; color: green; font-family: "Arial" }
...
<FONT>Текст2</FONT><!-- Зеленый текст -->
H1, H2 { font-family: "Arial" }
FONT.text2 { font-size: 12pt; color: blue; font-family: "Arial" }
...
<FONT class="text2">Текст3</FONT><!-- Синий текст -->
<P class="text2">Текст4</P>
.text1 { font-size: 12pt; color: red; font-family: "Arial" }
...
<FONT class="text1">Текст1</FONT><!-- Красный текст -->
<P class="text1">Текст5</P><!-- Красный текст -->
2.2.3. Вынесение таблицы стилей в отдельный файл
Листинг 2.2. Содержимое файла с расширением css, например, doc1.css
/* Так можно вставить комментарий */
.text1 { font-size: 12pt; color: red; font-family: "Arial" }
FONT { font-size: 12pt; color: green; font-family: "Arial" }
FONT.text2 { font-size: 12pt; color: blue; font-family: "Arial" }
Листинг 2.3. Содержимое файла с расширением html, например, test.html
<HTML>
<HEAD>
<TITLE>Пример использования стилей</TITLE>
<LINK rel="stylesheet" href="doc1.css">
</HEAD>
<BODY>
<FONT class="text1">Текст1</FONT><BR><!-- Красный текст -->
<FONT>Текст2</FONT><BR><!-- Зеленый текст -->
<FONT class="text2">Текст3</FONT><BR><!-- Синий текст -->
<P class="text2">Текст4</P><BR><!-- Цвет по умолчанию -->
<P class="text1">Текст5</P><BR><!-- Красный текст -->
</BODY>
</HTML>
<LINK rel="stylesheet" href="doc1.css">
2.2.4. Приоритет применения стилей
Листинг 2.4. Содержимое файла с расширением css, например, doc1.css
P { color: red }
Листинг 2.5. Содержимое файла с расширением html, например, test.html
<HTML>
<HEAD>
<TITLE>Пример использования стилей</TITLE>
<LINK rel="stylesheet" href="doc1.css">
<STYLE>
P { color: blue }
</STYLE>
</HEAD>
<BODY>
<P style="color: green"><FONT color="yellow">Текст1</FONT></P><BR>
<P style="color: green">Текст2</P><BR>
</BODY>
</HTML>
2.3. Единицы измерения в CSS
2.3.1. Абсолютные единицы
2.3.2. Относительные единицы
2.3.3. Задание цвета
P { color: red }
P { color: #F00 }
P { color: #FF0000 }
P { color: rgb(255, 0, 0) }
P { color: rgb(100%, 0%, 0%) }
2.4. Форматируем шрифты
2.4.1. Имя шрифта
P { font-family: "Arial" }
P { font-family: "Verdana", "Tahoma" }
P { font-family: "Verdana", "Tahoma", sans-serif }
2.4.2. Стиль шрифта
P { font-family: "Arial"; font-style: normal }
P { font-family: "Arial"; font-style: italic }
P { font-family: "Arial"; font-style: oblique }
2.4.3. Размер шрифта
.text1 { font-size: 12pt; color: red; font-family: "Arial" }
2.4.4. Цвет шрифта
.text1 { font-size: 12pt; font-family: "Arial"; color: red }
2.4.5. Жирность шрифта
P { font-family: "Arial"; font-style: italic; font-weight: 700 }
P { font-family: "Arial"; font-style: italic; font-weight: normal }
P { font-family: "Arial"; font-style: italic; font-weight: bold }
2.5. Форматируем текст
2.5.1. Расстояние между символами в словах
P { letter-spacing: normal; font-style: italic; font-weight: normal }
P { font-size: 12pt; color: red; letter-spacing: 5 mm }
2.5.2. Расстояние между словами
P { word-spacing: normal; font-style: italic; font-weight: normal }
P { font-size: 12pt; color: red; word-spacing: 5 mm }
2.5.3. Отступ первой строки
P { text-indent: 10mm; font-style: italic; font-weight: normal }
2.5.4. Вертикальное расстояние между строками
P { line-height: normal; font-style: italic; font-weight: normal }
P { font-size: 12pt; color: red; font-family: "Arial"; line-height: 5mm }
2.5.5. Горизонтальное выравнивание текста
<DIV style="text-align: center">Элемент с выравниванием по центру</DIV>
<DIV style="text-align: left">Элемент с выравниванием по левому краю</DIV>
<DIV style="text-align: right">Элемент с выравниванием по правому краю</DIV>
<P style="text-align: justify">Абзац с выравниванием по ширине</P>
2.5.6. Вертикальное выравнивание текста
TD { font-size: 12pt; color: red; vertical-align: baseline }
TD { font-size: 12pt; color: red; vertical-align: middle }
TD { font-size: 12pt; color: red; vertical-align: top }
TD { font-size: 12pt; color: red; vertical-align: bottom }
2.5.7. Подчеркивание, надчеркивание и зачеркивание текста
<P style="text-decoration: none">Текст</P>
<P style="text-decoration: underline">Подчеркнутый текст</P>
<P style="text-decoration: overline">Надчеркнутый текст</P>
<P style="text-decoration: line-through">Зачеркнутый текст</P>
2.6. Отступы
2.6.1. Внешние отступы
BODY { margin-left: 0 }
BODY { margin-right: 50 }
BODY { margin-top: 15mm }
BODY { margin-bottom: 20 }
<BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<BODY style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0">
BODY { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0 }
BODY { margin: 0px 0px 0px 0px }