Основы CSS

Воображаемые уроки с вымышленными учениками

Материалы

  1. Учебник Web-конструирование 2.
    • Тема 2. > 01 HTML и CSS.
    • Тема 2. > 02 Основные правила языка CSS.

Стили

Следующая тема, к которой мы перейдём, это CSS — каскадные таблицы стилей. Сегодня мы должны разобраться, что это такое и для чего они нужны.

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

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

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

…нечто общее, связывающее разные предметы. Ответы фиксируем на доске.

Но при всей схожести глиняных дощечек и стилусов после выполнения задания дощечки уже не похожи друг на друга.

…форма букв, внешний вид написанного текста, почерк. Стиль это то, что отличает одно от другого. Ответы фиксируем на доске.

И так, у нас два разных определения. Кто возьмётся объединить их в одно? Попробуйте объяснить понятие стиль пятикласснику… (…)?

При затруднении можно организовать подсказку.

Можно обратиться к почерку. По почерку можно определить пол, возраст и даже характер человека. То, чем этот человек не похож на других людей. Какими отличительными особенностями он обладает. Иногда можно услышать:

  • у этих людей одинаковый стиль поведения (если они выполняют одинаковые действия в схожих ситуациях);
  • или наоборот, разный стиль поведения (если их действия в схожих ситуациях различны).
Или, например, живопись. Покажите картину «Лунная Ночь на Днепре (1880 г. Стиль — реализм)» Архипа Ивановича Куинджи), и картину «Звездная Ночь (1889 г. Стиль: постимпрессионизм — комбинирование разных стилей)» Винсента Ван Гога. Обсудите отличительные особенности картин. А затем предложите два пейзажа. «Пейзаж. (1874 г. Стиль — реализм)» и «Сквер Сен-Пьер на закате (1887 г. Стиль: постимпрессионизм)». Определите, перу какого мастера принадлежат картины? И каким образом вам это удалось?
Можно сравнить литературные произведения. Пара не школьных стихов знакомых авторов с ярко различающимися стилями, например, Владимира Маяковского и Сергея Есенина, или одни и те же песни в разных исполнениях. А после обсуждения различия прочесть ещё пару стихов тех же авторов, предложив ученикам самостоятельно определить, чьи это стихи.
Можно искать любые примеры: в одежде, в архитектуре и т.п.

Вернулись к вопросу беседы с пятиклассником. Дать развёрнутый ответ, что же такое стиль… (это набор отличительных особенностей)?

Система состоит из… (объектов)? Объект обладает… (свойствами)? Каждое свойство имеет… (определённое значение)? Что теперь скажем про стиль?

Стиль — совокупность свойств и их значений.

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

Если у объектов наборы свойств различаются, или среди общих свойств хотя бы одно имеет несовпадающее значение, то они имеют разные стили.

Настоятельно рекомендуется вернуться к теме «Форматирование» и её разделу «§ 5. Форматирование» и вспомнить одноимённую презентацию. Повторить правила форматирования документов и самостоятельно связать их с понятием стиль.

Стили и семантика

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

  1. Если абзацы в документе имеют одинаковую роль, то они должны иметь одинаковый стиль.
  2. Если абзацы в документе имеют разные роли, то они обязаны иметь разные стили.

И следующий вопрос…

Вопрос. Почему при кодировании HTML 5 нужно соблюдать семантическую разметку?

Ответ. Браузер «знает» правила форматирования документа и «будет» их соблюдать только при выполнении разработчиком правильной семантической разметки.

Фактически эти правила знают разработчики стандартов, программисты создатели браузеров и поисковых систем. Они пишут программы таким образом, чтобы их действия соответствовали правилам и стандартам.

Форматирование браузера имеет ограниченные возможности. Именно это и есть существенный плюс как для программ, так и для разработчиков.

HTML — это язык для разметки структуры документа. А она напрямую связана… (с ролями фрагментов документа)?

Фрагменты упаковываются в элементы HTML с минимальным оформлением только для того, чтобы назначить им те или иные роли. В связи с этим в HTML 5 визуальные элементы: [B], [BIG], [BLINK], [CENTER], [DIV], [FONT], [I], [S], [SPAN], [TT] и др.; и атрибуты: "align", "alink", "cellpadding", "cellspacing", "color", "height", "width" и др. — либо запрещены, либо применение их ограничено.

Ещё в 1995 г. для оформления внешнего вида документов HTML был создан язык CSS. В настоящее время его роль — оформление информации представляемой разными устройствами: от описаний вида элементов на экране до управления голосовым синтезатором.

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

Ввиду того, что в интернете ещё очень много сайтов, построенных по старым стандартам, то браузеры до сих пор поддерживают большинство запрещённых и нерекомендуемых элементов. И вы можете по-прежнему игнорировать CSS, и кодировать страницы только на HTML, смешивая в одну кучу структуру и образы — ведь и визуальные элементы, и атрибуты в браузерах работают, как и раньше. Только зачем так?

