- •Введение
- •1. Основные понятия html
- •Глава 1 – содержание элемента html
- •2. Структура html-документа
- •2.1. Раздел документа head
- •Название документа title
- •2.2. Раздел документа body
- •2.2.1. Спецификация элемента body
- •2.2.2. Советы по использованию атрибутов тега body
- •3.2. Символьная нотация
- •3.3. Соответствие формата rgb и символьной нотации
- •4. Вывод текстовой информации
- •4.1. Абзацы
- •4.2. Управление переводом строки
- •4.3. Заголовки
- •4.4. Списки
- •4.4.1. Маркированный список
- •4.4.2. Нумерованный список
- •4.4.3. Список определений
- •4.5. Форматирование текста
- •4.5.2. Контейнер div
- •4.5.3. Отступы
- •5. Гиперссылки
- •5.1. Универсальный идентификатор ресурсов url
- •5.2. Правила записи ссылок
- •5.3. Внутренние ссылки
- •5.4. Ссылки на документы различных типов
- •5.5. Ссылки на ресурсы Интернета
- •6. Графические элементы
- •6.1. Горизонтальные линии
- •6.2. Таблицы
- •6.3. Рисунки
- •7.1 Понятие фреймов
- •7.2 Расположение фреймов
- •2.3 Вложенные наборы фреймов
- •Элемент frame
- •2.4 Определение цели фрейма
- •2.5 Альтернативное содержимое
- •2.6 Встроенные фреймы: элемент iframe
- •8. Формы
- •Каскадные таблицы стилей: назначение и возможности
- •1. Назначение каскадных таблиц стилей
- •2. Типы каскадных таблиц стилей
- •2.1 Встроенный стиль (inline css)
- •2.2. Внутренняя или внедренная таблица стилей(Internal css)
- •2.3. Внешняя или связанная таблица стилей (External css)
- •2.4. Создание файла сss
- •2.5. Импортированная таблица стилей
- •3. Свойства цвета и фона
- •4. Свойства форматирования текста
- •5. Свойства стиля оформления полей
- •6. Стратегии оформления
2.3. Внешняя или связанная таблица стилей (External css)
Внешняя таблица стилей это таблица которая связана с HTML-документом при помощи тега link, размещенного в разделе документа head. Любой документ, связанный с данным типом таблицы стилей, получает все стили,определенные в ней, в чем и заключается преимущество управления языкаCSS
Такая таблица стилей находится в отдельном текстовом файле с расширением CSS (желательно, чтобы он находился в той же папке что и web-документ). Тогда таблица стилей подключается с помощью тега <link>в разделе <head>:
<link href="styles.css" rel="stylesheet" type="text/css" />
Параметр href определяем путь к файлуCSS, если таблица находится в той же папке что и web-документ, то это просто href="styles.css",где styles.css – имя файла CSS.
Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
2.4. Создание файла сss
Документ CSS - этот отдельный документ, который создается с помощью текстового редактора и сохраняется как стандартный текстовый файл, с расширением файла .css(например styles.css).
В текстовый документ вводится информация следующим образом:
Имя тега свойство, которого надо изменить |
{ |
свойство |
: |
значение свойства |
; |
} |
Например, файл такого содержания определяет серебристый фон страницы:
body {background-color: silver;}
Задание №3 1. Создайте в блокноте файл CSS 2. Присоедините его в web-странице созданной в предыдущем задании 3. Задайте в таблице стилей (в файле СSS) цвет фона страницы серебристый 4. Посмотрите получившийся результат в браузере. |
2.5. Импортированная таблица стилей
Импортированная таблица стилей этот тип похож на внешнюю таблицу стилей,представляет собой также код, записанный в отдельном текстовом файле с расширением .css. Однако импортированная таблица связывается с помощью инструкции
@ import : url(styleimport.css);
либо с внешней таблицей стилей,либо непосредственно с html-документом в начале блока <style>. Таким образом мы присоединяем и таблицу CSS из файла styleimport.cssи можем задать стили непосредственно в документе в разделе <style></style>.
3. Свойства цвета и фона
обозначение |
описание |
возможные значения |
color |
цвет текста |
любое соответствующее стандарту значение цвета(название цвета или с помощью цветовой модели RGB) Таблица цветов: 1, 2 |
background-color |
цвет фона |
любое соответствующее стандарту значение цвета(см. color) |
background-image |
рисунок в качестве фона |
указывается имя файла background-image: url(имя файла) |
background-repeat |
повторяемость для фона заданного изображением |
по горизонтали:repeat-x по вертикали: repeat-y не повторяется: no-repeat по умолчанию повторение и по горизонтали и по вертикали. |
background-attachment |
неподвижность фона при прокрутке |
fixed (неподвижность фона) по умолчанию фон прокручивается. |
background-position |
положение изображения относительно верхнего левого угла элемента |
задается в процентах от размера элемента (первое число – смещение по горизонтали, второе по вертикали) |
Задание №4 1. Создайте в блокноте файл CSS 2. Присоедините его в web-странице созданной в предыдущем задании 3. Задайте в таблице стилей (в файле СSS) фоновый рисунок, определите повторение рисунка по вертикали. 4. Укажите цвет фона страницы подходящего к фоновому рисунку 5. Посмотрите получившийся результат в браузере. Должен получить приблизительно такой результат |