- •Учреждение образования «Гомельский государственный технический университет имени п.О. Сухого»
- •Проектирование и разработка web – сайтов
- •Html. Язык разметки гипертекста
- •1. Глобальные компьютерные сети
- •1.1 Интернет. Основные понятия, принципы функционирования
- •1.2 Адресация в Интернете
- •1.3 Архитектура web-приложений
- •1.4 Современные web - технологии
- •2. Язык гипертекстовой разметки страниц html
- •2.1 Язык гипертекстовой разметки страниц html
- •2.2 Структура html-документа
- •2.2 Задание типа html-документа
- •2.3 Основные элементы заголовка html-документа
- •2.4 Теги форматирования html-документа
- •2.5 Графические объекты html-документа
- •2.6 Задание ссылок
- •2.7 Структурированные данные. Списки
- •2.8 Структурированные данные. Таблицы
- •3. Язык гипертекстовой разметки страниц html. Фреймы
- •4. Язык гипертекстовой разметки страниц html. Формы
- •4.1 Задание формы
- •4.2 Элементы пользовательского интерфейса
- •4.3 Задание кнопок. Тег button
- •4.4 Раскрывающийся список. Тег select
- •4.5 Текстовая область. Тег textarea
- •Css. Каскадные таблицы стилей
- •5. Назначение стилевых таблиц
- •5.1 Встраивание таблиц стилей в html-документ
- •5.2 Типы селекторов
- •5.2.1 Универсальный селектор
- •5.2.2 Селектор типа
- •5.2.3 Селектор класса
- •5.2.4 Селектор идентификатора
- •5.2.5 Селектор атрибутов
- •5.2.6 Селектор псевдоклассов
- •5.2.7 Селекторы псевдоэлементов
- •5.2.8 Составные селекторы. Комбинаторы
- •5.2.9 Селектор потомка
- •5.2.10 Селектор дочерних элементов
- •5.2.11 Селекторcестринского элемента
- •5.2.12 Селектор обобщенных родственных элементов
- •5.3 Иерархия стилей
- •5.4 Единицы измерения
- •5.5 Описание шрифтов
- •5.6 Оформление списков
- •5.7 Задание цвета и фона
- •5.8 Блочная модель документа. Размеры, поля, отступы, границы
- •5.9 Блочная модель документа. Позиционирование, обтекание, управление видимостью
- •1. Вариант
- •2. Вариант
- •3. Вариант
- •6.1 Описание языкаHtml5
- •6.2 Структурные элементыHtml5
- •6.3Html5 и старые браузеры
- •6.4 Пример сайта наHtml5
- •7. Этапу разработки сайта
- •7.1 Этапы верстки веб-страниц
- •7.2 Особенности верстки веб-страниц
- •7.3 Макет сайта. Табличная верстка
- •7.4 Применение таблиц для верстки сайта. Макет из двух колонок
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •7.5 Применение таблиц для верстки сайта. Макет из трех колонок
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
- •Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
- •7.6 Применение таблиц для создания рамок
- •7.7 Применение таблиц для склейки изображений
- •Литература
- •Содержание
5.1 Встраивание таблиц стилей в html-документ
Для применения каскадной таблицы стилей к HTML-документу необходимо ее связать с ним или встроить в него. Это можно сделать четырьмя способами:
Вставка непосредственно в заголовок HTML-документа. Правила таблицы стилей заключаются в контейнерный тег <style>.
<head>
<style>
H1 {color: blue; font-size: 24pt}
b {font-style: italic}
</style>
</head>
Вставка непосредственно тег виде строки описания в атрибуте style.
<h1 style="color: blue; font-size:24pt">
Импорт ‑ вставка таблицы стилей из внешнего файла. Файл таблицы стилей является текстовым файлом с расширением css. Оператор@import используется перед другими правилами таблицы стилей в контейнере<style> или вcss-файле.
<style>
@import: url(http://www.myserver.ru/css/mystyle.css)
</style>
Связывание с таблицей стилей в внешнем файле с помощью ссылки задаваемой тегом <link>, который помещаемого в контейнер<head>. Общий вид:
<link rel=stylesheet type=text/css href="URL-адрес файла ">
Пример.
<head>
<link rel=stylesheet type=text/css
href="http:// www.myserver.ru/css/mystyle.css ">
</head>
Таблица стилей, вставленная с помощью тега <style>, действует на элементы только текущего HTML-документа, в котором этот тег находится. Если ту же таблицу необходимо применить и к другим документам, то ее код придется повторить в соответствующих HTML-страницах. При этом возрастает общий объем файлов сайта, а также трудозатраты в случае необходимости изменить его стиль. Чтобы избежать этого, используют импорт или связывание таблиц из внешнихcss-файлов. Когда требуется изменить параметры стилей для отдельных элементов (например, их оформление), используют атрибутstyle. Возможно также комбинирование всех способов встраивания таблиц.
При использовании внешних стилей авторы поступают совершенно по-разному. Одни хранят все стили сайта в одном файле, другие – в нескольких. Например, один файл содержит стили для всего сайта и присутствует на всех страницах, другой – дополнительно подключается только к определенным разделам, третий – к определенным подразделам и т.д.
В записях таблиц стилей можно задавать комментарии которые задаются символами /* и */. Тег<style> имеет следующие атрибуты:
type ‑ для каскадных таблиц стилей всегда имеет значениеtext/css;
media ‑ определяет тип устройства вывода. Браузеры обычно используют следующие значения:screen (экран),print (печать) иall (все). Можено создать стили отдельно для отображения документа на экране монитора и для вывода на печать.
5.2 Типы селекторов
CSS состоит из правил, а каждое правило – изселектораиблока объявлений. Блок объявлений содержит CSS-свойства, определяющие отображение элемента веб-страницы в браузере. Селектор отвечает за выбор этого самого элемента. Селектор служит для однозначной идентификации HTML элемента средствами CSS. Он позволяет выбирать именно тот элемент (или группу элементов), который нужен. С помощьюпростыхселекторов можно выбирать:
все объекты – универсальный селектор;
объекты определенного типа;
объекты с заданным классом;
объект с определенным идентификатором;
объекты с определенными характеристиками – селекторы атрибутов.
Объединяя простые селекторы можно выбирать объекты по более сложным правилам:
объекты, находящиеся внутри какого-то объекта – селектор потомка;
объекты, непосредственно вложенные в какой-то объект – дочерний селектор;
объект, расположенный после другого объекта – сестринский селектор.
Также существуют селекторы псевдоклассов и псевдоэлементов. Они позволяют назначать стили элементам, которые зависят не только от разметки, но и от состояния документа.