сайт Валентины Захаркиной      
кафедра информационных систем
в искусстве и гуманитарных науках
факультета искусств СПбГУ
     
   

При работе с CMS
одной из задач является
создание своей темы оформления.
Это предполагает серьезную работу
со стилями CSS.

Каркас страниц, генерируемый CMS,
содержит большое количество
вложенных друг в друга контейнеров,
каждый из которых имеет
либо id, либо класс.

 

Домашнее задание по CSS >  Практическое задание

Скоро мы установим CMS Drupal и получим готовую оболочку тестового сайта, которую будем заполнять. Одним из аопросов, которому мы уделим особое внимание, будет создание своей "темы оформления".

Оболочка, сгенерированная Drupal (как и любой другой CMS), уже содержит всю нужную нам HTML-разметку. В ней выделены крупные структурные блоки: шапка, левая и правая колонки, зона контента, блоки меню, подвал... Все блоки и входящие в них структурные элементы (заголовки, абзацы, гиперссылки, списки и т.д.) имеют либо уникальный идентификатор id, либо присвоенный класс. И нам придется писать составные селекторы, чтобы придать элементам документа желаемый внешний вид.

Потренируйтесь в составлении селекторов и задании стилей на нескольких примерах. При необходимости заглядывайте в раздел CSS (селекторы и свойства стиля). Откройте эти разделы в отдельных вкладках, и обращайтесь к ним при выполнении задания.

1.   Рассмотрим гипотетическую разметку шапки. Посмотрите внимательно. Здесь есть разные элементы, многие из которых имеют id либо класс. Далее будем добавлять правила стиля для шапки и ее элементов.

<div id="header">  <!-- зона шапки -->
 <div class="wrapper">
  <h1 class="siteName">Работа с CMS Drupal</h1>
  <p>... поиск по сайту</p>
  <p>... регистрация</p>
  <a href="...">Забыли пароль?</a>
  <div class="header-links">
   <h1>Первоисточники:</h1>
   <a href="http://drupal.org">сайт drupal.org</a>
    ...
  </div>  <!-- header-links end -->
 </div>  <!-- wrapper end -->
</div>  <!-- header end -->

1a. Какой селектор соответствует всей зоне шапки? Как задать для шапки цвета: например, темно-синий фон (navy) и белый цвет (white или #fff) текста?

Проверить ответ

селектор использует id: #header
правило стиля для шапки: #header { background:navy; color:#fff; }

1b. Каким цветом теперь будут выведены текстовые элементы шапки (заголовки, абзацы, гиперссылки)?

Проверить ответ

Думаете, все белым? Вот и нет. Заданный для контейнера цвет текста наследуют все его элементы, кроме гиперссылок. Гиперссылки пока будут выводиться цветом по умолчанию.

1c. Задайте для гиперссылок шапки особый цвет, скажем, розовый (pink). Пусть этот цвет будет одинаковым для всех ссылок (посещенных и непосещенных). А при наведении курсора мыши пусть гиперссылки станут белыми на оранжевом фоне. И отмените подчеркивание для всех гиперссылок шапки.

Проверить ответ

#header a:link, #header a:visited { color:pink; text-decoration:none; }
#header a:hover { color:#fff; background:orange; }

Здесь использованы псеводклассы ссылок ( link, visited и hover)

1d. Пусть ссылки на первоисточники будут при наведении курсора мыши выглядеть особо - красный текст на белом фоне.

Проверить ответ

#header .header-links a:hover { color:red; background:#fff; }

1e. Задайте обычным заголовкам 1-го уровня (h1) шапки размер шрифта 16px, а заголовку 1-го уровня класса siteName размер 24px. Пусть при этом обычные заголовки выводятся нормальным начертанием, а заголовок класса siteName - полужирным.

Проверить ответ

#header h1 { font-size:16px; font-weight:normal; }
#header h1.siteName { font-size:24px; font-weight:bold; }

Все браузеры по умолчанию выводят заголовки полужирным начертанием (заметьте - это всего лишь умолчания браузеров, в стандарте CSS ничего по этому поводу не говорится). Если какие-то заголовки захотелось вывести нормальным начертанием, надо указать соответствующее правило стиля.

2.   Рассмотрим гипотетическую разметку зоны основного контента:

<div id="content">  <!-- зона шапки -->
 <div class="wrapper">
  <div id="contentTitle">
   <h1 class="title">Установка Drupal</h1>  <!-- заголовок всей страницы -->
   <div class="slogan">Главным искусством для нас является программирование
   </div>
  </div>  <!-- contentTitle end -->
  <div id="content-inner">
  <h1>Распаковываем дистрибутивы Drupal и полезных модулей</h1>
  <p>... <a href="...">...</a> ... </p>
  ...
  <h1>Копируем дистрибутивы на сервер</h1>
  <p>...</p>
  <h1>Начинаем установку...</h1>
  <p>...</p>
  <p>...</p>
  ...
  </div>  <!-- content-inner end -->
 </div>  <!-- wrapper end -->
</div>  <!-- content end -->

2a. Каким элементам здесь следует задать правила стиля? Напишите свой вариант.

Проверить ответ

Например, так (цвета, конечно, странные - но ведь это просто пример):

#content { font-size:14px; color:#444; background:#fff; }

#contentTitle h1.title { font-size:22px; color:#fff; background:steelblue; } 
#contentTitle .slogan { color:steelblue; font-style:italic; } 

#content-inner h1 { font-size:18px; color:#000; } 
#content-inner p { text-align:justify; }

#content-inner a:link { color:dodgerblue; }
#content-inner a:visited { color:lightslategray; }
Здесь, по крайней мере, упомянут минимально необходимый набор структурных элементов.

2b. В этом и следующих вопросах посмотрите на мой вариант правил стиля 2а. Можно было бы вместо #contentTitle h1.title  задать более простое правило: #contentTitle h1? Ведь, казалось бы, в селекторе можно ограничиться только указанием класса (.title) без упоминания id (#contentTitle)...

Проверить ответ

Дело в том, что заголовок h1 класса title может встретиться и в других структурных блоках, а не только в зоне основного контента. И тогда, возможно, он должен выглядеть иначе. Кстати, это типичная для CMS ситуация.

2c. Почему выравнивание по ширине (text-align:justify) задано только абзацам (p)? Задали бы всей зоне контента (#content)...

Проверить ответ

Тогда это выравнивание унаследовали бы, скажем, и заголовки. А короткий заголовок, выровненный по ширине, выглядит некрасиво.

2d. Посмотрите на цвета, заданные текстовым элементам. Какими соображениями руководствовался автор стилевых описаний?

Проверить ответ

Цвет основного текста - темно-серый (не черный, так советуют дизайнеры). А заголовки могут быть и черные, и цветные.
Гиперссылки одного цветового тона, но посещенные - менее насыщенные.

2e. Будут ли подчеркнуты гиперссылки?

Проверить ответ

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

2f. А где же указание гарнитуры шрифта (font-family)?

Проверить ответ

Основную гарнитуру обычно задают для body, и ее наследуют все вложенные элементы.

3.   Какие объявления стиля следует задавать для body как главного контейнера?

Проверить ответ

По крайней мере, font-family, font-size, background
Эти свойства унаследуют все вложенные элементы. По мере необходимости, для отдельных структурных зон их можно переопределить.