CSS означает "Каскадные таблицы стилей" с акцентом на "Стиль". В то время как HTML используется для структурирования веб-документа (определяя такие вещи, как заголовки и абзацы и позволяя вам вставлять изображения, видео и другие медиафайлы), CSS приводит в норму стиль вашего документа – макеты страниц, цвета и шрифты определяются с помощью CSS. Воспринимайте HTML как фундамент (у каждого дома есть по одному фундаменту), а CSS как эстетический выбор (существует большая разница между викторианским особняком и современным домом середины века).
В соответствии с разделением задач по шаблону проектирования и передовой практике каскадные таблицы стилей обеспечивают центральное расположение, в котором информация о том, какие различные шрифты, цвета переднего плана, цвета фона, курсив и выделение следует применять к различным элементам HTML на веб-странице. Каскадные таблицы стилей также могут управлять размещением на странице различных частей страницы, таких как верхний и нижний колонтитулы, тело, содержимое статьи, разделы и отступы. Это очень полезно, когда контент должен быть разложен по-разному в зависимости от того, просматривается ли он на настольном компьютере, планшете или смартфоне.
Правильное использование CSS
В первые годы существования Всемирной паутины (WWW) в HTML-файлах было принято включать не только язык разметки и контент, но также информацию о форматировании и JavaScript. Это делало веб-страницы трудными для написания, трудными для чтения, сложными для обновления и обслуживания. По мере развития сети стало целесообразным разделять HTML, содержимое сценариев и информацию о стилях на отдельные, простые в обслуживании файлы. Таким образом, современная веб-страница обычно состоит из трех отдельных объектов: каскадной таблицы стилей, файла JavaScript и самого файла HTML.
Реализация CSS форматирования
Каскадный характер файлов CSS объясняется тем фактом, что информация о стиле для веб-страницы может быть определена в любом из трех разных мест, также называемых уровнями стиля.
Рекомендуется размещать информацию о стиле в отдельном файле с расширением .css. Использование информации форматирования, содержащейся во внешней каскадной таблице стилей, осуществляется через тег HTML-ссылки. Веб-страница может ссылаться на ноль, один или несколько внешних CSS-файлов с помощью нескольких тегов ссылок.
Однако в небольших проектах или в случаях, когда веб-страница заинтересована в перезаписи некоторой информации о стиле во внешнем файле CSS, информацию о стиле можно записать в тег <style> внутри веб-страницы. Это называется уровнем внутреннего стиля. Внутренняя информация об уровне стиля внутри веб-страницы будет перезаписывать любую информацию о стиле, предоставляемую внешней каскадной таблицей стилей.
Правила каскадного стиля
Кроме того, все теги HTML5 имеют свойство стиля, которое можно использовать для перезаписи любой информации о стиле, определенной на уровне стиля страницы или во внешней таблице стилей. Использование тега HTML для определения информации CSS называется встроенным стилем. Правила стилей диктуют, что стили родительского уровня записываются поверх стилей уровня страницы, а стили уровня страницы перезаписываются стилями уровня тега. Это и есть то, что подразумевается под каскадными таблицами стилей.
CSS селекторы
Селекторами CSS могут быть теги HTML, атрибуты класса, назначенные тегам HTML, и даже состояния определенного элемента, такие как отключенное состояние поля ввода или состояние наведения anchor link. Возможность настройки стиля компонентов в зависимости от их состояния или того, как они классифицируются на странице, предоставляет графическому дизайнеру большую гибкость в определении способа отображения веб-страницы браузером.
Внешний, внутренний или встроенный CSS?
Как и HTML, CSS пишется в виде простого текста с помощью текстового редактора или текстового процессора на вашем компьютере. Есть три основных способа добавить этот код CSS на ваши HTML-страницы. Код CSS может быть внешним, внутренним или встроенным. Внешние таблицы стилей сохраняются в виде файлов .css и могут использоваться для определения внешнего вида всего веб-сайта через один файл (вместо добавления отдельных экземпляров кода CSS в каждый элемент HTML, который вы хотите настроить). Чтобы использовать внешнюю таблицу стилей, ваши .html-файлы должны включать в себя раздел заголовка, который ссылается на внешнюю таблицу стилей и выглядит примерно так:
Это свяжет файл .html с вашей внешней таблицей стилей (в данном случае, mysitestyle.css), и все инструкции CSS в этом файле будут применены к присоединенным страницам .html.
Внутренние таблицы стилей – это инструкции CSS, записанные непосредственно в заголовок конкретной HTML-страницы. (Это особенно полезно, если у вас есть одна страница на сайте, которая имеет уникальный внешний вид.) Внутренняя таблица стилей выглядит примерно так:
Розоватый цвет фона и абзацы со средним синим шрифтом в 20 точек теперь будут применяться к этой отдельной HTML-странице.
Наконец, встроенные стили – это фрагменты CSS, записанные непосредственно в код HTML, и применимые только к одному экземпляру кода. Например:
приведет к тому, что один конкретный заголовок на одной странице .html будет отображаться фиолетовым шрифтом в 40 точек.
Откровенно говоря, внешние таблицы стилей являются наиболее эффективным методом для реализации CSS на веб-сайте (легче отслеживать и реализовывать стиль сайта из выделенного файла CSS), в то время как внутренние таблицы стилей и встроенный стиль могут использоваться в каждом конкретном случае, когда необходимо внести индивидуальные изменения стиля.
Как добавить CSS в WordPress
Хотя вы можете добавлять CSS непосредственно в таблицу стилей вашей темы WordPress, мы не рекомендуем этот метод, потому что с ним легко допустить ошибки, и любые внесенные вами изменения будут перезаписаны при обновлении темы (если вы не используете дочернюю тему).
К счастью, есть более простое решение. Чтобы добавить CSS в WordPress, вам просто нужно:
- Чтобы открыть настройщик WordPress, перейдите по пути «Внешний вид» > «Настроить» на панели инструментов WordPress;
- Выберите опцию «Дополнительные стили» слева в меню в интерфейсе WordPress Customizer.
В настоящее время пустой редактор в этой области позволяет вводить строки кода CSS без необходимости перебирать существующую таблицу стилей. Здесь вы можете добавить столько CSS, сколько захотите – просто включите каждый новый фрагмент в отдельной строке. Кроме того, вы можете увидеть, как ваши изменения вступят в силу в режиме предварительного просмотра. Таким образом, вы узнаете, выглядят ли они правильно, прежде чем публиковать их на своем сайте.
Кроме того, этот редактор поможет вам «проверить» ваш CSS, то есть он предупредит вас, если вы сделаете какие-либо очевидные ошибки.
Если вам интересно, какие настройки CSS вы можете сделать здесь, не беспокойтесь. Оставайтесь на этой странице в своей панели инструментов, и мы рассмотрим несколько способов начать настройку внешнего вида вашего сайта с помощью CSS.
Полезные функции в CSS
Последняя версия каскадных таблиц стилей, CSS 3, была разработана для облегчения веб-дизайна, но на некоторое время стала горячей темой для обсуждения, ведь не все браузеры поддерживали ее. Однако технологии быстро меняются, и все производители браузеров в настоящее время внедряют полную поддержку CSS 3. Упрощение этого процесса для производителей браузеров является заслугой модульной спецификации CSS 3, которая позволяет им предоставлять поддержку для модулей постепенно, без необходимости выполнять основной рефакторинг кодовых баз браузеров. Концепция модульности не только упрощает и ускоряет процесс интеграции отдельных модулей CSS 3, но также облегчает и документирование спецификации.
Счетчики CSS
Мало кто знает счетчики CSS, так что вы вполне резонно можете спросить: «Их поддерживает хоть какой-то браузер?». Да, их поддерживает Internet Explorer 8. Счетчики, как вы можете догадаться, предназначены для подсчета таких элементов, как количество изображений в галерея. С помощью счетчиков вы можете отображать числа под элементами. Пока что это звучит не очень захватывающе, но знаете ли вы, что в некоторых ситуациях счетчики CSS могут заменить JavaScript?
Умные кавычки
С помощью более совершенной версии CSS вы можете значительно улучшить типографику вашего сайта, что многие люди упускают из виду. И зря. Например, знаете ли вы, что кавычки, которые вы пишете в своем коде, на самом деле являются «простыми числами», которые используются для измерений и координат? При использовании тегов «q» в HTML для цитат вы можете автоматически вставлять правильные кавычки (так называемые умные цитаты) до и после цитаты.
Это особенно полезно для многоязычных веб-сайтов, где вам приходится иметь дело с несколькими видами кавычек, например, на немецком языке цитаты выглядят так: «какая-то цитата». Чтобы автоматически вставлять кавычки для определенного языка, вы должны установить атрибут lang в своем HTML-коде, например lang = "de" (в основном для самого тега html). В своем коде CSS вы можете указать кавычки для каждого языка.
Фоновые градиенты
Градиенты создаются прямо в браузере, как только вы загружаете страницу. Это еще один очень популярный эффект, который был достигнут с помощью изображений (плюс немного CSS) и теперь может быть реализован исключительно с помощью CSS3. Эта функция не так широко поддерживается во всех браузерах, и вам придется писать отдельные строки кода для разных браузеров. Старый способ создания градиентов заключался в создании тонкого градиентного изображения и его повторения по всей странице.
Единственный реальный недостаток CSS3 заключается в том, что не все его функции совместимы со всеми браузерами. CSS3 постоянно находится в разработке, и браузерам просто нужно время, чтобы освоить все новейшие функции. Тем не менее, функции, упомянутые выше, должны нормально работать на последних итерациях всех основных браузеров.