В CSS имеется свой строго определенный синтаксис, в соответствии с которым создаются таблицы стилей.
В общем виде синтаксис CSS выглядит так:
selector – селектор, указывает к какому HTML-тегу будет применяться свойство;
property – свойство, применяемое к селектору. Например, цвет шрифта (“color”).
value – значение применяемого свойства. Например, для красного цвета шрифта (“red”).
Некоторые свойства, которые используются в CSS, аналогичны свойствам HTML.
Например:
В HTML цвет шрифта можно задать следующим образом:
С помощью CSS этого же эффекта можно достичь вот так:
Подключить CSS к HTML-странице можно одним из следующих способов:
1. Подключение стилей при помощи атрибута style.
<head>
<title>Пример подключения стилей № 1</title>
</head>
<body>
<h1 style=»font-family: Arial; font-size: 12 pt; color:red;»>Заголовок</h1>
</body>
</html>
2. Подключение стилей при помощи тега <style>.
<head>
<title>Пример подключения стилей № 2</title>
<style type=»text/css»>
h1 {
font-family: Arial;
font-size: 12 pt;
color:red;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>
3. Подключение стилей указанием ссылки на внешнюю таблицу стилей.
Внешняя таблица стилей это текстовый файл с расширением .css
Этот способ является самым удобным, он позволяет максимально легко и удобно редактировать стили и не нагружает веб-страницу лишним кодом.
Подключается файл стилей вот этой строкой:
Эту строчку нужно вставить между тегами <head></head>
В данном примере файл стилей — style.css, находится в одной папке с html файлом, к которому будет подключаться стиль.
style.css
font-family: Arial;
font-size: 12 pt;
color:red;
}
index.html
<head>
<title>Пример подключения стилей № 3</title>
<link rel=»stylesheet» type=»text/css» href=»style.css» />
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>
Что такое CSS, зачем он нужен, и как его подключить к html-странице мы разобрались. В следующих статьях я буду рассматривать конкретные примеры использования таблиц стилей при вёрстке сайта.
Добавить комментарий