Cascading Style Sheets

Стиль

Стиль документа это…

Слова стиль, стильный довольно часто употребляются в разговорной речи: стиль в живописи, стиль в архитектуре, стиль в музыке, стиль пения, стиль одежды, стиль поведения, стиль жизни и многое другое. А что означает слово стиль, многие затрудняются сформулировать. Давайте рассмотрим его этимологию.

История этого слова начинается с Древней Греции и Древнего Рима на этапе зарождения современной письменности. На глиняных или восковых дощечках текст царапали палочками, заострёнными с одного конца, и заглаживали ошибки другим тупым концом. Палочки назывались stilo или по-русски — стилус. Именно название этого инструмента (из дерева, кости, металла) и лежит в основе слова стиль.

Представим этих «древних» учеников ☺ на уроке. У всех одинаковые дощечки с одинаковой сырой глиной, одинаково заострённые стилусы и одинаковое задание. И так…

Стиль — нечто общее объединяющее разные предметы в группы.

Но при всей схожести глиняных дощечек и стилусов после выполнения задания дощечки уже не похожи друг на друга. Различаются: форма букв, внешний вид написанного текста, почерк. Так всё-таки стиль это…

Стиль это то, что отличает разные предметы друг от друга.

Из этих противоречивых определений яснее не стало. Давайте обратимся к словарям. Есть великолепный ресурс — более 500 словарей. Там можно посмотреть сведения об искомом предмете одновременно во всех: Словари и энциклопедии на Академике. Поищем Стиль

Что мы увидели? «…единство содержания и многообразных сторон…», «Основанный на определённых закономерностях способ…», «Совокупность признаков…» и т. п. Соберём всё вместе, чтобы понять, что же такое стиль для документа.

Стиль документа — совокупность свойств его отдельных фрагментов, помогающих читателю определить структуру и смысл документа в целом.

Помните правила форматирования абзацев? Стили непосредственно связаны с их оформлением. А оформление — это изменение свойств объектов документа, перечисленные в его информационной модели. Теперь можно конкретизировать правила.

Если у разных абзацев в документе разные роли и (или) в структуре они находятся на разных уровнях, то они должны иметь разные стили.

И его противоположность:

Если у разных абзацев в документе одна роль и в структуре они находятся на одном уровне — они должны иметь один и тот же стиль.

Контекстные стили

В предыдущем разделе речь шла о структуре документа, о блочных элементах — абзацах с разными ролями. Но такое же правило можно сформулировать и для строчных элементов.

Если у разных текстовых фрагментов разные роли, то они должны иметь разные стили.

И обратное правило.

Если у разных текстовых фрагментов общая роль, то они должны иметь один и тот же стиль.

Семантические элементы языка HTML 5 соответствуют ролям фрагментов текста. Правила, определяющие тот или иной элемент, описывают разработчики консорциума W3C и из них формируют очередной стандарт языка. На сегодняшний день уже действует стандарт HTML 5.1 и готовится к выпуску HTML 5.2.

Основная задача языка HTML — описывать структуру документа. Но его оформительские возможности весьма ограничены. Для описания внешнего вида фрагментов документа формируемых на экране используется другой язык — CSS.

CSS аббревиатура английских слов: Cascading Style Sheets — каскадные таблицы стилей. CSS состоит из инструкций для браузера о том, как на экране оформлять внешний вид элементов, без вмешательства в структуру документа. Проведём ряд экспериментов.

В папке task_02 создайте копию файла pouch.htm и переименуйте её в pouchcss.htm. Приготовьте экспериментальный полигон и откройте созданный файл в текстовом редакторе и браузере.

Теперь в коде найдите элемент с описанием свойства: абзаца. В открывающий тег выделения EM акцент (выделение), добавьте атрибут style и в его значении запишите свойство, которое заменит цвет букв в слове на красный.

Можно вспомнить, как правильно записывать атрибуты. Нам нужно указать свойство, изменяющее цвет символов:

EM style=color: red;интервалы перед, после и между…/EM

В кавычках записано стилевое правило CSS — правило каскадных таблиц стилей. Разберём словосочетание каскадные таблицы стилей с конца. Почему стили? Теперь уже не тайна. Почему таблицы? История об этом умалчивает. Но можно предположить у свойства табличную запись (в два столбика): имя: значение. Чтобы различать, где окончилось имя, а где началось описание свойства между ними обязательно ставится двоеточие.

