Методы создания HTML и CSS кода

13 14 15 16 17 18 19

Базовый синтаксис CSS

Скажем, нам нужен красный цвет фона web-страницы:

В HTML это можно сделать так:

С помощью CSS того же самого результата можно добиться так:

body {background-color: #FF0000;}

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS

Применение CSS к HTML-документу

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

<html>

<head>

<title>Example</title>

</head>

</body>

</html>

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:

<html>

<head>

<title>Example</title>

body {background-color: #FF0000;}

</style>

</head>

<body>

</body>

</html>

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.

Внешняя таблица стилей это просто текстовый файл с расширением.css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style.

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:

<html>

<head>

<title>My document</title>

</head>

<body>

...

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.

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