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

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

 

 

 

 

 

 

 

 

 

Домашнее задание по CSS >  Об описании структуры сайта и задании стилей отображения блоков

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

Типичное современное описание структуры сайта строится на блоках, оформленных как "разделы"
(HTML-элемент div). Такие блоки снабжаются уникальными идентификаторами (атрибут id). И это позволяет описать внешний вид как самих блоков, так и их внутренних структурных элементов с помощью CSS.

При этом используются id-селекторы и селекторы класса - зачастую в довольно сложных конструкциях, с применением селекторов потомков.

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

"Шапка" должна быть красивой - ей, видимо, надо задать хотя бы фоновую картинку. Меню тоже следует как-то раскрасить. И т.д.  А ведь в каждом из этих (всего трех в нашем условном примере) структурных блоков могут быть и дочерние структурные элементы: заголовки разных уровней, абзацы, списки, гиперссылки и т.д. И все это многообразие должно как-то выглядеть. При этом заголовки, ссылки и прочие элементы просто обязаны отображаться по-разному в зависимости от того, в каком блоке (шапка, навигация, контент) они находятся.

Скажем, заголовок 1-го уровня (h1) в шапке мы хотим вывести белым цветом, поскольку (предположим) фон шапки темный. А в зоне основного контента заголовок 1-го уровня решено вывести крупным шрифтом, темным цветом и с отчеркиванием. Ссылки в основном тексте решили сделать подчеркнутыми и темно-синими, а в навигационном блоке - без подчеркивания и розовыми...

И самый рациональный способ описания стилевых конструкций (по крайней мере, сейчас именно такой подход) - указать уникальные идентификаторы (атрибут id) для основных структурных блоков. А потом сослаться на эти идентификаторы, применяя id-селекторы.

Короче (в нашем условном примере), HTML-код может быть таким:

<div id="header">
 <h1>заголовок сайта...</h1>
 ...  поле поиска, дополнительные данные в шапке
</div> 

<div id="nav">
 <h1>Основные разделы:</h1>
 <ul>
  <li><a href="/index.htm">главная</a></li>
  <li><a href="/about.htm">о проекте</a></li>
  ... и прочие ссылки меню
 </ul>
</div>

<div id="content">
  <h1>заголовок страницы...</h1>
  <p class="epigraph">эпиграф...</p>
  <p>абзац за абзацем...</p>
  ...
  <p>... <a href="...">ссылка в зоне контента</a>  ...</p>
  ...
  <p>... <span class="term">в тексте встретился некий термин</span>  ...</p>
  ...
  <p>... <span class="term">и еще раз встретился этот термин</span>  ...</p>
  ...
  <p>и снова абзац за абзацем...</p>
  ...
</div>

Подробнее рассмотрим блок навигации (ему присвоили уникальный идентификатор id со значением nav). В этом блоке есть заголовок h1 и ссылки a, структурно оформленные как содержимое элементов списка li (кстати, это типичное решение). А вот так могло бы выглядеть описание стилей (естественно, во внешней таблице стилей):

#nav {... описание внешнего вида блока в целом}
#nav ul {... описание списка в этом блоке}
#nav ul li {... описание элементов этого списка}
#nav ul li a {... описание гиперссылок в списке}			     

Заметьте, мы здесь в составном селекторе используем селекторы потомков, указывая вложенность элементов в соответствующие контейнеры. Скажем, последнее описание утверждает следующее. Внутри элемента с id=nav (#nav) в списке (ul) в элементе списка (li) гиперссылка (a) должна отображаться так, как указано в фигурных скобках (согласно CSS).

Исключительно для красоты словесной формулировки можно попробовать перечислить элементы составного селектора справа налево. Тогда расшифровка смысла селектора  #nav ul li a  получится примерно такая. Гиперссылки (a), являющиеся элементами (li) списка (ul) в блоке с id=nav отображаются так, как указано в фигурных скобках (согласно CSS).

Кстати, в процессе разработки сайта на базе любой SMS, необходимо уметь работать со сложными селекторами, в частности - с id-селекторами. Ибо CMS создаст каркас страницы с десятками вложенных элементов div (и у всех будет либо уникальный id, либо некий класс) . И при формировании своей "темы оформления" придется тщательно указывать стили для всех сгенерированных CMS блоков и вложенных в них элементов.

Наконец, задание.

Задание непростое, ибо мы только начали разговор о CSS (хотя - чисто формально - основные тезисы были озвучены). Не расстраивайтесь, если сейчас что-то не до конца понятно. Откровенно говоря, многие разработчики, именующие себя "веб-программистами", не умеют правильно применять CSS. А мы уже скоро будем вынуждены применять CSS на практике - и все получится.

  • Вы видите выше, как в нашем условном примере можно было бы задать стили для блока навигации с использованием сложных селекторов. Напишите по этому образцу формальные объявления стиля для блоков заголовка и основного контента. Сами правила стиля (в фигурных скобках) можете не указывать. А если есть желание - попробуйте задать конкретные стилевые конструкции (цвет, фон, шрифт - то, о чем уже шел разговор на занятии).
     
  • Какие особые элементы выделил в зоне контента гипотетический разработчик? Зачем? Почему он использовал не id, а класс? Как описать стилевые конструкции для указанных классов ( epigraph и term)?
     
  • Подумайте, в каких случаях следует указывать id (и сылаться на него в стилевых описаниях), а когда надо задавать класс? В чем преимущества и недостатки этих подходов?
     
  • Попробуйте написать CSS для гиперссылок, которые могут встретиться в указанных трех блоках. Не забудьте, что ссылки - элемент особый: они бывают, по крайней мере, посещенные и непосещенные. А какие еще? И зачем может понадобиться по-разному их отображать?