Участвуй в конкурсе «Твой EDTECH» и выиграй iMac и 100 000 ₽
Для действующих студентов ВУЗов и ССУЗов
Выиграй IMac и 100 000 ₽
Для чего используется CSS, и чем он отличается от HTML? Как будет выглядеть сайт без CSS? По каким принципам строится адаптивный дизайн, и почему раньше было сложно менять содержимое сайта? В этой статье мы расскажем все о каскадных таблицах стилей и принципах их работы.
CSS (Cascading Style Sheets) — это каскадные таблицы стилей, с их помощью можно прикрепить шрифт, цвет и другие элементы стиля к структурированным документам.
Обычно CSS создают стиль представления документа для HTML и XHTML, но могут взаимодействовать с любым XML документом.
Задача CSS — сделать документ легко читаемым в браузере, при этом не используя для дизайна программирование и «сложную логику».
Любая страница в интернете состоит из HTML и CSS. Документ HTML выглядит как сплошная простыня данных — воспринимать информацию в таком виде затруднительно.
Интернет изначально создавался для ученых и военных, им такое отображение информации подходило. А потом в сеть пришли обычные пользователи и захотели, чтобы все было красиво и наглядно. А еще захотели сами создавать дизайн сайта, чтобы одна и та же страница могла выглядеть по-разному за счет изменения цвета фона, шрифта, ширины колонок, отступов, анимации, картинок.
В итоге в декабре 1996 года была представлена первая версия нового языка программирования CSS. Он позволил создавать оформление сайта без привязки к HTML — задавать значения шрифтов, цветов, располагать отдельные блоки на странице.Для этого был изобретен язык программирования CSS, отныне отвечающий за визуальную составляющую сайта.
CSS выполняет две функции:
Структурирует данные, разделяя полотно текста по таблицам и блокам
Позволяет создавать стили подачи информации — иначе говоря, дизайн сайта
На сайте в виде HTML может быть одна и та же информация. Но как она будет выглядеть — зависит от CSS.
С помощью каскадных таблиц можно задавать правила форматирования различных элементов — при этом свойства и их допустимые значения для каждого элемента свои. Это значит, что остальные свойства, не предусмотренные для конкретного элемента, не будут на него влиять.
Объявление стиля можно условно разделить на две части: объявление и селектор. При этом h1 будет работать аналогично H1 ввиду нечувствительности имен элементов к регистру (касается HTML).
При этом в самом объявлении также выделяем две части: имя (например: color) и привязанное к нему значение (red).
Задача селектора — указать браузеру, какой именно элемент нуждается в форматировании. Блок объявления задает свойства и их значения, а именно форматирующие команды. Блок объявления имеет вид кода в фигурных скобках.
Применять CSS можно любым из трех способов:
Inline — встраиваемая таблица, применяет стиль к определенному тегу HTML
Embedded — определяет стиль всей страницы сразу
Linked/External — определяет стиль всех страниц сайта, при этом описание вынесено в отдельный внешний файл
Есть также аппаратно-зависимые стили, где отображение данных зависит от типа устройства (ПК, мобильный телефон, планшет; либо телефоны с разным размером/разрешением экрана; либо устройства на Android и iOS). На этом принципе строится адаптивный дизайн сайта.
Главное преимущество CSS — это возможность разделить контент и его визуальное представление.
Раньше отображение страницы было напрямую привязано к контенту — была таблица с прозрачными границами, которую требовалось чем-то заполнять. При этом если контент менялся, приходилось менять оформление.
Каскадный — определяет порядок применения стилей к странице (связанные, внедренные и встроенные)
Таблица — предполагает совокупность стилей
Стиль — набор правил отображения элементов (текст, фон, цвет, поля, шрифт)
Таким образом каскадные таблицы стилей — это совокупность правил для отображения элементов, применяющиеся на странице в указанном порядке.
HTML относится прежде всего к контенту и его структуре (полотно текста, как мы упоминали ранее). CSS определяет, как будет выглядеть документ, используя для этого таблицу стилей.
Назад
