12:50 

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

ArLe
Арлоло, админота,
администратор
и админотавр
Пишет La mignonne:

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


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

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

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

Разберем по частям:
а) 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 - это контейнер, в котором и располагается ваш дневник со всеми частями: меню, блок записей, экстратоп, экстработтом. Именно ему задается ширина вашего будущего дневника.
Для фиксированный шинины дизайна код таков:

Разберем по частям:
а) 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 и #side должны быть равны ширине #wrapper (т.е если #side у вас 200px, а #page-c в ширину 600, то #wrapper должен быть равен 200+600 = 800)

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

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

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

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

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

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


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


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

@темы: CSS

Комментарии
2010-10-01 в 13:06 

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

2010-10-01 в 13:23 

Made of Fail and JaAm
Большое спасибо за это полезный пост!

2010-10-01 в 14:02 

SoukhaKatatsura
[Кто бы что ни говорил - я всегда весь в белом!]
Большое спасибо! Как раз не знала, с чего начать.

2010-10-02 в 21:40 

Найти себя невозможно — себя можно только создать(С)
от меня тоже

2010-12-15 в 19:02 

Фиолетовая стрекоза
Я все смогу.
охренеть.....спасибище нереальное вам!!!
вот реально полезная тема:beg::beg::beg:

2011-04-28 в 21:25 

K o l i b r i
Никогда не говори: "Я ошибся", всегда говори: " Надо же как интересно получилось!"
Огромное спасибище! :red::red::red:

2011-08-03 в 10:18 

skrom_hime
"Всё будет, но не сразу"
Огромное спасибо))))

2012-10-29 в 12:51 

anri_alien
Больной ублюдок
спасибо!

2012-10-29 в 14:20 

Золотая Хатор
Чем больше я узнаю людей, тем больше люблю собак ©
Спасибо огромное за этот пост!

2012-10-29 в 15:12 

~Neu~
-Вот тест, чтоб понять, закончена ли твоя миссия на Земле: если ты жив -- то нет. (с) Р.Бах
Большое прибольшое спасибо вам! :heart::ura:

2012-10-29 в 21:37 

Strial
Тра-ля-ля-ля-ля-ля! А я сошла с ума! Какая досада...
Огроменное Спасибо! Очень полезный и доступно написанный пост! :five::vo:

2012-11-06 в 12:39 

Буз
d6ev6il6 --> Буз; "Бузинник - место, где растут Бузики"
Спасибо! Сегодня буду разбираться с экстратопом!)) После такого доступного разъяснения все просто обязано получиться))

2012-11-07 в 16:49 

Amaero
Спасибо_)

2012-11-19 в 00:38 

Stark Tony
Добрый день. Меня зовут Тони Старк. Я - алкоголик.
Большое спасибо! Пост очень полезный.)

2013-07-15 в 10:28 

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

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@Дневники: секреты, тонкости и хитрости

главная