CSS: C чего начать?

[ArLe]

Пишет  La mignonne:

С чего начать?

С чего начать дизайн css?

Вопрос, который мучает многих ( а они в свою очередь - меня ) - с чего начать делать дизайн css.
Пакет оплатили, дизайн нарисовали (ну или еще нет)), сели изучать и утонули в море кодов.
Так вот, расскажу с чего начинаю я - кодов немного, поймете быстро.))

Поехали

Итак, поехали:

Заглянем в структуру страницы нашего дневника. Тыкнем в эту кнопочку

1. BODY — это вся страница. Для нее обычно задают фон.
Код таков:

body{background:url('АДРЕС КАРТИНКИ') repeat; background-position: 50% 0; background-attachment:fixed; padding:0px;}

Разберем по частям:
а) background: url('АДРЕС КАРТИНКИ')
Здесь вам нужно только вставить ссылку на картинку, которая у вас будет на фоне. Куда вставлять? туда, где написано "адрес картинки". Как вставлять? читаем и смотрим картинку тут
б) repeat
Это часть означает, будет ли повторяться ваша картинка, растягиваться на весь фон или нет.
repeat - картинка будет дублироваться и вправо и влево (по горизонтали и вертикали) на всю ширину фона
no-repeat - фоновое изображение без его повторений
repeat-x - фоновый рисунок повторяется только по горизонтали
repeat-y - фоновый рисунок повторяется только по вертикали
в) background-position: 50% 0;
Это задает положение вашей картинки на странице - справа, слева, по центру и тд.
Варианты (в каждой строчке по 3 кода через знак "=", это значит, что они одинаковы, вставлять нужно любой, а не всю строчку! В скобках положение):
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
г) background-attachment:fixed;
Этот код значит, что ваш фон завиксирован и двигаться не будет при прокрутке странице.
Если вы не хотите фиксированный фон - просто удалите эту часть.
д) padding:0px
padding устанавливает значение полей вокруг содержимого элемента. 0 означает отсутствие отступов.

Генератов кода для фоновой картинки - жми

2. #WRAPPER - это контейнер, в котором и располагается ваш дневник со всеми частями: меню, блок записей, экстратоп, экстработтом. Именно ему задается ширина вашего будущего дневника.
Для фиксированный шинины дизайна код таков:

#wrapper{min-width:ЧИСЛОpx !important; width:ЧИСЛОpx; margin:0 auto !important; padding:0 !important;}

Разберем по частям:
а) min-width:ЧИСЛОpx !important;
Устанавливает минимальную ширину элемента. Если окно браузера достигаетзаданной минимальной ширины элемента, то его ширина остается неизменнойи появляется горизонтальная полоса прокрутки.
ЧИСЛО нужно заменить на ту ширину, которую вы ставите для своего дневника. Обычно это значение и сделующее в коде равны, не стоит изобретать велосипед.
б) width:ЧИСЛОpx;
Устанавливает ширину поля для вашего дневника - узкий, широкий - любой, на ваш вкус.
Только имейте в виду, что у многих разрешение экрана 1024 в ширину, поэтому советую ставить не больше 980px.
в) margin:0 auto !important; padding:0 !important;
margin устанавливает величину отступа от каждого края элемента, padding устанавливает значение полей вокруг содержимого элемента. Оставляйте эту часть без измений.

3. #SIDE и #PAGE-C
#side - меню в вашем дневнике
#page-c - непосредственно та часть, на которой располагаются ваши записи.
Указывая ширину #wrapper, эти значения по ширине задаются по умолчанию. Но их можно изменить по вашему желанию.
Коды:

#page-c{width: ЧИСЛОpx !important;padding:0 !important;padding:0 !important;}
#side{width: ЧИСЛОpx !important;padding:0 !important;padding:0 !important;}

Вместо слово "число" вставляете нужную вам ширину. Только помните, что в сумме #page-c и #side должны быть равны ширине #wrapper (т.е если #side у вас 200px, а #page-c в ширину 600, то #wrapper должен быть равен 200+600 = 800)

Вот здесь находится автоматический генератор ширины основных блоков.

4. #EXTRATOP
Это та самая картинка вверху дненника - "шапка".
Код для нее:

#extratop { background: url('ССЫЛКА НА КАРТИНКУ') no-repeat; width: ЧИСЛОpx; height: ЧИСЛОpx; margin-top:0px !important;}

По частям:
а) background: url('ССЫЛКА НА КАРТИНКУ'b)
См. выше
б) no-repeat
См. выше
в) width: ЧИСЛОpx;
Это ширина картинки, которую вы вставляете. Это не произвольное значение, нужно писать именно то число, которое указано в свойствах картинки.
г) height: ЧИСЛОpx;
Высота картинки. Аналогично ширине.
д) margin-top:0px !important;
Этот код нужен, чтобы убрать расстояние между картинкой и верхом страницы. Ее можно регулировать в сторону отрицательного значения (т.е вместо 0px может быть -10px), пока отступ не уберется.

5. #EXTRABOTTOM
Это нижняя картинка, в самом низу дневника. Как extratop, только внизу
Код дня нее:

#extrabottom { background: url('ССЫЛКА НА КАРТИНКУ') no-repeat; width: ЧИСЛОpx; height: ЧИСЛОpx; margin-top:0px !important;}

Расшифровка аналогична пункту 4.

Генератор кодов для экстраблоков - здесь

Вот собственно и все - основа вашего дизайна готова.
Можете еще посмотреть тут шаблоны стандартных дизайнов с расшифровкой кодов.
А далее - дело вашей фантазии и практики. Кодов для украшения много

запись создана: 01.10.2010 в 12:45

@темы: CSS

Comments

[tuksa]

Вот это респектище вам! Вот умничка (и труженик, все расписать от и до...) Спасибо от лица всех страждущих :-) (мне лично пригодится).

[Azyo-Mecha]

Большое спасибо за это полезный пост!

[SoukhaKatatsura]

Большое спасибо! Как раз не знала, с чего начать.

[Та которая не твоя]

от меня тоже

[Фиолетовая стрекоза]

охренеть.....спасибище нереальное вам!!!
вот реально полезная тема

[K o l i b r i]

Огромное спасибище!

Большое спасибо!!!!

Огромное спасибо))))

[anri_alien]

спасибо!

[Золотая Хатор]

Спасибо огромное за этот пост!

[~Neu~]

Большое прибольшое спасибо вам!

[Strial]

Огроменное Спасибо! Очень полезный и доступно написанный пост!

[Буз]

Спасибо! Сегодня буду разбираться с экстратопом!)) После такого доступного разъяснения все просто обязано получиться))

[Amaero]

Спасибо_)

[Stark Tony]

Большое спасибо! Пост очень полезный.)

[Chapt]

А ведь с помощью CSS можно оформлять не только дизайн самого дневника, но и дизайн записей и комментариев! Например этот комментарий оформлен так:

<div style="z-indеx: 1000; background-image: repeating-linear-gradient(45deg,rgba(255,0,255,0.2),rgba(255,125,255,0.1) 200px, rgba(255,0,255,0.2) 400px); text-shadow: 2px 2px 2px #000000; color: #FFF; border-radius: 20px; padding: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.25); border: solid 1px rgba(0,255,255,0.2)"><div style="z-indеx: 1000; background: rgba(0,0,0,0.5); text-shadow: 2px 2px 2px #000000; color: #FFF; border-radius: 10px; padding: 10px; box-shadow: 5px 5px 5px rgba(125,125,125,0.5); border: solid 1px rgba(0,155,155,0.2)"> текст комментария </div></div>