Мы с вами уже разобрались с HTML 5, а сегодня познакомились и с понятием стиль. Теперь пришла очередь и таблиц стилей.

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

Для эксперимента воспользуемся созданным для темы «Системный подход» документом «Структура документа». Начнём эксперимент со второй структуры «Текст» и её последнего элемента — символ.

Слово «символ» размещено в элементе DT. Добавьте этому элементу атрибут с именем… (стиль — style)? В каком из тегов запишем атрибут… (в открывающем)? А как запишем его значение… (без пробелов знак равенства и за ним кавычки)? Код дублируем на доске.

DT style=""

Как вы думаете, что мы можем записывать в кавычках… (свойства перечисленные в DD)? Давайте начнём с последнего из записанных свойств символа. Имя свойства отделяется от его значения двоеточием, но, чтобы значение не сливалось с именем, добавим пробел. Описание свойства должно оканчиваться знаком точка с запятой, но не всегда. Чтобы не заучивать исключения будем точку с запятой ставить после описания каждого. Таким образом, в атрибуте style мы создадим правило CSS, в котором будет описано свойство цвет с указанием его значения — красный.

DT style="color: red;"

Что же произошло? Мы записали свойство символа, а красным оказался не один, а все. Давайте к слову «символ» допишем ещё одно, чтобы получилось: «одиночный символ». Выходит, красными оказались не только все символы слова, но даже ещё и ненаписанные.

Помните, если рассматривать слово (словосочетание) как систему символов, то по четвёртому определению системы: «Устанавливается влияние свойств каждого элемента на систему в целом». («Системный подход» > «§ 3. Метод познания Синтез»). Так какие символы становятся красными… (все расположенные в элементе DT, которому назначен стиль)?

Шрифт

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

В оставленном месте писарь прописывал (рисовал) крупную красивую первую букву. Первые буквы абзацев и предложений так и называются — прописные. У красивых нарисованных букв есть и своё имя — буквица.

Строка с буквицей, то есть первая строка — красивая строка. А в древнерусском языке «красивый» значит красный. Отсюда и название первой строки абзаца — красная строка.

Font

В именах стилей к названию свойств символов добавляется префикс (приставка в сложном слове) font-, по-русски шрифт. Далее мы познакомимся со свойствами font-size (размер шрифта), font-weight (вес, насыщенность), font-style (стиль, начертание), font-family (выбор семейства шрифтов), font-variant (вариант, представление строчных букв) и др.

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

Но вернёмся к грекам. Греки свои буквы называли капителями. В архитектуре капитель — верхняя часть несущей колонны. Буквы у древних греков были только прописными (большими) и писали они их без пробелов, выстраивая текст как архитектурный ансамбль. Отсюда получили название «Капитолий» и «Капитолийский холм» в США, «капитал»… и название клавиши «Caps» на клавиатуре — зафиксировать печать букв в верхнем регистре.

Печать в верхнем регистре — это и есть печать прописными буквами, а в нижнем — строчными. Но свойство font-variant позволяет включить промежуточное состояние: small-caps или малые прописные. Буквы по форме прописные, а их размер по высоте как у строчных.

Строчные буквы впервые были введены в латинском языке. Но не печатные (тогда ещё не было печати), а рукописные. Это было сделано для удобства и скорости письма и называется такой шрифт курсивный (cursive — англ.: скоропись). Наследниками латинского языка стали итальянцы, и когда были придуманы печатные станки, стиль записи буквами, похожими на рукописные, стали называть italic.

Есть ещё одна форма шрифта с наклонной записью букв. Она так и называется — oblique, косой или наклонный. Разница между ними в том, что в первом внешний вид буквы в разных регистрах меняется (например, прописные АБВГДЕ и строчные абвгде), а во втором — нет (прописные ЖЗКЛМН и строчные жзклмн). Тем самым строчные буквы oblique внешне напоминают прописные, записанные с наклоном. Пока не все браузеры поддерживают эту форму шрифта и отображают вместо неё italic.

Попробуем стиль с цветом букв назначить элементу DT со словом «слово». Мы можем поменять значение свойству color на, например, «зелёный»… green? То есть, значение свойства из списка допустимых может быть любым. Таким, какое нам нужно.

А теперь к DT со словами «предложение» и «абзац» назначим стили со свойствами font-weight: bold; и font-style: italic; соответственно. Стиль может включать в себя не одно свойство, а сразу несколько. Давайте добавим свойство font-weight: bold; к нашему зелёному слову «слово».

Ничего сложно нет. Только нужно знать английские названия свойств и для каждого список допустимых значений. Но на первых порах для этого существуют справочники. О некоторых из них я сообщу в конце урока.

Давайте проведём мысленный эксперимент. Что изменится, если мы добавим стиль со свойством font-style: 1.3em; к элементу DL, в котором находится DT со словом «абзац»… (увеличился размер шрифта у текста вложенных элементов-«детей»)?

