Создаем простой сайт. Часть 3. Оформление с использованием CSS

Категория: 

В последней части урока по созданию html страницы рассмотрим использование каскадных таблиц стилей - Cascading Style Sheets, сокращенно CSS. Главным назначением css является отделение внешнего оформления страницы от ее структуры, поэтому css подключается отдельным файлом, а в основном файле, определяющем структуру (в нашем случае это файл index.html), остаются лишь html-теги, отвечающие за разметку страницы. 

Создадим в папке Test новый файл под названием style.css. Сначала необходимо подключить css файл в нашем основном файле index.html. После указания ссылки на файл стилей, html-файл уже сможет брать стили оформления из него. Подключение css-файлов происходит в разделе <head></head>. В первом уроке уже упоминалось, что этот раздел невидимый, и необходим для подключения стилей, скриптов, а также указания заголовка страницы, мета-тегов и прочих элементов страницы. Просто напишите между тегами <head> следующую строку:

<link rel="stylesheet" href="style.css">

Раздел <head> теперь будет выглядеть так:

<link rel="stylesheet" href="style.css">
<title>Заголовок страницы</title>
</head>

Такой путь будет работать только если файл стилей лежит в папке вместе с файлом index.html, если же он лежит в другой папке, то в ссылке надо будет указать полный путь к нему.

Итак, css подключен, теперь перенесем уже имеющиеся стили в файл style.css. Index.html будет снова выглядеть практически как во второй части урока, за исключением одной строчки, которая подключает css. 

Содержимое файла index.html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Заголовок страницы</title>
</head>
<body>
<div id='header'>
<a href="http://ссылка на сайт.ru"><img src="bird.png" alt="header"/>Шапка сайта. Добро пожаловать на мой сайт</a>
    </div>
<div id='content'>
    <p>Контент. Здесь может быть абсолютно любая информация.</p>
</div>
<div id='footer'>
Футер. Подвал. Нижняя часть сайта
</div>
</body>
</html>

Содержимое файла style.css. Как видим, все стили теперь объявляются в нем:

body {
    margin: 0;
    padding: 0;
}

#header {
height: 200px;    
}

#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;    
}

#footer {
height: 200px;
text-align: center;
font-size: 14pt;
}

В начале файла идет обнуление тега <body>, так как многие элементы имеют предустановленные отступы, да и в разных браузерах могут отображаться по-разному. 

Синтаксис css прост — сначала идет имя html-тега, для которого описывается оформление, а затем в фигурных скобках — непосредственно сам стиль оформления обязательно с точкой с запятой в конце каждого свойства. Глобальные теги, такие как body, html пишутся без каких-либо знаков, если мы описываем элемент, который записывали как <div id='...'>, то в начале будет решетка - #, если <div class='...'>, в начале будет точка, но в данном уроке классов нет, поэтому пока не будем говорить о них.

Если сейчас сохранить оба файла и открыть файл index.html в браузере, то мы увидим, что он не изменился. Этого и следовало ожидать, так как оформление не изменилось, а просто было перенесено в отдельный файл. Чтобы немного освоиться с каскадными таблицами стилей зададим фон для шапки и футера. Пропишем для #header новое свойство внутри фигурных скобок:

background: url('header.jpg') repeat-x;

Файл header.jpg можно скачать тут, после скачивания его следует положить в папку Test.

Также установим фон и для футера. В фигурных скобках #footer пишем:

background: url('footer.jpg') repeat-x;    

Файл footer.jpg качаем тут и тоже кладем в папку с проектом.

Рядом с путем к файлу находится параметр repeat-x, который означает, что фон будет повторяться по горизонтали.
В итоге файл style.css будет иметь следующий вид:

body {
    margin: 0;
    padding: 0;
}

#header {
height: 200px;    
background: url('header.jpg') repeat-x;
}

#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;    
}

#footer {
height: 200px;
background: url('footer.jpg') repeat-x;    
text-align: center;
font-size: 14pt;
}

Теперь страничка практически готова, но текст в блоке контента находится слишком близко к левой границе блока, поэтому лучше задать ему отступ. Так как текст заключен в тег <p>, значит и стиль надо прописывать тегу <p>. При этом тег <p> расположен внутри блока content, и описываться будет следующим образом:

#content p {
margin: 20px;    
}

Сохраним файл style.css, обновим страничку в браузере, и если все было сделано правильно, то вы увидите следующее:

Конечно, страница выглядит совсем простой, и ее структура примитивна, но при этом она уже может быть страницей сайта, так как имеет для этого все необходимое. Если же продолжить усовершенствовать ее структуру и оформлять с помощью css, то может выйти что-то весьма неплохое.

В конце урока выкладываю архив со всеми файлами, нужными для его выполнения, для того чтобы можно было свериться с ними и при необходимости исправить допущенные ошибки.

Скачать архив

Первая часть урока - Перейти

Вторая часть урока - Перейти