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

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

Продолжим переносить свойства стиля из файлов index.html или second.html в специальный файл style.css. Для файлов шапки сайта и подвала сделаем это отдельно.

Итак, далее в файлах html идет элемент главного блока <div> с идентификатором id="main", над которым мы работали в шаге "Страница сайта":

<div id="main" style="width: 960px; background: #FFFFFF; margin: 0 auto;">

Освежим в памяти свойства стиля:

width: 960px; <!-- Ширина, задается в пикселях или % -->

background: #FFFFFF;" <!-- Цвет фона -->

margin: 0 auto; <!-- Внешние отступы, размещение по центру -->

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

<div id="main">

Остальное переносим в файл style.css вот таким образом:

#main {
    margin: 0 auto;
    width: 960px;
    background-color: #FFFFFF;
 }

Имя идентификатора в файлах css отмечается знаком решетки "#":

#main /* Имя идентификатора */

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


Переносим свойства стиля элемента <table>, над которым мы работали в шаге "Две колонки сайта":

<table id="table" width="960px" border="1" style="border-collapse: collapse; border-color: #e8e3e3;">

border-collapse: collapse; <!-- Одинарная линия рамки таблицы -->

border-color: #e8e3e3;"" <!-- Цвет рамки таблицы -->

В файлах html оставляем запись:

<table id="table">

В файле style.css пишем следующее:

#table {
    width: 960px;
    border: 1px solid #e8e3e3;
    border-collapse: collapse;
 }

Здесь отмечу, что в свойстве атрибута border указываем сразу толщину, вид (solid - означает простую линию), и цвет:

border: 1px solid #e8e3e3;

После переноса свойств элемента <table> из фалов html в файл style.css, если посмотреть на экране как выглядит наш сайт, то мы заметим, что исчезла линия справа от контента, и нам надо ее восстановить.

Для этого будем работать с элементом первой ячейки таблицы <td>:

<td width="593px">

Присвоим элементу <td> идентификатор "td1" и оставим в открывающем теге только его:

<td id="td1">

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

#td1 {
    width: 593px;
    border: 1px solid #e8e3e3;
    border-collapse: collapse;
 }

Линия восстановлена и все выглядит как раньше.

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

<td width="367px">

Присвоем элементу <td> второй ячейки таблицы идентификатор id="td2" и оставим только его в открывающем теге элемента:

<td id="td2">

А атрибут ширины перенесем в файл style.css:

#td2 {
    width: 367px;
    border: 1px solid #e8e3e3;
    border-collapse: collapse;
 }


Перенести свойства стиля элемента блока контента сайта <div> с идентификатором id="content" не составит труда:

<div id="content" style="margin: 20px 20px 20px 20px;">

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

<div id="content"

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

#content {
    margin: 20px 20px 20px 20px;
 }


Для элемента подзаголовка <h2>:

<h2 style="background: #f2eae3;">

в файлах html, в данном случае, оставляем только сам открывающий тег:

<h2>

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

#h2 {
    background: #f2eae3;
 }


Дальше у нас идет картинка, элемент <img>:

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

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

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

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

Поскольку картинки могут располагаться и слева от текста и справа, и в статье их может быть много, то для элемента картинок <img>, вместо идентификатора, правильно применять атрибут class. Для картинки слева зададим имя класса "left".

В файлах html, в этом случае, остается имя класса и адрес картинки:

<img class="left" src="images/flowers.jpg" />

В css, имя классов отмечается значком точки ".". Следовательно, в файле style.css пишем:

img.left {
    margin: 90 20px 0 0;
    float: left;
 }

Вот такая запись тоже будет верна:

.left {
    margin: 90 20px 0 0;
    float: left;
 }


В завершении этого шага, сделаем перенос свойств стиля для текстового элемента <p>:

<p style="font-family: Verdana, Arial; font-size: 16px; color: #474746; line-height: 1.5; text-indent: 40px; text-align: justify;">

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

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

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

line-height: 1.5; <!-- Расстояние между строками, задается числом -->

text-indent: 40px; <!-- Отступ абзаца - красная строка -->

text-align: justify; <!-- Выравнивание текста по обеим сторонам -->

Разных по оформлению текстов на сайте может быт много, поэтому для текстового элемента <p>, как и для элемента картинки, вместо идентификатора будем задавать атрибут класса. Пусть для текста статей имя класса будет, например, "text".

В файлах html вместо длинных записей элементов <p>, оставляем только:

<p class="text">

В файле style.css делаем запись (только я красную строку не буду делать):

.text {
    font-family: Verdana, Arial;
    font-size: 16px;
    color: #474746;
    line-height: 1.5;
    text-align: justify;
 }

Проверим отображение страниц сайта в окне браузера, - визуально ничего не должно измениться.


Файл css:

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