Блочная верстка | Урок 3 · Websovet | Полезные советы по созданию веб сайтов

Блочная верстка | Урок 3

Дата: 16.12.2007 | Автор: Игорь Квентор | Рубрика: Верстка |

Итак, CSS или иначе Каскадный Лист Стилей. Почему каскадный объясню позднее. Открываем новый документ в PSPad (Блокноте, WordPad-е и т.п.) и вписываем следующую строку:

/*© PIG.RU, 2007 | piggs@pig.ru */

На самом деле содержимое строки не так важно. Она у нас закомментирована слэшами со звёздочками /* */ (кстати, слэш на клавиатуре находится во второй снизу строке в английской раскладке, а не вверху справа в русской. Не перепутайте, это разные знаки!)
Строка комментария не читается браузерами. Она нужна только для служебной информации. Кодеры обычно вписывают туда свои пометки, дабы самому не запутаться в коде, когда его много. В самом верхнем комменте (как у нас) пишутся ссылки на сайт кодера или дизайнера, его мыло, авторские права и т.п. Мы ограничимся только копирайтом и мылом.

Ну а теперь непосредственно код!
В листе стилей код называют правилами. Каждое правило состоит из селектора (читай - атрибута) и объявления. Объявление, в свою очередь, состоит из свойства и значения.
Рассмотрим пример:

p {color: #000;}

Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь “р” — это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Слово color является Свойством объявления, а “решётка” с тремя нулями — Значением. В данном случае значение записано в виде шестнадцатиричного числа, обозначающего цвет. Всем, кто пользуется Фотошопом это должно быть известно. Почему всего три нуля, ведь в данном обозначении должно быть шесть цифр (или букв)? Когда пары знаков одинаковы 00 00 00, то допускается писать сокращённо - 000. Все браузеры это понимают правильно.

Правило можно писать как угодно — хоть в строку, как у нас, хоть в столбик — это роли не играет. Важно только не забывать две вещи:
1. После каждого Свойства необходимо ставить двоеточие.
2. После каждого Значения — точку с запятой.
Если пропустить хотя бы в одном месте эти знаки, то IE и Firefox будут глючить, а Opera, возможно, и покажет всё без ошибок.

Сначала зададим общие правила для страницы:

* {
margin: 0;
padding: 0;
border: 0;
}

body {
padding: 2% 0 0;
background: #fff;
color: #333;
font-family: “Comic Sans MS”, Verdana, Arial, Helvetica, sans-serif;
}

#container {
width: 760px;
margin: 0 auto;
}

Поясним:
1. В первом правиле звёздочка означает не что иное как всю страницу разом. Сама звёздочка — это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. В правиле мы указали последовательно:
Отступы - 0,
Поля - 0,
Рамка - 0.
Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Если этого специально не указывать, то например тот же IE напихает этого добра куда ни попадя, испортив нам всю кухню. Уж лучше мы в следующих правилах сами добавим что нужно и где нужно. Значения указываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать.

2. Следующим правилом мы задали для тела страницы следующие указания: поля - сверху 2%, с боков по нулям, снизу тоже ноль. Это значит, что наша страничка не будет лепиться к верхушке окна браузера, а отступит от него на 2% размера окна. Тут значения идут подряд без запятых и только после последнего ставится точка с запятой. Вообще у нас 4 стороны. И значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Но так как у нас по бокам одинаково, то и значений мы дали всего три.

Ещё раз:
а) 5px 10px 15px 20px; - сверху будет поле в 5 пикселов, справа 10, снизу 15, слева 20.
б) 5px 10px 15px; - сверху 5, с боков по 10, снизу 15.
в) 5px 10px; - сверху и снизу по 5, с боков по 10.
г) 5px; - со всех сторон по 5.
Думаю, принцип понятен.

Остальное несложно — фон белого цвета, цвет шрифта тёмно-серого (333), ниже перечислены в порядке предпочтения используемые семейства шрифтов. Тут есть одно замечание - если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки.

3. А вот в этом правиле уже что-то новенькое — появилось незнакомое слово container с решёткой. Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице. Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. Сие и означает, что при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы 760 пикселей.

Возникает вопрос: а почему бы у тэга body не указать такую же ширину страницы и авто-выравнивание? Дело в том, что браузеры читают данный тег (body) по-своему и отдают под него ВСЮ видимую область экрана. А нам это не нужно. Вот мы и приспособили эдакую “коробочку” под нашу страничку.

Вебсовет

1 2 3 4 5 6 7 8 9

Подпишитесь на RSS

Комментарии (30) на запись “Блочная верстка | Урок 3”

Rumple 02.02.2009 07:15

