Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 33


Самоучитель по HTML и CSS

Добрый день.

На сайте htmlbook.ru появился справочник по тегам HTML. Скачать можно по адресу http://htmlbook.ru/?id=7 Формат CHM, объем архива 790 Кб. Свои пожелания, что еще добавить в этот справочник, пишите мне на ящик vlad@htmlbook.ru

Также доступен самоучитель HTML, особенно актуальный для тех, кто недавно присоединился к нашей рассылке или для тех, кто желает самостоятельно изучить HTML. Файл получите по адресу http://htmlbook.ru/download/?id=4

4. Синтаксис CSS

Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис.

Селектор { свойство1: значение; свойство2: значение; ... }

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 4.1 показаны две разновидности оформления селекторов и их правил.

Пример 4.1. Использование стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование стилей</title>
<style type="text/css">
h1 { color: #a6780a; font-weight: normal; }

H2 {
 color: olive;
 border-bottom: 2px solid black;
}
</style>
</head>
<body>

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>

</body>
</html>

В данном примере свойства селектора H1 записаны в одну строку, а для селектора H2 каждый параметр находится на отдельной строке. Во втором случае легче отыскивать параметры и править их по необходимости, но при этом незначительно возрастает объем данных за счет активного использования пробелов и переносов строк.

Замечание

Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры,например — terminator4, titanic2, extra.

Селекторы тегов

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

Тег { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, оформление которого будет переопределено, заглавными или прописными символами не имеет значения. Внутри фигурных скобок пишется свойство CSS, а после двоеточия — его значение. Набор параметров разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько (пример 4.2).

Пример 4.2. Изменение стиля тега параграфа

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы тегов</title>
<style type="text/css">
P {
 text-align: justify; /* Выравнивание по ширине */
 color: green /* Зеленый цвет текста */
}
</style>
</head>
<body>

<p>Более эффективным способом ловли льва в пустыне является метод золотого сечения. При его использовании пустыня делится на две неравные части, размер которых подчиняется правилу золотого сечения.</p>

</body>
</html>

В данном примере изменяется цвет текста и выравнивание текста параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <P>.

Замечание

Следует понимать, что стиль можно добавить только для тегов, которые непосредственно отображаются в контейнере <BODY>.

Классы

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

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса" (пример 4.3).

Пример 4.3. Использование классов c тегами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Классы</title>
<style type="text/css">
P { /* Обычный параграф */
 text-align: justify; /* Выравнивание текста по ширине */
}

P.cite { /* Параграф с классом cite */
 text-align: justify; /* Выравнивание текста по ширине */
 color: navy; /* Синий цвет текста */
 font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>

<p>При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.</p>
<p class="cite">Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.</p>

</body>
</html>

Первый абзац выровнен по ширине с текстом черного цвета, а следующий, к которому применен класс cite — написан курсивом синего цвета.

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

.Имя класса { свойство1: значение; свойство2: значение; ... }

При такой записи, класс можно применять к любому тегу (пример 4.4).

Пример 4.4. Использование классов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Классы</title>
<style type="text/css">
.cite {
 color: navy; /* Синий цвет текста */
 font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>

<p>Следует тщательно позаботиться о своем рабочем месте. Освещение в помещении отрегулировать таким образом, чтобы источник света находился сбоку или сзади оператора. Во избежании медицинских осложнений
<b class="cite">стул рекомендуется выбирать с мягким сидением</b>.</p>

</body>
</html>

Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>. В примере 4.5 показано изменение стиля первой буквы предложения путем использования класса совместно с тегом <SPAN>.

Пример 4.5. Использование классов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Классы</title>
<style type="text/css">
.inicial {
 color: red; /* Красный цвет текста */
 font-size: 200%; /* Размер текста */
}
</style>
</head>
<body>

<p><span class="inicial">Н</span>абирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.</p>

</body>
</html>

Рецепты CSS

Как сделать скругленные уголки у блока без использования рисунков?

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

Если увеличить фрагмент с уголком (рис. 1), то можно увидеть, что скругление образуется за счет наложения нескольких блоков, количество которых обычно бывает от трех до шести. Большее число блоков повышает радиус скругления, но и загромождает код, так что остановимся на радиусе в четыре пиксела.

Рис. 1

Рис. 1. Увеличенный скругленный уголок

Чтобы создать подобное скругление, достаточно добавить сверху и снизу от содержимого четыре блока, задавая им нужную высоту 1–2 пиксела и отступы по краям через стилевой атрибут margin, как показано в примере 1.

Пример 1. Стиль для создания блоков

.r1, .r2, .r3, .r4 {
display: block; /* Блочный элемент */
font-size: 0; /* Размер шрифта */
height: 1px; /* Высота */
background: #f677c5; /* Цвет фона */
}
.r1 { margin: 0 5px; }
.r2 { margin: 0 3px; }
.r3 { margin: 0 2px; }
.r4 { margin: 0 1px; height: 2px; }

На всякий случай ставим, что размер шрифта нулевой, так мы можем не бояться, что добавление внутрь блока текста (например, неразделяемого пробела &nbsp;) увеличит высоту.

Теперь надо добавить эти блоки сверху и снизу от контента через какой-нибудь тег, например, <B>. Сверху блоки будут идти в возрастающем порядке, от 1 до 4, а снизу в убывающем, от 4 до 1. В примере 2 показан окончательный код.

Пример 2. Создание блока с закругленными уголками

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Скругленные уголки</title>
<style type="text/css">
.r1, .r2, .r3, .r4 {
display: block;
font-size: 0;
height: 1px;
background: #f677c5;
}
.r1 { margin: 0 5px; }
.r2 { margin: 0 3px; }
.r3 { margin: 0 2px; }
.r4 { margin: 0 1px; height: 2px; }
.block-round-content {
background: #f677c5; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block-round">
<b class="r1">&nbsp;</b><b class="r2">&nbsp;</b><b class="r3">&nbsp;</b><b class="r4">&nbsp;</b>
<div class="block-round-content">
Цель конкурса &#8212; обнаружение предметов материального мира, обладающих колоссальной ценностью, принадлежащих живому биологическому организму, в дальнейшем именуемым драконом, и их экспроприация.
</div>
<b class="r4">&nbsp;</b><b class="r3">&nbsp;</b><b class="r2">&nbsp;</b><b class="r1">&nbsp;</b>
</div>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Блок со скругленными уголками

Хотя метод получился достаточно универсальным, он имеет ряд ограничений. Так, нельзя установить внутри блока градиент, поскольку горизонтальные линии однотонные. Также для изменения радиуса скругления приходится править стилевые параметры одновременно у нескольких селекторов.

Приведем еще один пример для создания блока с радиусом скругления три пиксела. Во многих случаях это наиболее оптимальный вариант, как по части дизайна, так и компактности кода (пример 3).

Пример 3. Радиус скругления три пиксела

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Скругленные уголки</title>
<style type="text/css">
.r1, .r2, .r3 {
display: block; font-size: 0; height: 1px; background: #7da7d9;
}
.r1 { margin: 0 4px; }
.r2 { margin: 0 2px; }
.r3 { margin: 0 1px; height: 2px; }
.block-round-content {
background: #7da7d9; /* Цвет фона */
color: #fff;
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block-round">
<b class="r1">&nbsp;</b><b class="r2">&nbsp;</b><b class="r3">&nbsp;</b>
<div class="block-round-content">
При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной.
</div>
<b class="r3">&nbsp;</b><b class="r2">&nbsp;</b><b class="r1">&nbsp;</b>
</div>
</body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3

Рис. 3. Вид блока со скругленными уголками

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное