🗊Презентация Каскадные таблицы стилей. Назначение и синтаксис

Каскадные таблицы стилей: назначение и синтаксис Краткий обзор

Понятие стиля Стиль (художественный) - сквозной метод реализации формы, которая сообщает содержанию художественного произведения целостность восприятия. Удачно выбранный стиль обеспечивает гармонию формы и содержания, является мощным художественным средством, помогающим восприятию содержания художественного произведения. Часто различают, так называемые «большие стили», это стили некоей временной эпохи, например периода возрождения, классицизма, барокко и других. Различают и стили разных течений, направлений и даже отдельных школ, широко используются национальные стили, стили профессиональных сообществ и иных социальных сетей. Последние стили основываются на больших стилях, конкретизируя их. Стили часто консервативны. Новые стили появляются довольно редко и приживаются с трудом, старые меняются очень медленно.

Проблемы стилевого оформления HTML Смешение логической и визуальной разметки Слабые выразительные средства Трудоемкость правки

История CSS 1967 – идея использования языков разметки для компьютерной обработки текстов 1969 – применение языков разметки с отделяемыми стилями Конец 1970-х – подгружаемые стили ТЕХ 1994 год - Хокон Виум Ли в предложил термин и основные идеи «каскадных таблиц стилей» 1996 года - Рекомендация W3C CSS1 1998 год – рекомендация W3C CSS2 2011 год – ревизия CSS2.1

Что такое CSS Cascading Style Sheets (CSS) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, SVG. Спецификация CSS позволяет остаться в рамках логического характера разметки Web страницы и при этом дает полный контроль над формой представления элементов HTML-разметки

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

Способы применения CSS Определение стиля в элементе разметки - внутренние стили (inline styles) Размещение описания стиля в заголовке документа – стили уровня документа (document style sheets) Внешние таблицы стилей (external style sheets) Связывание внешних стилей Импорт внешних стилей

Способы применения CSS: внутренние стили Назначают стиль отдельному элементу на странице. Указываются как значение атрибута style, который есть у всех HTML элементов тела документа. Внутри атрибута style можно написать несколько CSS объявлений (элементарных указаний оформления), разделённых точкой с запятой. Внимание: избегайте использования вышеописанного способа. Встроенные стили смешивают логическую и визуальную разметки!

Пример внутренних CSS стилей Оформление абзаца средствами HTML: <p align=justify><font color="blue"><i> Этот абзац будет выведен в окне браузера наклонным шрифтом голубого цвета. Он также будет выровнен по ширине. </i></font></p> И оформление средствами CSS: <p style="color: blue; font-style: italic; text-align: justify; text-align-last: center"> А этот абзац будет выведен в окне браузера наклонным шрифтом голубого цвета. Он также будет выровнен по ширине за исключением последней строки, которая будет выровнена по центру. </p>

Способы применения CSS: стили уровня документа Располагаются непосредственно в HTML-документе и применяются ко всему документу и только к нему. Размещаются между открывающим и закрывающим тегами элемента style: Сам элемент style может находиться в любой части документа, но обычно его размещают внутри элемента head

Пример стилей уровня документа <head> <style type=text/css> p {font-weight: bold; color: red} </style> </head> <body> <p> Этот абзац будет отображен полужирным шрифтом красного цвета. </p> <h1> К заголовоку стиль применен не будет</h1> <p> И этот абзац также будет отображен полужирным шрифтом красного цвета. </p> </body>

Способы применения CSS: внешние стили Стили размещаются во внешнем файле с расширением css. Файл css не должен содержать ничего, кроме CSS-инструкций. Внешние таблицы стилей применяются либо связыванием либо импортированием. Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с указанием на внешний файл.

Способы применения CSS: связывание внешних стилей Связывание – основной метод применения внешних стилей, связывание осуществляется с помощью элемента link, который должен располагаться внутри элемента head и нигде более. Связанные стили подгружаются браузером при обработке link.

Пример связывания стилевых таблиц Определяем стиль в файле mystyle.css: p {align: right; color: green} Используем внешний стиль в файлах html: <head> <link rel=stylesheet type=”text/css” href=”mystyle.css”> </head> <body> <p> Этот абзац будет отображен шрифтом зеленого цвета и выровнен по правому краю. </p> </body>

Способы применения CSS: импорт внешних стилей Импортирование – метод применения внешних стилей, импорт осуществляется с помощью директивы @import элемента style. Правила @import комментируются в HTML Правила @import могут также находится во внешней таблице стиле. Импортируемые правила должны предшествовать всем явно определяемым как в элементе style так и во внешней таблице.

Пример импортирования стилевых таблиц Импортируем стиль в файле mystyle.css из файла yourstyle.css: @import url("yourstyle.css“); Импортируем таблицу внешних стилей в файл html: <style> <!-- @import url("yourstyle.css“); P {color: red}; --> </style>

Стиль (стилевое правило) Синтаксис стилевого правила: <селектор тегов> {<строка объявлений>} Селектор тегов задает область применения стилевого правила Строка объявлений определяет значения свойств стиля Комментирование: /* комментарий */

CSS: Каскадность стилей Пусть mystyle.css содержит: p {align: right; font-weight: normal; color: green} ------------------------- <head> <link rel=stylesheet type=”text/css” href=”mystyle.css”> <style type="text/css"> p {font-weight: bold; color: red} </style></head> <body><p style="color: blue; font-style: italic"> Этот абзац будет выведен курсивом голубого цвета в соответствии со встроенным стилем. Он будет также набран полужирным шрифтов в соответствии со стилем документа и выровнен по правому краю в соответствии с примененным внешним стилем. Цвета шрифта задаваемые внешним стилем и стилем документа не будут применены из-за перекрытия встроенным. </p></body>

Наследование стилей <style type=text/css> div.note {color: red} p {font-style: italic} </style> --- <div.note> <p> В этом абзаце будет применен курсив и зеленый цвет букв.</p> </div>

Допустимые значения селектора тегов Одинарный селектор: p / h1 / img Множественный селектор: h1, h2, h3, h4, h5, h6 Контекстный селектор: ol li / p strong Множественный селектор с контекстными элементами h1, p strong

Объявления и значения свойств Строка стилевого правила состоит из пар объявлений свойство - значение {property1: value1; property2: value2} {color: red; font-size: large} Множество свойств определяется стандартом CSS в ряде групп Шрифты Текст Цвета и фон Нумерация и списки Блоки … Множество допустимых значений свойства определяется свойством и может быть следующих типов: ключевое слово длина процентная величина URL (ссылка) цвет списки значений

Типы значений свойств ключевое слово left / right / normal / italic длина (размер) пикселы (px) 10px сантиметры (cm) и милиметры (mm): 1.5cm дюймы (in), цицеро (pc), пункты (pt): 1in относительные величины шрифта (em) и (ex) 2em процентная величина <число>% 200% URL (ссылка на файл) url(file_name) : url("bg_image.gif") цвет предопределенные значения: white | red | green | blue | black и другие… значение в шестнадцатиричной системе счисления #FFFFFF - #000000 тройка значений красный-зеленый-синий rgb (255,255,255)