Практическое занятие №10. Применение каскадных таблиц CSS для оформления текста в HTML-документе

Практическое занятие №10

Применение каскадных таблиц CSS для оформления текста в HTML-документе

Цель.

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

Семейство шрифтов

Семейство шрифтов текста задается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов, как «резервные» системы. Если браузер не поддерживает первый шрифт, он пытается использовать следующий шрифт и т.д.

Начните со шрифта, который вы хотите установить, и закончите с общей семьей шрифтов, чтобы браузеры могли выбрать аналогичный шрифт в общей семье, если нет других доступных шрифтов.

Примечание: Если имя шрифта содержит более чем одно слово, оно должно быть в кавычках, как font-family: 'Times New Roman'. Более одного семейства шрифтов указываются в списке разделенном запятыми:

Стиль шрифта

Свойство font-style в основном используется, например, для указания текста курсивом, имеет три значения:

font-style: normal|italic|obligue

-  normal - текст отображается нормально

-  italic - текст отображается курсивом

-  oblique - текст «наклонный» (oblique очень похож на курсив, но менее поддерживается)

Размер шрифта

Свойство font-size устанавливает размер текста в формате:

font-size: абсолютный размер | относительный размер | значение | % | inherit

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

Выравнивание текста

Свойсто text-align отвечает за выравнивание текста по горизонтали. Текст можно выравнивать по центру (center), по правому/левому (right/left) краю или по ширине. Когда текст выровнен по ширине (text-align:justify), каждая строка имеет одинаковую длину (как в журналах и газетах).

Различные маркеры списка элементов

Тип маркера пункта списка указывается со свойством list-style-type

Кроме того, можно определить свой собственный маркер списка, сделать это можно так:

 ul { list-style-image: url(images/book.gif); }

Свойства цвета и фона

Древние реликты (HTML)

Для начала взглянем на фон с точки зрения HTML. Точка зрения, надо сказать, не самая лучшая, но будем соблюдать хронологию. Итак, для работы с фоном у нас имеется два атрибута:

1.    bgcolor - задает фоновый цвет элемента. Присутствует у элементов BODY, TABLE, TR, TH и TD. В спецификации HTML 4.01 помечен как нежелательный для использования;

2.    background - задает фоновое изображение для элемента. Согласно спецификации HTML 4.01 присутствует только у элемента BODY и помечен как нежелательный для использования, однако браузеры поддерживают данный атрибут для элементов TABLE и TD.

Естественно, набор крайне ограничен и морально устарел.

Альтернатива новой эры - CSS

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

color - Определяет цвет текста

Значение:

·       любое соответствующее стандарту значение цвета.

