Каскадные таблицы стилей (CSS) — это язык программирования, который полезен для определения дизайна электронных документов. С помощью простых инструкций — представленных в виде понятного исходного кода — такие элементы сайта, как макет, цвет и типографика, могут быть адаптированы по желанию пользователя. Благодаря каскадным таблицам стилей семантическая структура и содержание документа остаются незатронутыми. CSS появился в середине 1990-х годов и сейчас считается стандартным языком таблиц стилей во Всемирной паутине.
Что такое CSS?
CSS, как и HTML, является одним из основных языков Всемирной паутины. В то время как вы добавляете текст на сайт с помощью HTML и семантически структурируете его, вы определяете дизайн его содержимого с помощью CSS. Хотя HTML и CSS используются в сочетании, инструкции по оформлению CSS и элементы HTML существуют отдельно друг от друга. Это означает, что машина может прочитать электронный документ даже без CSS. С помощью CSS содержимое браузера визуально оформляется и представляется в привлекательном виде.
CSS — это «живой стандарт», который продолжает разрабатываться Консорциумом Всемирной паутины. По этой причине постоянно появляются новые функции и практические приложения. Широко распространенный язык таблиц стилей появился в 1990-х годах. В то время идея использования таблиц стилей для отображения веб-контента уже не была абсолютно новой. Но CSS отличался одним важным аспектом от других элементов, ориентированных на отображение, которые уже существовали в HTML: теперь у пользователей была возможность определять правила оформления для групп элементов в нескольких документах и в одной таблице стилей.
Язык программирования для визуального оформления веб-сайтов. С помощью каскадных таблиц стилей можно определить, например, шрифт, размер или цвет, в котором будут отображаться элементы HTML.
Преимущества и области применения CSS
Успешный веб-сайт зависит не только от содержания, но и от хорошего дизайна. Пользователи быстро теряют интерес к сайтам, которые не удобны для пользователя или плохо структурированы. Здесь CSS предлагает ряд вариантов дизайна, которые недоступны в чистом HTML.
Например, CSS позволяет централизованно управлять некоторыми характеристиками. Это означает, что похожие элементы (например, все гиперссылки или изображения) в пределах одного документа могут быть распознаны и отформатированы с помощью одной команды. Инструкции по оформлению не обязательно должны быть в виде внутренней таблицы стилей в самом HTML-документе. Если вы сохраните инструкции CSS во внешней таблице стилей, то есть в отдельном файле, его можно будет использовать и для других документов.
Помимо основных инструкций по отображению, связанных с цветами, формами и типографикой элементов HTML, в CSS существуют более сложные модули. С их помощью можно, например, задавать анимацию или различные представления в зависимости от средства вывода. Таким образом, один и тот же HTML-документ может быть одинаково подготовлен для всех возможных носителей. Поскольку в этом документе содержание и дизайн разделены, код веб-сайта становится более понятным. Родственный язык стилей SASS предлагает еще больше возможностей, но он не полностью заменяет CSS.
Вы можете создать привлекательный дизайн сайта с помощью конструктора сайтов MyWebsite благодаря профессиональным шаблонам дизайна. Выберите один из множества шаблонов и найдите подходящий для вас стиль всего за несколько кликов. Предпочитаете доверить дизайн сайта профессионалам? В этом случае услуга MyWebsite Design Service — отличная альтернатива.
Структура утверждения CSS
CSS-указание определяет значения или свойства, которыми должны обладать элементы вашего электронного документа. В своей основной структуре утверждение состоит из селектора и фигурных скобок. Декларации перечисляются внутри скобок, разделяясь точками с запятой. Каждое объявление состоит из имени, двоеточия и конкретного значения. После последнего объявления и перед закрывающей скобкой может быть добавлена еще одна точка с запятой, но она не обязательна. Например, инструкция CSS в приведенном ниже примере требует, чтобы заголовок h1 отображался синим цветом и шрифтом размером 12:
Дополнительную информацию о различных типах селекторов и синтаксисе CSS можно найти в нашем подробном руководстве по CSS.
Как интегрировать CSS в ваш сайт?
Можно внедрить CSS в электронный документ с помощью внутренних и внешних таблиц стилей. Кроме того, свойства могут быть размещены непосредственно в исходном коде HTML элемента с помощью встроенного стиля. Далее мы представим обзор трех методов интеграции CSS в HTML.
Внешние таблицы стилей
Во внешних таблицах стилей инструкции CSS задаются во внешних файлах через окончание «.css» и интегрируются в HTML-файл через тег «link». Это наиболее распространенный метод, поскольку содержание и дизайн четко разделены и можно легко вносить изменения. Ссылка делается в области «head» HTML-документа следующим образом:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>Внутренние таблицы стилей
Здесь вы добавляете все инструкции CSS в HTML-файл. Обратите внимание, что они применяются только к соответствующему документу. Для внутренних таблиц стилей вставьте элемент «style» в область «head» HTML-документа следующим образом:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}
</style>
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>Внутренний стиль
Как и в случае с внутренней таблицей стилей, инструкции CSS содержатся в HTML-файле. Однако есть одно важное отличие: Соответствующие атрибуты располагаются непосредственно в начальном теге элемента и не применяются ни к какому другому элементу. Этот метод особенно удобен, если вы не хотите делать общие указания по оформлению.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>Взаимодействие CSS и HTML
Приведенные выше примеры показывают, что CSS можно использовать только в сочетании с классической структурой HTML. Поскольку HTML структурирует содержимое с помощью абзацев, списков и таблиц, а CSS заботится о визуальном оформлении, эти два веб-языка дополняют друг друга и тесно взаимосвязаны. Написание каскадных таблиц стилей часто вращается вокруг проектирования «коробок». Структура HTML-документа основана на принципе вложенности, при котором отдельные элементы располагаются друг на друге, как коробки. Каждая «коробка», занимающая место на сайте, имеет следующие свойства:
- padding: пространство, окружающее содержимое элемента
- граница: Линия, расположенная за пределами границы.
- margin: Пространство за пределами границы
Эти «коробки» затем форматируются путем указания размера, формы и цвета. Помимо этих простых атрибутов, существуют более сложные инструкции CSS для вставки теней в текст, добавления функций фильтрации для изображений и выделения форм и других элементов.
Как только вы поймете основные принципы языка таблиц стилей, их применение станет достаточно простым. Узнайте больше о главных трюках CSS, благодаря которым ваш сайт будет выглядеть еще более профессионально.