Вот теперь мы увидели, что такое каскадность. Если элементу назначить стиль, то многие свойства (но не все) будут унаследованы его потомками. Давайте это проверим. Назначим стиль со свойством color: navy; внешнему элементу DL с полным описанием структуры текста. Расскажите, что произойдёт… (изменится цвет текста во всех элементах «потомках», кроме тех, в которых цвет уже задан)?

Это ещё раз подтверждает каскадность CSS: свойство, конкретно назначенное элементу, важнее полученного им по наследству.

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

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

  1. Язык HTML 5 ориентирован на разметку документа. И для оформления элементов нам приходится почти каждому добавлять атрибуты.
  2. Наш документ маленький, но бывают и больше. Например, подобных структур с похожим оформлением будет с десяток. Да и не только структур. Нам придётся ко многим элементам применять одинаковые стили с перечнем одинаковых свойств.

Есть решение этих проблем и в HTML 5, и в CSS. В описание документа нужно добавить ещё один элемент STYLE. В каком элементе мы его должны записать… (в HEAD)? Теперь мы зарезервировали место записи для стилевых правил.

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

Но, прежде чем всё это записать, давайте вспомним, для чего мы изменяем внешний вид документа… (для повышения читабельности, для лёгкости его восприятия читателем)? Обратите внимание на первую структуру «Документ». Пока мы её ещё не испортили :)

У нас есть термин и его описание. В тексте, как и в учебниках, термин должен привлекать внимание и отличаться от его описания. А описание может быть написано и курсивом как рукописный текст. Давайте начнём с описания. Объявим правило для всех элементов DD и запишем в него свойство… (font-style: italic;)?

····STYLE
dd {
··font-style: italic;
}
····/STYLE

Сработало, но как-то не так. Как вы думаете, почему курсивом написан текст во всех элементах, кроме слов «лист» и «одиночный символ»… (…)? Каскадность сыграла с нами злую шутку.

В элемент DD вложены
  DL вместе со своими вложенными DT и DD, в который вложены
      DL вместе со своими…

Получилась матрёшка самой большой из которых сказали: «Улыбнись» и все внутри тоже «заулыбались». Все, кроме первых DT «лист» и «одиночный символ», которые в DD не вложены.

Как же сделать так, чтобы все DT перестали быть курсивными… (создать правило для DT, в котором задать нормальный шрифт)? И добавить ещё одно свойство font-variant: small-caps;

····STYLE
dd {
··font-style: italic;
}
dt {
··font-style: normal;
··font-variant: small-caps;
}
····/STYLE

Ну и самое любопытное. Давайте объявим каждому DL, в котором содержится термин с его описанием, фоновый цвет — background-color: …, например, голубой. Вы помните, как называется голубой цвет в английском языке?

Голубого цвета, на самом деле, у англичан нет. Можете убедиться, воспользовавшись переводчиком. Точнее, цвет-то есть, но с другим названием. Поэтому можно применить цвет светло-синий lightblue, или его числовые значения — десятичный RGB(173, 216, 230) или шестнадцатеричный #ADD8E6.

Цвет на мониторе формируется из трёх основных цветов: Red (красный), Green (зелёный) и Blue (синий), сокращённо RGB. Каждый цвет по интенсивности разделён на 256 оттенков от 0 (ноль — цвет выключен) и до 255 (двести пятьдесят пять — цвет самый яркий). Цвет записывается как в десятичной системе, так и в шестнадцатеричной. Причём числа можно сравнивать.
010 = 016; 25510 = FF16

Таким образом, числовое значение ярко-красного цвета (красный максимально яркий, а зелёный и синий выключены) можно записать в разных системах счисления:
в десятичной — RGB(255, 0, 0) и в шестнадцатеричной — #FF0000.

Так же поступают и с другими цветами. Если все они выключены, то цвет будет чёрный:
RGB(0, 0, 0) или #000000.

Если все цвета максимально яркие — белый:
RGB(255, 255, 255) или #FFFFFF.

Но нам нужен голубой, то есть светло-синий. Вот его запись в десятичной и шестнадцатеричной системах:
RGB(173, 216, 230) и #ADD8E6.

Переводить номер цвета из одной системы счисления в другую можно используя стандартный калькулятор Windows.

  1. В меню «Вид» выберите пункт «Программист».
  2. В списке слева укажите систему счисления, в которой вы будете вводить число: «Dec» — десятичная, «Hex» — шестнадцатеричная.
  3. Введите число в выбранной системе счисления.
  4. Переключите систему счисления на нужную и калькулятор отобразит введённое число в выбранной.

Ну и напоследок. Запись в формате #ADD8E6 удобна и для разработчика и для браузера. Но запись RGB(173, 216, 230) обладает дополнительным свойством, если добавить ещё одну букву RGBA. Эта буква указывает на альфа-канал, который управляет прозрачностью цвета. Она измеряется в десятичных числах от 0 (полностью прозрачный, невидимый) до 1 (полностью непрозрачный). Можно изменить насыщенность цвета фона, записав его с прозрачностью, например, 0,25.
RGBA(173, 216, 230, 0.25).

