CSS

Кнопка CSSCSS (от англ. "Cascading Style Sheets" — "каскадные таблицы стилей") — это средство описания внешнего вида любого XML-документа (HTML, XHTML, SVG и т.п.) при помощи специального языка разметки. Преимущественно используется для оформления стандартных веб-страничек на сайтах.

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

В статье ниже мы раскроем особенности современного использования CSS в веб-дизайне, разберёмся с основными принципами создания каскадных таблиц стилей, а также рассмотрим некоторые полезные свойства данного языка разметки, которые Вы можете использовать на своих сайтах.

Что такое CSS? Руслан Тертышный

CSS Что такое CSS? Руслан Тертышный
Язык:Русский
Формат:
Обновлено:2015-10-15
Автор:





Что такое CSS? Руслан Тертышный

Умение работать с каскадными таблицами стилей пригодится каждому начинающему и уже состоявшемуся веб-разработчику или владельцу собственного сайта. Разобраться с основами CSS Вам поможет наша статья.

Кто знает HTML, тот наверняка обращал внимание, что в нём существует ряд тегов и свойств, которые описывают не только структуру документа, но и его внешний вид. Например, тег <FONT>, который задаёт цвет выделенного текста, или свойство border, указывающее на наличие рамки у элемента и её толщину...

Вплоть до версии HTML 4.0 (1997 – 1998 гг.) большинство веб-разработчиков активно использовали подобные конструкции. Сайты тогда, в основном, верстались при помощи таблиц, а в их коде контент страниц был перемешан с тегами оформления. Однако, в 1998 году появилась новая версия CSS 2.0, которая задала тенденцию перехода к блочной вёрстке и отделению контента от его стилей.

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

Пока же предлагаю ознакомиться с каскадными таблицами стилей в том виде, в каком они есть сейчас.

Основы CSS

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

На практике это означает следующее. Если мы, например, задали для тега <BODY> цвет текста, скажем, зелёный, то все текстовые элементы на странице (по сути весь видимый контент страницы является вложенным в тег body) станут зелёными :) Отменить действие стиля нельзя (в этом вся суть каскадности), но можно его переназначить, задав для нужных элементов новое оформление:

Пример каскадности CSS

На скриншоте выше мы видим, что стили прописаны в "голове" (секция HEAD) HTML-документа и ограничены тегами <STYLE>...</STYLE>. Это не единственный и не самый лучший способ объявлять стили, но для наглядности мы пока остановимся на нём (о том, как подключить CSS иными способами речь пойдёт чуть ниже).

Сейчас нас интересует только принцип описания стилей. Этот принцип имеет название "синтаксис CSS". В основе своей он довольно прост для понимания, если Вы уже знаете HTML или хотя бы английский. Описать синтаксис CSS можно несколькими правилами:

  1. Каждый стиль всегда состоит из двух частей: селектора (типа или имени элемента на странице, к которому применяется оформление) и списка параметров внешнего вида, заключённого в фигурные скобки (этот список называют ещё блоком определения). В общем случае стилевое правило выглядит так:
    селектор {параметры оформления}.
  2. К одному селектору (или группе селекторов) можно применить неограниченное число параметров. Главное – они должны находиться в одной группе (между фигурными скобками) и отделяться друг от друга точкой с запятой. При этом после крайнего свойства ставить точку с запятой не обязательно:
    селектор {первый параметр; второй параметр; третий параметр}
  3. Каждый параметр оформления состоит из двух частей: названия регулируемого свойства элемента и значения этого свойства, которое отделяется двоеточием. Исходя из этого, предыдущее правило можно записать примерно так:
    селектор {первое-свойство: значение; второе-свойство: значение; третье-свойство: значение}
  4. Наличие отступов (табуляции), переносов строк и пробелов между описаниями стилевых правил и внутри них необязательно, однако позволяет сделать код более удобным для восприятия.
  5. Фрагменты кода или поясняющие записи к нему можно экранировать при помощи комментариев, которые ограничиваются символами "/*" в начале и "*/" в конце.

