Итак, 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) по-своему и отдают под него ВСЮ видимую область экрана. А нам это не нужно. Вот мы и приспособили эдакую “коробочку” под нашу страничку.
Спасибо за статью.
У меня не сработало выравнивание контейнера по центру в ИЕ7. Должен ли этот код работать в ИЕ7.
Ответить
Rumple, должен. И не только в ИЕ любой версии. Если не сработал, нужно поискать ошибки в коде. Порой они сразу не заметны.
Ответить
Здравствуйте, опять я )
Пересмотрел код - ничего не получилось :(
#container {
width:760px;
margin:0 auto;
border:1px solid #999;
}
Полез гуглить вот, что нашёл:
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
6-й фикс, такой себе хак для ИЕ - всё работает.
Как же у вас работает?
Спасибо.
Ответить
Здравствуйте, Rumple. Сложно сказать в чем ошибка, видя лишь часть картины. Пришлите мне в мыло архив со страницей и файлом CSS, я посмотрю.
Ответить
В селекторе
body {
padding: 2% 0 0;
}
2% рассчитываются не от размера окна, а от длинны окна.
Смотрел в FF, IE и Opera
Ответить
Хорошо. А чем длинна - не размер? :)
Ответить
а чем размер не ширина или высота?
Ответить
Окей! Объясню еще раз: в данном цикле о блочной верстке информация подается последовательно. Ранее я уже объяснял местоположение цифровых значений, когда задается отступ или поле какого-либо блока. Значения даются по кругу, по часовой стрелке, начиная сверху. Следовательно, 2% - это в любом случае верхнее значение, которое откладывается от верхней границы экрана. Интерпретировать как-то иначе его просто не получится в силу данного правила.
Напротив, озвучивание слов: ширина, длина, высота, глубина и прочая у каждого человека вызывают различную интерпретацию. Для меня ширина монитора - это отрезок слева-направо. А для кого-то это, возможно, будет длина. Оттого, чтобы не возникало путаницы, я не использую данные слова.
Ответить
Для того, чтобы не было путаницы можно использовать словари.
Толковый словарь живого великорусского языка Владимира Даля:
“за длину пространства, тела или вещи обычно берется направление наибольшего протяжения его;”
т.о. отрезок с лева-направо по-русски это длина
Ответить
Iboboco, сам то пробовал повторить ситуацию с
body {
padding: 2% 0 0;
}
?
:)
Ответить
to helli - для меня, к примеру, длинны окна не существует (наверное из-за настоящих окон :) … никогда не слышал выражение “длинное окно”, а вот широкое окно не раз)… есть ширина и высота :) … поэтому Игорь и не применяет эти слова, что бы не путать людей (и как оказалось - прав ;)
На счет кода - код работает, но специально проверил :)… на широкоформатном мониторе более наглядно видно, что 2% (я в своем коде использовал 10% - для наглядности) берется от ширины :) … если нужно, то код могу написать…
Кстати… извиняюсь что я резко прошлый пост начал… было настроение не очень, а вообще я хороший ;)
to Игорь - потри плиз мой прошлый пост, какой то он негативный :(
Ответить
to Iboboco:
я так и подумал, что день не удачный был :)
тут в комментах обычно все позитивные :)
по поводу слов “длина” и “ширина”:
Тут я конечно не совсем прав, в том плане, что “ширина” более подходящий термин для вебмастера (от слова width), чем длина. Но это из-за моего ламерства в веб разработках. Ширина больше подходит, но длинна слово тоже правильное.
А вот “размер” - слово совсем не правильное, из-за не определенности к какой стороне его применять.
:)
Вот опять определение :
Толковый словарь русского языка Ушакова:
1. Размер - Величина чего-н. в одном измерении.
2. Количество, величина денежной суммы.
3. Относительная величина, масштаб (разг.)
и там еще 6 определений аналогичных:)
То есть размер это и длинны, и ширина, и высота, и еще что угодно, что можно измерить :)
А когда вам пишут “2% от размера окна”, ты, в соответствии с великим и могучим, предполагаешь, что считать нужно от… от ВЫСОТЫ окна (я спецом проводил опрос среди коллег - таких же нубов в вебдизайне как я). И тут оказывается, что на самом деле расчет браузеры ведут от ширины… Не логично.
Это конечно не ошибка Игоря, а всего лишь неожиданный эффект, с которым может столкнуться новичок типа меня, если его не предупредить.
Поэтому я и написал свой первый коммент, чтобы Игорь поправил.
простите за многабукав.
Ответить
Вот, а Игорю без вопросов - респект. Прочитал все до последнего урока.
Ответить
Ну, разобрались и ладушки! Уж теперь точно никто не промахнется с размером-длинной-шириной :)
Ответить
“Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Если этого специально не указывать, то например тот же IE напихает этого добра куда ни попадя, испортив нам всю кухню. Уж лучше мы в следующих правилах сами добавим что нужно и где нужно.”
А как же каскадность???
Ответить
И еще)))
поставил в контейнер border: 1px;
почему контейнер не получил границы???
Ответить
Тезка, во-первых, каскадность здесь упоминать не совсем корректно. Как я уже и говорил, звездочка - это не тэг и не селектор в чистом виде. Это своеобразный “сброс” всех возможных бордеров-отступов-полей, которые некоторые браузеры склонны добавлять некоторым же элементам. В последующем коде листа стилей вы уже самостоятельно добавляете нужные параметры выбранным элементам.
Во-вторых, border: 1px; также некорректная запись. Недостаточно указать только толщину, нужно добавить тип и цвет:
border: #ccc solid 1px;
Ответить
Ясно, спасибо но вот один вопрос, а почему границы получила только шапка я же указывал в контейнере?
Ответить
:) Этого я сказать не могу, так как не вижу код вашей страницы
Ответить
Здравствуйте уважаемый Игорь! Для начала хочу поблагодарить Вас за вашу особенную книгу по вёрстке - ОГРОМНОЕ ВАМ ЧЕЛОВЕЧЕСКОЕ СПАСИБО! Всё просто, доступно и понятно! Единственный вопрос — где можно взять картинки, который используются в книге? Сайт про поросят немного другой. Может у вас есть PSD файл или же я не заметил в книге ссылку на исходники… Заранее Спасибо!
Ответить
Спасибо, Артур, на добром слове! :)
Картинки можно взять прямо из примера http://www.dizweb.ru/pig/index.html Сохраните страницу целиком, получится файл+рисунки.
Ответить
Кстати, кстати, кстати, изначально-указанное свойство для бордера, а точнее ширина в ноль, для построения форм, не очень-то удобна. Так как не видны границы формы. приходится ставить фон для всей формы или убирать бордер в нижеуказанном столбце.
Или же все таки есть, что-то универсальное?
* {
margin: 0;
padding: 0;
border: 0;
}
Ответить
Приветствую, тезка! Да, есть такое дело: когда сбрасываем размеры бордера в 0, то граница у деталей форм также исчезает. Для этого достаточно к блоку с самой формой прописать парочку дополнительных правил в файле css. Вся продвинутая мировая веб-мастерская общественность так и поступает :)
Ответить
Спасибо Игорь, а какие именно правила нужно прописывать?
Поставил border: 1, рамка появилась вокруг всех полей формы, одна общая.
Ответить
Скорее всего она появилась у самой формы. Это если задать бордер для тэга form. А если прописать для input, то соответственно у каждого поля будет своя рамка. Для textarea также.
Ответить
То есть:
form input {
border: 1px;
}
form textarea {
border: 1px;
}
???
Ответить
Да, верно! Либо объединить оба-два (желательно указывать также цвет и фактуру линии):
form input, form textarea {
border: #ccc solid 1px;
}
Что то же самое.
Ответить
Благодарю)
Ответить
Добрый день. Спасибо за уроки. Хотелось отметить :
Ещё раз:
а) 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 - все четыре стороны одинаковые.
Ответить
Спасибо, Александра! Ассоциативный метод - это сила! :)
Ответить
Здравствуйте, Игорь. У меня проблема с центровкой “шапки”. Вот код из редактора:
#container {
width: 760px;
margin: 0 auto 0 auto;
}
#header {
background: url(header.gif) no-repeat;
width: 760px;
height: 158px;
}
Однако, если написать no-repeat centered; –все нормально.Но мне все-таки хотелось, чтобы работало и так, ведь у всех сработало:) Может я что не так написал?
Ответить
И еще вопрос: все-таки, каким образом div “header” понимает, что он должен распооложиться в “container”-е? Заранее благодарен Вам за ответ.
Ответить
Второй вопрос “догнал” :) Header находится “внутри” containera
Ответить
Для тех, кому интересно, по книге все сходится для шапки, если ширину странички поставить 600, а не 760, поскольку рисунок header имеет ширину 600 пикселей. Еще раз спасибо автору за книгу.
Ответить
у меня тут после введения всего кода который есть в примерах на страничке нет вообще ничего, а в заглавие почему то выводит так:
Летучие хряки.
и никаких рамок ничего нет, да и цвет не поменялся. вот код:
Летучие хряки
и вот цсс код:
BODY, TD
*{
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 2% 0 0;
background: #navy;
color: #000000;
font-family: “Comic Sans MS”, Verdana, Arial, Helvetica, sans-serif;
}
#container {
width: 760px;
margin: 0 auto;
}
A {
}
A:Hover {
}
не знаю, может я какой супер нуб… но подскажите если не трудно.
заранее спасибо)
Ответить
у меня почему то вообще ничего не выводит:((
а код написан так же как в примере. может кто что подскажет?
Ответить
jack, в комментах код не отображается, писать его сюда бесполезно. Если не найдете ошибку (а дело скорее всего именно в ошибке), то присылайте файлы на мыло. Посмотрю.
Ответить
Рано еще. Читайте следующий урок.
Ответить
спасибо я сам уже все исправил))
Ответить