Мне гораздо привычнее на Опере )

Форум наш состоит, скажем так, из "слоев", наложенных друг на друга. Только в отличие от бумажного коллажа или фотошопного вырезать часть слоя так, чтобы сквозь него можно было "продеть" другой - нельзя. Можно изменить размер, разместить его где-нибудь в уголке, задать прозрачный фон и производить прочие украшательства, но по сути своей он всегда остается прямоугольной областью.

Нашим главным помощником в обучении будут средства разработчика, встроенные в браузер, в случае Оперы это будет Dragonfly. Для того, чтобы ее запустить, достаточно щелкнуть правой кнопкой мыши по любому месту форума и выбрать пункт "Проинспектировать элемент" (для Мозиллы будет "Inspect Element with Firebug"):

Должно загрузиться такое вот окошко:

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

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

Щелкаем на нее, переводим курсор мыши на форум - и наблюдаем, как подсвечиваются разные блоки. Щелкаем на одном из них - и в нашем рабочем окошке с кодом выскочит его месторасположение, свойства и, самое важное, название. Не всегда удается "попасть" в нужную область, но это не страшно, эту проблему обойдем другим путем.
Проверочное задание: запустить и попробовать повыделять различные элементы, чтобы иметь представление, как оно вообще на практике происходит )  Выключается Dragonfly классически - нажатием на крестик (не браузера, а самой "Стрекозы")

Собственно, сейчас самое время рассказать о том, что такое id и class и чем они различаются. Нет особого смысла грузить техническими деталями наше обучение, о них можно почитать как-нибудь на досуге, а пока просто и незатейливо:
id - это идентификатор, уникальное имя элемента. Может присваиваться только один раз (т.е. такой вот элемент на странице - только один-единственный). В css-коде такие элементы прописываются с решеткой перед своим названием, как пример - #pun {...} . В html-коде же к идентификатору обращаются как раз через id. Запись html будет выглядеть как: <div id="pun">..</div>
class - классы. "Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега." [цэ] А если проще - то классы нам нужны для того, чтобы разнообразить стилевые украшательства для идентификаторов. И если id может встречаться в коде только один раз (в смысле, определенное имя id), то class'ов с одинаковым именем может быть очень много.
Запись для css:  .punbb {...}
Обращение через html: <div class="punbb">...</div>

Как пример совмещенности:  #pun-redirect .main-title {display: none;}  (id в  данном случае носит имя pun-redirect, а class - имя main-title)

Есть записи и без точек и решеток, это селекторы тегов.

Пока то, что нужно усвоить - идентификаторы начинаются с #, классы - с точки перед названием. В html к идентификатору обращаются как id="..."  ,  а к классу как class="..."  При обращении через html точки-решетки не ставятся.

Теперь о порядке слоев. В исходном коде можно наблюдать такую картинку:

Зеленым подчеркнуты и пронумерованы те части, с которыми мы будем в дальнейшем работать.
Вообще слои легче всего сравнить с книгой или стопкой бумаги - когда один лист накладывается поверх другого. Т.е. самым первым, самым нижним, у нас будет лист html, поверх него ложится другой лист body и т.д.  Вот примерная схема нашей "бумажной стопки":

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

Вводная часть закончена, задание:  выделить из html-записи идентификаторы и классы, записать их названия в css, соблюдая правила точек-решеток.

С точками-решгетками все правильно, но запись имени - нет.

Разбираем строчку:

есть id - значит, перед названием будет стоять решетка. В кавычках стоит название. Название может содержать тире, нижнее подчеркивание, цифры, нежелательно использовать пробелы (вообще в будущем мы будем вводить новые блоки и уже сами будем их называть, а пробелы лучше всего будет заменить нижним подчеркиванием, например: tablica_new ). Учитывая это получаем:
#html-header {...}

Здесь идет совмещение id и класса. Выделяем каждый из них, учитывая, что в кавычках стоит название целиком, оно неделимо:
#pun-stats
.section
В совмещенном виде это будет: #pun-stats .section {...}   
(это как бы "слой с названием section, находящийся внутри слоя pun-stats". Еще нагляднее и упрощеннее: два листа, из которых тот, что побольше - внизу, а поменьше - наверху. Побольше - это pun-stats, а поменьше - section.)

Теперь попробуй сама:

Отредактировано Wilhelm (2012-06-05 23:24:32)

Да, почти все правильно 
Ошибка тут:

для строки <div id="post-45-vote" class="post-vote">  css-запись будет выглядеть как:
#post-45-vote .post-vote {...}
id и class не обязательно должны идти вместе, они могут встречаться и по отдельности:
html: <div class="post-rating">
css:   .post-rating {...}

ОК. Следующие наши шаги на выбор:
- Можем рассматривать подробно css форумный, где что расположено и за что отвечает.
- Можно попытаться разобраться на простейшем уровне с html-тегами, научиться составлять простые таблички, объединять колонки и прочее по мелочи. Чего-то шикарного не могу обещать, но, думаю, минимума этого будет достаточно, чтобы в случае чего опправить косяки в табличках и тексте на своем форуме.

Отредактировано Wilhelm (2012-06-05 23:38:52)