Тема: Каскадные таблицы стилей CSS. Использование свойств текста и псевдостилей гиперссылок.

Цель: Научить применять свойства текста и использовать псевдостили гипертекста.

 

Краткие теоретические сведения

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

text-decoration - задает специальное оформление текста: подчеркнутый, зачеркнутый и т.п.

text-decoration: none|underline|overline|line-through|blink;

text-decoration: none; - отменяет любое специальное оформление (значение по умолчанию для большинства тегов);

text-decoration: underline; - подчеркивает текст (значение по умолчанию для тегов <A>, <INS> и <U>);

text-decoration: overline; - черта сверху текста;

text-decoration: line-through; - зачеркивает текст (значение по умолчанию для тегов <DEL>, <S> и <STRIKE>);

text-decoration: blink; - мигание текста (отсутствует в IE)

text-decoration: uppercase - все буквы становятся заглавными;

text-decoration: lowercase - все буквы становятся маленькими (прописными);

text-decoration: capitalize - каждое слово в строке начинается с большой буквы.

Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

text-underline-position - задает местонахождение линии подчеркивания: выше или ниже текста. Имеет смысл, если атрибут text-decoration равен underline или overline.

text-underline-position: below|above;

text-underline-position: below; - помещает линию подчеркивания под текстом (значение по умолчанию);

text-underline-position: above; - над текстом ("надчеркивание").

Поддерживается IE начиная с 5.5

text-align - определяет горизонтальное выравнивание текста.

text-align: left|right|center|justify;

text-align: left; - выравнивание текста по левому краю (значение по умолчанию);

text-align: right; - выравнивание по правому краю;

text-align: center; - выравнивание по центру;

text-align: justify; - выравнивание по обоим краям (по ширине).

Поддерживается IE начиная с 3.02; значение justify поддерживается начиная с 4.0

Поддерживается NN начиная с 4.0

text-align-last - задает горизонтальное выравнивание последней строки абзаца.

text-align-last: auto|inherit|left|right|center|justify;

text-align: auto; - выравнивает последнюю строку абзаца так же, как и остальные строки (основываясь на значении атрибута text-align) (значение по умолчанию);

text-align: inherit; - так же, как выровнен текст родителя;

text-align: left; - выравнивание текста по левому краю;

text-align: right; - выравнивание по правому краю;

text-align: center; - выравнивание по центру;

text-align: justify; - выравнивание по обоим краям (по ширине).

Поддерживается IE начиная с 5.5

text-indent - устанавливает отступ красной строки.

text-ident: {Отступ}|{Отступ}%;

Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0.

Поддерживается IE и NN начиная с 4.0

text-height - интервал между строками текста.

text-height: {Интервал}|{Интервал}%;

Интервал может быть задан как абсолютной величиной, так и процентом от ширины родителя.

Поддерживается IE и NN начиная с 4.0

text-transform - Задает преобразование регистра символов текста.

text-transform: none|capitalize|uppercase|lowercase;

text-transform: none; - отключает любые преобразования регистра символов (значение по умолчанию);

text-transform: capitalize; - преобразует первую букву каждого слова текста в верхний регистр;

text-transform: uppercase; - преобразует все символы текста в верхний регистр;

text-transform: lowercase; - в нижний регистр.

Поддерживается IE и NN начиная с 4.0

clear - задает поведение текста при "обтекании" им некоторых элементов страницы, таких как изображения.

clear: none|left|right|all;

Атрибут задается для текста, а не для элемента страницы, который он будет "обтекать".

clear: none; - разрешает тексту "обтекать" элемент страницы (значение по умолчанию);

clear: left; - запрещает тексту "обтекать" элемент страницы с левой стороны;

clear: right; - с правой стороны;

clear: all; - с обеих сторон.

Поддерживается IE и NN начиная с 4.0

word-spacing - определяет дополнительное расстояние между словами в тексте.

word-spacing: normal|{Величина};

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

Значение по умолчанию normal.

Поддерживается IE начиная с 4.0

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

word-wrap: normal|break-word;

word-wrap: normal; - запрещает переносить строки по словам (значение по умолчанию);

word-wrap: break-word; - разрешает.

