Урок 5. Блочная верстка сайта: css файл.

верстка-сайта-css

Вот и подходим к финалу наших уроков по блочной верстке сайтов. Сегодня 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/у УтБ

На десерт сегодня еще фото и картинки любимого браузера ;)

девушка firefox

firefox_girl_девушка forefox

firefox-girl девушка firefox ff

Также можете почитать Если бы девушки были браузерами :)



Комментарии к статье

  • #

    незабываем для
    .header:after {
    content: ”;
    clear: both;
    display: block;
    visibility: hidden;
    }

    иначе меню вверху не будет работать

  • #

    В начале статьи, ошибка в слове “раДоваться”. :o

    • #

      спасибо, поправил :)

  • #

    Когда пробисую
    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 фреймворки интересный момент, почти не использую, так как не приходится по работе))
      а лично мое мнение то, такие фреймворки полезны, все зависит от вашей цели.хотелось бы с ними работать больше, но …