Все вышеперечисленные правила можно выразить в одной картинке:

Синтаксис CSS

Вот, собственно, и вся основа синтаксиса CSS. Исключений из вышеописанных правил нет, но есть некоторые дополнения, о которых Вы узнаете далее по ходу чтения статьи.

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

  • внешний вид, размер и цвет текстовых элементов;
  • фоновые цвета и изображения;
  • позицию отдельных элементов по отношению к другим;
  • отступы внутри блоков и между ними;
  • наличие и внешний вид обводки блочных и строчных элементов;
  • внешний вид специфических блоков, типа, списков, ссылок и таблиц;
  • видимость или невидимость определённых фрагментов на странице.

Различных свойств для разных тегов существует довольно много. В данной статье мы не ставим цели рассмотреть их все. Мы, лишь, ознакомимся с часто используемыми на практике структурами и приёмами работы с CSS. Если же Вам нужен полноценный справочник и самоучитель, очень рекомендую Вам ресурс https://www.wisdomweb.ru/, на котором всё написано просто и с примерами.


Подключение CSS

Теперь, когда мы уже имеем понятие о том, что такое стилевые правила и зачем они используются, разберёмся как можно внедрить их в HTML-документ. Всего существует 4 способа подключения CSS:

  1. Подключение внешнего файла с расширением .css посредством тега <LINK>:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<LINK rel="stylesheet" type="text/css" href="style.css">

</HEAD>

<BODY>

</BODY>

</HTML>

  1. Подключение внешнего CSS-файла внутри тега <STYLE> при помощи директивы @import:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<STYLE media="all">@import url(style.css);</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

  1. Прописывание стилей прямо на HTML-странице в теге <STYLE>.

<!DOCTYPE HTML>

<HTML>

<HEAD>

<STYLE>

* {margin: 0; padding: 0}

body {background: #FED56A}

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

  1. Прописывание стилей для конкретных тегов на странице при помощи свойства style="".

<!DOCTYPE HTML>

<HTML>

<HEAD>

</HEAD>

<BODY>

<P style="color: red; font-family: Tahoma, Verdana; font-weight: bold">Я стильный абзац :)</P>

</BODY>

</HTML>

Каждый из способов имеет свой приоритет выполнения. Самый низкий приоритет у первого способа подключения внешнего CSS-файла через тег <LINK>. Второй и третий способы равнозначны. По сути, второй способ импортирует стили из внешнего файла и прописывает их во внутренние, но не везде корректно работает. Наивысший же приоритет у строковых стилей, заданных при помощи атрибута style конкретному элементу на странице.

На практике это означает, что вначале будут применены стили, объявленные прямо в тексте страницы, затем (если строковых стилей не нашлось) те, которые прописаны в "голове" документа, а, в последнюю очередь, оформление, заданное во внешнем CSS-файле.

Селекторы CSS

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

В примерах выше мы рассматривали только селекторы конкретных тегов. Однако, на практике, довольно часто приходится из всей массы контента с одинаковыми тегами выделять только определённую их часть. Поэтому, кроме селекторов тегов существует ещё ряд различных типов селекторов и их комбинаций. Предлагаю рассмотреть их в виде таблицы:

Тип селектора Пример Применение Версия CSS
Весь документ * Применяется для выбора всех элементов на странице 2
Тег p Применяется для оформления всех элементов на странице c заданным тегом (в данном случае абзацы) 2
Идентификатор #id1 Применяется для выбора одного элемента с указанным идентификатором (например, <p id="id1">). Идентификатор должен быть уникальным и встречаться на странице только раз. 2
Класс .class1 Применяется для выбора всех элементов на странице с указанным классом (например, <p class="class1">). В отличие от идентификатора, может использоваться на странице неограниченное количество раз для разных элементов. 2
Атрибут [class="class2"] Применяется для выбора всех элементов на странице с указанным в квадратных скобках атрибутом (например, <p class="class2">). Имеет более высокий приоритет, чем простые селекторы классов и идентификаторов. Может использоваться как со значением атрибута, так и без него. 2
Атрибут с подстрокой в значении [class*="3"] Применяется для выбора всех элементов на странице, атрибуты которых содержат указанную подстроку (например, <p class="class3">). 3
Тег тег p span Применяется для выбора всех потомков, указанного первым элемента, c заданным тегом (приведённый пример найдёт и оформит все фрагменты <span> внутри абзацев). 2
Тег + тег p + span Применяется для выбора только тех потомков, указанного первым элемента, c заданным тегом, которые идут непосредственно после тега родительского элемента (например, так сработает: <p>Текст <span>сработает</span></p>, а так нет: <p>Текст <b>ещё текст</b> <span>уже не сработает</span></p>). 2
Тег~тег p~span Применяется для реверсивного выбора родительских элементов, которые идут непосредственно перед тегом дочернего элемента (например, при такой конструкции: <p>Текст <span>сработает</span></p> будет найден и оформлен абзац, но не содержимое <span>). 3
Тег.класс или Тег#идентификатор p.class4 Применяется для выбора конкретных элементов, чаще всего, с заданным классом (реже идентификатором) (приведённый пример выберет все абзацы <p class="class4"). 2

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

Псевдокласс Пример Применение Версия CSS
:link a:link Выбирает все непосещённые ссылки на странице 2
:visited a:visited Выбирает все посещённые ссылки на странице 2
:hover p:hover Оформляет элемент, над которым в данный момент находится курсор 2
:active div:active Оформляет элемент, на котором зажата левая кнопка мыши 2
:first-child p:first-child Оформит элемент, являющийся первым потомком объявленного ранее элемента (например, первый абзац в конструкции <div><p>Первый абзац</p><p>Второй абзац</p></div>) 2
:last-child p:last-child Оформит элемент, являющийся последним потомком объявленного ранее элемента (например, второй абзац в конструкции <div><p>Первый абзац</p><p>Второй абзац</p></div>) 3
::selection p::selection Оформит выделенный пользователем текст внутри абзаца. 3
:not(селектор) :not(p) Оформит все элементы, кроме указанного в скобках (в данном примере все кроме абзацев). 3
:checked input:checked Применяется для оформления выбранных пользователем элементов ввода типа радиокнопки или флажка. 3
:before и :after p:before{content:"Вставка";} Применяется для вставки символов, слов или фрагментов текста перед (before) или после указанного элемента. Для вставки используется обязательное свойство content. 2

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

Блочная модель документа и позиционирование блоков

В 90-х и ранних 2000-х годах практически все сайты использовали приём под названием "табличная вёрстка". Суть его была в том, что в качестве сетки для макета страниц создавалась невидимая таблица (со скрытыми рамками), в ячейках которой отображался контент и различные элементы оформления.

Табличная вёрстка могла быть фиксированной (каждой ячейке задавалась строгая ширина в пикселях) или "резиновой" (вместо точных размеров использовали процентные значения). Такой принцип вёрстки был достаточно простым и очевидным, однако, требовал использования таблиц не по назначению, а значит, нарушал семантику веб-страницы.

Трёхколоночный резиновый макет сайта, табличная вёрстка

Суть блочной вёрстки

Распространение же CSS 2.0, как говорилось выше, позволило практически полностью отделить контент от его стилевого оформления поэтому на свет появился новый принцип, актуальный по сей день – "блочная вёрстка".

Трёхколоночный резиновый макет сайта, блочная вёрстка

В основу нового подхода была положена так называемая блочная модель. Суть её сводится к тому, что контент страницы располагается в независимых или вложенных друг в друга блоках, расположение которые можно довольно гибко менять при помощи CSS. Основа же блочной вёрстки – блок (обычно <DIV> или современные семантические блочные элементы <HEADER>, <SECTION>, <ARTICLE> и т.п.):