Спасибо за статью.
У меня не сработало выравнивание контейнера по центру в ИЕ7. Должен ли этот код работать в ИЕ7.
Игорь Квентор 02.02.2009 10:53

Rumple, должен. И не только в ИЕ любой версии. Если не сработал, нужно поискать ошибки в коде. Порой они сразу не заметны.
Rumple 03.02.2009 00:23

Здравствуйте, опять я )

Пересмотрел код - ничего не получилось :(
#container {
width:760px;
margin:0 auto;
border:1px solid #999;
}
Полез гуглить вот, что нашёл:
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
6-й фикс, такой себе хак для ИЕ - всё работает.
Как же у вас работает?
Спасибо.
Игорь Квентор 04.02.2009 14:15

Здравствуйте, Rumple. Сложно сказать в чем ошибка, видя лишь часть картины. Пришлите мне в мыло архив со страницей и файлом CSS, я посмотрю.
helli 27.03.2009 16:26

В селекторе

body {
padding: 2% 0 0;
}

2% рассчитываются не от размера окна, а от длинны окна.

Смотрел в FF, IE и Opera
Игорь Квентор 27.03.2009 20:22

Хорошо. А чем длинна - не размер? :)
helli 28.03.2009 12:59

а чем размер не ширина или высота?
Игорь Квентор 28.03.2009 19:27

Окей! Объясню еще раз: в данном цикле о блочной верстке информация подается последовательно. Ранее я уже объяснял местоположение цифровых значений, когда задается отступ или поле какого-либо блока. Значения даются по кругу, по часовой стрелке, начиная сверху. Следовательно, 2% - это в любом случае верхнее значение, которое откладывается от верхней границы экрана. Интерпретировать как-то иначе его просто не получится в силу данного правила.
Напротив, озвучивание слов: ширина, длина, высота, глубина и прочая у каждого человека вызывают различную интерпретацию. Для меня ширина монитора - это отрезок слева-направо. А для кого-то это, возможно, будет длина. Оттого, чтобы не возникало путаницы, я не использую данные слова.
helli 30.03.2009 09:17

Для того, чтобы не было путаницы можно использовать словари.

Толковый словарь живого великорусского языка Владимира Даля:

“за длину пространства, тела или вещи обычно берется направление наибольшего протяжения его;”

т.о. отрезок с лева-направо по-русски это длина
helli 31.03.2009 11:45

Iboboco, сам то пробовал повторить ситуацию с

body {
padding: 2% 0 0;
}

?

:)
Iboboco 31.03.2009 20:39

to helli - для меня, к примеру, длинны окна не существует (наверное из-за настоящих окон :) … никогда не слышал выражение “длинное окно”, а вот широкое окно не раз)… есть ширина и высота :) … поэтому Игорь и не применяет эти слова, что бы не путать людей (и как оказалось - прав ;)
На счет кода - код работает, но специально проверил :)… на широкоформатном мониторе более наглядно видно, что 2% (я в своем коде использовал 10% - для наглядности) берется от ширины :) … если нужно, то код могу написать…
Кстати… извиняюсь что я резко прошлый пост начал… было настроение не очень, а вообще я хороший ;)
to Игорь - потри плиз мой прошлый пост, какой то он негативный :(
helli 01.04.2009 10:33

to Iboboco:

я так и подумал, что день не удачный был :)

тут в комментах обычно все позитивные :)

по поводу слов “длина” и “ширина”:

Тут я конечно не совсем прав, в том плане, что “ширина” более подходящий термин для вебмастера (от слова width), чем длина. Но это из-за моего ламерства в веб разработках. Ширина больше подходит, но длинна слово тоже правильное.

А вот “размер” - слово совсем не правильное, из-за не определенности к какой стороне его применять.

:)
Вот опять определение :
Толковый словарь русского языка Ушакова:
1. Размер - Величина чего-н. в одном измерении.
2. Количество, величина денежной суммы.
3. Относительная величина, масштаб (разг.)
и там еще 6 определений аналогичных:)

То есть размер это и длинны, и ширина, и высота, и еще что угодно, что можно измерить :)

А когда вам пишут “2% от размера окна”, ты, в соответствии с великим и могучим, предполагаешь, что считать нужно от… от ВЫСОТЫ окна (я спецом проводил опрос среди коллег - таких же нубов в вебдизайне как я). И тут оказывается, что на самом деле расчет браузеры ведут от ширины… Не логично.

Это конечно не ошибка Игоря, а всего лишь неожиданный эффект, с которым может столкнуться новичок типа меня, если его не предупредить.

Поэтому я и написал свой первый коммент, чтобы Игорь поправил.

простите за многабукав.
helli 01.04.2009 10:36

Вот, а Игорю без вопросов - респект. Прочитал все до последнего урока.
Игорь Квентор 02.04.2009 15:30