Поддерживается IE начиная с 5.5

word-mode - задает направление строк текста: горизонтальное или вертикальное.

word-mode: lr-tb|tb-rl;

word-mode: lr-tb; - задает обычное горизонтальное расположение строк текста; текст пишется слева направо и сверху вниз (значение по умолчанию);

word-mode: tb-rl; - поворачивает текст на 90° по часовой стрелке; при этом он будет писаться сверху вниз и справа налево.

Поддерживается IE начиная с 5.5

leter-spacing - определяет расстояние между символами в тексте.

letter-spacing: normal|{Величина};

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

Значение по умолчанию normal.

Поддерживается IE начиная с 4.0

line-height - задает вертикальное расстояние между строками текста.

line-height: normal|{Y}|{Y}%;

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

Значение по умолчанию normal.

Поддерживается IE и NN начиная с 4.0

direction - задает порядок чтения текста: слева направо или справа налево.

direction: ltr|rtl|inherit;

direction: ltr; - задает порядок чтения слева направо (значение по умолчанию);

direction: rtl; - справа налево;

direction: inherit; - заставляет наследовать порядок чтения у родителя.

Для документов, составленных на европейских языках, порядок чтения всегда слева направо (ltr).

Поддерживается IE начиная с 5.0

unicode-bidi - задает поведение встроенных элементов при изменении направления письма с помощью атрибута direction.

unicode-bidi: normal|embed|bidi-override;

unicode-bidi: normal; - меняет направление письма и у родителя (используется по умолчанию);

unicode-bidi: embed; - меняет направление письма только у встроенного элемента;

unicode-bidi: bidi-override; - аналогично embed за тем исключением, что направление письма меняется согласно значению атрибута direction, независимо от локальных установок Web-обозревателя.

Поддерживается IE начиная с 5.0

accelerator - позволяет указать, содержит ли текст элемента страницы клавишу-ускоритель.

accelerator: true|false;

Клавиша-ускоритель - это особая клавиша на клавиатуре, при нажатии которой вместе с клавишей <Alt> происходит переход к данному элементу страницы.

accelerator: true; - указывает, что текст содержит клавишу-ускоритель;

accelerator: false; - не содержит.

Значения по умолчанию не имеет.

Пример использования:

<LABEL for="txtName"><U style="accelerator: true">И</U>мя</LABEL>

<INPUT type="text" id="txtName" accesskey="B" value="Имя пользователя">

В этом случае символ "И" в слове "Имя" будет подчеркнут. Если в региональных настройках операционной системы Windows 2000 была выбрана опция Скрыть индикаторы клавиш-ускорителей до нажатия Alt, этот символ не будет подчеркнут, пока пользователь не нажмет клавишу <Alt> на клавиатуре.

Поддерживается IE начиная с 5.0

 

Псевдостили гиперссылок

Псевдостили применяются к гиперссылкам <A>.

active - применяется к активным гиперссылкам, т.е. гиперссылкам, на которых находится фокус ввода пользователя.

{Задание стиля гиперссылки}:active {Определение стиля};

Аналогичен атрибуту alink тега <BODY>.

Пример:

A:active {color: lime;}

активная гиперссылка будет ярко-зеленой.

По умолчанию в IE активные гиперссылки выделяются красным цветом.

Поддерживается IE начиная с 4.0

hover - применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши.

{Задание стиля гиперссылки}:hover {Определение стиля};

Пример:

A:hover {color: lime; text-decoration: none;}

Гиперссылка, при наведении на нее мыши, будет ярко-зеленой и неподчеркнутой.

По умолчанию в IE гиперссылки подчеркиваются, когда пользователь помещает над ними курсор мыши.

Поддерживается IE начиная с 4.0

link - применяется к не посещенным еще пользователем гиперссылкам.

{Задание стиля гиперссылки}:link {Определение стиля};

Аналогичен атрибуту link тега <BODY>.

Пример:

A:link {color: black;}

По умолчанию в IE непосещенные гиперссылки отображаются синим цветом.

Поддерживается IE начиная с 3.02

visited - применяется к уже посещенным пользователем гиперссылкам.

