Оформление текста.

Дата добавления: 2015-07-09; просмотров: 415; Нарушение авторских прав

Свойство text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста.

Возможные значения:

blink - Текст будет мигать.

line-through - Делает текст перечеркнутым.

overline - Надчёркивание текста.

underline - Подчеркивание текста.

none - Текст без оформления.

Пишется так:

<a href="index.html" style="text-decoration:none">Ссылка без подчёркивания</a>

Пример:

Файл mystyle.css

h1 {text-align: center}
h3 {text-align: left; text-decoration: underline}
a {text-decoration: underline}
a:hover {text-decoration:none}
p {text-align: justify}

Файл index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Оформление текста</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<h3>Меню:</h3>
<a href="index.html">Всё о слонах.</a><br>
<a href="elephant.html">Купить слона.</a>
<hr>
<h1>Всё о слонах</h1>
<p>Слон - самое крупное … … …</p>
<p>Слоны являются … … …</p>
</body>
</html>

Обратите внимание на внешний файл CSS в нем мы "декорировали" ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}

Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться "живым".

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

<== предыдущая лекция	\|	следующая лекция ==>
Выравнивание текста.	\|	Отступ первой строки.