yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

Categories:

Уроки по дизайну ЖЖ. Часть II.

Внимание: это уроки для устаревшей системы стилей S1, хотя, возможно, вы найдете в посте полезную информацию по CSS.
Перейти к актуальным урокам →

Что такое CSS?
Это каскадные таблицы стиля для HTML-документа, а если проще - язык, на котором мы объясняем нашему дизайну каким же мы хотим его видеть.

Удобнее всего со стилями работать с помощью программы TopStyleLite. Она платная, но можно просто найти в сети. Она особо удобна тем, кто неуверено владеет CSS или вообще имеет о них только общее представление. Код подсвечивается, его удобно читать. В выпадающей подсказке можно выбрать элемент CSS и его значение. Это избавит вас от ошибок при написании стилей.

Только для S1! Если у вас S2 - пропускайте этот блок!

Вставляются стили в блоки *_ HEAD (то есть во все, название которых оканчивается на HEAD) внуть тега style. Как правильно заметил товарищ degro, тегов style внутри HEAD может быть несколько, но лучше все стили вставить в один тег, потому что если вы забудете закрыть один из style'ов - это может стать причиной ошибки, которую можно будет дооолго искать : )

Таким образом блок *_ HEAD должен выглядеть так:

GLOBAL_HEAD<=
  <style type="text/css">
    здесь ваши стили
  </style>
<=GLOBAL_HEAD

В основном я буду говорить о GLOBAL_HEAD, обычно я использую только его - удобно же когда весь журнал в одном стиле, да и юзер, пролистывающий страницы вашего журнала, всегда будет знать, что он у вас в гостях, а не попал магическим образом на какую-то постороннюю страницу : )

Но если вы хотите придать индивидуальность отдельным разделам вашего журнала, вам следует использовать для этого другие блоки. Про соответствие блоков HEAD страницам вашего журнала вы можете узнать тут

Удобнее всего прописать стили общие для всего журнала в GLOBAL_HEAD, а в LASTIN_HEAD, FRIENDS_HEAD и т.д. - стили только для этой страницы. Это убережет вас от глюков из-за того что один и тот же код вы в одном HEAD исправили, а другом забыли

ВНИМАНИЕ! каждый из блоков используемых в дизайне ЖЖ (*_HEAD, *_WEBSITE, и прочие) должен встречаться в коде 1 (ОДИН) раз, иначе ваш журнал автоматом выберет второй, а первый просто сотрёт.

Если вы хотите добавить какой-то новый код - добавляйте его в уже существующие блоки. Если же необходимого блока нет - его нужно вставить : )



Итак, перейдём непосредственно к стилям - к CSS.

Для того чтобы писать корректные и удобочитаемые стили, необходимо соблюдать несколько простых правил:

  1. Сначала описываются самые крупные элементы, например, body и просто общие, типа p, table, td, a:link, a:hover..., а затем уже более частные случаи, например: td.meta или table.entrybox. Это позволит более мелким (по значению) элементам унаследовать свойства более крупных, и вам не придётся прописывать их второй раз

  2. Также удобнее описывать элементы "сверху вниз" исходя из их расположения в документе, например, сначала описать стили для .shadowed и .meta, а потом приниматься за .entrybox и .comments. Так код гораздо удобнее читать и редактировать.

  3. Будьте внимательны к знакам препинания! Вот так выглядит правильный код:

    body, td {
    font-size:80%;
    color:#303030;
    font-family: verdana, sans-serif;}

    - каждая строчка заканчивается ;
    - весь код для одного элемента (или выбраной группы элементов, как в этом случае), заключен в { }
    - до и после кода нет никаких знаков препинания, между последним элементом (здесь - td) и { нет никаких знаков препинания.

    Если вы всё написали правильно, а ваш суперзамечательный код почему-то не работает - проверьте эти моменты.

  4. Если вы сами присваиваете элементам на странице классы - старайтесь, чтобы названия были говорящими, иначе придётся долго вспоминать что это вы так назвали : )

  5. Если у двух и более элементов совершенно одинаковые стили, можно перечислить элементы через запятую, и присвоить один и тот же стиль всем сразу. Наример:

    td.index, td.caption, .comments {
    padding:8px;
    color:#B4B4B4;}

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

Действие стилей будет демонстрироваться на div'е 100х50 пикселей.
Его код:
<div style="width:100px; height:50px;border:1px solid #ccc;"></div>

Желаемый результат Элементы 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
к левому

• center
фон по центру

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;

 

Примечание для гуру и и шаманов вёрстки: Я описала стили, которыми пользуюсь более-менее часто и знаю в чём могут быть грабли. Если вам есть что добавить - велкам : )

Это ещё далеко не все стили, просто пост уже получился кошмарно длинным, а я задолбалась печатать : )
Продолжение следует! : )

Навигация по урокам
 II.  Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
Tags: useful: уроки по оформлению ЖЖ
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 36 comments