В данной статье мы ознакомимся с базовыми возможностями и языком Каскадных таблиц стилей (CSS). Узнаем для чего используется CSS и как преобразится веб-страница.
Введение
Ознакомившись с HTML разработчики сайтов делятся на 2 части. Первые - это те, которые утверждают, что для создания сайта достаточно HTML. Вторые понимают, что средствами разметки тут не обойтись. Ведь HTML лишь первый этап в процессе обучения создания сайтов, а далее нужно проходить CSS.
Что такое CSS?
CSS (Cascading Style Sheets) переводится как «каскадные таблицы стилей». Отвечает за внешний вид HTML-страницы. Синтаксис простой, состоит из селекторов и свойств.
Для чего нужен CSS?
Используется для определения стилей ваших документов (дизайн, верстка, макеты). Позволяет разместить стили CSS внутри тега документа с встроенной таблицей стилей, или ссылаться на отдельный CSS-файл, который определяет ваши стили извне.
Псевдоклассы
Определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши.
Стиль
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Для представления о чем идет речь ниже представлены.
Добавление стилей в документ приобретает совершенно иной вид. Перемена в документе разительна,чтобы понять в чем разница нужно заглянуть в код (пример 1.1).
Пример 1.1. Исходный код документа
<!DOCTYPE HTML>
<html>
<head>
<title>Флексагон</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Флексагон</h1>
<p>Флексагон представляет собой бумажную фигуру, которая имеет
три и более стороны. Поначалу кажется, что это невозможно, но вспомните
ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги,
и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и
склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но
стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться,
что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета.
Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
</body>
</html>
Код HTML не был изменен, добавлена только строка <link rel="stylesheet" href="style.css"> . Она является ссылкой на внешний файл с описанием стилей под именем style.css.
Пример 1.2. Содержимое стилевого файла style.css
body {
font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
font-size: 11pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #333; /* Цвет основного текста */
}
h1 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
p {
text-align: justify; /* Выравнивание по ширине */
margin-left: 60px; /* Отступ слева в пикселах */
margin-right: 10px; /* Отступ справа в пикселах */
border-left: 1px solid #999; /* Параметры линии слева */
border-bottom: 1px solid #999; /* Параметры линии снизу */
padding-left: 10px; /* Отступ от линии слева до текста */
padding-bottom: 10px; /* Отступ от линии снизу до текста */
}
В файле style.css описаны все параметры оформления таких тегов как , <h1> и <p>.
Благодаря тому, что на файл со стилем можно ссылаться из любого веб-документа,то сокращается объем повторяющихся данных. Повышение гибкости и скорости работы над сайтом увеличивается из - за разделения кода и оформления.
CSS совпадает с HTML тем, что способы определения цветов одинаковые.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу:
• стиль браузера
• стиль автора
• стиль пользователя
Стиль браузера
Оформление, которое применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае, когда к документу не добавляется никаких стилей.
Например, заголовок страницы, формируемый тегом </p> <h1>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Анатомия набора CSS правил
Вся структура - набор правил (но зачастую для краткости "правило" ). Отметим также имена отдельных частей:
Селектор
Cелектор - это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.
Он выбирает элементы для применения стиля (элементы p ). Для стилизации другого элемента, - измените селектор.
Пробел в последовательности селекторов соответствует понятию "селектор потомков".
Символ ">" в последовательности селекторов соответствует понятию "дочерний селектор".
Объявление (Declaration)
Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties)
Вы выбираете, какие свойства Вы хотите затронуть в вашем правиле. Способы, которыми вы можете стилизовать определенный HTML элемент ( color является свойством для элементов <p>).
Значение свойства (Property value)
Справа от свойства, после двоеточия, есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений color, помимо red).
Обратите внимание на важные части синтаксиса:
- Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки ({}).
- В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
- В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.
Для изменения нескольких значений свойств сразу, вам нужно написать их, разделяя точкой с запятой, например так:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Выбор нескольких элементов
Также Вы можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Для этого добавьте несколько селекторов, разделенных запятыми. Например:
p,li,h1 {
color: red;
}
Разные типы селекторов
Выше мы рассматривали только селектор элементов, который выбирает все элементы определенного типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространенных типов селекторов:
|
Имя селектора |
Что выбирает |
Пример |
|
Селектор элемента (иногда называемый селектором тега или типа) |
Все HTML элементы указанного типа. |
|
|
ID селектор |
Элемент на странице с указанным ID (на одной HTML странице, может быть только один элемент с каким-либо ID). |
|
|
Селектор класса |
Элементы на странице с указанным классом (множество экземпляров класса может объявляться на странице). |
|
|
Селектор атрибута |
Элементы на странице с указанным атрибутом. |
|
|
Селектор псевдокласса |
Указанные элементы, но только в случае определенного состояния, например, при наведении курсора. |
|