CSS Cascading Style Sheets «каскадные таблицы стилей» - презентация

1 CSS Cascading Style Sheets «каскадные таблицы стилей»

2 CSS – это стандарт (наряду со стандартом XHTML), разработанный Консорциумом Web для стандартизации Web-пространства, т.е. для создания единых правил, по которым программисты и веб-дизайнеры проектировали бы сайты. XHTML – это стандарт языка разметки (для создания структуры Web-страницы). CSS – это стандарт «таблиц стилей» (для создания оформления страницы).

3 Преимущества CSS Целью создания CSS явилось разделение содержания Web-документа и его представления (оформления). Это разделение (содержания, написанного на HTML и оформления, написанного на CSS) привело к увеличению доступности документа, предоставило большую гибкость и возможности управления его представлением, а также уменьшило сложность и повторяемость в структурном содержимом.

4 Если содержание и оформление Web-документа хранятся отдельно, то: Уменьшается время загрузки страниц сайта за счёт переноса правил представления страниц в отдельный CSS-файл. Упрощается корректировка содержания и дизайна ваших страниц сайта (В случае изменения дизайна – не требуется «исправлять» каждую страницу, а лишь изменить CSS-файл). CSS позволяет представить Web-страницу в разных режимах (экранное представление, печать, чтение голосом с экрана и др.), и в зависимости от устройств вывода (например, на экране компьютера, на сотовом телефоне, или при выводе на печать страница будет «выглядеть» по-разному). Появляются дополнительные возможности оформления Web-страниц.

5 Существует 4 основных способа присоединения таблиц стилей к содержимому html-документа: 1. Встроенный стиль (Inline-стиль) 2. Внедрённый стиль 3. Связанный стиль 4. Импортируемый стиль

6 Встроенный стиль Назначение стилей отдельным элементам страницы Таблица стилей встраивается в сам тег в качестве атрибута style: Пример 1. (Все абзацы страницы отображаются шрифтом Times New Roman, размером 12pt тёмно-зелёного цвета.) Пример 2. Рассказ о том, как вредно красить батареи. (Этому абзацу текста, окружённому тегом, задаётся тип шрифта Arial, размером 14pt, красного цвета( red ), с жирной насыщенностью ( bold ).)

7 Встроенный стиль Рекомендуется только тогда, когда данный стиль (style) планируется применить только к одному элементу только на одной странице сайта (используется в единичных случаях). Набор свойств тегов и их значений свойств тегов значений (гиперссылки на интернет-справочники по HTML и CSS)

8 Внедрённый стиль Назначение стилей нескольким элементам одной страницы Создание внедрённой таблицы стилей Пример.... body {font-family: 'Times New Roman', serif;font-size: 12pt;color: darkgreen;} h1 {font-family: Arial, sans-serif;font-size: 16pt;color: green;font-weight: bold;} h2 {font-family: Arial, sans-serif;font-size: 14pt;color: greenyellow;font-weight: bold;font-style: italic;}... Все абзацы отобразятся на странице шрифтом Times New Roman, размером 12pt, тёмно-зелёного цвета, заголовки первого уровня( h1 ) – шрифтом Arial зелёного цвета полужирного начертания размером 16pt, а все заголовки второго уровня (h2 ) – шрифтом Arial размером 14pt полужирного курсивного начертания жёлто-зелёного цвета.

9 Внедрённый стиль Внедрённая таблица стилей создаётся в голове страницы (между тегами и, в любом месте), внутри контейнерного тега (между тегами и ). Внутри внедрённой таблицы стилей задаётся любое количество правил CSS, состоящих из самого тега, к которому будут они применяться и набора свойств и значений:набора свойств значений тег 1 {свойство: значение;свойство: значение;свойство: значение;} тег 2 {свойство: значение;свойство: значение;свойство: значение;} и т.д.

10 Внедрённый стиль рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому. Для придания единого стилевого оформления нескольким (или даже всем) страницам вашего сайта используется связанный стиль.

