SiteIS
HTML и CSS - революция в мире web-дизайна!
- управление отображением множества документов с помощью каскадных таблиц стилей
- Более точный контроль над внешним видом web-документов
- Различные представления для разных носителей информации
- Сложная и проработанная техника дизайна
Сайт визитка - пишем css правила
Прежде всего в директории synchronous/html/ создадим еще одну папку с именем css. Открываем Notepad++ (если он еще не открыт), в верхнем меню выбираем Файл/Новый, либо кликаем по пиктограмме, создающей новый документ.
Сохраняем этот документ в только что созданную папку css с иметем style.css (обязательно укажите расширение файла).
Открываем на редактирование файл index.html. В секции head под строкой с заголовком страницы <title>Главная</title> прописываем следующий код:
<link rel="stylesheet" href="/css/style.css" media="screen" />
С помощью этой строки мы подключили файл со стилевыми правилами к html странице. На данном этапе заслуживают внимания следующие атрибуты тэга link - href="/css/style.css", в котором прописывается путь к подключаемому файлу и media="screen", который сообщает, что данный файл используется для экранов мониторов. Атрибут rel="stylesheet" говорит браузеру о том, что подключаемый файл хранит стилевые правила (css).
Секция head теперь должна выглядеть так:
<head> <meta charset="utf-8" /> <title>Главная</title> <link rel="stylesheet" href="/css/style.css" media="screen" /> </head>
Каждый браузер применяет к странице стили по умолчанию. К сожалению они не одинаковы (например, отступы от краев экрана). Что бы не пришлось гадать, почему положение элемента в разных браузерах различается, рекомендуется все стили по умолчанию отключать. В интернете можно отыскать набор правил, выполняющий эту задачу. Одним из таких наборов и воспользуемся. В фалйе style.css прописываем следующий код:
/*start reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /*end reset*/
Обновим страницу в браузере и посмотрим, как она изменилась. Исчезли маркеры в меню, элементы прилегают к краям окна, а самое главное, что теперь такая картина наблюдается во всех браузерах. Теперь, если мы захотим, что бы какой нибудь блок отступал слева от экрана на какое то расстояние, то это расстояние будет одинаковым во всех браузерах.
Если вы заметили, то хейдер и футер сайта имеют фон, отличающийся от фона центральной части. Сделать такой фон без использования графики не получится, а значит потребуется предварительно подготовить такую картинку. Благо, узор несложный и нам не понадобится графический элемент большого размера. Достаточно будет вырезать фрагмент размером 100х100 пикселей и назначить его в качестве размножающегося фона для требуемых элементов.
Отркрываем PSD шаблон в Photoshop. Выделяем квадратную область с фоном (и только с фоном) в хейдере размером 100 px, копируем в буфер, вставляем в новый документ и сохраняем полученный фрагмент с именем fon_body.jpg в папку images.
Теперь можно заняться стилизацией блоков документа. Открываем для редактирования файл style.css и сразу же под строкой /*end reset*/ пишем следующее:
html, body {
height:100%;
}
body {
font:normal 12px/18px Arial, san-serif;
color:#616161;
background:#fff;
}
Мы прописали стили для текста, установили высоту основным элементам страницы и задали фоновый цвет для body. В принцыпе, белый цвет для body задан в боаузерах по умолчанию, но во избежание неожиданностей, лучше его задавать явно в таблице стилей.
Теперь займемся остальными блоками - прижмем футер к низу экрана, спозиционируем элементы хейдера по центру, зададим фон блокам header и footer с помощью графического фрагмента, подготовленного ранее. Для блока .content_wrap зададим нижний внутренний отступ на 20px больше, чем высота футера, что бы контент не залезал на него:
.wrapper {
min-height:100%;
position:relative;
}
/****************header************/
.header_wrap {
text-align:center;
background:url(../images/fon_body.jpg) repeat;
}
/****************end header************/
/****************content************/
.content_wrap {
padding-bottom:120px;
}
/****************end content************/
/****************footer************/
.footer_wrap {
margin-top:-100px;
height:100px;
position:relative;
background:url(../images/fon_body.jpg) repeat;
}
/****************end footer************/
Сохраним изменения, обновим страницу в браузере и видим, что она приобрела вид, похожий на задумку дизайнера. Займемся элементами в хейдере. Под правилами для блока .header_wrap пишем стили дла логотипа. Ссылку, обрамляющую картинку и текст (слоган) логотипа, делаем блочным элементом и устанавливаем для нее ширину, равную ширине картинки (321px), задаем цвет шрифта, убираем подчеркивание, начертание делаем капсом и размер шрифта присваиваем 14px. Картинке задаем внешний нижний отступ. Ссылку позиционируем по центру экрана:
/****************header************/ .header_wrap { text-align:center; background:url(../images/fon_body.jpg) repeat; } .header_wrap a.logo { margin:0 auto; padding-top:25px; width:321px; display:block; color:#616161; font-size:14px; text-transform:uppercase; text-decoration:none; } .header_wrap a.logo img { margin-bottom:12px; } /****************end header************/
Переходим к навигации. Элементам ul и li присваиваем свойство display:inline-block; - пункты списка выстроятся друг за другом и в то же время будут расположены по центру экрана. Для ul задаем фиксированную ширину, отступы, верхнюю и нижнюю рамки. Ссылкам в навигации задаем отступы, цвет шрифта, делаем их блочными и назначаем стили при наведении (hover) - углы фона скругляем с помощью css 3 правила border-radius:
/*top nav*/ .top_nav ul, .top_nav li { display:inline-block; vertical-align:top; *display:inline; *zoom:1; } .top_nav ul { margin:20px 0; padding:10px 0; width:966px; border-top:1px solid #dedede; border-bottom:1px solid #dedede; } .top_nav li a { padding:10px 20px; display:block; font-size:18px; color:#616161; text-transform:uppercase; text-decoration:none; } .top_nav li a:hover { color:#fff; background:#cec3a0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } /*end top nav*/ /****************end header************/
Теперь посмотрим, что у нас вышло в браузере - сохраняем изменения, обновляемся и радуемся - все элементы отображаются, как и было задумано в макете.
На всякий случай, по ссылке ниже можно скачать весь код, который мы рассмотрели до этого момента, а так же посмотреть на окончательный вариант того, что предстоит сделать:
Однако радоваться долго не получится - достаточно посмотреть на страницу в ИЕ 7 или 8. Словно и не писали мы никаких стилей. Проблема в новых тэгах, которые мы использовали из арсенала html 5. Ни восьмая, ни седьмая версии горяче любимого эти тэги не понимают. К сожалению, это не единственная неприятнось - при наведении на пункт меню у фона для ссылок навигации углы не скругляются и, если немного забежать вперед, то мы обнаружим в последствии, что в ИЕ 7 часть слогана отображается на одной строке с картинкой логотипа (сейчас этого не видно). Благо, все эти неприятности устранимы и в следующей статье мы рассмотрим, как побороть весь ворох этих проблем.