- •Введение
- •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. Стратегии оформления
Каскадные таблицы стилей: назначение и возможности
Каскадные таблицы стилей (Cascade Style Sheets, CSS) – это язык,содержащий набор свойств для описания внешнего вида любых HTMLдокументов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Допустим мы хотим, чтобы все заголовки в тексте были красного цвета. Конечно, мы можем использовать тег заголовка <h1>и определить цвет текста с помощью тега <font>
<h1><font color="red">Заголовок 1</font></h1>
Однако удобней изначально определить, что заголовок должен отображаться в браузере красным. Для этого и служат CSS.
1. Назначение каскадных таблиц стилей
Каскадные таблицы стилей позволяют задать единый стиль оформления разных страниц документа и быстро поменять его, путем изменения нужного определения в таблице стилей.
В сочетании с программами сценариев (JavaScript или VBScript) позволяют динамически изменять стиль отображения документа в окне браузера в зависимости от каких-либо действий пользователя (щелчок мышью, перемещение указателя и т.п.)
2. Типы каскадных таблиц стилей
Почему стили называются каскадными? Каскад - это иерархия применения - красивое название для системы применения правил. Если внимательно посмотреть на ниже перечисленные типы таблиц стилей, то станут очевидными различные способы применения стиля к одному и тому же документу.
2.1 Встроенный стиль (inline css)
Встроенный стиль определяется непосредственно в теге с использованием атрибута style. Такой подход полезен, только если стиль, единовременно применяется элементу.
Каждый тег может иметь параметр style, который определяет свойства тега. Например:
<p style="font-size:48pt; color:yellow"> Пример </p>
В данном случае текст только одного абзаца будет желтым и 48 кегля:
Пример
Такой способ задает максимальный приоритет значениям свойств тега по отношению к другим способам определения стиля.
Недостатоктакого способа трудоемкость создания и коррекции документа,целесообразно использовать только для ограниченного числа элементов.
Задание №1 1. Создайте HTML документ, соответствующий стандарту XHTML 1.1 илиXHTML 1.0 Strict 2. Создайте несколько абзацев (4 - 5), содержание - любое 3. Измените свойства одного абзаца:размер, цвет, фон (цвета можно выбрать здесь) 4. Проверьте созданный документ службой валидации |
2.2. Внутренняя или внедренная таблица стилей(Internal css)
Внедренный стиль управляет представлением одного документа и размещается внутри тега <style>...</style>в разделе headHTML-документа
Например:
<head> ... < style type="text/css"> p { background-color : yellow; color: red; text-align : center } < /style> ... < /head>
В результате во всем документе будет изменен цвет фона и цвет текста и выравнивание текста в теге <p> . Посмотреть результат в другом окне
Задание №2 1. Используйте уже созданный документ 2. Создайте внедренную таблицу стилей,измените свойства тега <p>размер, цвет, фон текст (выберите другие цвета, отличные от выбранных в первом задании) 3. Проверьте созданный документ службой валидации 4. Убедитесь, что встроенный стиль имеет максимальный приоритет |