Возможности css: 6 мощных возможностей CSS, которые позволяют обойтись без JavaScript

Что такое CSS, для чего нужны стили CSS

CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

Зачем используется CSS

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

Такая технология:

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

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

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

CSS можно охарактеризовать простыми словами как набор правил, описывающих, как должен выглядеть элемент.

Правило состоит из селектора и блока объявлений.

css1.png

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс {свойство: значение;}». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор {свойство: значение;}». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

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

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

CSS можно связать с HTML несколькими способами:

• внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
• добавить тег <style> с атрибутом type=»text/css»;
• подключить внешнюю таблицу стилей: <link rel=»stylesheet» href=»путь до style.css» type=»text/css»/>.

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

Возможности CSS, которые вам понравятся в 2015 — Блог HTML Academy

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

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

CSS-селекторы четвёртой версии

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

Отрицающий псевдокласс not

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

В четвёртой версии вы можете передавать список селекторов через запятую.

Псевдокласс has

Этот псевдокласс принимает список селекторов в качестве аргумента и CSS-свойства будут применяться, если любой из переданного списка селекторов найдёт подходящий элемент. Лучше посмотреть на примере. Здесь каждому элементу a, который содержит в себе изображение, будет нарисована чёрная рамка:

Во втором примере я совмещаю :has и :not и выбираю только те элементы li, которые не содержат элемент p:

Псевдокласс совпадения matches

Этот псевдокласс означает, что мы можем применить правила к группе селекторов, например:

Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.

Режимы наложения в CSS

Если вы знакомы с режимами наложения в фотошопе, тогда, возможно, вас заинтересует спецификация смешивания и наложения. Эта спецификация позволяет нам применять режимы наложения к фонам и любым HTML-элементам прямо в браузере.

В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode в значения hue и multiply, я могу применить интересный эффект к изображениям.

Свойство mix-blend-mode позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h2 и затем в .box2 я устанавливаю mix-blend-mode: screen.

Режимы наложения в CSS на удивление хорошо поддерживаются современными браузерами, за исключением Internet Explorer. background-blend-mode и mix-blend-modeдоступны в Safari и Firefox, в качестве экспериментальной опции в Opera и Chrome. При осторожном использовании это как раз тот вид спецификации, с которым можно поиграться, чтобы усовершенствовать ваш дизайн, при условии, что будет запасной вариант для браузеров не поддерживающих эту возможность.

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

Узнайте больше об использовании режимов наложения в статье на CSS Tricks, на сайте Adobe и Dev Opera.

Функция calc

Функция calc() является частью модуля CSS-значений и единиц измерения третьей версии. Она даёт возможность выполнять математические вычисления прямо в CSS.

В качестве простого примера можно использовать calc() для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px от верхнего левого угла, вы должны использовать:

Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc() означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:

В современных браузерах calc() хорошо поддерживается, хотя использование для вычисления позиции фона в IE9 приводит к падению браузера.

CSS-хитрости и функция calc() — забавная статья об использовании calc() для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.

CSS-переменные

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

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

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

Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.

CSS-исключения

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

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

Поддержка браузерами исключений и wrap-flow: both сейчас ограничена IE10+, требующим префикс -ms. Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.

CSS-фигуры

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

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

Фигуры поддерживают Chrome и Safari, это означает, что вы можете начать использовать их для устройств с iOS. Во второй версии спецификации вы сможете придавать форму тексту внутри элементов при помощи свойства shape-inside, а с этим придёт много интересных возможностей.

Вы можете узнать больше о фигурах в статьях (один и два) на A List Apart.

CSS-сетки

Самую интересную тему я оставил напоследок. Я большой фанат появления спецификации по сеткам с момента первой реализации в Internet Explorer 10. CSS-сетки предоставляют нам способ создавать при помощи CSS структурные сетки и размещать на них наш дизайн.

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

В примере ниже мы объявляем сеткой элемент с классом .wrapper. Он содержит три колонки с шириной в 100px, отступом в 10px между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.

Поддержка браузерами последней спецификации сеток ограничена Chrome с отметкой «экспериментальная возможность». Существует приличная реализация начальной версии спецификации в Internet Explorer 10 и выше.

Узнать больше о сетках вы можете на моём сайте Grid by Example, где можно увидеть несколько примеров сеток, которые работают в Chrome с включёнными экспериментальными возможностями. Я также делал доклад на CSS Conf EU по сеткам и вы можете посмотреть это видео на YouTube.

У вас есть любимая новая спецификация, не рассмотренная здесь?

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

Основы CSS — Изучение веб-разработки

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

Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки — это

p {
  color: red;
}

Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles.

Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

1. Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между <head> и </head> тегами:

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

2. Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:

Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

