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

Перенос свойств стиля в отдельный файл CSS

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

CSS - Cascading Style Sheets, переводится как каскадные таблицы стилей.

В программе Notepad++ откроем новый файл нажатием на иконку белого листа в левом верхнем углу:

и сохраним его в папке "www" под именем "style" с расширением ".css".

Перенесем свойства стиля элемента <body> из файлов index.html или second.html в файл style.css.

То есть, раньше у нас в файлах index.html или second.html была вот такая запись:

<body background="images/fon.jpg" style="margin: 0;">

После переноса свойств стиля, останется только сам открывающий тег:

<body>

Тем временем в файле style.css появится запись для элемента <body>:

body {
    margin: 0;
    background-image: url(images/fon.jpg);
 }

Как видите, записи в файле style.css немного отличаются от записей в файлах html, - вместо угловых скобок появляются фигурные, и тег комментирования в css выглядит немного иначе, но тем не менее все понятно и знакомо.

margin: 0; /* Внешние отступы */

background-image: url(название папки/файл); /* Задаем фон картинкой в css */

background-color: название цвета/код цвета; /* Задаем цвет фона в css */

/* Так выглядят коментарии в css */

Подключение файла CSS

Прежде чем продолжить переносить свойства стиля других элементов в файл style.css, необходимо сделать его подключение к работе сайта.

В этом нам поможет элемент <link>, который состоит из одного тега и устанавливает связь страниц сайта, в данном случае, с таблицей стилей:

<link ...атрибуты... /> <!-- Устанавливает связь страниц сайта с таблицей стилей -->

Для элемента <link> нужно указать следующие атрибуты:

href="style.css" <!-- Адрес ссылки "данные файла (имя, расширение)" -->

type="text/css" <!-- Тип подключаемого файла -->

rel="stylesheet" <!-- Сообщение о связи с таблицей стилей -->

media="screen" <!-- Сообщение об устройстве, для которого применяется таблица стилей -->

Элемент <link> прописывается в невидимой части сайта - внутри элемента <head>, перед его закрывающим тегом.

<link href="style.css" type="text/css" rel="stylesheet" media="screen" />

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

Такой файл style.css может быть один, в котором собраны свойства стиля для всех элементов, а может быть несколько таких файлов, например, основной (style.css), для описания свойств стиля текстов (st_text.css), таблиц (st_table.css), меню (st_menu.css) и так далее. Кому как удобнее. Имена файлов могут быть разные, это просто пример.

У меня несколько таких файлов. И в этом случае для каждого из них необходимо сделать такое подключение с помощью элемента <link>, в котором нужно менять имена файлов.


Файлы html:

Файл css:

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