Так как элементы DL находятся один внутри другого, то произойдёт наложение прозрачности. Каждый вложенный слой будет иметь 25% прозрачности. Но он будет виден сквозь родительский со своими 25% прозрачности. А это в сумме даст уже 50% прозрачности.

4 элемента — 4 слоя. 0,25 × 4 = 1 (то есть 100%)

Таким образом, у внутреннего слоя прозрачность цвета будет равна 1, то есть отсуствовать. Он будет иметь самую яркую насыщенность. Остальные будут бледнее, но только внешний слой — 0,25 заданной прозрачности.

Поэтапно добавляйте свойства фонового цвета с разными способами записи значений. Пробуйте произвольно менять числа, изменяя тем самым его цвет.

Одинаковые свойства можно добавлять в одно и то же правило. Браузер прочтёт их все и по очереди применит. Но так как это произойдёт за доли секунды, то на экране отобразится результат применения последнего значения свойства. Можно поэкспериментировать и меняя местами строки с записью разных цветов.

dl {
··background-color: lightblue;         
··background-color: RGB(173, 216, 230);
··background-color: #ADD8E6;           
}

В конечном итоге верните голубой цвет и добавьте ему прозрачность.

dl {
··background-color: lightblue;         
··background-color: RGB(173, 216, 230);
··background-color: #ADD8E6;           
··background-color: RGBA(173, 216, 230, .25);
}

Интересно, сумеют ли ученики объяснить, что происходит с цветом. Я думаю, если они привыкли к форме урока «беседа», то при коллективном обсуждении у них всё получится. Это и будет тест на понимание структуры.

Синтаксис CSS

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

Стилевое правило CSS состоит из двух частей: селектора и блока объявлений.

│селектор { имя: значение;   имя: значение; ... }│
│        │ │  ОБЪЯВЛЕНИЕ  │ │  ОБЪЯВЛЕНИЕ  │   │ │
│        │ └── СВОЙСТВА ──┘ └── СВОЙСТВА ──┘   │ │
│        └─── Б Л О К   О Б Ъ Я В Л Е Н И Й ───┘ │
└───────────── П Р А В И Л О   CSS ──────────────┘

Селектор, от английского слова «select» (выбор). В нём перечисляются имена тех элементов, которые должны «подчиняться» указанному правилу. Мы с вами воспользовались самыми простыми селекторами элементов, записав всего лишь их имя. Браузер применил правило ко всем элементам, имеющим это имя, где бы они ни располагались.

Вторая часть правила — блок объявлений записывается в фигурных скобках. В этом блоке перечисляются отличительные свойства элементов, подходящих под описание селектора. Те свойства, которые не описаны в правиле, наследуются от родителя элемента.

Объявление свойства тоже состоит из двух частей — имя свойства, и через двоеточие с необязательным пробелом : , его значение. Для удобства чтения кода своего и команд соперниц пробел будем добавлять всегда. Объявления свойств отделяются друга от друга знаком точка с запятой ;. Мы будем ставить его в конце каждого.

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

Селектор записывается от левого края строки, за ним, через пробел, открывающая фигурная скобка. Каждое свойство записывается с новой строки с соблюдением структурного отступа (2 пробела) и заканчивается точкой с запятой. Имя свойства и его значение отделяются двоеточием с пробелом. В отдельной строке без пробелов слева — закрывающая фигурная скобка.

селектор {
  имя: значение;
  имя: значение;
  имя: значение;
  ...
}

Если запись правила (селектор и блок объявлений со всеми необходимыми пробелами) не превышает 80 символов, то его можно записывать в одну строку. При этом нужно учитывать по дополнительному пробелу между фигурными скобками и свойствами.

селектор { имя: значение; имя: значение; }

Внешние стили

С правилами разобрались. Но мы не учли ещё одну особенность. Ведь сайт может состоять из множества страниц. И их оформление должно быть в едином стиле. Мы только что избавились от повторения правил в атрибуте разных элементов, введя понятие «селектор», а теперь столкнулись с той же необходимостью для элемента STYLE в разных файлах.

Для устранения этой неприятности есть решение. Нужно все стилевые правила из STYLE переместить в отдельный файл с расширением имени (.css). В этом случае сам элемент STYLE становится не нужным. Но браузер должен «знать», что правила оформления внешнего вида страницы расположены в другом файле. Файл (.css) нужно подключить, используя элемент LINK.