Анатомия набора правил CSS

Вся структура называется набором правил (но зачастую для краткости «правило»). Отметим также имена отдельных частей:

Селектор (Selector)

Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.

Объявление (Declaration)

Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.

Свойства (Properties)

Способы, которыми вы можете стилизовать определённый HTML элемент (в данном случае,  color является свойством для элементов <p>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.

Значение свойства (Property value)

Справа от свойства, после двоеточия, у нас есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color, помимо red).

Обратите внимание на важные части синтаксиса:

• Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ({}).
• В каждом объявлении необходимо использовать двоеточие (: ), чтобы отделить свойство от его значений.
• В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.

Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Выбор нескольких элементов

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

Разные типы селекторов

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

Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US).

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

1. Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент <link> где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами <head> и </head>). Это будет выглядеть примерно так:

   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

   Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.
2. Затем, удалите существующее правило в вашем style.css файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.
3. Добавьте следующие строки в нужное место, заменив строку placeholder актуальной font-family строкой, которую вы получили из Google Fonts. (font-family просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <html> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же font-size и font-family):

   html {
     font-size: 10px; 
     font-family: placeholder: здесь должно быть имя шрифта из Google fonts
   }

   Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.

4. Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (<h2> (en-US), <li>, и <p>). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:

   h2 {
     font-size: 60px;
     text-align: center;
   }
   
   p, li {
     font-size: 16px;
     line-height: 2;
     letter-spacing: 1px;
   }

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

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

Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

• padding, пространство только вокруг контента (например, вокруг абзаца текста)
• border, сплошная линия, которая расположена рядом с padding
• margin, пространство вокруг внешней стороны элемента

В этом разделе мы также используем:

• width (ширину элемента)
• background-color, цвет позади контента и padding элементов
• color, цвет контента элемента (обычно текста)
• text-shadow: устанавливает тень на тексте внутри элемента
• display: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)

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

Изменение цвета страницы

Разбираемся с телом

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Теперь для <body> элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:

• width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
• margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
• background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для <html> элемента, но не стесняйтесь и экспериментируйте.
• padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
• border: 5px solid black; — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.

Позиционирование и стилизация нашего заголовка главной страницы

