Каскадные таблицы стилей CSS
Лабораторная работа № 7
Цель:
1. Научиться использовать при создании web-страниц каскадные таблицы стилей.
2. Научиться создавать таблицы и использовать их при разработке web-страниц.
CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.
Описания стилей находятся в тегах <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>. Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом:
<!--Описываем стили под именем Example :-->
<STYLE>
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
</STYLE>
<!--Здесь вызываем описания стилей :-->
<div class="Example"> Пример </div>
Если стили располагаются в отдельном файле, тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:
<LINK REL=STYLESHEET TYPE= “text/css” HREF= “Example.css”>
Example.css - это CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указываться теги <STYLE></STYLE>.
Можно определить стиль для любого тега отдельно. Для этого, нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.
<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Пример </H3>
В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.
| Свойства шрифта | |||
| font-family | Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. Пример: P {font-family: Verdana, sans-serif;} | ||
| font-weight | Определяет степень жирности шрифта с помощью трех параметров: lighter (обычный), bold (жирный), bolder (очень жирный) Пример: B {font-weight: bolder;} | ||
| font-size | Устанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах. Примеры использования для тегов H1, H2, H3: H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;} | ||
| Свойства текста | |||
| text-decoration | Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста Пример использования для тега Н4: H4 {text-decoration: underline;} (подчеркивание) H4 {text-decoration: line-through;} (зачеркивание) | ||
| text-align | Определяет выравнивание элемента. Пример: P {text-align: left} (выравнивание по левому краю) P {text-align: right} (выравнивание по правому краю) P {text-align: justify} (выравнивание по ширине) P {text-align: center} (выравнивание по центру) | ||
| text-indent | Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. Пример использования для тега H1: H1 {text-indent: 60pt;} | ||
| line-height | Управляет интервалами между строками текста. Пример: P {line-height: 50 %} | ||
| Цвет элемента фона | |||
| color | Определяет цвет элемента Пример использования для тега H3: H3 {color: #0000FF;} | ||
| background-color | Устанавливает цвет фона для элемента. Пример использования для тега H3: <H3 style=”background-color:gold; color:brown;”> Пример </H3> | ||
| Свойства границ | |||
| margin-left (слево) margin-right (справо) margin-top (сверху) margin-bottom (снизу) | Устанавливают значения отступов вокруг элемента. Пример использования для рисунка: IMG { margin-left: 20pt} IMG { margin-right: 20pt} IMG { margin-top: 20pt} IMG { margin-bottom: 20pt} | ||
| Единицы измерения | |||
| px | Пиксели | ||
| cm | Сантиметры | ||
| mm | Миллиметры | ||
| pt или % | Проценты | ||
Когда размер шрифта задается абсолютными значениями, т.е. указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту величину с помощью опции браузера Вид Размер шрифта невозможно. Если шрифт установлен слишком мелким, то исправить этот недостаток читателю простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах.
Пример 1:
<html>
<style>
HI {font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 150%; font-weight: light}
</style>
<body>
<H 1>Заголовок</Н 1>
Обычный текст
</body>
</html>
Границы и рамки
Спецификация CSS описывает несколько свойств, с помощью которых можно создавать границу вокруг различных элементов и управлять ее видом. Границы - одна из наиболее слабых сторон CSS, т.к. браузеры содержат большое количество ошибок и по-разному интерпретируют параметры. Старшие версии браузеров отображают рамки вокруг элементов более корректно.
| Свойство | Значение | Описание | Пример |
| padding-top padding-right padding-bottom padding-left padding | Значение % | Отступ от границы элемента до его содержимого | table {padding: 15рх 15рх} |
| border-top-width border-right- width border-bottom-width border-left-width | Thin Medium Thick Значение | Ширина границы | Р {border-top-width: 4рх} |
| border-color | цвет | Цвет границы | Р {border-color: red} |
| border-style | None Dotted Dashed Solid Double Groove Ridge Inset Outset | Стиль рамки | table {border-style: double} |
| border-top border-right border-bottom border-left | border-top - width border-style цвет | Определяет толщину, стиль и цвет каждой границы | table {border-top: solid 4px red; border-left: solid 4px blue} |
| border | см. выше | Задает толщину, стиль и цвет рамки | table {border: solid 4px red} |
Пример 2:
<html>
<body>
<p style="color: yellow;
background-color: deepskyblue;
text-decoration: underline;
text-transform: uppercase;
border: pink inset 25;
PADDING: 20; font-size: larger; line-height: 40px; text-align: center;">
В РЕЗУЛЬТАТЕ ПРИМЕНЕНИЯ УКАЗАННЫХ СТИЛЕВЫХ СВОЙСТВ К ДАННОМУ АБЗАЦУ ДОЛЖНО ПОЛУЧИТЬСЯ СЛЕДУЮЩЕЕ </p>
</body>
</html>
Атрибут style="..." задает стилевое оформление абзаца
Атрибут color: yellow;задает цвет текста
Атрибут background-color: deepskyblue;задает цвет фона для абзаца
Атрибут text-decoration: underline;задает подчеркивание для текста
Атрибут text-transform: uppercase;задает режим заглавных букв для текста
Атрибут border: pink inset 25;задает рамку вокруг абзаца, соответственно, розовую выпуклую толщиной 25 пикселей
Атрибут PADDING: 20;задает
Атрибут font-size: larger;задает размер шрифта
Атрибут line-height: 40px;задает межстрочный интервал
Атрибут text-align: center;задает выравнивание текста внутри абзаца по центру.
Задание:
1. Дополнительные справочные сведения смотрите в файле
КИТ-ЛР07_2011_CSS_!Справка!.doc
2. Оформить лабораторные работы № 1-2 с использованием CSS
3. Создать файл с CSS и применить единое стилевое оформление к лабораторным работам № 1-2 (см. таблицу).
4. Сделать вывод о размере кода HTML c применением CSS, a также целесообразности применения CSS в конкретном случае.
| Вариант | Описание стилевого оформления |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “Arial”, размер 16 pt, полужирный, цвет шрифта красный. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 70 %, выравнивание по левому краю, рамка вокруг картинки синего цвета, толщина рамки 4 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “ Courier New ” , размер 10 pt, курсив, цвет шрифта черный, межстрочный интервал – 15 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “ Times New Roman ”, размер 14 pt, курсив, цвет шрифта синий. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 86 %, выравнивание по центру, рамка вокруг картинки розового цвета, толщина рамки 3 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “Arial” , размер 12 pt, ;жирный, цвет шрифта синий формата RGB, межстрочный интервал – 10 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы шрифт “Verdana”, размер 18 pt, | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “ Arial Black”, размер 12 pt, полужирный, цвет шрифта оранжевый. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 65 %, выравнивание по центру, рамка вокруг картинки синего цвета формата RGB, толщина рамки 4 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “ Comic Sans MS” , размер 10 pt, курсив, цвет шрифта синий, межстрочный интервал – 12 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – “ Tahoma”, размер 16 pt, курсив, цвет шрифта лиловый. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 70%, выравнивание по центру, рамка вокруг картинки тёмно-красного цвета, толщина рамки 2 px Для второй лабораторной работы, задание со списками: · Текст – шрифт “Times New Roman” , размер 14 pt, полужирный, цвет шрифта черный, межстрочный интервал – 10px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “Lucida Console”, размер 12 pt, подчёркнутый, цвет шрифта красный. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 85 %, выравнивание по левому краю, рамка вокруг картинки сиреневого цвета, толщина рамки 5 px. Для второй лабораторной работы, задание со списками: · Текст –шрифт “Arial , размер 9 pt, курсив, цвет шрифта серый 25%, межстрочный интервал – 12px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “ Verdana”, размер 11 pt, | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “Courier New”, размер 18 pt, курсив, цвет шрифта синий. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 75 %, выравнивание по левому краю, рамка вокруг картинки красного цвета, толщина рамки 2 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “Arial”, размер 12 pt, полужирный курсив, цвет шрифта -голубой, межстрочный интервал – 16 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “ Verdana”, размер 16 pt, подчёркнутый, цвет шрифта ярко-зелёный. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 50 %, выравнивание по центру, рамка вокруг картинки оранжевого цвета, толщина рамки 5 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “ Tahoma” , размер 12 pt, Начинать С Прописных, цвет шрифта фиолетовый, межстрочный интервал – 15 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “ Times New Roman”, размер 18 pt,ВСЕ ПРОПИСНЫЕ, цвет шрифта серый 80%. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 70%, выравнивание по правому краю, рамка вокруг картинки синего цвета, толщина рамки 2 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “ Arial” , размер 13 pt, все строчные, цвет шрифта черный, межстрочный интервал – 12 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “Arial”, размер 14 pt, полужирный, цвет шрифта красный. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 72 %, выравнивание по левому краю, рамка вокруг картинки цвета индиго, толщина рамки 3 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “Times New Roman” , размер 12 pt, курсив, цвет шрифта черный, межстрочный интервал – 10 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “Arial Black”, размер 13 pt, подчёркнутый, цвет шрифта светло-оранжевый. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 89 %, выравнивание по центру, рамка вокруг картинки синего цвета, толщина рамки 4 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “Comic Sans MS” , размер 12 pt, курсив, цвет шрифта фиолетовый, межстрочный интервал – 12 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “Arial”, размер 14 pt, полужирный, цвет шрифта красный.. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 55 %, выравнивание по левому краю, рамка вокруг картинки жёдтого цвета формата RGB, толщина рамки 2 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “Times New Roman” , размер 12 pt, курсив, цвет шрифта черный, межстрочный интервал – 10 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “Tahoma”, размер 16 pt, полужирный-курсив, цвет шрифта красный. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 78 %, выравнивание по верхнему краю, рамка вокруг картинки чёрного цвета формата RGB, толщина рамки 2 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “ Comic Sans MS” , размер 10 pt, курсив, цвет шрифта синий, межстрочный интервал – 12 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д | |
| Для первой лабораторной работы: · Заголовок страницы – шрифт “ Comic Sans MS ”, размер 11 pt, полужирный, цвет шрифта оранжевый. · Для всего текста должны быть разработаны элементы описывающие теги абзаца. Формат p.1{<свойство1>…<свойствоN>}… p.N{<свойство1>…<свойствоN>} согласно оформления. · Размер картинок 77 %, выравнивание по нижнему краю, рамка вокруг картинки зелёного цвета формата RGB, толщина рамки 1 px. Для второй лабораторной работы, задание со списками: · Текст – шрифт “Arial Black” , размер 10 pt, курсив, цвет шрифта синий, межстрочный интервал – 10 px. · Для списка должны быть разработаны элементы описывающие теги списка. Формат ol.1{<свойство1>…<свойствоN>} или li.N{<свойство1>…<свойствоN>} и т.д Для второй лабораторной работы, задание с таблицами: · Текст – шрифт “ Verdana ” , размер 12 pt, курсив, цвет шрифта черный. · Для таблицы должны быть разработаны элементы описывающие теги строк и столбцов таблицы. Формат table {<свойство1>…<свойствоN>} table.top1{<свойство1>…<свойствоN>}td.top1_left{<свойство1>…<свойствоN>} и т.д |