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