h2 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента <h2> (en-US) (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0;.

Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

Здесь, мы использовали одно довольно интересное свойство — это text-shadow, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

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

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

Центрирование изображения

img {
  display: block;
  margin: 0 auto;
}

В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент <body> является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.

Примечание: Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для <body> (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы <body> и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путём установки свойства width для <img> элемента меньшего значения (например 400 px;).

Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

Что такое CSS, для чего нужны каскадные таблицы стилей CSS

CSS – это язык, с помощью которого описывается внешний вид документа HTML, XML, XHTML. Название означает «каскадная таблица стилей», или Cascading Style Sheets. CSS-стили незаменимы при оформлении страниц сайтов: в одном файле содержатся сведения об отображении всех элементов документа.

Для чего используется CSS

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

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

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

Как развивалась технология

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

• CSS2. Стандарт расширил технические возможности, дал возможность работать с аудио и страничными носителями (например, при печати документов), включил в себя поддержку блочной структуры и генерируемого содержимого;
• CSS3. Еще более масштабное расширение, находится в разработке до сих пор, поддерживает сглаживание, градиенты, тени и анимацию, для этого не приходится использовать JavaScript;
• CSS4. Находится в разработке, новые модули пока доступны как черновики. Дополняют предыдущие версии новыми расширениями и значениями.

Синтаксис и структура

Файл CSS сводится к набору правил, описанных по определенному синтаксису. Правило состоит из селекторной части и блока объявлений: ими описываются всевозможные элементы страницы. Формат примерно таков: селектор { параметр: значение }.

Селекторы. Указывают, к каким элементам будут применяться те или иные параметры стиля. Пишутся в начале строки, по сути, являются названиями тегов, для которых справедливо правило.

• Можно использовать любой тег, написанный латиницей.
• Если вариантов стиля для одного типа элементов несколько, используются так называемые классы. У одного тега их может быть несколько (применяются все стили, что описаны в таблице). Запись в этом случае выглядит так: тег.Класс { параметр: значение }.
• Есть возможность видоизменить только один конкретный элемент. Это делается с помощью идентификаторов – уникальных имен, которые можно присвоить элементам. Идентификатор будет использоваться как селектор.
• Можно создавать правила, которые применяются к какому угодно тегу, если он входит в тот или иной класс. Строку нужно начать с .Класс без указания тега.

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

Как подключить стили CSS

Элементы CSS можно использовать внутри HTML-документа с помощью тега <style> и атрибута type=»text/css» или за счет атрибута style без указания селектора. Но более распространенный способ – выносить стили в отдельный файл и подключать с помощью такой строчки: <link href=»ссылка на таблицу» rel=»stylesheet»>. Значение аргумента rel показывает, что это CSS-стили.

Другие термины на букву «C»

Теги термина

Несколько причин использовать таблицу стилей CSS. Возможности и функции CSS.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Уроки CSS. В этой рубрике уже есть публикации CSS правила и CSS синтаксис, CSS свойства. Я хочу поговорить о том, почему просто необходимо использовать таблицу стилей CSS и о возможностях CSS. Давайте вспомним две публикации из рубрики CSS меню: горизонтальное CSS меню для сайта и Горизонтальное выпадающее CSS меню, вертикальное выпадающее CSS меню. Там вы наглядно можете увидеть всю простоту и легкость оформления при помощи каскадных таблиц стилей CSS.

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

При помощи CSS можно создавать и удалять рамки вокруг HTML документа, CSS позволяет изменять шрифты, цвет шрифта, размер шрифта. CSS позволяет управлять отступа между HTML элементами и внутри HTML элементов.

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

Не забываем подписываться на RSS-ленту, twitter и на публичную страницу Вконтакте.

Возможности CSS или почему использовать HTML атрибуты – это смертный грех.

Содержание статьи:

Конечно, использовать HTML атрибуты приходится и очень часто, например, когда вы создаете рассылку на e-mail, вы никуда просто не денетесь от тегов <font>, <span>, тегов логического форматирования и тегов непосредственного форматирования. Часто используются атрибуты: href, id, class, title, onclick и т.д., в общем, все HTML атрибуты, которые относятся к группе универсальных HTML атрибутов и атрибутов событий HTML.

Но поверьте, использовать атрибуты: color, background и пр. для оформления страниц вашего сайта – это смертный грех! Во-первых, такие страницы не будут валидны, во-вторых вы дико увеличиваете объем кода ваших страниц, а соответственно  и объем работы и затраченное времени, а время – деньги.

Но зачем что-то говорить? Давайте лучше посмотрим на примере возможности таблицы стилей CSS. Давайте создадим HTML заголовок <h2>:

<h2>Самый главный заголовок</h2>

А наш заказчик нам говорит: хочу, чтобы все заголовки моего сайта были синего цвета, фон вокруг заголовка был серым, он обязательно должен быть написан курсивным шрифтом, заголовок должен быть подчеркнут. Да, в HTML есть все средства, чтобы это сделать, но чтобы это сделать, помимо тега <h2> нам необходимо использовать теги <u> и <font> и массу HTML атрибутов. Все, что я написал выше в таблице стилей CSS уместится в одно CSS правило:

h2{ color:#555; font: italic 2 em Times; text-decoration:underline; background:gray; }

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

h2{ color:#555; font: italic 2 em Times; text-decoration:underline; background:gray url(newpict.png) repeat x; border: 2px solid orange; margin-bottom:0; padding: 7px; }

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

Простота и легкость CSS стилей. Уменьшаем объем кода при помощи CSS. Функции CSS.

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

Допустим, у нас есть HTML документ, в котором очень много заголовков второго и третьего уровня, и мы хотим, чтобы текст заголовков второго уровня был зеленым, а текст заголовков третьего уровня был красным. Чтобы изменить цвет текста средствами HTML мы должны использовать тег <font> и атрибут color для каждого заголовка, то есть для каждого элемента <h3> и <h4>(HTML цвета, таблица цветов RGB):

<h3><font color=”green”>Второй по важности заголовок</font></h3> <h4>><font color=”red”>Третий по важности заголовок</font></</h4> <h3>Второй по важности заголовок</h3> <h4>Третий по важности заголовок</h4> <h3>Второй по важности заголовок</h3> <h4>Третий по важности заголовок</h4> <h3>Второй по важности заголовок</h3> <h4>Третий по важности заголовок</h4>

Я не мазохист, поэтому не буду изменять цвет всех заголовков средствами HTML, а воспользуюсь возможностями каскадной таблице стилей CSS:

h3{ color: green; } h4{ color:red; }

Все, теперь все HTML заголовки второго уровня на странице будут зеленые, а заголовки третьего уровня красный. Более того, если вам захочется поменять цвет заголовков, то вы просто откроете таблицу стилей CSS и измените всего лишь одну строчку, а не 20 или 30 строк. Точнее, мы просто изменим одно единственное CSS правило и всё!

Но я подозреваю, что вам этого мало, хорошо, давайте так: помните пример из предыдущего раздела с заголовком первого уровня. Представим ситуацию, заказчик говорит: хочу, чтобы все заголовки на сайте выглядели так же, как и заголовок первого уровня. Ну вот давайте, пишите теги <font>, <u>, пишите HTML атрибуты, да ладно, шучу я, достаточно просто изменить одну строку в таблице стилей CSS, просто добавить CSS селекторы к существующему CSS правилу:

h2, h3, h4, h5, h5, h6{ color:#555; font: italic 2 em Times; text-decoration:underline; background:gray url(newpict.png) repeat x; border: 2px solid orange; margin-bottom:0; padding: 7px; }

Теперь все заголовки на web-странице будут выглядеть одинаково, а те, кто считает, что HTML атрибуты понятней и проще для оформления, пусть попробуют поставить таймер и засечь за какое время они зададут стили для 20-30 заголовков на странице при помощи HTML, у меня на это ушло 3 секунды.

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

Применение CSS стилей для нескольких документов. CSS файл.

Помимо того, что вы можете объединять CSS стили и CSS правила в один документ, вы можете использовать одну таблицу стилей CSS сразу для большого числа документов. Вы можете создать один CSS файл и подключать его к различным HTML документам, точнее импортировать CSS файл во множество документов. Именно таким образом сейчас оформляются все сайты, создаются темы для WordPress, шаблоны для Joomla и темы Drupal.

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

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

Введение в CSS2

В этом примере мы покажем, как легко можно сделать простые таблицы стилей. Для этого примера вы должны немного знать HTML (см. [HTML40]) и некоторую общепринятую терминологию.

Мы начнем с небольшого документа HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Для определения синего цвета текста элемента h2, вы должны внести следующую управляющую запись:

  h2 { color: blue }

Правила CSS состоят из двух основных частей: селектора (‘h2’) и объявления (‘color: blue’). Объявление имеет две части: свойство (‘color’) и значение (‘blue’). Пока пример содержит свойства только одного элемента, необходимого для представления документа HTML, он может быть только таблицей стилей для таблицы стилей. Скомбинированный с другими определениями стиля (одно из фундаментальных свойств CSS — возможность комбинирования таблиц стилей),он будет определять окончательный вид всего документа.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    h2 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Элемент LINK должен содержать:

• тип ссылки: на «stylesheet».
• расположение таблицы стилей в атрибуте «ref».
• тип таблицы стилей, на которую ссылаемся: «text/css».

Чтобы показать скрытые связи между таблицей стилей и структурной разметкой, мы продолжаем использовать элемент STYLE в этом примере. Добавим немного цвета:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    h2 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Таблица стилей теперь содержит два определения; первый указывает цвет элементу BODY: ‘red’ (красный), второй же определяет цвет элемента h2 как синий (‘blue’). Не определен цвет для элемента P, но он наследует цвет родительского элемента BODY. Элемент h2 также является наследником элемента BODY, но его определение имеет приоритет над наследованием значений свойств.В CSS часто встречаются конфликты между различными значениями, и эта спецификация описывает, как их разрешить.

CSS2 имеет более 100 различных свойств, включая ‘color’ (цвет). Давайте посмотрим на некоторые другие:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

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

Первая декларация в элементе BODY устанавливает начертание шрифта «Gill Sans». Если этот шрифт недоступен, броузер будет использовать начертание шрифта без засечек ‘sans-serif’. Sans-serif — одно из пяти семейств шрифтов, которые известны всем броузерам. Дочерние элементы BODY будут наследовать значение свойства ‘font-family’.

Вторая декларация устанавливает размер шрифта элементу BODY в 12 точек (points). Точка («point») общеупотребительный типографский термин для определения высоты шрифта и других линейных размеров. Это пример абсолютной единицы измерения, которая не изменяется в зависимости от окружения.

Третья декларация использует относительные размеры, которые пересчитываются вслед за окружающими величинами. Единица измерения «em» зависит от высоты шрифта элемента. В этом случае результатом будет величина отступа, равная утроенной высоте шрифта.

CSS может использоваться с любыми форматами структурирования документов, например, с eXtensible Markup Language (Расширяемым языком разметки) [XML10]. XML более зависит от таблиц стилей, чем HTML, так как авторы могут использовать свои собственные элементы, которые броузеры не умеют показывать.

Вот простейший фрагмент XML:

<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Чтобы показать этот фрагмент в читаемом виде, мы, во-первых, должны определить, какие элементы являются строчными (т.е., не разрывающими строки), а какие — блоковыми (т.е., разрывающими строки).

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

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

Одна из возможностей ссылаться на таблицу стилей из документа XML — это использовать указание:

<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Визуальные средства просмотра сформатируют этот пример так:

Заметим, что слово «flute» (флейта) показывается внутри абзаца, так как является содержимым строчного элемента INSTRUMENT.

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

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Визуальные средства просмотра сформатируют этот пример так:

Добавление большего числа определений стилей придаст более презентабельный вид вашему документу.

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

В этой модели броузер обрабатывает содержимое поэтапно:

1. Разбор документа и создание дерева документов.
2. Идентификация указанных медиа — типов.
3. Получение всех указанных в документе таблиц стилей, которые определяют используемые медиа-типы.
4. Присвоение каждому элементу дерева документа единственного значения для каждого свойства (property) указанных медиа-типов. Значения устанавливаются для свойств по правилам, описанным в разделе каскад и наследование.

   Часть, касающаяся расчета значений, зависит от алгоритма форматирования указанного медиа-типа. Например, для вывода на экран броузеры применяют модель визуального форматирования. Для вывода на печать броузеры применяют страничную модель. Если среда вывода — звуковое устройство (т.е., синтезатор речи), броузеры используют звуковую модель.

5. Из аннотированного дерева документа формируется структура форматирования. Часто структура форматирования имеет сходство с деревом документа, но они могут также иметь различия, особенно если авторы используют псевдо-элементы и автоматически генерируемое содержимое. Во-первых, форматированная структура не будет во всем подобна частям дерева документа — природа этой структуры зависит от применяемых средств. Во-вторых, форматированная структура может содержать больше или меньше информации, чем дерево документа. Например, если элемент дерева документа имеет значение ‘none’ для свойства ‘display’, этот элемент ничего не прибавит в форматированную структуру. С другой стороны, элемент списка может внести больше информации: содержимое элемента списка и информацию о стиле списка (т.е., картинка с меткой элемента списка).

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

6. Отправка форматированной структуры в указанную среду (т.е., печать результата, показ на экране, преобразование в речь, и т.д.).

Первый шаг лежит вне компетенции этой спецификации (см., например, [DOM]).

Шаги 2-5 подробно рассмотрены в спецификации.

Шаг 6 лежит вне компетенции этой спецификации.

2.3.1 Канва

Для всех сред термин canvas (канва, холст) описывается как «место, где отображается форматированная структура». Канва бесконечна для каждого измерения пространства, но отображение осуществляется для конечного участка канвы, используемого броузером и указанной средой вывода. Например, броузеры отображают на экран необходимый минимум ширины и выбирают ширину, основываясь на размерах видимой части окна экрана (viewport). Броузеры отображают страницы с сохранением пропорций высоты и ширины. Слуховые броузеры ограничены звуковым диапазоном, но не временем.

2.3.2 Адресная модель CSS2

Селекторы CSS2 и свойства позволяют таблицам стилей ссылаться на следующие части документа или броузера:

• Элементы в дереве документа и определенные отношения между ними (см. раздел селекторы).
• Атрибуты элементов в дереве документа, и значения этих атрибутов (см. раздел атрибуты селекторов).
• Некоторые части содержимого элементов (см. псевдо-элементы :first-line и :first-letter.
• Элементы дерева документа, когда они находятся в определенном состоянии (см. раздел псевдо-классы).
• Некоторые свойства канвы, где отображается документ.
• Некоторая системнаяч информация (см. раздел пользовательский интерфейс).

CSS2, как и CSS1 до этого, базируется на установленных принципах проектирования:

• Совместимость версий. Броузеры с поддеркой CSS2 будут понимать CSS1. Броузеры с поддержкой CSS1 способны читать CSS2 и исключать части, непонятные им. Также броузеры без поддержки CSS способны показать документ, содержащий стили. Конечно, стилевое содержимое, основанное на CSS, не будет отображено, но все содержание будет представлено.

• Дополнение со структурированными документами.. Таблицы стилей дополняют структурированные документы (т.е., HTML и XML), предоставляя стилистическую информацию в размеченном тексте. Возможно легко изменить таблицы стилей с небольшими изменениями или без изменений структурной разметки.

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

• Возможность поддержки. Помещая таблицы стилей в документы, вебмастер может легко поддерживать сайт и сохранять единый стиль всего сайта. Например, при изменении цвета обоев во всей организации, придется поправить только один файл.

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

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

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

• Разнообразие. Обеспечивая авторов большим количеством возможностей отображения эффектов, повышается роль веба как среды выражения. Дизайнеры мечтают об общедоступности приложений. Некоторые из желаемых эффектов отображения конфликтуют с независимостью от устройств, но CSS2 идет к удовлетворению всех требований дизайнеров.

• Поддержка альтернативных языков.. Установление свойств CSS, описанных в этой спецификации, формирует однородную модель форматирования для визуальных и слуховых представлений. Эта форматированная модель доступна с помощью языка CSS, также возможна поддержка других языков. Например, программа JavaScript может динамически изменять значение определенного у элемента свойства ‘color’.

• Доступность. Некоторые особенности CSS делают веб более доступным для людей с ограниченными возможностями:

  • Возможность управлять свойствами шрифта позволяет авторам исключить недоступные текстовые образы.
  • Свойства позиционирования позволяют авторам отказаться от хитростей в разметке текста (напр., невидимые изображения) для эффекта слоев..
  • Семантика !важных правил такова, что особо разборчивые пользователи могут использовать свои таблицы стилей.
  • Новое значение ‘inherit’ (наследование) для всех свойств улучшает преемственность поколений и позволяет легче и однороднее настраивать стили.
  • Улучшена поддержка сред, включая медиа-группы, устройства для слепых, tty медиа-типы, которые позволяют пользователям и авторам приспосабливать страницы для любых устройств.
  • Звуковые свойства дают возможность управлять голосовым и аудио-выводом.
  • Селекторы атрибутов, функция ‘attr()’и свойство ‘content’ предоставляют доступ к альтернативному содержанию.
  • Счетчики (сounters) и нумерование разделов и абзацев улучшает навигацию в документе, сохраняя пространство для отступов (это важно в устройствах для слабо видящих). Свойства ‘word-spacing’ и ‘text-indent’ исключают также необходимость добавления лишних проббельных символов в документе.

  Примечание. За дополнительной информацией о доступности документов с использованием CSS и HTML обращайтесь [WAI-PAGEAUTH].

20 впечатляющих приемов, библиотек и примеров CSS3

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

Кроме того, мы включили статьи, описывающие новые потрясающие возможности CSS3 и несколько полезных библиотек, полных CSS трюков. Так что здесь есть много чего, на чем можно задержать взгляд и чему поучиться, поэтому давайте лучше начнем!

Для того чтобы в полной мере насладиться этой подборкой, вам, возможно, нужно будет воспользоваться современным браузером, таким как Google Chrome.

Это действительно хорошо выполненный и выверенный пример меню, реализованного с помощью одного только CSS. На самом деле, здесь семь отдельных примеров! В них применена новая возможность перехода CSS3, а также изобретательно использованы селекторы для создания эффекта изящного размытия:

С помощью этого приложения вы можете создать и поиграться с поразительно реалистичными облаками. Тот факт, что такое приложение существует, наводит на мысль, что веб-дизайн может предложить бесконечные возможности. Код приложения достаточно сложен, так как использует 3D преобразования CSS3, а также код JavaScript:

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

А вот другое креативное применение CSS. В этих постах на tumblr буквы алфавита представлены в виде милых оживших картинок:

Простая, но очень стильная панель навигации. CSS-код для нее содержит всего 65 строк, но как вы можете видеть, внешний вид интерфейса впечатляет. Здесь были использованы новые возможности CSS3 (преобразование и переход) для придания эффекта глубины:

Это CSS вариант небольшой анимации дудла Google. Он справляется со своей задачей довольно хорошо — отлично анимирован, причем без какого-либо JavaScript!

Другой хорошо выполненный проект — на этот раз раздвижные панели. И снова все скользит как по маслу, не задействовав ни капельки JS, а детали отточены до последнего пикселя:

Красивое анимированное кольцо в одном элементе div и около сотни строк чистого CSS:

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

Это углубленная статья о новых «гибких» контейнерах или так называемых flexbox. Flexbox является новым CSS подходом к настройке макета страницы. Это отличный способ изменить ширину, высоту и выравнивание HTML элементов для наилучшего заполнения пространства:

В одном из наших прошлых уроков мы рассказали о том, как создать яркое меню навигации с анимированными выпадающими списками. Никаких ухищрений с изображениями или JavaScript – все сделано полностью с CSS:

Если вам интересны новые фильтры, предлагаемые CSS, мы рекомендуем вам ознакомиться с этим уроком. Он содержит хорошо подобранные примеры и полезную информацию о поддержке браузерами и вопросах производительности:

Это бесспорно одна из лучших статей о CSS, которую я когда-либо читал. В ней представлены фигуры (shape) CSS3, а также приводится много практических примеров того, как их создать и реализовать. Очень хорошо написано!

В этом уроке авторы объясняют, как создать простой индикатор выполнения без использования каких-либо сложных скриптов. Они задействуют всевозможные крутые методы CSS3 для добавления индикатору градиентов, полосок, блеска и свечения. Конечный результат выглядит изящно и готов к использованию (демо):

Эта библиотека очень популярна на github.com и на то есть причина! Она основана полностью на CSS и поэтому может повысить производительность любого приложения:

Spinkit — это коллекция легко настраиваемых индикаторов загрузки, от которых мы в полном восторге и используем довольно часто:

Заголовок говорит сам за себя — ничего больше, ничего меньше, просто огромная коллекция кнопок:

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

CSS библиотека для всплывающих подсказок, которая не требует использования JavaScript:

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

На этом наш список заканчивается. Надеемся, эта статья оказалась вам полезна и вдохновила на исследование безграничного (почти) мира дизайна с CSS!

Данная публикация является переводом статьи «20 Impressive CSS3 Techniques, Libraries and Examples» , подготовленная редакцией проекта.

7 уловок для повышения производительности CSS

Автор: Коди Арсено

Обновлено 28 апреля 2018 г.

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

Что такое CSS?

Каскадные таблицы стилей или CSS — это язык, используемый для определения визуального представления веб-сайта на основе содержимого, предоставленного в документе на языке разметки.Он считается одной из краеугольных технологий Интернета наряду с HTML и JavaScript. CSS обычно хранится во внешних таблицах стилей или файлах .css, , но его также можно интегрировать непосредственно в документы HTML.

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

Производительность CSS и скорость веб-сайта

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

• Время до первого байта
• Время для начала рендеринга

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

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

Как производительность CSS влияет на время начала рендеринга

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

Использование внешнего CSS включает в себя выполнение одного или нескольких HTTP-запросов, поэтому ваша цель должна заключаться в том, чтобы как можно больше минимизировать количество требуемых запросов.Например, объединение стилей ссылок вашего плагина, баннера и макета в один файл .css может значительно сократить время до первого рендеринга. У нас есть руководство по другим способам ограничения HTTP-запросов на веб-сайтах WordPress.

Повышение производительности CSS: введение в инлайнинг

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

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

Чтобы встроить CSS, просто скопируйте нужный код CSS из внешнего файла CSS и вставьте его между тегами стиля в разделе заголовка документа HTML, например:

  
    
    <стиль>
        .your-styles {
            font-weight: жирный;
        }

        .etc-etc {
            цвет: # 222222;
        }
    

  

Встраивание больших ресурсов CSS

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

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

После минификации и сжатия Gzip все ваши стили, скрипты и разметка в верхней части страницы в идеале должны иметь общий вес менее 14 КБ. Так как 14 КБ — это примерно объем данных, который сервер может отправить за первый цикл туда и обратно.Пребывание ниже этого порогового значения позволяет пользователям получить все необходимое в первом пакете данных, который они получают.

Повышение производительности CSS с помощью асинхронной загрузки и кэширования

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

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

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

Дополнительные советы по повышению производительности CSS

1. Используйте предварительную загрузку и HTTP / 2 push

Подсказка о предварительной загрузке ресурсов сообщает браузерам, что нужно извлекать ресурсы раньше, чем в противном случае. Чтобы дать CSS преимущество, установите его как тег ссылки в своем HTML-документе следующим образом:

В качестве альтернативы вы можете включить предварительную загрузку в качестве заголовка HTTP в конфигурацию вашего сервера:

  Ссылка: ; rel = предварительная нагрузка; as = style
  

Если ваш сервер настроен для HTTP / 2 (а он должен быть), предварительная загрузка будет интерпретироваться как принудительная загрузка сервера. KeyCDN также поддерживает отправку на сервер, что поможет еще больше ускорить доставку высокоприоритетных файлов CSS. Чтобы узнать больше, прочитайте наш блог с push-объявлениями сервера HTTP / 2.

2. Не вставляйте все содержимое

Не беспокойтесь о вставке всего содержимого HTML-файла, так как это приведет к увеличению размера исходного HTML-документа и, следовательно, займет больше времени для TTFB.

3. Объедините и минимизируйте свой CSS

Объединение ваших таблиц стилей в один файл и отправка уменьшенной версии может значительно уменьшить размер вашего CSS. Узнайте больше об этом процессе в нашей статье о минимизации CSS, JS и HTML.

4. Уменьшите размер ваших таблиц стилей

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

5. Будьте избирательны в своих селекторах

Говоря о селекторах, использование селектора потомка заставляет браузеры проверять все ваши дочерние элементы на совпадение, поэтому они могут создать больше проблем, чем вращать. Универсальные селекторы также могут быть довольно дорогостоящими, поэтому также избегайте их использования. По возможности используйте неглубокие селекторы.

6. Избегайте дорогих свойств

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

• border-radius
• box-shadow
• filter
• : nth-child
• position: fixed;
• transform

Использовать вышеупомянутые свойства здесь и там не проблема, но если они появляются сотни раз на странице, то общая производительность CSS может пострадать.

7. Избегайте

Никогда не используйте директиву @import для включения внешних таблиц стилей, поскольку она блокирует параллельные загрузки.Это архаичная практика. Вместо этого всегда используйте тег ссылки.

Сводка

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

Что такое CSS? — Изучите веб-разработку

CSS (каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как это работает под капотом? В этой статье объясняется, что такое CSS, на простом примере синтаксиса, а также рассматриваются некоторые ключевые термины, связанные с языком.

В модуле «Введение в HTML» мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше обычного текста, абзацы переходят на новую строку и имеют пробелы между ними. Ссылки окрашены и подчеркнуты, чтобы их можно было отличить от остального текста. То, что вы видите, — это стили браузера по умолчанию — очень простые стили, которые браузер применяет к HTML, чтобы убедиться, что он будет в основном читаемым, даже если автор страницы не указал явного стиля.

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

Чтобы узнать больше о стилях браузера / по умолчанию, посмотрите следующее видео:

Как мы упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они стилизованы, расположены и т. Д.

Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки — HTML является наиболее распространенным языком разметки, но вы также можете встретить другие языки разметки, такие как SVG или XML.

Представление документа пользователю означает преобразование его в форму, пригодную для использования вашей аудиторией. Браузеры, такие как Firefox, Chrome или Edge, предназначены для визуального представления документов, например, на экране компьютера, проекторе или принтере.

Примечание : браузер иногда называют пользовательским агентом, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, однако он не единственный.Доступны и другие пользовательские агенты — например, те, которые конвертируют документы HTML и CSS в PDF-файлы для печати.

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

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

В следующем коде показано очень простое правило CSS, обеспечивающее описанный выше стиль:

  h2 {
    красный цвет;
    размер шрифта: 5em;
}  

Правило открывается с помощью селектора. Этот выбирает HTML-элемент, который мы собираемся стилизовать.В данном случае мы стилизуем заголовки первого уровня (

Затем у нас есть набор фигурных скобок {} . Внутри них будет одно или несколько объявлений , которые принимают форму пар свойств и значений . Каждая пара определяет свойство элемента (ов), которое мы выбираем, а затем значение, которое мы хотели бы присвоить этому свойству.

Перед двоеточием стоит свойство, а после двоеточия — значение. Свойства CSS имеют разные допустимые значения в зависимости от того, какое свойство указывается.В нашем примере у нас есть свойство color , которое может принимать различные значения цвета. У нас также есть свойство font-size . Это свойство может принимать в качестве значения единицы разного размера.

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

  h2 {
    красный цвет;
    размер шрифта: 5em;
}

п {
    черный цвет;
}  

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

Примечание : Вы можете найти ссылки на все страницы свойств CSS (наряду с другими функциями CSS), перечисленные в справочнике MDN CSS. Кроме того, вы должны привыкнуть к поиску «mdn css-feature-name » в своей любимой поисковой системе всякий раз, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте выполнить поиск по ключевым словам «mdn color» и «mdn font-size»!

Поскольку существует так много вещей, которые можно стилизовать с помощью CSS, язык разбит на модулей .Вы увидите ссылки на эти модули по мере изучения MDN, и многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN на модуль Backgrounds and Borders, чтобы узнать, какова его цель, а также какие различные свойства и другие функции он содержит. Вы также найдете ссылки на спецификацию CSS , которая определяет технологию (см. Ниже).

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

Для конкретного примера давайте вернемся к модулю Backgrounds and Borders — вы можете подумать, что имеет логический смысл определить свойства background-color и border-color в этом модуле. И ты был бы прав.

Спецификации CSS

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. Д.) Определены в гигантских документах, называемых спецификациями (или «спецификациями»), которые публикуются организациями по стандартизации (такими как W3C, WHATWG, ECMA, или Хронос) и точно определите, как эти технологии должны себя вести.

CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. В эту группу входят представители производителей браузеров и других компаний, интересующихся CSS. Есть также другие люди, известные как приглашенных экспертов , которые действуют как независимые голоса; они не связаны с членской организацией.

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

Как новичок в CSS, вы, вероятно, найдете спецификации CSS ошеломляющими — они предназначены для инженеров, которые могут использовать их для реализации поддержки функций в пользовательских агентах, а не для того, чтобы веб-разработчики могли читать, чтобы понять CSS.Многие опытные разработчики предпочли бы обратиться к документации MDN или другим руководствам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым вами CSS, поддержкой браузера (см. Ниже) и спецификациями.

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

Статус поддержки браузера отображается на каждой странице свойств MDN в разделе «Совместимость браузера» (используйте это, чтобы проверить, можно ли использовать свойство на вашем веб-сайте). Например, раздел совместимости для свойства семейства шрифтов CSS воспроизводится ниже.

Таблицы BCD загружаются только в браузере

Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к началу работы с CSS, где вы можете начать писать CSS самостоятельно.

9 интересных вещей, которые можно делать с функциями CSS