Уроки по дизайну ЖЖ. Часть II.
Что такое CSS?
Это каскадные таблицы стиля для HTML-документа, а если проще - язык, на котором мы объясняем нашему дизайну каким же мы хотим его видеть.
Навигация по урокам
Удобнее всего со стилями работать с помощью программы TopStyleLite. Она платная, но можно просто найти в сети. Она особо удобна тем, кто неуверено владеет CSS или вообще имеет о них только общее представление. Код подсвечивается, его удобно читать. В выпадающей подсказке можно выбрать элемент CSS и его значение. Это избавит вас от ошибок при написании стилей.
Только для S1! Если у вас S2 - пропускайте этот блок!
Вставляются стили в блоки *_ HEAD (то есть во все, название которых оканчивается на HEAD) внуть тега style. Как правильно заметил товарищ degro, тегов style внутри HEAD может быть несколько, но лучше все стили вставить в один тег, потому что если вы забудете закрыть один из style'ов - это может стать причиной ошибки, которую можно будет дооолго искать : )
Таким образом блок *_ HEAD должен выглядеть так:
GLOBAL_HEAD<=
<=GLOBAL_HEAD
В основном я буду говорить о GLOBAL_HEAD, обычно я использую только его - удобно же когда весь журнал в одном стиле, да и юзер, пролистывающий страницы вашего журнала, всегда будет знать, что он у вас в гостях, а не попал магическим образом на какую-то постороннюю страницу : )
Но если вы хотите придать индивидуальность отдельным разделам вашего журнала, вам следует использовать для этого другие блоки. Про соответствие блоков HEAD страницам вашего журнала вы можете узнать тут
Удобнее всего прописать стили общие для всего журнала в GLOBAL_HEAD, а в LASTIN_HEAD, FRIENDS_HEAD и т.д. - стили только для этой страницы. Это убережет вас от глюков из-за того что один и тот же код вы в одном HEAD исправили, а другом забыли
ВНИМАНИЕ! каждый из блоков используемых в дизайне ЖЖ (*_HEAD, *_WEBSITE, и прочие) должен встречаться в коде 1 (ОДИН) раз, иначе ваш журнал автоматом выберет второй, а первый просто сотрёт.
Если вы хотите добавить какой-то новый код - добавляйте его в уже существующие блоки. Если же необходимого блока нет - его нужно вставить : )
Итак, перейдём непосредственно к стилям - к CSS.
Для того чтобы писать корректные и удобочитаемые стили, необходимо соблюдать несколько простых правил:
Теперь рассмотрим содержимое фигурных скобок исходя из того, что планируется получить в результате, то есть непосредственно стили и назначение каждого из них.
Действие стилей будет демонстрироваться на div'е 100х50 пикселей.
Его код:
Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Фоны страницы, постов, фоны в юзеринфо background-color • значение цвета типа #9ACD32
• его название - yellowgreen;
• полная прозрачность: transparent
background-color:yellowgreen; или background-color:#9ACD32;
Код для прозрачности:
background: transparent;
(образца видно не будет, так что не делаю :)
Код цвета можно получить в фотошопе и других графических редакторах.
В TopStyleLite есть своя таблица цветов.
Можно использовать код или название. Перед названием # не нужен. background-image адрес картинки в сети
background-image:url('http://yoka.by.ru/i/dises
/lessons/bg_ex100.gif');
Картинка должна быть в сети, и находиться на сайте который позволяет просматривать картинки находящиеся на нём через посторонний сайт (к примеру, narod.ru этого не позволяет, вместо картинки будет пустой квадратик или вообще ничего).
Внимательней отнеситесь к весу загружаемой картинки. Если она слишком тяжела, кто-то просто не дождётся её загрузки и не увидит фон вашего журнала.
К тому же тяжелые картинки кушают трафик, не все этому обрадуются. Имеет смысл делать картинку не более 100 kb, лучше меньше.
Уменьшить размер картинки и её вес можно в фотошопе и прочих графических редакторах.
Выбирая фон для журнала, помните что у всех разные мониторы. Довольно странно смотрится картинка из под которой торчит фоновый цвет.
Вообще у фонов может быть очень широкое применение, ведь фон можно сделать и у таблицы, и у строчки, и у ячейки, и у дивов.. Масса возможностей! Например, дизайн моего журнала, yoksel, сделан при активнейшем участии бэкграундов : )
Вид Журнала
Вид ленты друзей
конструкция довольно глючная, к сожалению..
Применение фонов имеет большое преимущество по сравнению с картинками: если обычные картинки не загружаются - вместо них возникают пустые квадратики, в случае же если не грузится фон - он ничем не заменяется ---> пустых картинко-квадратиков не будет.
Это вовсе не означает, что всё следует делать бэкграундами - делайте как вам удобнее : )
background-repeat
• repeat
повтор фона
• no-repeat
не повторяется
• repeat-x
повтор по горизонтали
• repeat-y
повтор по вертикали
background-repeat:repeat;
тоже самое будет если не указывать параметры повтора
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-attachment
fixed
картинка "прибита" и не прокручивается вместе со страницей.
background-attachment: fixed;
(продемонстрировать не получится :) background-position
• top
фон прибит к верхнему краю
• right
к правому
• bottom
к нижнему
• left
к левому
background-position: top;
background-position: right;
background-position: bottom;
background-position: left;
background-position: center;
background-position: 20% 70%;
Положение фона можно задать также в пикселях и % и т.д. Первое число считается отступом от левого края, 2-е - от верхнего, и так далее по часовой стрелке
Чтобы фон в примере не повторялся, я добавила background-repeat: no-repeat;
В случае если фон повторяется - он просто будет начинаться от заданного края. Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Рамки border
border-top
рамка сверху
border-right
рамка справа
border-bottom
рамка снизу
border-left
рамка слева
• указание толщины в px
• стиль
• код цвета или его название (необязательно)
border-top: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
светло-жёлтую заливку div'a я использовала, чтобы было понятно, что это рамки блока, а не абстрактные полоски висящие в воздухе : )
Для того, чтобы рамка вообще была видна, необходимо прописывать стиль рамки (border-style), обычно solid, или если полностью - border-style: solid;
1px необходимо писать слитно, 1 px не будет работать
К вопросу записи стилей:
Можно описывать рамки длинной записью:
border-width: 2px;
border-style: dotted;
border-color: #3366CC;
Результат будет выглядеть так:
а можно короче:
border: 2px dotted #3366CC;
и результат будет абсолютно тот же : )
Я бы рекомендовала пользоваться короткой записью, так код лучше читается и занимает меньше места.
Вообще коротко можно описывать можно многие элементы CSS, например, бэкграунды, но рамки удобнее всего.
Это может быть важно, если учесть насколько масштабным может быть вообще код дизайна : )
На этом примере видно, что стили рамок можно смешивать произвольным образом. Можно указать только одну или две рамки, а можно раскрасить все 4 в разные цвета : )
border-top: 2px dotted red;
border-right: 1px solid green;
border-bottom: 3px dashed #9966CC;
border-left: 4px solid #FFCC00;
Что из этого может получиться можно увидеть здесь:
Увеличить Код дизайна
border-width
толщина рамки
толщина рамки, в px
border: 3px solid;
border-color
цвет рамки
код цвета или его название
border: 1px solid orange;
border-style
стиль рамки
стиль рамки
solid
dashed
dotted
double
border: 3px double;
при значении толщины меньше 3px может не срабатывать
border: 2px dashed;
border: 2px dotted;
Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Шрифты и текст font
font-family
семейство шрифтов или сами шрифты
семейства шрифтов или конкретный шрифт
Дизайн ЖЖ
font: 'Century Gothic';
Дизайн ЖЖ
font-family: "Times New Roman", Times, serif;
В этих двух примерах шрифт для наглядности увеличен.
font-size
размер шрифта
размер в пикселях или %
Дизайн ЖЖ
font-size:150%;
Дизайн ЖЖ
font-size:30px;
font-weight
жирный/нежирный
bold
normal
Дизайн ЖЖ
font-weight:bold;
font-style
курсив
italic
normal
Дизайн ЖЖ
font-style:italic;
text-decoration
подчеркивание, перечёркивание, мерцание
underline
line-through
overline
blink
none
Дизайн ЖЖ
text-decoration:underline;
Дизайн ЖЖ
text-decoration:line-throughe;
Дизайн ЖЖ
text-decoration:overline;
Дизайн ЖЖ
text-decoration:blink;
в ИЕ не работает, увы.. а вообще применяется для имитации электронных часов в датах постов: 12:30
Дизайн ЖЖ
text-decoration:none;
используется чтобы убрать подчеркивание у ссылок
применяется не к div'у, а к тегу а, которому принадлежит подчеркивание
text-align
выравнивание текста
justify
center
right
left
Если б мишки были пчёлами, то они бы нипочём бы
text-align: left;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: right;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: center;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: justify;
text-transform
трансформации: все заглавными, все строчными..
capitalize
uppercase
lowercase
none
Если б мишки были пчёлами, то они бы нипочём бы
text-transform:capitalize;
Если б мишки были пчёлами, то они бы нипочём бы
text-transform:uppercase;
Если б мишки были пчёлами, то они бы нипочём бы
text-transform:lowercase;
color
цвет текста
код цвета или его название
Каждый
color:#FF3300;
оболтус
color:#FF9933;
железно
color:#FFFF00;
знает
color:#66FF33;
где
color:#33CCFF;
стоит
color:#3366FF0;
фонтан
color:#660099;
Примечание для гуру и и шаманов вёрстки: Я описала стили, которыми пользуюсь более-менее часто и знаю в чём могут быть грабли. Если вам есть что добавить - велкам : )
Это ещё далеко не все стили, просто пост уже получился кошмарно длинным, а я задолбалась печатать : )
Продолжение следует! : )
Навигация по урокам
I. Общее представление о HEAD, WEBSITE и тд.
II. Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
III. 2-я часть таблицы (курсор, видимость, отступы, размеры, выравнивание, позиционирование)
IV. Применение Css к коду журнала. Понятие о P, Div, Span, Table, A, Img. Схема страницы для Genrator.
V. Эффекты перехода между страницами (IE). Что такое Favicon и как его сделать.
VI. Способы изготовления меню: замена надписей, меню справа или слева, сайдбар, ImageMap.
Это каскадные таблицы стиля для HTML-документа, а если проще - язык, на котором мы объясняем нашему дизайну каким же мы хотим его видеть.
Навигация по урокам
Удобнее всего со стилями работать с помощью программы TopStyleLite. Она платная, но можно просто найти в сети. Она особо удобна тем, кто неуверено владеет CSS или вообще имеет о них только общее представление. Код подсвечивается, его удобно читать. В выпадающей подсказке можно выбрать элемент CSS и его значение. Это избавит вас от ошибок при написании стилей.
Только для S1! Если у вас S2 - пропускайте этот блок!
Вставляются стили в блоки *_ HEAD (то есть во все, название которых оканчивается на HEAD) внуть тега style. Как правильно заметил товарищ degro, тегов style внутри HEAD может быть несколько, но лучше все стили вставить в один тег, потому что если вы забудете закрыть один из style'ов - это может стать причиной ошибки, которую можно будет дооолго искать : )
Таким образом блок *_ HEAD должен выглядеть так:
GLOBAL_HEAD<=
<=GLOBAL_HEAD
В основном я буду говорить о GLOBAL_HEAD, обычно я использую только его - удобно же когда весь журнал в одном стиле, да и юзер, пролистывающий страницы вашего журнала, всегда будет знать, что он у вас в гостях, а не попал магическим образом на какую-то постороннюю страницу : )
Но если вы хотите придать индивидуальность отдельным разделам вашего журнала, вам следует использовать для этого другие блоки. Про соответствие блоков HEAD страницам вашего журнала вы можете узнать тут
Удобнее всего прописать стили общие для всего журнала в GLOBAL_HEAD, а в LASTIN_HEAD, FRIENDS_HEAD и т.д. - стили только для этой страницы. Это убережет вас от глюков из-за того что один и тот же код вы в одном HEAD исправили, а другом забыли
ВНИМАНИЕ! каждый из блоков используемых в дизайне ЖЖ (*_HEAD, *_WEBSITE, и прочие) должен встречаться в коде 1 (ОДИН) раз, иначе ваш журнал автоматом выберет второй, а первый просто сотрёт.
Если вы хотите добавить какой-то новый код - добавляйте его в уже существующие блоки. Если же необходимого блока нет - его нужно вставить : )
Итак, перейдём непосредственно к стилям - к CSS.
Для того чтобы писать корректные и удобочитаемые стили, необходимо соблюдать несколько простых правил:
- Сначала описываются самые крупные элементы, например, body и просто общие, типа p, table, td, a:link, a:hover..., а затем уже более частные случаи, например: td.meta или table.entrybox. Это позволит более мелким (по значению) элементам унаследовать свойства более крупных, и вам не придётся прописывать их второй раз
- Также удобнее описывать элементы "сверху вниз" исходя из их расположения в документе, например, сначала описать стили для .shadowed и .meta, а потом приниматься за .entrybox и .comments. Так код гораздо удобнее читать и редактировать.
- Будьте внимательны к знакам препинания! Вот так выглядит правильный код:
body, td {
font-size:80%;
color:#303030;
font-family: verdana, sans-serif;}
- каждая строчка заканчивается ;
- весь код для одного элемента (или выбраной группы элементов, как в этом случае), заключен в { }
- до и после кода нет никаких знаков препинания, между последним элементом (здесь - td) и { нет никаких знаков препинания.
Если вы всё написали правильно, а ваш суперзамечательный код почему-то не работает - проверьте эти моменты.
- Если вы сами присваиваете элементам на странице классы - старайтесь, чтобы названия были говорящими, иначе придётся долго вспоминать что это вы так назвали : )
- Если у двух и более элементов совершенно одинаковые стили, можно перечислить элементы через запятую, и присвоить один и тот же стиль всем сразу. Наример:
td.index, td.caption, .comments {
padding:8px;
color:#B4B4B4;}
Теперь рассмотрим содержимое фигурных скобок исходя из того, что планируется получить в результате, то есть непосредственно стили и назначение каждого из них.
Действие стилей будет демонстрироваться на div'е 100х50 пикселей.
Его код:
Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Фоны страницы, постов, фоны в юзеринфо background-color • значение цвета типа #9ACD32
• его название - yellowgreen;
• полная прозрачность: transparent
background-color:yellowgreen; или background-color:#9ACD32;
Код для прозрачности:
background: transparent;
(образца видно не будет, так что не делаю :)
Код цвета можно получить в фотошопе и других графических редакторах.
В TopStyleLite есть своя таблица цветов.
Можно использовать код или название. Перед названием # не нужен. background-image адрес картинки в сети
background-image:url('http://yoka.by.ru/i/dises
/lessons/bg_ex100.gif');
Картинка должна быть в сети, и находиться на сайте который позволяет просматривать картинки находящиеся на нём через посторонний сайт (к примеру, narod.ru этого не позволяет, вместо картинки будет пустой квадратик или вообще ничего).
Внимательней отнеситесь к весу загружаемой картинки. Если она слишком тяжела, кто-то просто не дождётся её загрузки и не увидит фон вашего журнала.
К тому же тяжелые картинки кушают трафик, не все этому обрадуются. Имеет смысл делать картинку не более 100 kb, лучше меньше.
Уменьшить размер картинки и её вес можно в фотошопе и прочих графических редакторах.
Выбирая фон для журнала, помните что у всех разные мониторы. Довольно странно смотрится картинка из под которой торчит фоновый цвет.
Вообще у фонов может быть очень широкое применение, ведь фон можно сделать и у таблицы, и у строчки, и у ячейки, и у дивов.. Масса возможностей! Например, дизайн моего журнала, yoksel, сделан при активнейшем участии бэкграундов : )
Вид Журнала
Вид ленты друзей
конструкция довольно глючная, к сожалению..
Применение фонов имеет большое преимущество по сравнению с картинками: если обычные картинки не загружаются - вместо них возникают пустые квадратики, в случае же если не грузится фон - он ничем не заменяется ---> пустых картинко-квадратиков не будет.
Это вовсе не означает, что всё следует делать бэкграундами - делайте как вам удобнее : )
background-repeat
• repeat
повтор фона
• no-repeat
не повторяется
• repeat-x
повтор по горизонтали
• repeat-y
повтор по вертикали
background-repeat:repeat;
тоже самое будет если не указывать параметры повтора
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-attachment
fixed
картинка "прибита" и не прокручивается вместе со страницей.
background-attachment: fixed;
(продемонстрировать не получится :) background-position
• top
фон прибит к верхнему краю
• right
к правому
• bottom
к нижнему
• left
к левому
background-position: top;
background-position: right;
background-position: bottom;
background-position: left;
background-position: center;
background-position: 20% 70%;
Положение фона можно задать также в пикселях и % и т.д. Первое число считается отступом от левого края, 2-е - от верхнего, и так далее по часовой стрелке
Чтобы фон в примере не повторялся, я добавила background-repeat: no-repeat;
В случае если фон повторяется - он просто будет начинаться от заданного края. Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Рамки border
border-top
рамка сверху
border-right
рамка справа
border-bottom
рамка снизу
border-left
рамка слева
• указание толщины в px
• стиль
• код цвета или его название (необязательно)
border-top: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
светло-жёлтую заливку div'a я использовала, чтобы было понятно, что это рамки блока, а не абстрактные полоски висящие в воздухе : )
Для того, чтобы рамка вообще была видна, необходимо прописывать стиль рамки (border-style), обычно solid, или если полностью - border-style: solid;
1px необходимо писать слитно, 1 px не будет работать
К вопросу записи стилей:
Можно описывать рамки длинной записью:
border-width: 2px;
border-style: dotted;
border-color: #3366CC;
Результат будет выглядеть так:
а можно короче:
border: 2px dotted #3366CC;
и результат будет абсолютно тот же : )
Я бы рекомендовала пользоваться короткой записью, так код лучше читается и занимает меньше места.
Вообще коротко можно описывать можно многие элементы CSS, например, бэкграунды, но рамки удобнее всего.
Это может быть важно, если учесть насколько масштабным может быть вообще код дизайна : )
На этом примере видно, что стили рамок можно смешивать произвольным образом. Можно указать только одну или две рамки, а можно раскрасить все 4 в разные цвета : )
border-top: 2px dotted red;
border-right: 1px solid green;
border-bottom: 3px dashed #9966CC;
border-left: 4px solid #FFCC00;
Что из этого может получиться можно увидеть здесь:
Увеличить Код дизайна
border-width
толщина рамки
толщина рамки, в px
border: 3px solid;
border-color
цвет рамки
код цвета или его название
border: 1px solid orange;
border-style
стиль рамки
стиль рамки
solid
dashed
dotted
double
border: 3px double;
при значении толщины меньше 3px может не срабатывать
border: 2px dashed;
border: 2px dotted;
Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Шрифты и текст font
font-family
семейство шрифтов или сами шрифты
семейства шрифтов или конкретный шрифт
Дизайн ЖЖ
font: 'Century Gothic';
Дизайн ЖЖ
font-family: "Times New Roman", Times, serif;
В этих двух примерах шрифт для наглядности увеличен.
font-size
размер шрифта
размер в пикселях или %
Дизайн ЖЖ
font-size:150%;
Дизайн ЖЖ
font-size:30px;
font-weight
жирный/нежирный
bold
normal
Дизайн ЖЖ
font-weight:bold;
font-style
курсив
italic
normal
Дизайн ЖЖ
font-style:italic;
text-decoration
подчеркивание, перечёркивание, мерцание
underline
line-through
overline
blink
none
Дизайн ЖЖ
text-decoration:underline;
Дизайн ЖЖ
text-decoration:line-throughe;
Дизайн ЖЖ
text-decoration:overline;
Дизайн ЖЖ
text-decoration:blink;
в ИЕ не работает, увы.. а вообще применяется для имитации электронных часов в датах постов: 12:30
Дизайн ЖЖ
text-decoration:none;
используется чтобы убрать подчеркивание у ссылок
применяется не к div'у, а к тегу а, которому принадлежит подчеркивание
text-align
выравнивание текста
justify
center
right
left
Если б мишки были пчёлами, то они бы нипочём бы
text-align: left;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: right;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: center;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: justify;
text-transform
трансформации: все заглавными, все строчными..
capitalize
uppercase
lowercase
none
Если б мишки были пчёлами, то они бы нипочём бы
text-transform:capitalize;
Если б мишки были пчёлами, то они бы нипочём бы
text-transform:uppercase;
Если б мишки были пчёлами, то они бы нипочём бы
text-transform:lowercase;
color
цвет текста
код цвета или его название
Каждый
color:#FF3300;
оболтус
color:#FF9933;
железно
color:#FFFF00;
знает
color:#66FF33;
где
color:#33CCFF;
стоит
color:#3366FF0;
фонтан
color:#660099;
Примечание для гуру и и шаманов вёрстки: Я описала стили, которыми пользуюсь более-менее часто и знаю в чём могут быть грабли. Если вам есть что добавить - велкам : )
Это ещё далеко не все стили, просто пост уже получился кошмарно длинным, а я задолбалась печатать : )
Продолжение следует! : )
Навигация по урокам
I. Общее представление о HEAD, WEBSITE и тд.
II. Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
III. 2-я часть таблицы (курсор, видимость, отступы, размеры, выравнивание, позиционирование)
IV. Применение Css к коду журнала. Понятие о P, Div, Span, Table, A, Img. Схема страницы для Genrator.
V. Эффекты перехода между страницами (IE). Что такое Favicon и как его сделать.
VI. Способы изготовления меню: замена надписей, меню справа или слева, сайдбар, ImageMap.