- •1. Цель работы 2
- •2. Методические указания по организацию самостоятельной работы 2
- •3. Порядок выполнения работы и индивидуальные задания 26
- •2.2 Элемент div
- •2.3 Свойства блоков
- •2.3.1 Отступы (margin)
- •2.3.2 Набивка (padding)
- •2.3.3 Граница (border)
- •2.3.4 Обтекание блока текста
- •2.4 Управление цветом в css
- •2.4.1 Цвет текста
- •2.4.2 Цвет фона текста
- •2.5 Шрифт
- •2.5.1 Гарнитура (font-family)
- •2.5.2 Кегль (font-size)
- •2.5.3 Начертание
- •2.6 Координаты и размеры
- •2.6.1 Абсолютные координаты
- •2.6.2 Относительные координаты
- •2.6.3 Линейные размеры блока
- •2.7 Управление видимостью
- •2.7.1 Порядок наложения и область видимости
- •2.7.2 Порядок наложения блоков. Z-index
Лабораторная работа №1 2
Проектирование главной страницы сайта с использованием CSS 2
1. Цель работы 2
2. Методические указания по организацию самостоятельной работы 2
2.1 Каскадные таблицы стилей 2
2.2 Элемент DIV 3
2.3 Свойства блоков 4
2.3.1 Отступы (margin) 6
2.3.2 Набивка (padding) 8
2.3.3 Граница (border) 9
2.3.4 Обтекание блока текста 10
2.4 Управление цветом в CSS 12
2.4.1 Цвет текста 12
2.4.2 Цвет фона текста 13
2.5 Шрифт 14
2.5.1 Гарнитура (font-family) 15
2.5.2 Кегль (font-size) 16
2.5.3 Начертание 18
2.6 Координаты и размеры 19
2.6.1 Абсолютные координаты 19
2.6.2 Относительные координаты 21
2.6.3 Линейные размеры блока 22
2.7 Управление видимостью 23
2.7.1 Порядок наложения и область видимости 24
2.7.2 Порядок наложения блоков. z-index 24
2.7.3 Область видимости блока. clip 26
3. Порядок выполнения работы и индивидуальные задания 26
3.1 Содержание отчета 26
3.2 Индивидуальные задания 26
Лабораторная работа №1
Проектирование главной страницы сайта с использованием CSS
1. Цель работы
Целью данной работы является ознакомление с каскадными таблицами стилей и проектирование главной страницы сайта.
2. Методические указания по организацию самостоятельной работы
В лабораторной работе будут рассмотрены следующие вопросы:
Элемент DIV
Свойства блоков
Управление цветом в CSS
Шрифт
Координаты и размеры
Управление видимостью
2.1 Каскадные таблицы стилей
Описание стилей отображения элементов HTML-разметки носит название "Каскадные таблицы стилей". Под словом "таблицы" следует понимать набор свойств элемента разметки, который можно представить в виде строки в таблице свойств, т.е. элементы разметки — строки, а свойства — столбцы.
"Каскадные" – так как во-первых, существует иерархия элементов разметки (дерево объектов на странице), во-вторых, свойства этих объектов могут наследоваться. В дереве объектов образуется ветвь, которая ведет к листу дерева — элементу разметки, например, элементу списка или параграфу. Его свойства определяются элементами разметки, в которые вложен элемент, и описателями стиля для данного элемента.
Каскадные таблицы стилей (CSS) обеспечивают точное управление форматированием и компоновкой документа. Можно изменять или добавлять цвета, фон, размер шрифта и стили и даже помещать объекты на странице Web в различных местах. Существует три основных способа использования CSS:
Переопределение элемента. Можно изменить способ, которым выводится любой элемент (X)HTML, определяя правило для его стилевого оформления. Если требуется, чтобы все параграфы были записаны через две строки и зеленым цветом, в CSS можно добавить следующее объявление:
p {
line-height: 2em;
color: green;
}
Теперь, любой контент, заключенный в теги <p>, будет записываться через две строки зеленым цветом.
Определение ID. Можно задать для элемента атрибут id для уникальной идентификации его на странице (каждый ID может использоваться на странице только однажды) - например, id="navigation_menu". Это позволяет иметь более детальный контроль форматирования страницы, например, если вы хотите, чтобы только определенный параграф текста выводился через два интервала и зеленым цветом, задайте для него ID:
<p id="highlight">Контент параграфа </p>
И затем примените к нему правило CSS следующим образом:
#highlight {
line-height: 2em;
color: green;
}
Это позволяет применить правило CSS к параграфу на странице с атрибутом id, заданным как highlight (символ # является просто соглашением CSS для указания, что это ID).
Определение класса. Классы похожи на ID, за исключением того, что на каждой странице можно иметь несколько элементов одного класса. Продолжим с тем же примером с интервалом в две строки, если требуется использовать двойной интервал и выделение цветом для двух первых параграфов на странице, то можно будет добавить к ним классы следующим образом:
<p class="highlight">Контент параграфа </p>
<p class="highlight">Контент второго параграфа </p>
И затем применим к ним правило CSS следующим образом:
.highlight {
line-height: 2em;
color: green;
}
highlight является в данном случае классом, а не ID - точка в начале является соглашением CSS для указания класса
При использовании стилей действуют следующие правила старшинства стилей:
сначала применяются стили браузера по умолчанию;
стили браузера по умолчанию переопределяются прилинкованными стилями (элемент LINK заголовка документа);
прилинкованные стили переопределяются описаниями стилей в элементе STYLE;
стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки.
Не все атрибуты стиля могут наследоваться. Например, "набивка" (отступ содержания элемента от его границ) элемента BODY не наследуется вложенными в него элементами и определяется по умолчанию или прописывается для каждого элемента отдельно.