CSS: основные понятия и особенности. Способы добавления стилей на Веб-страницу. Использование стилей при создании сайта. - презентация

1 CSS: основные понятия и особенности. Способы добавления стилей на Веб-страницу. Использование стилей при создании сайта.

2 CSS: основные понятия и особенности. CSS (Cascading Style Sheets ) каскадные таблицы стилей. Технология описания внешнего вида документа, написанного языком разметки. CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

3 CSS при отображении страницы может быть взята из различных источников: Авторские стили (информация стилей, предоставляемая автором страницы) в виде: Внешних таблиц стилей, то есть отдельного файла.css, на который делается ссылка в документе. Встроенных стилей блоков CSS внутри самого HTML-документа. Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style. Пользовательские стили Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам. Стиль браузера Стандартный стиль, используемый браузером по умолчанию для представления элементов. CSS: основные понятия и особенности.

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

5 Пример таблицы стилей: p { font-family: "Garamond", serif; } h2 { font-size: 110 %; color: red; background: white; }.note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; } #news p { color: blue; } Здесь приведено шесть правил с селекторами p, h2,.note, p#paragraph1, a:hover и #news p. CSS: основные понятия и особенности.

6 До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. С появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления. Включение в HTML Ссылка в HTML, а сами CSS в отдельном файле: Непосредственно в HTML-документе: body { color: red; } CSS: основные понятия и особенности.