Осталось выяснить, что такое каскадность и как она работает. Найдите в разделе Документ элемент UL, в котором записаны сведения об объектах статья, материал вместе с их свойствами. В два раза увеличим размер шрифта в UL. Свойство называется font-size. Слово font по-русски шрифт, а size — размер.

················UL style=font-size: 200%;
··················LI
····················PSTRONGстатья, материал/STRONG/P
····················P
свойства: EMразмещение…/EM
····················/P
····················UL
······················LI
························PSTRONGабзац/STRONG/P
························P
свойства: EM style=color: red; интервалы перед, после и между строк, 
отступы левой и правой границ, шрифт…/EM
························/P
······················/LI
····················/UL
··················/LI
················/UL

Не смотря на то, что в самом UL никакого текста нет, выполнилось каскадное наследование свойства. Его значение было передано единственному ребёнку LI и потомкам P со STRONG и P с EM. Размер всех символов в этих элементах увеличился в два раза.

CSS обеспечивает наследование всеми потомками некоторых заданных элементу свойств.

Наследование очень удобная возможность оформления фрагментов документа. Но всё ли так просто. Давайте убедимся в этом ещё раз. Элементу UL, в котором описаны абзац и его свойства…, назначим розовый цвет символов fuchsia.

················UL style=font-size: 200%;
··················LI
····················PSTRONGстатья, материал/STRONG/P
····················P
свойства: EMразмещение…/EM
····················/P
····················UI style=color: fuchsia;
······················LI
························PSTRONGабзац/STRONG/P
························P
свойства: EM style=color: red; интервалы перед, после и между строк, 
отступы левой и правой границ, шрифт…/EM
························/P
······················/LI
····················/UL
··················/LI
················/UL

Каскадность выполнилась, но не полностью. Изменился цвет у символов слова абзац в элементе STRONG, и у свойства: в элементе P. Но символы описания свойства в элементе EM остались красные.

Контекстные стили CSS выполняются в последнюю очередь, перекрывая своими значениями свойства, полученные по наследству.

В одном правиле стилей свойств может быть описано несколько. Например, свойство цвет и стиль записи букв. Чтобы не путать, где закончилось описание одного свойства, а где началось другого: в конце описания каждого свойства ставится точка с запятой. Для эксперимента найдите название раздела Документ. Добавьте ему атрибут style и в стилевом правиле запишите сразу два свойства.

H2 style=color: green; font-style: italic;Документ/H2

Свойство color уже известно — цвет символов. Второе свойство font-style — стиль шрифта. Наш заголовок первого раздела изменил свой внешний вид. Буквы стали ярко-зелёными и похожими на рукописные.

Древние греки писали только печатными буквами, а рукописные буквы: с наклоном и изменённой, для быстроты записи, формой появились в древнем Риме. Так по наследству наклонная форма букв и называется italic (итальянский стиль), а по-русски — курсив.

Стили CSS позволяют управлять множеством свойств текстовых фрагментов, например, размер шрифта. Найдите в разделе Документ элемент UL, в котором записан абзац вместе с его свойствами. Зададим синий цвет элементу UL.

Вопрос на засыпку. Нужно изменить цвет всех символов документа, например, на цвет по имени navy. Такой цвет называется: военно-морской флот. В каком элементе стоит записать правило? Сделайте это самостоятельно.

Встроенные стили CSS

Каскадные таблицы стилей очень мощный инструмент по оформлению внешнего вида документа. Но применение контекстных стилей (запись их непосредственно в теги элементов) существенный минус.

Если в объёмном тексте окажутся одни абзацы, которым нужно увеличить шрифт, а другие нужно оформить курсивом… То придётся «долго бродить» по коду и выискивать, в какие теги каких элементов и какое свойство записать.

Для решения этой проблемы в языке HTML есть уже не атрибут, а элемент STYLE. Так как в правилах содержатся сведения о документе (как он должен выглядеть), то и элемент STYLE должен быть расположен в HEAD.