Вместо теперь уже ненужного STYLE добавляем в элемент… (HEAD) новый элемент LINK. И у него обязательно должно быть два атрибута: rel, href и, возможно, ещё один — media.

  1. rel="stylesheet" Указание типа связи (related англ.: — связанный) между документом HTML и документом CSS.
  2. href="style.css" Про «href» читайте «Строчные элементы» > «§ 10. Мнемоники и строчные элементы» > «Гиперссылка»

    «style.css» — имя файла со стилевыми правилами, расположенного рядом с файлом (.htm). Имя может быть произвольным. У сайтов со сложным дизайном может быть несколько файлов со стилевыми правилами. Для их размещения рядом с документом HTML, как правило, создаётся папка с названием «css». Но тогда значение атрибута изменится: «css/style.css».

  3. media="…" Указание на тип устройства, для которого создан отдельный файл таблицы стилей.
    • Например, media="print" — отдельный набор стилевых правил для печати. В нём, как правило, отключают печать фонового изображения, баннеров, рекламных блоков и т.п.
    • Или media="speech" — отдельный файл для голосовых синтезаторов, которые вообще игнорируют стилевые правила вывода страницы на экран. В стандарте CSS существует целый раздел с описанием свойств, которые управляют «голосом» синтезатора.
    • Если мы пишем отдельные наборы правил для разных устройств, то и media="screen" — правила для экрана. Те, которые мы с вами и изучаем.
    • И, конечно, атрибут media="all" — для всех устройств один файл с общим набором правил. Он назначен по умолчанию. Если вы не создаёте отдельные файлы с правилами для разных устройств, то его можно и не писать.

Таким образом, запись LINK будет выглядеть так:

LINK rel="stylesheet" href="style.css"

Если вы таким же LINK подключите таблицы стилей к другому документу, то его элементы тоже будут подчиняться тем же правилам. И страницы будут иметь одинаковое оформление.

Селекторы

Вы уже знакомы с селекторами элементов и с их назначением тоже. Оно заключается в том, что… (стилевое правило со всеми перечисленными свойствами будет применено к каждому элементу, имя которого соответствует селектору)?

Но не хватает гибкости. Например, мы хотим применить правило только к одному элементу на всей странице, а таких элементов несколько. Или среди множества однотипных элементов мы хотим изменить вид только нескольким из них. Давайте попрактикуемся на примере простого документа: Робин Бобин

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

Стоит во время рассуждений записывать на доске даже неправильные фрагменты кода. Ошибки в рассуждениях будут представлены наглядно и для вас, и для учеников. У вас появится возможность формулировать актуальные наводящие вопросы, а у них — комментировать и поправлять ответы друг друга.

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

Обратим внимание на внешний вид нашего документа. Какое неудобство чтения сразу «бросается в глаза»… (строки в документе слишком длинные)?

Чтобы было удобнее читать текст, строки должны быть короче.

  • А в каких элементах содержатся эти строки… (В абзацах P)?
  • А в каком элементе содержатся сами абзацы с длинными строками… (В статье ARTICLE)?
  • Элементов существует только 2 типа. К какому из них относятся P и ARTICLE… (К блочным)?
  • В чём особенность блочных элементов… (их ширина равна ширине родителя)?
  • А какой элемент является родителем ARTICLE… («тело» документа BODY, которое отображается в рабочей области окна браузера)?

Вывод. Нужно изменять ширину не абзацев, не окна браузера или его рабочей области, а ширину документа, то есть то, что браузер вывел на экран… (ширину элемента BODY)?

С этого и начнём.

Первым шагом… (Создадим файл для стилевых правил)? И назовём его для простоты… (style.css)? И даже не будем для него создавать отдельную папку.

Вторым шагом… (Подключаем файл CSS к документу HTML)? (Если ученики не сообразят, что нужно подключить файл — не напоминайте им. Отсутствие изменений на обновлённой странице по окончании выполнения следующего шага должно подтолкнуть их к рассуждениям в правильном направлении).

Нужно ограничить ширину BODY. Для этого создаём правило CSS.

Создадим правило для всех BODY, и не важно, что оно («тело») только одно. Объявить правило можно за три приёма.

  1. Задаём селектор и за ним открываем описание body {.
  2. Затем два раза нажимаем клавишу Enter и закрываем описание }.
  3. Один раз нажимаем стрелку вверх UpArrow и после этого добавляем два пробела.

Всё. Готово.

Правило сформировано.

body {
··|  
}

Теперь к нему можно добавлять свойства и задавать им значения.

Селектор
Селектор правила мы определили — body.
Свойство
Добавим к нему свойство «ширина» по-английски это… («width»)? И сразу после него добавим… (двоеточие с пробелом «: »)?
Значение
Ширина нашего 17" монитора 1024px, но мы ограничим ширину BODY до 600px. И не забудем завершить описание свойства… (точкой с запятой «;»)?

Далее можно нажать Enter и 2 пробела, чтобы подготовить новую строку для добавления очередного свойства.

Вот что получилось.

body {
··width: 600px;
··|
}

Посмотрим, что изменилось на странице… (Строки стали короче)?

Но на белом фоне трудно различить изменившиеся границы документа. Давайте подсветим его.

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

