Вот и подходим к финалу наших уроков по блочной верстке сайтов. Сегодня 11.11.11 г., время публикации статьи 11:11, думаю это счастливый знак для закрытия основных, базовых уроков по верстке 
. Мы прошли небольшой курс, и осталось совсем немного. Сегодня мы напишем css файл для сайта, подключим его и будем радоваться полученному результату ;).Подключаем css файл до закрытия тега <head>:
<link rel="stylesheet" href="css/style.css" type="text/css" >
href=”css/style.css” – ссылка на css файл, может быть как относительный так и абсолютный url. Например, <link rel=”stylesheet” href=”http://gtalk.kz/css/style.css” type=”text/css” >, поэтому css файл можно подключать и с другого места.
Комментирование в css файле
В html коде я писал для вас комменты с помощью <!– это комментарий –> . В ccs также я буду объяснять многое через комментарии. Комментарии пишутся с помощью данной конструкции: /* это комментарий */ . (зеленым цветом написаны комментарии)
Советую разделять комментариями основные блоки стилей. Например, типографию, стиль шапки,стиль контента и т. д. Вы скоро сами поймете, что это очень удобно, в первую очередь для себя. Обычно в начале файла пишут автора и его mail либо сайт в комментариях:
/*
* автор: УтБ
* сайт: http://gtalk.kz
*/
Можете добавить это в самое начало css файла. Можете еще написать немного о себе 
Пишем сss файл
ок, все запомнили?! Перейдем к написанию.
Запомните id в css определяют как #id, class как .class (точка)
Для начала сделаем сброс ccs стилей всех элементов. Делается это несколькими способами. Мы пишем так:
/* css файл
#author: УтБ
#site: http://gtalk.kz
* ! читайте http://htmlbook.ru/css/ значения свойств.
*/
/*********** глобальные настройки *************/
* { /* reset - сброс */
margin: 0; /* удаляем отступы внешние*/
padding: 0; /* удаляем отступы внутренние*/
border:0 none; /* удаляем рамки*/
}
Сброс необходим, чтобы стили не перебивали друг друга. По умолчанию у них не будет отступа внешнего и внутреннего и рамок. Чтоб вы знали, сброс еще делают подключением соответствующего файла с yahoo, либо отдельным файлом, в основном, resert.css
Добавляем глобальные свойства. Применимы ко всему сайту. Если не заданы локальные свойства, то применяются глобальные свойства.
Body – задаем стиль для тела сайта:
body { /* задаем стиль телу */
font: 12px/18px Arial, Tahoma, Verdana, sans-serif; /* стиль шрифта-универсальный: размер/межстрочное расстояние и
Стиль семейства по приоритетности - обязательные свойства*/
width: 100%; /* ширина тела - на всю ширину*/
height: 100%;/* высота тела - на всю высоту*/
background:#fff; /*фон белый - можно и не писать, но лучше перестраховаться*/
}
Теперь стиль для абзаца, ссылок:
p { /*стиль абзаца*/
color:#b8b8b8; /* цвет текста в абзацах*/
margin: 0 0 10px 0; /*внешний отступ: сверху справа снизу слева (по часовой стелке,обычно задается только снизу)*/
line-height: 2em; /* межстрочный интервал */
font-size: 15px ;/* размер шрифта */
}
a { /* ссылки */
color:#8c6641;
font-weight: bold; /* жирность букв: полужирный */
text-decoration: none; /* подчеркивание: нет */
outline: none; /*точечная рамка вокруг ссылок при нажатии: нет*/
}
a:hover {/* ссылки при наведении курсором */
color: black;
}
По сути можно задать стиль и многим другим основным элементам: спискам, кнопкам и т . д. Но я обычно пишу отдельный блок в файле как типография, либо подключаю файл typografy.css . Думаю, это тема для отдельного поста, пока нам надо понять суть
Теперь давайте объяснимся зачем нам нужна была оболочка warp. Добавим ей стиль:
#wrap { /* оболочка сайта, куда мы все помещаем */
margin: 20px auto; /* внешний отступ: сверху/снизу справа/слева; auto устанавливает блок по центру*/
background: url("../images/bg.jpg") repeat-x #fff; /*Фон: ссылка на картинку повторение по горизонтали цвет белый(т.к. картинка у нас не везде, где ее нет - белый цвет)*/
width: 947px; /* ширина оболочки (сайта)*/
position: relative;/* позиция: относительно исходного места */
min-height: 100%; /*мнимальная высота: на высоту экрана (в ie 6 не работает)*/
border: 8px solid #ccc; /*рамка: ширина в пикселях сплошная(solid) #цвет*/
/* не проходят валидацию в ccs 2, закругления с помощью css 3. Тема для отдельного поста ;)*/
border-radius: 7px; /* закругления - общее*/
-webkit-border-radius: 7px; /*для Chrome и Safari */
-moz-border-radius: 7px;/*для ff */
-khtml-border-radius:7px; /*для Konqueror*/
}
В нашу оболочку мы центрировали, добавили фон для сайта и т. д. Для сложных фонов можно делать несколько логических вложений таких оболочек.
Дальше все просто, читайте комментарии либо задавайте вопросы в комментариях;) В общем не сложно если подучить каскадные таблицы стилей.
Стиль для шапки сайта:
/*********** шапка сайта *************/
div#header { /* шапка сайта*/
width:100%;
height: 200px;
}
div#header a.logo { /* логотип можно записать просто как .logo*/
background: url("../images/logo.png") no-repeat;
height: 37px;
float: left; /*обтекание: слева*/
width:310px;
margin: 30px;
}
ul.menu { /* маркированный список - меню в шапке */
list-style: none; /*стиль для списка: нет (убираем квадратики, круглики)*/
padding: 20px 30px 0 0;/*внутренний отступ: сверху справа снизу слева*/
float: right; /*обтекание: справа*/
}
ul.menu li { /*элемент маркированного списка*/
float: left;
width:auto;
}
ul.menu li a {/* ссылки маркированного списка */
padding: 10px 20px;
text-decoration: none;
color:#b8b8b8;
font-weight: normal;
font-size: 14px;
}
ul.menu li a:hover { /*псевдокласс hover - при на ведении курсора на ссылку ненумерованного списка*/
color:#8a6540;
}
.text {/* блок с текстом в шапке */
float: left;
width: auto;
border-top:1px #eee solid;/* рамка сверху */
border-bottom:1px #eee solid;/* рамка снизу */
padding: 20px 0px;
margin: 0px 30px;
}
Стиль для центральной части сайта:
div#middle {/* центарльный блок*/
width: 100%;
padding: 0 0 85px;
position: relative;
}
#middle:after {/*отступ для центрального блока - уберите его и помотрите результат, думаю станет ясно для чего он нужен*/
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
div#content {/* центральный блок с текстом*/
float: left;
padding: 20px 0 10px 10px;
width: 634px;/*зададим ширину чтоб не скакало ничего*/
}
.block {/* блок с картинкой и текстом*/
float:left; /*обтекание слева*/
margin-left: 15px;
width: 300px;/* ширина в 300px чтоб вместилось 2 блока*/
}
.block img {/* стиль для картинке в блоке */
border: 1px solid #ccc;
padding: 5px;
margin-left: 5px;
}
.block h2 { /* свой стиль заголовка, перекрывает глобальные настройки*/
color:#939393;
font-size:16px;
padding: 5px;
}
button, .button { /* стиль для зеленых кнопок*/
float:right;
width:96px;
height: 26px;
padding-top: 6px; /* стиль для зеленых кнопок*/
text-align: center; /* выравнивание текста: по центру*/
color:#fff;
margin-right: 10px;
background:url("../images/button.png") no-repeat;
}
Стиль для sidebar:
/******* sidebar *******/
div#sidebar {/* стиль для сайдбара */
float: right;
padding: 20px 10px 10px 0;
width: 290px;
color:#939393;
}
.twitter {/* блок для твиттов */
background:url("../images/twitter.png") no-repeat ;
height:150px;
width:257px;
}
.twitter p { /* текст твиттов*/
width:225px; /*ширина фиксированная чтобы текст не выходил за рамки*/
padding: 10px;
font-size: 12px;
}
.twitter span {
padding: 5px;
float: right;
width:100%;
text-align: right;
}
ul.navigation {/* меню сайдбара - маркивованный список*/
list-style:none;
padding:5px;
}
div#sidebar h3 {/* стиль для заголовка h3*/
color:#404040;
font-weight: normal;
padding: 10px 5px;
}
ul.navigation li {
width:257px; height:30px;
margin-bottom: -1px;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
}
ul.navigation li:hover {/* меняем цвет элемента маркированного списка при на ведении курсора*/
background: #f9f9f9;
}
ul.navigation li a {
text-decoration: none;
padding: 0px 10px;
color:#939393;
font-size:12px;
font-weight: normal;
}
ul.navigation li a:hover {/* меняем цвет фона ссылки маркированного списка при на ведении курсора*/
background: #f9f9f9;
}
.contacts {/* блок контактов */
padding: 5px;
}
.contacts p {
line-height:1.5em;
}
Стиль для футера:
div#footer {/* подвал сайта */
border-top: 1px solid #CCCCCC;
position: absolute; /*позиция блока: абсолютная*/
bottom: 0; /*прижимаем footer к нижней части браузера*/
height: 85px;
margin: 0 30px;
width: 875px;
}
p.copyright {/* текст копирайта */
float: left;
width:50%;
padding-top: 25px;
font-size: 12px;
}
.fb, .tw {/* блоки для иконок */
float:right;
width:200px;
padding-top: 10px;
}
.fb img, .tw img {
float:left;
width:40px;
padding-right: 5px;
}
.fb p, .tw p {
padding-top: 10px;
}
Поздравляю!У вас все получилось! Можете взглянуть на конечный результат.
Демо верстка
Уважаемые пользователи! надеюсь Вам понравились мои уроки
c/у УтБ
На десерт сегодня еще фото и картинки любимого браузера
Также можете почитать Если бы девушки были браузерами
незабываем для
.header:after {
content: ”;
clear: both;
display: block;
visibility: hidden;
}
иначе меню вверху не будет работать
В начале статьи, ошибка в слове “раДоваться”.
спасибо, поправил
Когда пробисую
div#middle {/* центарльный блок*/
width: 100%;
padding: 0 0 85px;
position: relative;
}
свойство
position: relative;
замораживает всю страницу
что делать?
что значит “замораживает всю страницу” ?
Нашел! В общем у вас там иногда перепутаны классы с ид. В хтмл написано класс, а в стиле ид (#) или наоборот из за этого столько косяков!
:)спс я гляну
Футер должен быть прижат к полу, но он почему то сразу после контента идет выше сайдбара. В свойствах у него стоит боттом 0. НЕ могу понять что там не так.
Сейчас вот опять косяк – почему то сайдбар у меня находится не справа, а справа внизу и картинки в контенте идут не 2 вверху две внизу, а 3 подряд и одна внизу справа. То есть они заехали на сайдбар и не могу найти ошибку что то. Буду искать.
С помощью файрбага я нашел в вашем коде в CSS вот эту строчку (#header h1 {
visibility: hidden;) она означает, что все надписи H1 в хидере будут скрыты, а у вас это не написано в тексте
А лучше скачать уже готовый конечный шаблон, и сравнивать со своим
Да я ставил шаблон, но хотел там цвет сменить не получалось и запутался. Мне посоветовали свой создать так как в своем коде легче разбираться. И нужен был пример создания во ту Вас как раз такой вариант.
У меня почему то надпись “Моя Первая верстка” (div#header a.logo) никуда не исчезла. Не могу найти что не так сделал??? Или дело в прозрачности картинки??? Которую замостили по горизонтали она закрывает текст у Вас, а у меня не закрывает почему то.
Зеленые кнопки и соцсети в футере меняются местами(первый элемент отображается справа, а второй слева). Как это можно исправить?
скорее всего дело в свойстве
floatизмените его
Разве не лучше использовать не точно заданную ширину текста, а текст в 100% и прочее, чтобы можно в браузере было машстабировать его плохо видящим людям? Например, так оформлено в яндексе, если я не путаю.
Как вы узнали, какие везде нужны отступы, какой размер текста и цвет? Совсем не понятно, а ведь это очень важно. Вот я смотрю на картинку в фотошопе и даже не представляю, как узнать какого размера должен быть блок, какого отступ…
Хорошие вопросы.Учту их. Спасибо.
может я не совсем поняла вопрос, но ведь для этого в фотошопе есть линейка и пипетка…
не подскажете как убрать нижний белый фон? я поменял бекфон на свою картинку а снизу громадный белый отступ не исчез((
l2arts.ru спасибо заранее за ответ
он и не исчезнет
картинка не повторяется по вертикали, поэтому ее нет в нижней части сайта. добавьте repeat-y к background 
Поставил fixed top center no-repeat
Ибо мне нужно чтобы картинка была всегда статична по центру и никуда не девалась….только контент перемещался… но белый фон снизу сантиметров в 10 не знаю как убрать((
#zt-mainframe {background: url("../images/bg-main.png") no-repeat scroll center top transparent;
min-height: 1400px;
}
.zt-wrapper {
margin: -200px auto 0;
width: 960px;
}
так норм?
{jntkjcm бы 6 урока и ссылочку тут на него! есть много неясного-вот зайдите на мой сайт-так при изменении масштаба всё разхожится и съезжает.
обязательно продолжение будет, подписывайтесь
А как сделать выравнивание по центру всего блога? Вот на сайте вконтакте при разрешении 800×600 – на целый экран, а 1024×768 – не на целый, но справа и слева одинаковые отступы. Если задаю для body,html text-align:center или для div – то текст по центру, но все блоки всё-равно слева. а нужно сами блоки отцентровать.
читайте внимательно: выравнивание по центру сайта wrap {margin:0 auto;}, т.е. отступы справа и слева одинаковые;) советую добавить оболочку, например wrap.
text-aling:center выравнивает текст по центру.
UPD: посмотрел Ваш сайт понял в чем дело))
<body id=top>
<div class=”wrap” >
бла бла бла
</div >
</body>
css: .wrap {width:920px;min-width:760px;margin:0 auto;padding:0;}
и можете убрать в шапке и в других местах ширину
Вроде разобралась, тем более, что этот язык очень на С++ похож, а его я знаю неплохо. Спасибо за урок. Жду следующего.
по сути урока 6го не будет:) но логические продолжения обязательно: поговорим о кроссбраузерности, хаках и т. д.;)
Спасибо за уроки. Они мне помогли разобраться в некоторых моментах. И меня к Вам вопрос, вы используете css фреймворки, например blueprint? Хотелось бы услышать ваше мнение. Спасибо.
css фреймворки интересный момент, почти не использую, так как не приходится по работе))
а лично мое мнение то, такие фреймворки полезны, все зависит от вашей цели.хотелось бы с ними работать больше, но …