Стилевые правила встраиваются не каждый в отдельный элемент, а все вместе в описание документа. Такие стили называются встроенные. При этом запись правила усложняется. Дополнительно нужно указывать у какого элемента или у группы каких элементов, должен измениться внешний вид.

 1|!DOCTYPE html
 2|HTML lang=ru
 3|··HEAD
 4|····TITLEОбъектная модель документа/TITLE
 5|····META name=author content=ваши_имя_и_фамилия
 6|····META charset=utf-8
 7|····STYLE
 8|body {
 9|··font-size: 160%;
10|}
11|····/STYLE
12|··/HEAD
13|··BODY
14|····...

В образце кода строки с 5 по 9 занимает новый элемент STYLE. Для браузера в атрибуте type=text/css указано, что текстовое содержимое элемента написано на языке CSS. Запись кода CSS имеет свои особенности построения структуры и не подчиняется HTML.

Теперь рассмотрим содержимое элемента STYLE. В строках 6-7-8 записано правило CSS для встроенных стилей. Сформулируем требование к оформлению стилевого правила.

  1. Текст правила CSS пишется строчными буквами.
  2. Правило состоит из двух частей: селектор и описание правила в фигурных скобках.
  3. Селектор и закрывающая фигурная скобка описания должны располагаться в начале строки.
  4. В описании может быть любое количество свойств.
  5. Каждое свойство записывается в отдельной строке с одним структурным отступом (2 пробела).
  6. Свойство состоит из его имени и значения, разделёнными двоеточием и пробелом.
  7. Запись каждого свойства заканчиваться точкой с запятой.

Селектор указывает браузеру, к каким элементам на странице нужно применить правило. Прочитать селектор легко: для всех BODY.

Так как BODY на странице единственный, то правило применилось только к нему и ни к какому другому элементу. Но за счёт каскадности стилей включилось наследование. У BODY единственный ребёнок ARTICLE, а его подструктура (все вложенные элементы на разных уровнях) — потомки. Поэтому правило применилось ко всем элементами на странице. И размер шрифта каждого увеличился в 1,6 раза.

Интересно, что статья, материал и абзац со своими свойствами стали ещё крупнее всех. Согласно каскадному наследованию от BODY, браузер увеличил размер шрифта этих элементов на 160%. А затем, согласно контекстному правилу в UL статьи и материала, браузер увеличил шрифт в элементах его подструктуры ещё на 200%. Итого наши буквы увеличились в 1,6 × 2 = 3,2 раза.

Контекстные стили CSS браузер применяет в последнюю очередь, добавляя значения свойств или перекрывая ими, полученные по наследству.

Давайте добавим BODY ещё свойство color тёмно-синего цвета.

 5|····STYLE
 6|body {
 7|··font-size: 160%;
 8|··color: navy;
 9|}
10|····/STYLE

Мы видим неожиданную работу браузера. Посинели буквы всех слов, кроме Документ, абзац и свойства… абзаца. Снова каскадность вмешалась в наши планы. Чтобы в будущем исключить подобные изменения с размером, цветом и другие сформируем правило.

Не рекомендуется использовать контекстные стили CSS.

Практика

Форматирование названия статьи

Задача: увеличить размер шрифта главного заголовка страницы — название статьи элемент H1. Каким свойством изменить размер шрифта уже известно. Как его записывать тоже. Осталось сформировать селектор.

Селектором в новом правиле будет h1. Конечно, это не сам элемент (в языке CSS нет элементов HTML), а только его имя. Теперь правило можно и записать.

 5|····STYLE
 6|body {
 7|··font-size: 160%;
 8|··color: navy;
 9|}
10|h1 {
11|··font-size: 200%;
12|}
13|····/STYLE

Браузер прочёл правило так: для всех H1 увеличить шрифт на 200%. Так как в элементе STYLE размер шрифта сначала описан в стиле body, а затем в h1, то произошло каскадное наложение размеров. Но теперь это не случайные действия браузера. Размер всех символов документа увеличился и только заголовок должен увеличиться по отношению к ним.

Теперь название статьи стало крупнее текста и названий разделов. И это правильно.

Форматирование списков

Маркированный список UL в документе использован всего лишь как построитель структуры. Браузер же вывел его на экран стандартным, с маркерами для каждого пункта LI. Задача: отключить изображение маркеров.

Список по-английски list пункт, элемент списка list-item. Воспользуемся статьями справочника CSS на букву « L». Можете заглянуть в каждое свойство управления списком, они начинаются со слов list-style-. Узнаете много интересного про стили оформления списков.