Свойство
Для изменения фона нужно… (в стилевое правило добавить стиль «background-color»)? И назначить ему цвет, например, предельно светло-серый.
Значение
Как записать чёрный цвет… (#000000)? А как записать белый цвет… (#FFFFFF)? Обратите внимание на то, что если мы не хотим добавлять «цветность» к нашему цвету, то значения всех цветов должны быть равны. Назначим фону светло-серый цвет. К свойству нужно дописать значение… (#EEEEEE)?

Свойство сформировали, и место для него уже зарезервировано в правиле для body.

body {
··width: 600px;
··background-color: #EEEEEE;
}

Несмотря на то, что мы изменили ширину документа, цветом залита оказалась вся рабочая область окна. То есть, не только BODY, который теперь имеет ширину «600px», но и вся область вокруг него. Это странное поведение наблюдается у всех браузеров, но его можно исправить.

Какому элементу принадлежит область вокруг BODY… (HTML)? Придётся и для него тоже создать отдельное правило с фоновым цветом, только белым.

html {
··background-color: #FFFFFF;
}
body {
··width: 600px;
··background-color: #EEEEEE;
}

Вот теперь мы явно видим рабочую область окна браузера и чёткие границы самого документа HTML. Раз уж мы явно объявили цвет фона серым, то должны так же явно указать и цвет букв на этом фоне — чёрный.

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

Начнём с того, что назначим «чёрный» цвет любому шрифту на странице… (color: #000000;)?

Далее позволим браузеру самостоятельно выбрать шрифт из семейства установленных в устройстве.

Свойство
Как будет называться свойство выбора семейства шрифтов… (font-family)?
Значение
Нужно указать шрифт без засечек. Так как первый печатный станок изобретён был в Италии и распространение в первую очередь получил в Европе, термины формировались в языках разных стран. Засечка по-французски «sérif», а предлог «без» — «sans». Запишем это по-английски… («sans-serif»)?

Читать текст мелким шрифтом не всегда удобно. Запланируем ещё одно свойство «размер».

Свойство
По-английски размер это… («size»)? И так как речь идёт именно о размере шрифта, имя свойства уточняется… («font-size»)?
Значение
Зададим ему значение в «20pt».

Какому элементу добавить запланированные свойства, чтобы все буквы всех элементов изменили свой внешний вид… (BODY)?

Вот каким получилось правило для BODY. Создавая новый документ нужно добавлять, как минимум, эти четыре свойства.

body {
··width: 600px;
··background-color: #EEEEEE;
··font-family: sans-serif;
··font-size: 20pt;
}

Теперь начнём знакомиться с разными типами селекторов. По привычке давайте всем абзацам назначим красную строку.

Нужно первую строку каждого абзаца отодвинуть от его левой границы.

Селектор
Формируя правило для всех абзацев выберем элемент для формирования селектора… (P)?
Свойство
Напишем, что первая строка текста должна отступить. «Отступ» по-английски (англ.: indent — отступ)? Но нужно явно указать, что отступать будет не сам абзац, а только его текст… (text-indent)?
Значение
Единица измерения, равная ширине буквы «M», называется «em». Для красной строки достаточно указать «2em» или «2.5em». Выберем… (можно попробовать оба значения, и ученики решат сами)?

Элементы правила сформировали, осталось только его записать.

Добавим новое правило к нашей таблице стилей.

p {
··text-indent: …em;
}

С абзацами разобрались. Красная строка установилась для каждого. Но в стихотворениях красная строка не нужна. Что нужно сделать для того чтобы отменить её, но только у стихотворных абзацев… (создать для них отдельное правило)?

Перейдём к стихотворения. Правило должно начинаться с селектора. Но и обычные, и стихотворные абзацы находятся в P. Какой селектор назначим… (те, кто разбирается, пусть объяснят другим)? Даже если знают, стоит детально разобраться.

Попробуем определить, чем P обычных абзацев отличается от P стихотворных, и чем стихотворные схожи между собой… (все стихотворные расположены внутри BLOCKQUOTE, а остальные нет)? То есть, абзацы отличаются местоположением в структуре. Давайте это и учтём.

Селектор — команда браузеру: найди очередной BLOCKQUOTE, а в нём ищи все P. А читать его удобнее наоборот, то есть с конца: для всех P, которые в BLOCKQUOTE.

Селектор
Запишем: в цитатах для каждого абзаца… (blockquote p)?
Свойство
Свойство выберем то, которое нам мешает… (text-indent)?
Значение
И значение ему зададим равным… (0)?

Обратите внимание, что около значения «ноль» единица измерения не ставятся. Какая разница, чего «нет» — «пикселов» или «емов».

Вот правило только для тех абзацев, которые в цитатах.

blockquote p {
··text-indent: 0;
}

Для цитирования стихотворения иногда достаточной одной строки. Но тогда может быть непонятно, где короткий однострочный абзац, а где стихотворная строка.

Цитаты нужно выделять явно.

Селектор
Выбор селектора для цитат прост. Им будет… (blockquote)?
Свойство
Нужно двигать уже не текст, а сам блок цитаты. Нам понадобится свойство "margin" (marginally: латин. на краю, с краю).
Значение
Цитату нужно отодвинуть подальше от левой границы. Установим расстояние в два раза больше абзацного отступа… (4em)?

Вроде бы всё предусмотрели.

Добавляем правило к таблице стилей

blockquote {
··margin: 4em;
}

Наш блок отодвинулся на «4ем», но что-то пошло не так… (он отодвинулся и слева, и сверху, и снизу, и, вероятно, справа)?

Нам нужно было левый край блочного элемента отодвинуть от левой границы. Блочный элемент имеет форму… (прямоугольника)? У прямоугольника сторон (краёв)… (четыре)? Выходит, что свойство margin управляет… (всеми четырьмя отступами)? В имени свойства нужно добавить уточнение, что отодвигать нужно не от всех границ сразу, а только от… (левой)?

Свойство
По-английски «лево»… («left»)? Добавим к названию свойства уточнение… (margin-left)?

Исправляем правило.

С цитатами теперь всё хорошо.

blockquote {
··margin-left: 4em;
}

Но это не предел. Добавим ещё пару штрихов. Например, стихотворение на английском хотелось бы визуально отделить от русских.

Давайте изменим у английского стихотворения шрифт — назначим его с засечками.

Свойство
Имя свойства для выбора семейства шрифтов вам уже известно… (font-family)
Значение
О значении свойства можно легко догадаться, если вспомнить, как переводится на русский язык значение sans-serif… (serif).
Атрибут

А вот как быть с селектором? У нас в документе три цитаты, а действие нужно применить только к одной.

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

Мы поступим так же. В документе HTML к нужному нам BLOCKQUOTE добавим атрибут id. Чем наша цитата отличается от других… (написана на английском)? Зададим атрибуту соответствующее значение: english.

Идентификатор с заданным значением на странице может быть только один. Если понадобится создать единичное правило для какого-нибудь особого оформления другого элемента, то его идентификатору нужно будет подобрать другое имя. Можно просто добавить или удалить символ, уже тогда их значения будут отличаться.

Как записать атрибут элементу HTML вы уже знаете.

······BLOCKQUOTE id="english" lang="en-GB"

Теперь дело за селектором.

Селектор
Записать селектор элемента тоже не составит труда blockquote. Но чтобы он указывал только на конкретный элемент, к нему нужно дописать имя идентификатора english, а между ними без пробелов впечатать знак # — решётка. Готовый селектор: blockquote#english только для цитаты с идентификатором «english».

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

Давайте это и проверим.

blockquote#english {
··font-family: serif;
}

Осталась самая малость. Курсивом в этом документе выделять имена авторов не совсем правильно. Как правило, подобным образом записывают ремарки. А имена авторов оформляют курсивом только тогда, когда они расположены рядом с цитатой. Поэтому у «Чуковского» и «Маршака» нужно отменить курсив, а у «Матушки гусыни» — оставить.

Иногда нужно выделить среди множества однотипных элементов сразу несколько, но не все. Если они расположены рядом, то нужно их просто поместить в один общий элемент. Причём общий стоит искать среди семантических — ведь вы их собираетесь объединить по определённому признаку.

А вот если семантический элемент по смыслу подобрать не удастся, то остаётся использовать один из двух вспомогательных элементов: DIV (англ. divided — делённый на группы) для объединения блочных элементов или SPAN (англ. spanned — охваченный) — для строчных. Выбрать селектор в этих случаях не сложно.

Но если искомые элементы находятся в разных местах, то объединить их можно лишь используя атрибут class. Тогда можно сказать, что эти элементы одного класса или принадлежат одному классу и неважно где они расположены. Атрибуту нужно задать значение — «имя класса». И тогда ко всем элементам этого класса легко создать селектор для формирования правила.

Атрибут

Из трёх CITE нам нужно выбрать только два, причём в разных местах. Добавим каждому атрибут class, но с одинаковым значением. Какое значение подобрать к элементам с именами авторов… (author)? Так и поступим.

…в переводе CITE class="author"Корнея Ивановича Чуковского…

…в переводе CITE class="author"Самуила Яковлевича Маршака…
Селектор

Селектор запишется так же, как и для идентификатора, с той лишь разницей, что между именем элемента и класса ставится обычная точка .: cite.author

Свойства со значениями
Свойств нам понадобится сразу два и оба знакомы. Одно назначит начертание (обычное вместо курсива)… (font-style: normal)? Другое — заменит буквы на малые прописные… (font-variant: small-caps)?

Сформировано последнее запланированное стилевое правило для нашего документа.

Добавляем последнее правило. И теперь внешний вид документа готов.

cite.author {
··font-style: normal;
··font-variant: small-caps;
}

Вид документа стал намного лучше и удобнее для чтения, чем изначально был представлен браузером.

Домашнее задание

В коде CSS тоже можно добавлять комментарии: /* — метка начала комментария и */ его конца. Давайте посмотрим в качестве примера любое готовое правило.

body { /* правило для элемента [BODY] */
··width: 600px;              /* ширина 600 пикселов */
··background-color: #EEEEEE; /* цвет фона светло-серый */
··font-family: sans-serif;   /* шрифт без засечек */
··font-size: 20pt;           /* размер шрифта 20 пунктов */
}

Комментарии нужны:

  • для быстрого ориентирования в сложном и объёмном коде,
  • для отладки кода в процессе вёрстки страницы и согласования оформления однотипных фрагментов на разных страницах,
  • для учёбы в процессе знакомства с новыми свойствами CSS,
  • для анализа фрагментов чужого кода оригинального дизайна,
  • для команды соперницы, проверяющей вашу работу ;)

