Категории:
АстрономияБиология
География
Другие языки
Интернет
Информатика
История
Культура
Литература
Логика
Математика
Медицина
Механика
Охрана труда
Педагогика
Политика
Право
Психология
Религия
Риторика
Социология
Спорт
Строительство
Технология
Транспорт
Физика
Философия
Финансы
Химия
Экология
Экономика
Электроника
Каскадные таблицы стилей 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>} и т.д |