·       Inherit - применяется значение родительского элемента.

   p{color:red}

   p{color:rgb(255,0,0)}

   p{color:#ff0000}

background-color- Определяет цвет фона.

Значение:

·       любое соответствующее стандарту значение цвета.

·       Transparent - фон элемента делается прозрачным (по умолчанию).

·       Inherit - применяется значение родительского элемента.

body{

     background-color: black;

    }

background-image - Определяет фоновое изображение элемента.

Значение:

·       none - фоновое изображение не устанавливается.

·       любое соответствующее стандарту значение URL фонового изображение.

·       Inherit - применяется значение родительского элемента.

h1{

    background-image: url(pictures.gif);

  }

background-repeat - Определяет направление, по которому экран будет заполняться копиями фонового изображения.

Значение:

·       repeat - фоновое изображение повторяется по горизонтали и по вертикали (по умолчанию).

·       repeat-x - фоновое изображение повторяется только по горизонтали.

·       repeat-y - фоновое изображение повторяется только по вертикали.

·       no-repeat - фоновое изображение не повторяется.

·       inherit - применяется значение родительского элемента.

body {

      background-image : url(fon.png) ;

        background-repeat: no-repeat;

        background-attachment: scroll ;

     }

background-attachment: - Устанавливает прокрутку

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

Значение:

·       scroll - фон прокручивается вместе с содержимым;

·       fixed - фон строго зафиксирован.

div{

    background-image: url(pictures.gif);

      background-attachment: fixed ;

  }

opasity: - Установка полупрозрачного фона

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может.

Результат применения данного свойства Вы можете наблюдать на этой странице.

div{

     border-radius:20px;      /* Закругленные уголки */

     background-color:white;  /* Цвет фона */

       opacity: 0.9;           /* Полупрозрачный фон */

   }

background-position: - задает местоположение фонового изображения.

В качестве первого значения данного свойства должна задаваться величина смещения изображения по горизонтали, а в качестве второго величина смещения по вертикали. Величина смещения может быть указана как с помощью пикселей (px), процентов (%) и сантиметров (cm) (background-position:50px 30px;), так и с помощью предопределенных ключевых слов (background-position:right top; background-position:center center;).

body

{

background-image:url('spider2.gif');

background-repeat:no-repeat;

background-position:40px 60px;

}

Свойства фона могут быть заданы одной строкой c помощью свойства background, которое объединяет в себе все вышеперечисленные свойства:

Тень текста с помощью CSS

Свойство «TEXT-SHADOW»

Чтобы добавить тень для текста, существует правило «text-shadow».

Синтаксис:

text-shadow: «X» «Y» «Амплитуда» «Цвет»;

Значение:

1.         X – это горизонтальное смещение тени (положительное значение – смещение тени вправо, отрицательное – смещение тени влево).

2.         Y – вертикальное смещение тени (положительное значение – смещение тени вниз, отрицательно значение – смещение тени вверх);

3.         Амплитуда – чем выше ее значение, тем больше степень размытия;

4.         Цвет – цвет тени

Пример:

Результат:

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

Задание к практическому занятию

Задание 1. Контурный текст

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 1). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рисунок 1 - Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (листинг 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Листинг 1 - Контурный текст

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (листинг 2).

Листинг 2 - Четыре тени для контура

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

Рисунок 2 - Контур с помощью четырёх теней

Задание 2. Трёхмерный текст

Для добавления эффекта трёхмерного текста, показанного на рис. 3 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рисунок 3 - Трёхмерный текст

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

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В листинге 3 используется пять теней одного цвета.

Листинг 3 - Тень для добавления трёхмерности

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Задание 3. Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 4).

Рисунок 4 - Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (листинг 4).

Листинг 4 - Рельефный текст

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

text-shadow: #333 -1px -1px 0,

              #fff 1px 1px 0;

Задание 4. Свечение

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

Рисунок 5 - Свечение текста

Листинг 5 - Свечение

Задание 5. Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 6), причём степень размытия легко регулировать через параметр text-shadow.

Рисунок 6 - Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (листинг 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Листинг 6 - Размытие текста

Задание 6. Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В листинге 7 показаны такие приёмы.

Листинг 7 - Использование псевдоклассов

Задание 7. Создайте тени текста при наведение курсора

Текст до наведения курсора

Текст после наведения курсора

Задание 8. Светящийся текст

Для этого эффекта необходимо использовать стекированные text-shadow, чтобы создать эффект свечения. Можно использовать несколько значений для text-shadow, чтобы накладывать их друг на друга и создавать другие потрясающие эффекты. В задании увеличивается радиус размытия тени и придали ей ярко-синий цвет. Что объясняет неоново-синее свечение.

Задание 9. Создайте эффект отображения текста

Текст до наведения курсора

Текст после наведения курсора

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

1. Дайте определение понятию стиль.

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

3. Назовите основные статические фильтры.

4. Опишите пример использования статического фильтра к изображению.

5. Охарактеризуйте способы включения и использования стилей в документе.

6. Приведите пример позиционирования текста на странице с помощью стилей. Чем такой способ отличается от использования таблиц и фреймов?

7. Для чего используется z-index?