Основы CSS
Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с черного на красный, вы должны написать этот CSS:
p { color: red; }
Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles.
Но нам все равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)
Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между и тегами: <link href="styles/style.css" rel="stylesheet" type="text/css"> Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!
Анатомия набора CSS правил
Давайте взглянем на вышеупомянутый CSS немного более подробно:Вся структура называется набором правил (но зачастую для краткости "правило" ). Отметим также имена отдельных частей:
- Селектор (Selector) Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.
- Объявление (Declaration) Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
- Свойства (Properties)
Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, color является свойством для элементов
). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
- Значение свойства (Property value) Справа от свойства, после двоеточия, у нас есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений color, помимо red).
Обратите внимание на важные части синтаксиса:
Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки ({}).
В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.
Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:
p { color: red; width: 500px; border: 1px solid black; }
Комментарии
Отправить комментарий