Нужное свойство называется list-style-type. Обратите внимание на синтаксис записи свойства. Из множества вариантов значений понадобится только одно: none. Оно отменяет маркеры для списка.

 5|····STYLE
 6|body {
 7|··font-size: 160%;
 8|··color: navy;
 9|}
10|h1 {
11|··font-size: 200%;
12|}
13|ul {
14|··list-style-type: none;
15|}
16|····/STYLE

Браузер прочёл это правило так: для всех элементов UL отменить маркеры. И отменил их у всех пунктов всех маркированных списков.

Форматирование абзацев

Абзацы в основном состоят из одной строки и расстояние между каждым сверху и снизу кажется очень большим. Задача: уменьшить расстояние между элементами P сверху и снизу.

Расстояние между границами элементов — отступы (запас, край) по-английски называется margin. Это и есть имя свойства. Краёв у элемента 4, а статей на эту тему в справочнике 5. Но нас интересуют только верхний top и нижний bottom отступы. В правило запишем сразу 2 свойства, а размеры им зададим в процентах от высоты шрифта.

 5|····STYLE
 6|body {
 7|··font-size: 160%;
 8|··color: navy;
 9|}
10|h1 {
11|··font-size: 200%;
12|}
13|ul {
14|··list-style-type: none;
15|}
16|p {
17|··margin-top: 1%;
18|··margin-bottom: 1%;
19|}
20|····/STYLE

Размер документа по высоте сжался, и структура приобрела компактный вид. Если бы не очень крупные и разноцветные буквы в словах статья, материал, абзац и их свойства. Вы помните, почему они крупные и цветные? Можете исправить это самостоятельно.

Меняем фон страницы

Давайте развлекаться до конца. Сменим белый фон страницы на тёмно-синий. Раз речь идёт обо всей странице, то правило создавать не придётся. Оно уже есть. Страница на экране — это всё, что расположено в BODY.

Добавим к имеющемуся правилу сведения о цвете фона. Цвет — color. Background (от англ.: back — назад, сзади, ground — грунт, основа, план местности) — задний план или фон. И снова в справочник background. С фоном можно творить чудеса, столько разных свойств можно менять. Знать бы только какие и для чего. Всё в ваших руках.

 5|····STYLE
 6|body {
 7|··font-size: 160%;
 8|··color: navy;
 9|··background-color: navy;
10|}
11|h1 {
12|··font-size: 200%;
13|}
14|ul {
15|··list-style-type: none;
16|}
17|p {
18|··margin-top: 1%;
19|··margin-bottom: 1%;
20|}
21|····/STYLE

Всё получилось, как планировали, но на странице не видно букв. И неудивительно. Цвет фона и цвет символов один. Можете нажать аккорд на клавиатуре Ctrl + A (латинская) и убедиться, что все буквы на месте. Надо спасать буквы.

Меняем фон структуры

Вся структура описана в элементах UL. Задача: назначить им светлый фон. Правило ul уже имеется, записать свойство для цвета фон не трудно. Но делать его просто белым неинтересно. Узнайте в том же справочнике, как кодируются цвета в web. И особое внимание обратите на синтаксис записи цвета RGBA.

R(red) G(green) B(blue) — основные цвета и если назначить им максимальную яркость 255 единиц, то получится белый цвет. Буква A(alfa), добавленная к записи цвета, обозначает его непрозрачность. Если она равна 1, то цвет насыщенный непрозрачный, а если 0, то цвет полностью прозрачный, то есть невидимый. Фон выберем белым, но полупрозрачным.

Самостоятельно добавьте к правилу ul ещё одно свойство background-color и запишите его значение: RGBA(255, 255, 255, 0.5).

Засыпка

После всех действий у вас должен получиться ступенчатый фон из блёклых синих полос. Ответьте на вопрос: Почему фон ступенчатый?

И в дополнение, чтобы увидеть заголовки, назначьте им белый цвет шрифта. Причём одинаковое свойство можно присвоить сразу нескольким различным элементам. Запишите такой селектор: H1, H2.

А теперь самое сложное задание. Побродите по справочнику, почитайте, посмотрите примеры. Познакомьтесь с разными свойствами разных элементов. Всё это пригодится на следующих уроках, да и в дальнейшей жизни.