Блочная модель

Каждый блок, помимо явно заданных свойств width (ширина) и height (высота), состоит из нескольких компонентов, которые влияют на его размеры. Во-первых, это отступы от текста до границы внутри блока, выражаемые свойством "padding", а также отступы между блоками снаружи, задаваемые свойством "margin".

Во-вторых, как и у таблиц, у блоков может быть рамка, выражаемая свойством "border". Однако, в отличие от ячеек таблиц, рамки блока выходят за его границу, увеличивая его реальные ширину и высоту. Частично это решается добавлением ко всему документу свойства "box-sizing: border-box", однако, это свойство было внедрено только в CSS 3.0 и не поддерживается старыми браузерами.

Кстати, блоком может быть не только элемент изначально блочного типа. Любой строчный элемент, вроде абзаца (<P>), заголовка (<H1>, <H2>...) или текстового фрагмента (<SPAN>) средствами CSS можно представить как блок. Для этого используется свойство "display" со значением "block" или "inline-block". При помощи же значения "inline" можно наоборот, блок (например, <DIV>) сделать строчным элементом.

Позиционирование блоков

По умолчанию блоки располагаются друг под другом в порядке их прописывания в теле HTML-документа. Это называется стандартным потоком. Однако, при вёрстке практически любого сайта поток приходится то и дело нарушать, поскольку некоторые блоки требуется разместить в ряд.

Сделать это можно различными способами, причём у каждого есть как свои плюсы, так и недостатки, поэтому универсального рецепта, увы, пока нет. Выбор того или иного метода зависит от конкретных задач, которые стоят перед нами как верстальщиками. Наиболее часто используемыми методами являются:

  • относительное позиционирование ("position: relative") в сочетании со свойствами "float" и "clear";
  • абсолютное позиционирование ("position: absolute") в сочетании со свойствами "left" и "right" для размещения блоков с нужными отступами;
  • смешивание вариантов позиционирования с вложением блоков;
  • использование новых свойств CSS 3.0 "flex" и "grid";
  • динамичная смена позиционирования при помощи медиа-запросов.

Современные свойства, которые появились в CSS 3.0 значительно упрощают процесс вёрстки, однако, пока далеко не все браузеры поддерживают новые стандарты. Поэтому, особое внимание уделим старым примерам с относительным и абсолютным позиционированием:

Смешанное позиционирование

На скриншоте выше мы можем видеть шесть блоков разного цвета. Красный, синий и розовый с серой обводкой имеют относительное позиционирование, а первые два ещё и обтекание слева. Зелёный и жёлтый квадраты позиционируются абсолютно со строго заданными отступами от верхнего и левого края. Розовый же блок с чёрной обводкой добавлен для сравнения в самом конце и имеет относительное позиционирование.

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

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

Это свойство можно использовать, например, для создания жёсткого каркаса сайта или реализации плавающих и перекрывающихся блоков. Относительное же позиционирование удобно использовать для создания адаптивных сеток, поскольку оно не нарушает стандартный поток данных.

Адаптивная и отзывчивая вёрстка

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

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

Пример отзывчивой вёрстки

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

Для реализации такого типа вёрстки пользуются специальным нововведением CSS под названием медиа-запросы (англ. "media queries"). Это специальные директивы типа "@media", которые могут проверять ряд параметров устройства, запрашивающего страницу и в зависимости от полученных данных менять её оформление.

