Пошаговая инструкция создания сайта на html коде / Перенос свойств стиля шапки сайта в файл CSS

Перенос свойств стиля шапки сайта в файл CSS

Осталось перенести свойства стиля из файлов шапки сайта и подвала, и можно будет двигаться дальше.

Открываем файл шапки сайта header.html, который лежит в папке "include", в программе Notepad++.

Перенесем свойства стиля элемента блока <div> с идентификатором id="header", над которым мы работали в шаге "Шапка сайта":

<div id="header" style="height: 160px;">

height: 160px; <!-- Длина или высота, задается в пикселях или % -->

От этой записи в файле header.html остается только:

<div id="header">

В файле style.css пишем:

#header {
    height: 160px;
 }

Как вы уже знаете, имя идентификатора в файлах css отмечается знаком решетки "#".

Поскольку шапка сайта находится в самом верху страницы, то эту запись поставим после записи #main:


Далее идет элемент ссылки <a>.

<a style="text-decoration: none;" href="http://proba.ru">

href="Адрес ссылки"

text-decoration: none; <!-- Убираем подчеркивание текста ссылки -->

В файле header.html остается только адрес ссылки:

<a href="http://proba.ru">

В файле style.css пишем, после #header:

a {
    text-decoration: none;
 }


Элемент картинки <img>:

<img src="images/sun.jpg" style="float: left; margin: 30px 20px 0 35px;"/>

src="название папки/название рисунка"

float: left; <!-- Определяет сторону расположения -->

margin: верхний правый нижний левый; <!-- Внешние отступы от краев, задается в пикселях или % -->

Этому элементу картинки в шапке сайта <img>, зададим класс "img_header" или "img-header", и в файле html оставим его и адрес расположения картинки:

<img class="img_header" src="images/sun.jpg" />

В файле style.css пишем:

.img_header {
    margin: 30px 20px 0 35px;
    float: left;
 }

Надеюсь, вы помните, что в css имя классов отмечается точкой.


Элемент блока названия сайта <div> с идентификатором id="name":

<div id="name" style="font-size: 35px; padding-top: 35px; padding-left: 100px; font-family: Arial; color: #801919;">

font-size: 35px; <!-- Размер текста, задаем в пикселях -->

padding-top: 35px; <!-- Верхний отступ, задается в пикселях, % -->

padding-left: 100px; <!-- Левый отступ, задается в пикселях, % -->

font-family: Arial; <!-- Шрифт текста -->

color: #801919; <!-- Цвет текста -->

В файле html остается:

<div id="name">

В файле style.css пишем:

#name {
    font-size: 35px;
    padding-top: 35px;
    padding-left: 100px;
    font-family: Arial;
    color: #801919
 }


Элемент блока второй строки названия сайта <div> с идентификатором id="subtitle":

<div id="subtitle" style="padding-top: 10px; padding-left: 100px; font-size: 23px; font-family: Arial; color: #9a1010;">

padding-top: 10px; <!-- Верхний отступ, задается в пикселях, % -->

padding-left: 100px; <!-- Левый отступ, задается в пикселях, % -->

font-size: 23px; <!-- Размер текста, зададим в пикселях -->

font-family: Arial; <!-- Шрифт текста -->

color: #9a1010; <!-- Цвет текста -->

В файле html остается:

<div id="subtitle">

В файле style.css пишем:

#subtitle {
    font-size: 23px;
    padding-top: 10px;
    padding-left: 100px;
    font-family: Arial;
    color: #9a1010
 }


Далее у нас идет верхнее меню и его первый элемент маркированного списка <ul>:

<ul style="margin: 0; padding: 0; list-style: none; background: #819A32; height: 45px; line-height: 45px;">

margin: 0; <!-- Убираем внешние отступы -->

padding: 0; <!-- Отодвигаем список к началу строки -->

list-style: none; <!-- Убираем маркеры списка -->

background: #819A32; <!-- Цвет фона меню -->

height: 45px; <!-- Высота меню -->

line-height: 45px; <!-- Ровняем список по вертикали -->

Зададим элементу маркированного списка <ul> класс, например, "ul_menu", на всякий случай, - вдруг потом у нас на сайте появится еще один или несколько маркированных списков.

В файле html оставляем:

<ul class="ul_menu">

В файле style.css пишем:

.ul_menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #819A32;
    height: 45px;
    line-height: 45px;
 }

И добавлю к этому бордюр для меню, как это сделано у меня на сайте, а вы - если захотите:

border: 1px solid #e8e3e3; <!-- Бордюр -->

.ul_menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #819A32;
    height: 45px;
    line-height: 45px;
    border: 1px solid #e8e3e3;
 }


Второй элемент маркированного списка, пункт списка <li>:

<li style="float: left; padding: 0 20px 0 20px; font-family: Arial; color: #ffffff;">

float: left; <!-- Выстраиваем список в горизонтальную линию -->

padding: 0 20px 0 20px; <!-- Отступы справа и слева текста -->

font-family: Arial; <!-- Шрифт текста -->

color: #ffffff; <!-- Цвет текста -->

Зададим элементу пункта списка <li> класс, например, "li_menu".

В файле html оставляем:

<li class="li_menu">

В файле style.css пишем:

.li_menu {
    float: left;
    padding: 0 20px 0 20px;
    font-family: Arial;
    background: #819A32;
    color: #ffffff;
 }


Для верхнего меню нам осталось отредактировать элемент ссылки <a> для обеих его пунктов:

<a href="index.shtml">

<a href="second.shtml">

Зададим элементу ссылки <a> верхнего меню класс "a_menu".

В файле html для элементов ссылок в пунктах меню пишем класс

<a class="a_menu" href="index.shtml">

<a class="a_menu" href="second.shtml">

Теперь поработаем в файле style.css со свойствами стиля элемента ссылки <a> верхнего меню, для того чтобы оно стало таким, как на моем сайте. Доработаем меню окончательно.

Сделаем цвет текста ссылок белым:

color: #ffffff; <!-- Цвет текста -->

.a_menu {
    color: #ffffff;
 }

На моем сайте при наведении курсора мышки на пункт меню, цвет его текста меняется с белого на черный. Для этого эффекта в css есть специальная команда hover, которую правильно называть псевдоклассом, и записывается она так:

.a_menu:hover {
    color: #000000;
 }

hover /* меняет цвет кнопки и текста при наведении на нее курсора */

И еще в моем меню, при наведении курсора мышки на любой из его пунктов, меняется цвет с темно-зеленого на более светлый. Для этого эффекта, в файле css пропишем цвет фона для псевдокласса hover:

.a_menu:hover {
    color: #000000;
    background: #e8fddf;
 }

Подредактируем этот эффект, чтобы он не был такой узкой и короткой полоской.

Перенесем запись внутренних отступов для текста:

padding: 0 20px 0 20px; /* Отступы справа и слева текста */

из класса li_menu в класс a_menu, тем самым удлиним эту полоску :

.a_menu {
    padding: 0 20px 0 20px;
    color: #ffffff;
 }

Расширим полоску, задав классу a_menu свойство display, которое, на самом деле, выполняет много разных функций и показывает, как будет отображаться элемент:

display: block; /* Многофункциональное свойство отображения элемента */

.a_menu {
    padding: 0 20px 0 20px;
    display: block;
    color: #ffffff;
 }

Добавим еще разделительную полоску между пунктами меню:

border-right: 1px solid #677B27; /* Разделительная полоска */

.a_menu {
    padding: 0 20px 0 20px;
    display: block;
    color: #ffffff;
    border-right: 1px solid #677B27;
 }

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

-moz-transition: all 0.3s 0.01s ease; /* Эффект плавности работы меню */

-o-transition: all 0.3s 0.01s ease;

-webkit-transition: all 0.3s 0.01s ease;

.a_menu {
    padding: 0 20px 0 20px;
    display: block;
    color: #ffffff;
    border-right: 1px solid #677B27;
    -moz-transition:: all 0.3s 0.01s ease;
    -o-transition:: all 0.3s 0.01s ease;;
    -webkit-transition:: all 0.3s 0.01s ease;
 }

Мы закончили перенос свойств стиля из файла header.html в файл style.css, и полностью доделали верхнее меню.


Файл header.html:

Файл css:

Блок шапки сайта

Блок верхнего меню

Следующий шаг - Перенос свойств стиля подвала сайта в файл CSS