Есть HTML документ, состоящий из двух файлов: «robin.htm» и «style.css». Рекомендуется дома подробно рассмотреть правила CSS этого документа и прокомментировать каждый селектор и каждое свойство. Комментарии вы пишете не для учителя, а для себя. Поэтому, в первую очередь, они должны быть понятны вам.

Для того, чтобы увидеть особенности применения свойства, можно менять его значения и наблюдать за изменениями на странице. Это поможет детальнее разобраться с назначением и возможностями рассмотренных свойств.

Напутствие

Для детального изучения языка CSS, в частности, свойств и селекторов, а так же других его особенностей, можете пользоваться справочниками и сайтом Влада Мержевича и его команды.

  • На старой версии сайта можно скачать локальные справочники для компьютеров и мобильных устройств. Есть как платные, так и бесплатные версии.
  • Там же локальная книга в форматах .chm и .pdf «Самоучитель CSS 2.1».
  • Новая версия сайта и актуальные справочники в сети.
  • Готовые уроки пошагового создания сайтов на HTML 5 и CSS 3.
  • Учебные курсы в сети.

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

Не стремитесь копировать непонятный код оригинального фрагмента сайта или урока. Не разобравшись в нём, вы можете допустить массу ошибок и не достичь желаемого результата. Лучше потратить больше времени на то, чтобы разобраться с менее сложным, но понятным. И разобраться не поверхностно, а досконально. Тогда и сложный код станет доступен для понимания.