Ну, разобрались и ладушки! Уж теперь точно никто не промахнется с размером-длинной-шириной :)
Игорь 20.08.2009 12:28

“Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Если этого специально не указывать, то например тот же IE напихает этого добра куда ни попадя, испортив нам всю кухню. Уж лучше мы в следующих правилах сами добавим что нужно и где нужно.”

А как же каскадность???
Игорь 20.08.2009 12:32

И еще)))

поставил в контейнер border: 1px;
почему контейнер не получил границы???
Игорь Квентор 21.08.2009 09:45

Тезка, во-первых, каскадность здесь упоминать не совсем корректно. Как я уже и говорил, звездочка - это не тэг и не селектор в чистом виде. Это своеобразный “сброс” всех возможных бордеров-отступов-полей, которые некоторые браузеры склонны добавлять некоторым же элементам. В последующем коде листа стилей вы уже самостоятельно добавляете нужные параметры выбранным элементам.
Во-вторых, border: 1px; также некорректная запись. Недостаточно указать только толщину, нужно добавить тип и цвет:
border: #ccc solid 1px;
Игорь 24.08.2009 12:43

Ясно, спасибо но вот один вопрос, а почему границы получила только шапка я же указывал в контейнере?
Игорь Квентор 25.08.2009 10:39

:) Этого я сказать не могу, так как не вижу код вашей страницы
Artur Musin 24.09.2009 16:48

Здравствуйте уважаемый Игорь! Для начала хочу поблагодарить Вас за вашу особенную книгу по вёрстке - ОГРОМНОЕ ВАМ ЧЕЛОВЕЧЕСКОЕ СПАСИБО! Всё просто, доступно и понятно! Единственный вопрос — где можно взять картинки, который используются в книге? Сайт про поросят немного другой. Может у вас есть PSD файл или же я не заметил в книге ссылку на исходники… Заранее Спасибо!
Игорь Квентор 25.09.2009 16:47

Спасибо, Артур, на добром слове! :)
Картинки можно взять прямо из примера http://www.dizweb.ru/pig/index.html Сохраните страницу целиком, получится файл+рисунки.
Игорь 13.10.2009 20:40

Кстати, кстати, кстати, изначально-указанное свойство для бордера, а точнее ширина в ноль, для построения форм, не очень-то удобна. Так как не видны границы формы. приходится ставить фон для всей формы или убирать бордер в нижеуказанном столбце.
Или же все таки есть, что-то универсальное?
* {
margin: 0;
padding: 0;
border: 0;
}
Игорь Квентор 14.10.2009 18:18

Приветствую, тезка! Да, есть такое дело: когда сбрасываем размеры бордера в 0, то граница у деталей форм также исчезает. Для этого достаточно к блоку с самой формой прописать парочку дополнительных правил в файле css. Вся продвинутая мировая веб-мастерская общественность так и поступает :)
Игорь 20.10.2009 10:45

Спасибо Игорь, а какие именно правила нужно прописывать?
Поставил border: 1, рамка появилась вокруг всех полей формы, одна общая.
Игорь Квентор 20.10.2009 11:29

Скорее всего она появилась у самой формы. Это если задать бордер для тэга form. А если прописать для input, то соответственно у каждого поля будет своя рамка. Для textarea также.
Игорь 20.10.2009 12:24

То есть:
form input {
border: 1px;
}
form textarea {
border: 1px;
}
???
Игорь Квентор 20.10.2009 14:55

Да, верно! Либо объединить оба-два (желательно указывать также цвет и фактуру линии):

form input, form textarea {
border: #ccc solid 1px;
}

Что то же самое.
Игорь 20.10.2009 14:57

Благодарю)
Александра 09.02.2010 20:55

Добрый день. Спасибо за уроки. Хотелось отметить :

Ещё раз:
а) 5px 10px 15px 20px; - сверху будет поле в 5 пикселов, справа 10, снизу 15, слева 20.
б) 5px 10px 15px; - сверху 5, с боков по 10, снизу 15.
в) 5px 10px; - сверху и снизу по 5, с боков по 10.
г) 5px; - со всех сторон по 5.
Думаю, принцип понятен.

Было бы еще понятнее, если бы вы использовали ассоциативное правило TRouBLe или TopRight_ou_BottomLeft
Или по-другому, Верх, право, низ, лево.
4 значения указано - они идут именно в таком порядке.
3 значения - Верх, право, низ /лево такое же как право/
2 значения - вверх и низ одинаковые, лево и право одинаковые.
1 - все четыре стороны одинаковые.
Игорь Квентор 10.02.2010 17:01

Спасибо, Александра! Ассоциативный метод - это сила! :)