Уроки по дизайну ЖЖ. Часть IV.
Внимание: это уроки для устаревшей системы стилей S1, хотя, возможно, вы найдете в посте полезную информацию по HTML.
Перейти к актуальным урокам →
В этом уроке я расскажу как применить CSS непосредственно к оформлению вашего журнала. Нам снова понадобится обратиться к HTML, ведь это язык на котором задается разметка страницы. Помимо тегов html и body, которые мы рассматривали в первом уроке, существует множество других. Обычно они размещаются в body.
Навигация по урокам
Мы рассмотрим следующие теги:
p абзац.
Текст, не разбитый на абзацы:
Развивая эту тему, аккорд иллюстрирует перекрестный популяционный индекс, потому что современная музыка не запоминается. Угловое расстояние вращает сарос - это солнечное затмение предсказал ионянам Фалес Милетский. Полиряд однородно перечеркивает октавер, но если бы песен было раз в пять меньше, было бы лучше для всех. Ревер дает флажолет, и здесь в качестве модуса конструктивных элементов используется ряд каких-либо единых длительностей.
и разбитый:
Развивая эту тему, аккорд иллюстрирует перекрестный популяционный индекс, потому что современная музыка не запоминается. Угловое расстояние вращает сарос это солнечное затмение предсказал ионянам Фалес Милетский.
Полиряд однородно перечеркивает октавер, но если бы песен было раз в пять меньше, было бы лучше для всех. Ревер дает флажолет, и здесь в качестве модуса конструктивных элементов используется ряд каких-либо единых длительностей.
Разбитый на абзацы текст гораздо удобнее читать : ) Обычно отступы в постах устанавливаются сами. Нас же p интересует как элемент, которому можно присвоить стили, он уже содержится в коде страницы.
div див, блочный элемент. Он часто служил нам для примерки стилей : )
Очень удобен для создания своего меню и сайдбаров, так же уже присутствует в коде и к нему можно применять стили. По умолчанию следующий див переносится на новую строку, но можно задать иначе.
span спан, строчный элемент.
span span
По умолчанию следующий спан находится в одной строке с предыдущим.
table таблица, содержит строки (tr) и ячейки (td).
Как правило, уже содержится в коде, в S2 может и не быть
a ссылка.
Например, Добавить комментарий
По умолчанию выглядит в зависимости от состояния. А состояния у ссылки могут быть такие:
• a:link просто ссылка
• a:active активная ссылка, при нажатии мыши
• a:visited посещенная ссылка (по умолчанию шрифт становится фиолетовым)
• a:hover ссылка при наведении мыши
Вид ссылок можно изменить.
Обязательный атрибут href адрес страницы на которую ссылаемся
Все теги парные и обязательно должны закрываться
img картинка.
Например:
Обязательный атрибут src путь к картинке. Тег не парный, закрывать не надо.
А теперь посмотрим как стили применяются к элементам. Для примера возьмем таблицу:
Она начинается и заканчивается тегами table, внутри находятся строки tr, внутри строк ячейки td.
Если вставить ее просто в таком виде ее не будет видно, поэтому сделаем таблице рамку и укажем ширину таблицы:
...
Ширина и рамка это обычные атрибуты таблицы, предусмотренные языком HTML. С помощю стилей можно указать тоже самое, но результат будет более управляемым и изящным:
...
Этот способ лучше с той точки зрения, что в стилях вы можете указать эти параметры для всех таблиц на странице одновременно, в том числе и для тех, доступа к коду которых у нас нет, например для entrybox, только для этого содержимое атрибута style надо будет прописать в *_HEAD
Так как ячейки пусты их не видно, заполним их чем-нибудь:
Внутри ячейки див размером 30х10 с красным фоном. Для других ячеек тоже самое, но с другим фоновым цветом. это пробел, используется в качестве содержимого дива, иначе див может не отображаться.
У второй таблицы рамка задана через атрибуты, и рамки есть у всех ячеек. В первом рамка только у таблицы. Делаем в CSS-примере рамки и для ячеек тоже:
Видим, что между ячейками и самой таблицей есть небольшое расстояние. В HTML для таблицы есть атрибут cellspacing, он управляет этим расстоянием.
...
...
С помощью стилей это расстояние убирается так:
...
Управлять этим расстоянием в стилях, насколько я знаю, нельзя.
А теперь добавим отступ от ячейки до содержимого. Это совершенно необходимо если содержимое ячейки текст, без отступов его будет неудобно читать. В HTML это также делается атрибутом cellpadding для всей таблицы:
А в CSS просто padding, но указывается он для ячейки. В стилях (как уже говорилось ранее) можно задать все отступы сразу или только какие-то конкретные, например только сверху или справа и снизу. Также разной может быть и величина отступа. В примере отступ 5px со всех сторон.
...
Здесь приходится указывать одно и тоже для каждой ячейки, но в стилях для HEAD будет гораздо логичнее указать все сразу:
/*стили для таблицы*/ table{ border:1px solid #cccccc; width:100px; border-collapse: collapse; } /*стили для ячеек*/ td{ border:1px solid #cccccc; padding:5px; }
Подобным же образом определяются стили и для всех остальных элементов, то есть сначала указываем элемент к которому обращаемся, затем в фигурных скобках перечисляем стили и их значения.
Также к элементу можно обратиться по имени класса, например:
.shadowed{ border:1px solid #cccccc; padding:5px; text-align:center; }
Перед названием класса обязательно ставится точка. Если мы хотим обратиться к ячейке с классом caption находящейся в таблице с классом entrybox, это будет выглядеть так:
.entrybox .caption{ font-size:90%; color: steelblue; }
Вид ссылок задается следующим образом:
a:link{ color:#FFCC00; cursor: pointer; cursor: hand;} a:visited{ color:#00A2FF; text-decoration:overline; background:#A3D688;} a:hover{ color:#90FF00; text-decoration:none;} a:active{ color:#FFF000; text-decoration:none;} /* последовательность описания стилей для ссылок лучше сохранить, то есть link-visited-hover-active */
Теперь рассмотрим это все применительно непосредственно к коду дизайна. Для этого нам надо знать какие классы и элементы там уже есть, чтобы мы могли к ним обратиться.
Разными цветами показана степень вложенности
Условные обозначения: Таблицы, дивы, абзацы Ячейки таблицы
Эта схема дает общее представление о расположении элементов и классах некоторых из них в Generator (схема действительна только для Generator!!).
К элементам, у которых классы не заданы, можно обратиться через последовательность элементов, в которые они вложены. Например:
/* сделает рамку у всех картинок в ячейке с классом shadowed */ .shadowed img{ border: 2px doted maroon;} /* спрячет див с названием журнала в ячейке shadowed */ .shadowed div{ display:none;}
Так же с помощью указания вложенности можно отличить элементы с одинаковым классом один от другого, например:
/* применяется ко всем ячейкам с классами index и caption */ td.index, td.caption{ padding:8px; color:#B4B4B4; } /* применяется только к ячейке index находящейся в таблице entrybox */ .entrybox td.index {font-size:80%;}
Теперь вы можете попробовать написать свои стили. Как я уже говорила, делать это можно в программе TopStyleLite.
Отлаживать стили и писать свои очень удобно в Web Developer для Мозиллы, он позволяет сразу же видеть как влияют изменения в стилях на вид страницы, а готовые стили можно сохранить в файл.
Также Web Developer может показать классы всех элементов или только какого-то выбранного, показать все таблицы на странице или же все блочные элементы, может показать вид экрана при определённом разрешении монитора.. Это всё может очень пригодиться при создании/редактировании вашего дизайна, и это только малая часть того что умеет эта программа : )
Готовые коды стилей вставляются непосредственно в HEAD, но можно использовать для этого и внешний файл, тогда код будет выглядеть так:
GLOBAL_HEAD<= <=GLOBAL_HEAD
К сожалению, для отладки этот способ не очень удобен стили очень хорошо кэшируются, поэтому для того чтобы увидеть внесенные изменения, придется несколько раз перегружать страницу.
В качестве полигона для своих экспериментов можете воспользоваться кодом от дизайна:
Код:
GLOBAL_HEAD<= <=GLOBAL_HEAD LASTN_WEBSITE<=
| О пользователе |
| Друзья |
| Архив |
| Последние записи |
| О пользователе |
| Друзья |
| Архив |
| Последние записи |
| О пользователе |
| Друзья |
| Архив |
| Последние записи |
| О пользователе |
| Друзья |
| Архив |
%%readlink%% 
http://yoksel.ru/i/dises/lags/lags_comm.gif"/> Добавить комментарий
%%readlink%% http://yoksel.ru/i/dises/lags/lags_comm.gif"/> Добавить комментарий
%%readlink%% http://yoksel.ru/i/dises/lags/lags_comm.gif"/> Добавить комментарий
Не бойтесь экспериментировать! Если чего поломается, просто возьмите код ещё раз : )
Если у вас S2, вы также можете воспользоваться этим кодом, но из него вам потребуются только описание стилей. Его не нужно заключать в теги.
#lj_controlstrip {display:none;} html body {padding: 0;} body {background:#ffffff; background-image:url('http://yoksel.ru/i/dises/lags/lags_bg.gif'); background-repeat: repeat; background-attachment:fixed; padding-top:5px; padding-left:20%; padding-right:20%; } body, td { font-size:80%; color:#303030; font-family: verdana, sans-serif;} a:link {color:#949494;} a:visited {color:#949494;} td {background:white; } td td { border:0; background:transparent;} table {margin-bottom:12px; border:1px #ddd solid;} table table {padding:0; margin-bottom:0px; border:0;} td.index, td.caption {padding:8px; color:#B4B4B4; } td.caption {font-weight:bold; font-size:130%; } .index {font-size:90%;} .shadowed{background:transparent;} .shadowed div b{display:none;} .shadowed td.meta{display:none} .shadowed table table td {border:1px #ddd solid;} .shadowed .tblock{border:0} .shadowed .tblock td{border:0} .entrybox td.index {font-size:80%;} .entrybox .caption { font-size:100%;} table.entrybox {border-collapse:separate;} .entrybox td td {border:0} .entrybox a.index, .entrybox a.index:visited{ background:transparent; font-size:100%; text-decoration:underline;} .comments div{padding:10px;}
В следующий раз я расскажу о том, что ещё вставляется в HEAD : )
Навигация по урокам
I. Общее представление о HEAD, WEBSITE и тд.
II. Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
III. 2-я часть таблицы (курсор, видимость, отступы, размеры, выравнивание, позиционирование)
IV. Применение Css к коду журнала. Понятие о P, Div, Span, Table, A, Img. Схема страницы для Genrator.
V. Эффекты перехода между страницами (IE). Что такое Favicon и как его сделать.
VI. Способы изготовления меню: замена надписей, меню справа или слева, сайдбар, ImageMap.