Синтаксис и принципы работы CSS

13 марта 2013 | Автор: | Категория: Уроки вёрстки

css стили В CSS имеется свой строго определенный синтаксис, в соответствии с которым создаются таблицы стилей.

В общем виде синтаксис CSS выглядит так:

selector {property: value;}

selector – селектор, указывает к какому HTML-тегу будет применяться свойство;
property – свойство, применяемое к селектору. Например, цвет шрифта (“color”).
value – значение применяемого свойства. Например, для красного цвета шрифта (“red”).

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

<font color=»red»><h1>Заголовок1</h1></font>

С помощью CSS этого же эффекта можно достичь вот так:

<h1 style=»color:red;»>Заголовок2</h1>


Подключить CSS к HTML-странице можно одним из следующих способов:

1. Подключение стилей при помощи атрибута style.

<html>
<head>
<title>Пример подключения стилей № 1</title>
</head>
<body>
<h1 style=»font-family: Arial; font-size: 12 pt; color:red;»>Заголовок</h1>
</body>
</html>

2. Подключение стилей при помощи тега <style>.

<html>
<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

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

Подключается файл стилей вот этой строкой:

<link rel=»stylesheet» type=»text/css» href=»style.css» />

Эту строчку нужно вставить между тегами <head></head>

В данном примере файл стилей — style.css, находится в одной папке с html файлом, к которому будет подключаться стиль.

style.css

h1 {
font-family: Arial;
font-size: 12 pt;
color:red;
}

index.html

<html>
<head>
<title>Пример подключения стилей № 3</title>
<link rel=»stylesheet» type=»text/css» href=»style.css» />
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>

Что такое CSS, зачем он нужен, и как его подключить к html-странице мы разобрались. В следующих статьях я буду рассматривать конкретные примеры использования таблиц стилей при вёрстке сайта.

Для этой страницы комментарии закрыты.