Выводы

В теме уроков «Системный подход» мы рассмотрели понятие «Система». Давайте вспомним, в чём заключается особенность системы… (Можно подсказывать и повторять)?

Особенности системы.

  1. Объекты, входящие в систему, называются элементы.
  2. Для каждого элемента определяется роль в системе.
  3. Между элементами устанавливаются связи, выстраиваются отношения взаимодействия и взаимовлияния.
  4. Устанавливается влияние свойств каждого элемента на систему в целом.

Чтобы понять, как устроена система, мы использовали методы изучения синтез, анализ и структурный метод. Вспомним их… (можно подсказывать и повторять)?

  • В чём особенность синтеза… (Изучение единого целого, соединённого из различных частей, качественно отличного от их простого сложения)?
  • В чём особенность анализа… (Разделение целого и изучение частей его)?
  • В чём особенность структурного метода… (Изучение взаимных отношений и связей между элементами системы и их ролей относительно друг друга и всей системы в целом)?

Используем систменый подход и эти инструменты, чтобы понять учебную задачу курса «Web-конструирование». Мы же учимся строить сайты. А в чём заключается наша учёба?

Разработанные нами коды HTML и CSS являются самостоятельными системами со сложными структурами. Применим к ним метод синтеза — оъединим в единую систему, а не просто как два отдельных файла. В результате получится надсистема… (оформленный документ HTML).

В системе «Документ HTML», коды HTML и CSS являются подсистемами. Применим к каждой из них метод анализа.

Анализ подсистемы HTML.

  • Подсистема HTML состоит из… (отдельных элементов HTML, которые браузер выводит на экран определённым образом).
  • Каждый элемент существует не сам по себе… (занимает в структуре определённое место)?

Анализ подсистемы CSS.

  • Подсистема CSS состоит из… (отдельных правил).
  • Основу каждого правила составляют… (свойства)? Чьи… (элементов HTML)?

А какой метод мы применим сейчас… (структурный метод)? Каким образом происходит связь между подсистемами… (через селекторы)?

Селекторы связывают правила CSS с элементами HTML, занимающими в структуре определённые места и имеющими определённые атрибуты.

На примере системы «Документ HTML» мы рассмотрели два основных инструмента курса «Web-конструирование» с точки зрения системного подхода.

Подводим рассуждения учеников к выводу. Если при построении кода HTML структура (структурные отступы) не соблюдена, то очень сложно подобрать селекторы к правилам CSS и тем самым добиться правильного (желаемого) отображения страницы.

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

Вывод. Основная учебная цель курса Web-конструирования заключается в понимании, грамотном построении структур и управления ими на примере создания документов HTML.

Вывод учителя. Так в чём же заключается учёба на курсе Web-конструирование. Элементов HTML не так уж много. Свойства CSS детально прописаны в справочниках. И если вы сумеете грамотно ими распорядиться, задуманную страницу сайта на экране для вас построит сам браузер.