Открыть меню
Посмотреть ещё
Поиск по сайту
Назад

Что такое CSS и для чего используется

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

Автор
Даниил Фам
Даниил Фам
Исполнительный директор
26 октября 2022
Что такое CSS и для чего используется

Что такое CSS

CSS (Cascading Style Sheets) — это каскадные таблицы стилей, с их помощью можно прикрепить шрифт, цвет и другие элементы стиля к структурированным документам.

Обычно CSS создают стиль представления документа для HTML и XHTML, но могут взаимодействовать с любым XML документом.

Задача CSS — сделать документ легко читаемым в браузере, при этом не используя для дизайна программирование и «сложную логику».

Как это работает

Любая страница в интернете состоит из HTML и CSS. Документ HTML выглядит как сплошная простыня данных — воспринимать информацию в таком виде затруднительно. 

Интернет изначально создавался для ученых и военных, им такое отображение информации подходило. А потом в сеть пришли обычные пользователи и захотели, чтобы все было красиво и наглядно. А еще захотели сами создавать дизайн сайта, чтобы одна и та же страница могла выглядеть по-разному за счет изменения цвета фона, шрифта, ширины колонок, отступов, анимации, картинок.

В итоге в декабре 1996 года была представлена первая версия нового языка программирования CSS. Он позволил создавать оформление сайта без привязки к HTML — задавать значения шрифтов, цветов, располагать отдельные блоки на странице.

Для этого был изобретен язык программирования CSS, отныне отвечающий за визуальную составляющую сайта.

CSS выполняет две функции:

  • Структурирует данные, разделяя полотно текста по таблицам и блокам

  • Позволяет создавать стили подачи информации — иначе говоря, дизайн сайта

Функции CSS

На сайте в виде HTML может быть одна и та же информация. Но как она будет выглядеть — зависит от CSS.

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

С помощью каскадных таблиц можно задавать правила форматирования различных элементов — при этом свойства и их допустимые значения для каждого элемента свои. Это значит, что остальные свойства, не предусмотренные для конкретного элемента, не будут на него влиять.

Объявление стиля можно условно разделить на две части: объявление и селектор. При этом h1 будет работать аналогично H1 ввиду нечувствительности имен элементов к регистру (касается HTML).

При этом в самом объявлении также выделяем две части: имя (например: color) и привязанное к нему значение (red).

Задача селектора — указать браузеру, какой именно элемент нуждается в форматировании. Блок объявления задает свойства и их значения, а именно форматирующие команды. Блок объявления имеет вид кода в фигурных скобках.

Способы подключения каскадных таблиц стилей

Применять CSS можно любым из трех способов:

  1. Inline — встраиваемая таблица, применяет стиль к определенному тегу HTML

  2. Embedded — определяет стиль всей страницы сразу

  3. Linked/External — определяет стиль всех страниц сайта, при этом описание вынесено в отдельный внешний файл

Способы подключения каскадных таблиц стилей

Есть также аппаратно-зависимые стили, где отображение данных зависит от типа устройства (ПК, мобильный телефон, планшет; либо телефоны с разным размером/разрешением экрана; либо устройства на Android и iOS). На этом принципе строится адаптивный дизайн сайта.

Преимущества CSS

Главное преимущество CSS — это возможность разделить контент и его визуальное представление.

Раньше отображение страницы было напрямую привязано к контенту — была таблица с прозрачными границами, которую требовалось чем-то заполнять. При этом если контент менялся, приходилось менять оформление.

Изначально CSS применяли только для оформления страницы, но сейчас это полноценный инструмент верстки и создания макетов.

Вопросы и ответы

Каскадные таблицы стилей - почему так называются?

Давайте разберем каждый термин отдельно:

  • Каскадный — определяет порядок применения стилей к странице (связанные, внедренные и встроенные)

  • Таблица — предполагает совокупность стилей

  • Стиль — набор правил отображения элементов (текст, фон, цвет, поля, шрифт)

Каскадные таблицы степей

Таким образом каскадные таблицы стилей — это совокупность правил для отображения элементов, применяющиеся на странице в указанном порядке.

Отличия HTML и CSS

HTML относится прежде всего к контенту и его структуре (полотно текста, как мы упоминали ранее). CSS определяет, как будет выглядеть документ, используя для этого таблицу стилей.

Информация была полезна?

15 оценок, среднее 4.07 из 5