CSSCSS (англ. Cascading Style Sheets каскадные таблицы стилей) язык описания внешнего вида документа, написанного с использованием языка разметки.англ. - презентация

1 CSS

2 CSS (англ. Cascading Style Sheets каскадные таблицы стилей) язык описания внешнего вида документа, написанного с использованием языка разметки.англ.

3 Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

4 Преимущества: Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.КПК Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и могут быть закешированы.закешированы Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл. Дополнительные возможности оформления. Например, с помощью CSS- вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы. Недостатки: Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS. Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

5 Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так: селектор, селектор { свойство: значение; }

6 p { font-family: "Garamond", serif; } h2 { font-size: 110 %; color: red; background: white; }.note { color: red; background: yellow; font-weight: bold; } В первых двух правилах HTML- элементам p (абзацу) и h2 назначаются стили. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Garamondserif h2 будет отображаться красным на белом фоне с увеличенным кеглем. кеглем Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например: Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.

7 CSS можно добавить к HTML-документу тремя способами:HTML Ссылка в HTML на внешний файл, содержащий CSS: Непосредственное размещение CSS в HTML- документе: body { color: red; } Непосредственное размещение CSS в атрибуте style конкретного элемента: Рассказ о том, как вредно красить батареи

8 Метод 3: Внешний (ссылка на таблицу стилей) default.htm Мой документ Моя первая таблица стилей style.css body { background-color: #FF0000; }