Что такое CSS? Синтаксис CSS, виды таблиц стилей.
Перед началом изучения стилей CSS вам необходимо познакомиться с языком HTML, так как CSS и HTML работают вместе. HTML создает структуру страницы, а CSS определяет вид элементов HTML.
Что такое CSS?
Аббревиатура CSS означает - Cascading Style Sheets (Каскадные Таблицы Стилей).
CSS позволяет управлять отображением Web-документов, обычно используется для изменения стиля документа написанного на языках HTML и XHTML, но может быть применен к XML, SVG и XUL документам. СSS позволяет применить различные стили к различным HTML элементам.
Основным преимуществом CSS является возможность разделить стили документа от его содержимого. К примеру при использовании только HTML, все стили будут находится на одной странице с содержимым, что усложнит управлением страницей при ее форматировании и будущем росте.
Вывод.
Все форматирование следует убирать из HTML документа и размещать в отдельном СSS документе.
Синтаксис CSS
СSS содержит объявления стиля, которые преобразует браузер и применяет к соответствующим элементам HTML.
Каждое объявление имеет три части:
- Селектор.
- Свойство.
- Значение.
Рассмотрим простой пример:
h1 {color: red; }Селектор передает браузеру какой элемент HTML нужно форматировать (h1), в блоке объявления находятся свойства (color) и значение (red).
Блок объявления может содержать одно или несколько объявлений, разделенных точкой с запятой. Каждое объявление должно иметь свойство и значение.
Виды таблиц стилей
Встроенные таблицы стилей (Inline CSS)
При использовании встроенных таблиц стилей, мы пишем код CSS прямо в HTML документе, непосредственно в HTML теге с помощью атрибута <style>. Атрибут <style> может содержать любые свойства CSS. С помощью встроенного стиля, стиль применяется к одному элементу.
Рассмотрим пример:
<!--Создадим параграф с красным цветом текста и желтым задним фоном -->
<p style="color:red; background-color: yellow;">
Пример Inline CSS
</p>
Вложенные таблицы стилей (Embedded CSS)
При использовании вложенных таблиц, мы добавляем элемент <style> внутрь секции <head> самого HTML документа.
<html>
<head>
<title>Site name</title>
<style>
p { color:red;
background-color:yellow;
}
</style>
</head>
<body>
<!-- Меняем цвет текста всех параграфов на красный, а
цвет заднего фона на желтый-->
<p align="center">Параграф</p>
<p align="center">Параграф 2</p>
<p align="center">Параграф 3</p>
</body>
</html>
Обычно вложенные таблицы стилей используются для уникального оформления одного HTML документа.
Внешние таблицы стилей (External CSS)
При использовании внешних таблиц все объявления стилей находятся в одном тестовом файле с расширением .css. На этот файл ссылает HTML документ с помощью тега <link>. Элемент <link> располагается в секции <head>.
<html>
<head>
<title>Site name</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Меняем цвет текста всех параграфов на красный,а
цвет заднего фона на желтый-->
<p align="center">Параграф</p>
<p align="center">Параграф 2</p>
<p align="center">Параграф 3</p>
</body>
</html>
Содержимое файла style.css
p {
color:red;
background-color:yellow;
}Ссылка к файлу CSS может быть как относительной, так и абсолютной. Не забывайте при использовании относительной ссылки СSS файл должен находится в одной папке с HTML документом.