Презентация лабораторной работы "Каскадные таблицы стилей CSS"

Лабораторная работа №7 Определение стилей через классы и идентификаторы

Пример использования классов при определении стилей

В текстовом редакторе Блокнот создайте HTML-документ, в котором с помощью классов создайте три варианта стиля для абзаца P . Для абзацев установите такие параметры как цвет текста, размер шрифта, выравнивание, междустрочный интервал, декорацию текста.

Листинг HTML-документа

Определение классов

p.class1 {

text-align:center;

color:red;

font-size:50;

line-height:30px;

}

p.class2 {

text-align:left;

color:green;

font-size:40;

text-transform:capitalize;

}

p.class3 {

text-align:right;

color:blue;

text-decoration:underline;

font-size:30;

line-height:2;

}

Существует еще два варианта определения стилей: через идентификаторы и классы.

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

Кроме классов стили можно описывать с использованием идентификаторов (#id).

Пример использования идентификаторов при определении стилей

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

Листинг стилевого файла style.css

#first {

Font-size: 30; margin-bottom: 10; margin-top: 20; font-style: italic; color: #808000;

}

#second{

Font-size: 20; margin-left: 30;margin-top: 25; margin-bottom: 3; color: #000080;

}

Листинг HTML -документа

Использование идентификаторов

Дата написана одним шрифтом.

A событие - другим.

Зима.

Пpaзднование Нового Года.

Лето.

Отдыхать! ! !

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

text-align - устанавливает выравнивание в блоке текста.

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

line-height - задание межстрочного расстояния.

text-decoration - определение таких свойств текстового блока, как underline (подчеркивание), overline (линия над текстом), line-through (перечеркивание), blink (мерцание).

text-transform - преобразовывает символы текста в соответствии с указанными значениями параметра. Значения: capitalize - первая буква каждого слова преобразуется в прописную; uppercase - преобразует все буквы выделенного блока в прописные; lowercase - преобразует все буквы выделенного блока в строчные.

Цветовое оформление

color - позволяет задать цвет шрифта.

background-color - устанавливает цвет фона текста.

background-image - параметр, указывающий на рисунок, который необходимо использовать в качестве фона текста.

Например:

р {background-image: url (http://www.ny. com/image.gif ) }

" width="640"

Установка полей документа

margin-left – установка левого поля документа

margin-right - установка правого поля документа

Например:

body { margin-left: 10%; margin-right: 10%; }