11 Связанный стиль Связанный стиль – это создание отдельного файла с расширением.css, в котором будет хранится вся таблица стилей вашего сайта. Пример написания такого файла ( my.css ): body {font-family: 'Times New Roman', serif;font-size: 12pt;color: darkgreen;} h1 {font-family: Arial, sans-serif;font-size: 16pt;color: green;font-weight: bold;} h2 {font-family: Arial, sans-serif;font-size: 14pt;color: greenyellow;font-weight: bold;font-style: italic;} Один такой файл может быть связан сразу с несколькими страницами сайта. В html-файле для этого в любом месте между тегами и нужно прописать следующую строку:

12 Связанный стиль В этой строке указывается, что связываемый файл является таблицей стилей ( rel="stylesheet"), формат этого файла -.css ( type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес ( href="my.css"). Эту строку можно прописать в любом (либо во всех) из html- файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу. За счёт данного способа связывания CSS и HTML стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

13 Импортированный стиль Файл таблицы стилей ( my.css ) можно импортировать в HTML-документ и следующим url (my.css); Помимо адреса импортируемой таблицы стилей возможно прописать в тег-контейнер любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице.

14 Стандарт CSS определяет приоритеты, в порядке которых применяются таблицы стилей. Если какой-то элемент (тег) задан несколькими стилями одновременно (т.е. при возникновении конфликта), браузер (программа для просмотра и поиска Web-сайтов, например, Internet Explorer) расставляет приоритеты следующим образом: 1. встроенные (inline) стили 2. внедрённые стили 3. импортированные стили 4. связанные стили

15 Таким образом, зная, в какой последовательности браузер анализирует таблицы стилей, можно задать один общий связанный стиль для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этим и связано наличие слово «каскадная» в названии CSS (cascading style sheets) – нескольких таблиц стилей, разными способами присоединённых к html-документу, прокатывающихся через браузер неким «каскадом» в порядке их приоритетности

16 ЗАДАНИЕ 1 Создайте в блокноте файл CSS (с обязательным указанием цвета фона страницы (цвет - любой)) Присоедините его к web-странице, созданной в предыдущем задании. (сохранить и прислать результат) С помощью известных вам способов (минимум двух) связывания таблиц стилей с содержимым Web-страницы измените оформление данной страницы. (сохранить и прислать результат)

17 Свойства цвета и фона обозначение описание возможные значения color цвет текста любое соответствующее стандарту значение цвета. background-color цвет фона любое, соответствующее стандарту значение цвета. background- image рисунок в качестве фона указывается имя файла background-image: url(имя файла) background- repeat повторяемость для фона заданного изображением по горизонтали: repeat-x ; по вертикали: repeat-y не повторяется: no-repeat по умолчанию повторение и по горизонтали и по вертикали. background- attachment неподвижность фона при прокрутке fixed background- position положение изображения относительно верхнего левого угла элемента задается в процентах от размера элемента (первое число – смещение по горизонтали, второе по вертикали)

18 ЗАДАНИЕ 2 Задайте свойства страницы: Выберите фоновый рисунок (любой), определите повторение рисунка по вертикали. Укажите цвет фона страницы подходящего к фоновому рисунку (сохранить и прислать результат).

19 Свойства стиля оформления полей Существуют свойства, которые определяют величину свободного пространства между внешними границами элемента и любым окружающим содержимым. Например, при использовании в теге они задают величину свободного пространства вокруг выводимого содержимого страницы. margin-top margin-right margin-bottom margin-left Например: body {margin-top:0em} задаёт нулевое расстояние от границы до тела документа. Стили полей применимы для многих тегов XHTML, а не только для тега.

20 ЗАДАНИЕ 3 Определить свойства тегов так чтобы получился следующий результат (прислать результат):

21 Использованные ресурсы и полезные ссылки 1. Каскадная таблица стилей. (Wikipedia)Wikipedia 2. Людмила Бандурина. Каскадные таблицы стилей, или CSS для начинающих (практикум "правильного" HTML). 10 (49) октябрь 2000 Журнал "Мир Internet" читать.читать. 3.Д.Р. Адамс, К.С. Флойд. Основы работы с XHTML и CSS (INTUIT.ru)INTUIT.ru 4. (Учебник по HTML, CSS, графике и созданию сайтов) 5. (Справочник по HTML)

22 Примечания Смотреть в режиме просмотра Сроки сдачи работ –