0
Forest st., Moscow
+79266800080

Что такое CSS и зачем нужны каскадные таблицы стилей

Что такое CSS и зачем нужны каскадные таблицы стилей

Рассказываем о языке, благодаря которому интернет стал красивым. 

Основы CSS

Аббревиатура CSS расшифровывается как Cascading Style Sheets, что в переводе означает «каскадные таблицы стилей». Это язык разметки, используемый для визуального оформления веб-сайтов. 

Объекты, расположенные на странице, размещаются с помощью HTML. А вот CSS отвечает за то, как эти объекты выглядят. Их размер, цвет, фоновое изображение, степень прозрачности, расположение относительно других элементов, поведение при наведении курсора, визуальное изменение кнопок при нажатии и т.п. 

Вот сайт, сделанный с помощью одного лишь HTML:

Сайт, созданный без использования CSS

А вот как выглядит та же страница после добавления CSS-разметки и оформления блоков с помощью каскадных таблиц стилей:

Сайт, оформленный с помощью CSS

Практически любые «внешние проявления» сайта создаются с помощью CSS. Это стиль ваших страниц. 

Синтаксис разметки

Язык CSS быстро стал стандартом в веб-разработке, потому что он позволяет быстро изменить визуальное оформление сайта, не прибегая к использованию более сложных языков программирования. 

Пример CSS-кода

Достаточно ознакомиться с простейшими правилами CSS, и можно легко собрать вполне симпатичный сайт со всем необходимым контентом. «Простота» обеспечивается за счет понятного синтаксиса. 

Синтаксис CSS в отдельном файле в соответствующем формате (.css) выглядит так:

селектор {
  свойство: значение;
}
  • Селектор – это ссылка на элемент в HTML, над которым будет вестись работа (оформление).

  • Свойство – определенная характеристика элемента, которую нужно изменить. Например, размер или цвет. 

  • Значение – цифровое или текстовое обозначение для выбранного свойства. 

Попробуем поменять цвет текста в блоке section на красный:

section {
  color: red;
}

Как видите, все понятно даже без знания разметки. Даже далекий от программирования человек поймет, что происходит в вышеописанном коде. Это самое лучшее в CSS. Все логично. 

Медиазапросы и тег