{Задание стиля гиперссылки}:visited {Определение стиля};

Аналогичен атрибуту vlink тега <BODY>.

Пример:

A:link {color: indigo;}

По умолчанию в IE посещенные гиперссылки отображаются бордовым цветом. Поддерживается IE начиная с 3.02

Практическое задание.

1.Создать HTML-страницу с использованием CSS.

2.Определить для всех ссылок на странице цвет, размер, семейство шрифта. Изменения свойств ссылки должны происходить в следующих случаях: в момент нахождения курсора над ней, посещённой ссылки, активной ссылки и в обычном состоянии.

3.Определить один общий класс для изменения текста на все заглавные буквы, а другой – на прописные.

 

Контрольные вопросы.

1.Свойства текста и его атрибуты.

2.Псевдостили гиперссылок и его атрибуты.

3.Какой параметр задаёт регистр букв и объясните назначение каждого атрибута?

Подготовка отчета по практическому заданию.

Отчет должен состоять из следующих пунктов:

1. Краткие теоретические сведения.

2. Индивидуальное практическое задание, метод его выполнения, текст кода программы и полученные результаты.

3. Краткое заключение.

 

Пример выполнения 6-го практического задания: Каскадные таблицы стилей CSS. Использование свойств текста и псевдостилей гиперссылок.

HTML код:

Index.htm

<HTML>

<HEAD>

<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>

</head>

<FRAMESET rows="15%, *">

<frame name="head" src="head.htm" SCROLLING="No" NORESIZE>

<FRAMESET cols="25%, *">

<FRAMESET rows="60%, *">

<frame name="menu1" src="menu1.htm" SCROLLING="Auto" NORESIZE>

<frame name="menu2" src="menu2.htm" SCROLLING="Auto" NORESIZE>

</frameset>

<frame name="main" src="main.htm" SCROLLING="Auto" NORESIZE>

</frameset>

</frameset>

</html>

 

Head.htm

<HTML>

<HEAD>

<LINK rel="stylesheet" type="text/css" href="main.css">

<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>

</head>

<BODY>

<H1 class="txtdecor">Практическое задание №6</h1>

</body>

</html>

Menu1.htm

<HTML>

<HEAD>

<LINK rel="stylesheet" type="text/css" href="main.css">

<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>

</head>

<BODY>

<UL>

<LI><A HREF="main.htm" target="main">Главная

<LI><A HREF="subject.htm" target="main">Предмет

<LI><A HREF="teacher.htm" target="main">Преподаватель

<LI><A HREF="theme.htm" target="main">Тема

<LI><A HREF="task.htm" target="main">Задание</a>

<LI><A HREF="fac.htm" target="main">Факультет</a>

<LI><A HREF="course.htm" target="main">Курс</a>

<LI><A HREF="group.htm" target="main">Группа</a>

<LI><A HREF="lastname.htm" target="main">Фамилия</a>

<LI><A HREF="firstname.htm" target="main">Имя</a>

</ul>

</body>

</html>

 

Menu2.htm

<HTML>

<HEAD>

<LINK rel="stylesheet" type="text/css" href="main.css">

<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>

</head>

<BODY>

<UL>

<LI><A HREF="nonetxttrans.htm" target="main">Обычные буквы

<LI><A HREF="uppertxttrans.htm" target="main">Заглавные буквы

<LI><A HREF="lowertxttrans.htm" target="main">Прописные буквы

</ul>

</body>

</html>

 

Main.htm

<HTML>

<HEAD>

<LINK rel="stylesheet" type="text/css" href="main.css">

<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>

</head>

<BODY>

<IMG SRC="img1.jpg" width="600" height="450">

</body>

</html>

 

Main.css

BODY {background-color: e5e5e5}

a {text-decoration: none; color: Purple;}

a:link {color: Purple; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}

a:visited {color: Navy; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}

a:active {color: Red; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-decoration: blink;}

a:hover {color: Lime; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline;}

.txtdecor {text-decoration: underline; text-align: center; color: red}

.txttrans1 {text-transform: uppercase;}

.txttrans2 {text-transform: lowercase;}

 

Рис. 6. Результат выполнения 6-го практического задания.