Модульная лекция: мл 3-10
2.12.6. Использование стилей внутри тэга.
Рассмотрим два примера использования тэга Р – параграф:
Первый пример тэга без использования таблицы стилей.
<P> Текст внутри тэга P без стиля </P>
Второй пример тэга с использованием тэга с параметром использования таблицы стилей STYLE.
<P STYLE="BACKGROUND:black;COLOR:white;FONT-SIZE:30pt;">
Текст внутри тэга P со стилем
Результат реализации рассмотренных двух тэгов следующий.
Рис. 2.4. Пример форматирования текста
Как видно из примера, использование стиля внутри тэга начинается с параметра style, который имеет набор свойства стиля. Каждое свойство начинается с ключевого слова (например, background, color, font-size), после которого
ставится знак двоеточия и значение свойства. Набор свойств заключается в двойные кавычки. Таким образом, синтаксис стиля внутри тэга следующий:
<имя тэга STYLE=”свойство1; свойство2; …свойствоK; ”>
Рассмотрим следующий фрагмент HTML-кода текста, который использует свойства таблицы стилей.
<P STYLE="font-size:20pt;letter-spacing:2em;font-style:italic">Растяжка</P>
<P STYLE="font-size:20pt;letter-spacing:3em;color:red; font:bold;">текста</P>
Результат выполнения данного кода браузером на экране отображается текст:
Рис. 2.5. Пример форматирования текста
Для вставки пробелов между буквами в слове растяжка нужно использовать свойство стиля letter-spacing:2em, в котором величина растяжки определяется значением 2em (можно использовать дробные значения, например, 0.5em). Чем больше число, тем больше пробелов между символами текста.
Рассмотрим пример HTML-документа, в котором используется таблица стилей.
<html>
<head>
<title> Каскадные таблицы стилей - CSS </title>
<style type=text/css>
.stilblack { position: absolute;
top: 20px;
left: 1px;
font-size: 45px;
font-family: 'arial black';
color: black }
.stilred { position: absolute;
top: 40px;
left:15px;
font-size: 45px;
font-family: 'arial black';
color: red }
</style>
</head>
<body>
<p class="stilblack">Cайт Самохвалова</p>
<p class="stilred">Сайт Самохвалова </p>
</body>
</html>
Таблица стилей содержит два класса свойств, которые размещаются внутри тэга head. Внутри документа body используются два тэга – параграф P. Каждый из них ссылается на свой класс свойств: первый тэг Р ссылается на класс с именем stilblack (текст отображается на экране черным цветом), второй тэг Р ссылается на класс с именем stilred (текст отображается красным цветом).
Результат выполнения рассмотренного выше HTML-кода браузером на экране отображается следующий текст
Рис.2.6. Пример форматирования текста
Ниже приводится страница сайта еще одного примера использования таблицы стилей.
<html>
<head>
<title> Использование формы </title>
<style type="text/css">
.st1 { color: white;
background: blue;
font-size:20pt;
letter-spacing:10pt;}
.st2 {
background: black;
color: white;
font-size:30pt;
letter-spacing:5pt;}
.st3 {border-top-style: dashed;
border-top-color: blue;
border-right-style: dotted;
border-left-style: groove;
border-left-width: 10px;
border-bottom: double red 5px}
</style>
</head>
<body >
<P class="st1"> Первый абзац</P>
<P class="st2"> Второй абзац</P>
<P class="st3">Пример использования рамок<br>
с помощью таблицы стилей</P>
</body>
</html>
Рис. 2.7. Пример форматирования текста
Каждое свойство таблицы стилей имеет свой идентификатор – st1, st2, st3. Имя можно выбирать произвольно. Перед именем нужно поставить точку. Сравните параметры каждого из приведенных свойств и обратите внимание на результаты отображения на экране каждого абзаца. Первый абзац с помощью параметра ссылается <P class="st1"> на свойство с именем st1, второй абзац ссылается на свойство с именем st2. В таблице стилей классы st1 и st2 использует свойство letter-spacing, которое задает значения пробелов между символами текста: 10pt и 5pt. В классе st3 используются свойства для рисования рамок вокруг текста. Свойство border-top-style: dashed – верхняя пунктирная рамка, свойство border-top-color: blue – верхняя линия в виде синих прямоугольников. Свойство border-right-style: dotted рисует справа черную линию в виде точек. Свойство border-bottom: double red 5px рисует внизу двойную красную линию. Свойство border-left-style: groove рисует слева линию серого цвета шириной 5 пикселей.