Чаще всего медиа-запросами меняют стили для всех типов устройств сразу (@media all), только для смартфонов и планшетов (handheld), принтеров (print) или в зависимости от текущего размера экрана (screen). Также медиа-запросы поддерживают логические операторы "and" (и), "not" (не) и "only" (только), которые позволяют уточнить сферу их влияния. Кроме того существует ряд специальных медиа-функций:

  • min-aspect-ratio и max-aspect-ratio для определения соотношения ширины к высоте (указывается через слеш, например 4/3 или 16/9);
  • color, min-color и max-color для определения количества поддерживаемых дисплеем цветов;
  • min-height и max-height для определения высоты отображаемой области;
  • min-width и max-width для определения ширины отображаемой области;
  • grid для проверки поддержки устройством фиксированных размеров символов;
  • orientation для проверки текущей ориентации смартфона или планшета;
  • min-resolution и max-resolution для проверки разрешения экрана в точках на дюйм (DPI).

Для создания большинства сайтов с адаптивной вёрсткой обычно достаточно использовать проверку на соответствие ширины экрана устройства нужной максимальной или минимальной ширине. Примерно это выглядит так: "@media screen and (max-width : 480px)". Здесь директиве "@media" мы даём задачу узнать размер экрана и выполнить форматирование, если ширина не превышает 480 пикселей.

В качестве примера немного дополним код нашего блочного трёхколоночного макета. Сделаем так, чтобы при размерах области просмотра менее 640 пикселей левое меню отображалось над областью контента, сам контент отображался во всю ширину экрана, а правое меню исчезало. Для этого достаточно одной директивы "@media screen and (max-width : 640px)" и ряда новых стилевых правил в ней:

Пример работы медиа-запросов

Мы практически не трогали код страницы, а только дописали медиа-запрос в конце стилей, но получили нужный результат! На практике, увы, для нормальной адаптации свёрстанных ранее страниц иногда приходится частично переписывать и стили и даже сам код страницы, однако, иногда будет достаточно, как и в нашем примере, всего лишь незначительных правок.

Сами медиа-запросы ничего особо страшного собой не представляют. Однако, я, изучая их, столкнулся с одной особенностью: при тестировании на компьютере всё работало, как надо, но на реальном смартфоне ожидаемых изменений не происходило... Оказалось, причина в том, что на устройствах с небольшими экранами величина пикселя тоже может быть уменьшенной!

Решение данной проблемы весьма просто, но мне в своё время пришлось потратить пару часов на его поиски. А сводится всё к тому, что в "голове" HTML-страницы нужно прописать специальный META-тег, касающийся параметров области просмотра (англ. "viewport"):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Данный META-тег обращается к свойству ширины экрана устройства и устанавливает размер пикселя равным единице. Теперь если, например, у нас ширина экрана смартфона равна 1280 пикселей, но сами пиксели уменьшены вполовину, то прописанная инструкция будет считать каждую пару пикселей как один. В результате этого реальная полезная ширина устройства станет 640 пикселей и медиа-запросы будут работать!

Выводы

Вот мы с Вами и закончили обзорное знакомство с каскадными таблицами стилей. Мы ознакомились с синтаксисом CSS, сферами его применения, принципами блочной и адаптивной вёрстки. За кадром остались, пожалуй, только сами свойства CSS, которых довольно много и которым посвящены специальные онлайн-справочники.

В дополнение к статье Вы можете скачать архив, содержащий все тестовые странички с примерами, которые мы рассмотрели в виде скриншотов. На базе данных примеров Вы можете производить собственные эксперименты по вёрстке или даже использовать их в качестве простейшего шаблона для собственного сайта :)

А вообще CSS – это довольно интересная штука... Это как ребус или кроссворд, подобрав правильные слова к которому, Вы сможете увидеть красивую картинку, то бишь, сайт. Учите каскадные таблицы стилей – не дайте своему мозгу зачахнуть! :)

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

P.P.S. Если Вы уже хорошо освоили HTML и CSS, возможно Вы уже захотите создавать более серьёзные сайты на полноценном языке программирования PHP, статью о котором можете прочесть здесь:
https://www.bestfree.ru/article/webdesign/language.php







Полезный совет:



Система проверки ошибок от Mistakes.ru