Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

В этой статье рассмотрим создание таблицы стилей, возьмём небольшой и простой пример.

Таблицы стилей находятся в отдельном файле с расширением .css, этот файл пишется как и html документ в обычном Блокноте.

Для работы с кодом (HTML, CSS, PHP и т.д.), рекомендую использовать Не Блокнот, а программу NotePad++
Очень удобная программа, в ней подсвечивается весь код, и если в коде допущены ошибки, он перестаёт подсвечиваться.

В CSS нет тэгов и атрибутов. Хотя многие их так называют.
Структура таблицы стилей состоит из ПРАВИЛ.
В ПРАВИЛЕ существуют селекторы и блоки обьявления стилей. Селекторы в переводе с английского select значит выбор. То есть он выбирает тэг к которому будет применён стиль или стили. Вот к примеру:

h2
{color:#232D37;
font-size:15px;  }

h2 в нашем случае будет селектором, а все остальное это блок обьявления стилей, который всегда заключается в фигурные скобки. Всё вместе будет ПРАВИЛО.

Блок  стилей  в свою очередь имеет свойства (обозначены зелёным цветом) и значения этих свойств. Свойства перечисляются через точку с запятой.
В этом правиле определяются свойства для всех заголовков с тэгом h2:

• размер шрифта = 15 пикселей
• цвет шрифта #232D37

Теперь о том как применить правило к HTML-документу.

Для этого служит специальный тэг
<link rel="stylesheet" type="text/css" hrеf="style.css"> где style.css путь до созданного вами файла с расширением .css , путь может быть относительным или абсолютным (полностью с http). Файл может хранится как в отдельной папке, так и в одной папке, вместе с файлом index.html .
Этот тэг вставляется перед закрывающим </head>. Пример:

<html>
<head>
<title>Сайт о шикарных автомобилях</title>
<link rel="stylesheet" type="text/css" hrеf="style.css">
</head>
<body>
<p><h2>Приветствую Вас на сайте о дорогих автомобилях<br>
которые для большинства водителей <br>остаются голубой мечтой</h2></p>
</body>
</html>

И пример файла таблицы стилей CSS:

h2
{color:#F34B10;
font-size:32px; }

Теперь открываем Блокнот и переписываем туда (вручную) код. Сначала HTML-файл, незабывайте сохранить с расширением .html , потом CSS-файл, сохраняем с расширением .css .
Все файлы для удобства сохраните в любой пустой папке, например www.

Вот что у нас получится:

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

Теперь немного потренируйтесь, поменяйте цвета, размер шрифта и т.д.

Перейти к следующему уроку

Способы подключения таблицы стилей к HTML файлу.

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!