CSS (Cascading Style Sheets) — это код, который используется для стилизации веб-страниц. Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML.
CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:
p { color: red; }
Вся структура называется набором правил (но зачастую для краткости "правило"). Отметим также имена отдельных частей:
p
). Для стилизации другого элемента, просто измените селектор.color: red;
указывает, какие из свойств элемента вы хотите стилизовать.color
является свойством для элементов <p>
). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.color
, помимо red
).Обратите внимание на важные части синтаксиса:
{}
).:
), чтобы отделить свойство от его значений.;
), чтобы отделить каждое объявление от следующего.Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:
p {
color: red;
width: 500px;
border: 1px solid black;
}