 |
||
Каскадные таблицы стилей - CSS |
||
Лабораторная работа №1:
Каскадные таблицы стилей: назначение и возможностиКаскадные таблицы стилей (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> в разделе head HTML-документа
Например:
<head>
...
<style type="text/css">
p {
background-color : yellow;
color: red;
text-align : center
}
</style>
...
</head>В результате во всем документе будет изменен цвет фона и цвет текста и выравнивание текста в теге <p> . Посмотреть результат в другом окне
Задание №2
1. Используйте уже созданный документ
2. Создайте внедренную таблицу стилей, измените свойства тега <p> размер, цвет, фон текст (выберите другие цвета, отличные от выбранных в первом задании)
3. Проверьте созданный документ службой валидации
4. Убедитесь, что встроенный стиль имеет максимальный приоритет
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 | положение изображения относительно верхнего левого угла элемента | задается в процентах от размера элемента (первое число – смещение по горизонтали, второе по вертикали) |
Задание №41. Создайте в блокноте файл CSS |
4. Свойства форматирования текста
обозначение |
описание |
возможные значения |
|---|---|---|
| font-family | гарнитура шрифта | |
| font-style | начертание шрифта |
обычный: normal |
| font-weight | толщина шрифта | 100, 200, ... 900 (возможно девять значений) |
| font-size | размер шрифта | |
| text-align | выравнивание текста относительно элемента в котором он находится | по левому краю: left
по правому краю: right по центру: center по ширине: justify |
| vertical-align | положение элемента по вертикали относительно родительского элемента |
5. Свойства стиля оформления полей
Существуют свойства, которые определяют величину свободного пространства между внешними границами элемента и любым окружающим содержимым. Например, при использовании в теге <body> они задают величину свободного пространства вокруг выводимого содержимого страницы.
margin-top
margin-right
margin-bottom
margin-leftНапример, задает нулевое расстояние от верхней границы до тела документа: body {margin-top: 0em} Стили полей применимы для многих тегов XHTML, а не только для тега <body>.
Задание №5
Определить свойства тегов <h1>, <p> так чтобы получился следующий результат:
6. Стратегии оформления
- Используйте встроенную таблицу стилей как основной метод оформления. Это позволит объединить стили в одном разделе страницы, облегчая поиск и изменение стилей, а также преобразование встроенных стилей во внешние таблицы стилей для приложений уровня сайта.
- Во встроенной таблице стилей используйте простые селекторные теги для применения общего оформления уровня страницы ко всем тегам одного типа.
- Определите классы стилей, чтобы выполнять оформление через теги общего назначения, - например, теги <span> и <div>. Используйте также классы стилей, когда два или несколько тегов требуют форматирования, отличающегося или дополняющего то, что задано их простыми селекторами тегов.
- Для единичных тегов, требующих уникального оформления, присвойте тегу значение id и задавайте его оформление с помощью селектора ID во встроенной таблице стилей.
- Используйте линейные таблицы стилей там, где требуется одноразовое оформление и удобно переопределить оформление с помощью таблицы стилей, закодированной внутри тега. Слишком большое количество линейных таблиц стилей трудно отслеживать в случае изменений; к тому же, одинаковые линейные стили необходимо изменять в нескольких местах, что ведет к возможным пропускам и ошибкам.
|
|
