Как создать правило css
Перейти к содержимому

Как создать правило css

  • автор:

Правила форматирования CSS

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

Каждое свойство – на отдельной строке

/*+ no-beautify */ #snapshot-box h2
/*+ no-beautify */ #snapshot-box h2

Цель – лучшая читаемость, проще найти и поправить свойство.

Каждый селектор – на отдельной строке

/*+ no-beautify */ #snapshot-box h2, #profile-box h2, #order-box h2
/*+ no-beautify */ #snapshot-box h2, #profile-box h2, #order-box h2

Цель – лучшая читаемость, проще найти селектор.

Свойства, сильнее влияющие на документ, идут первыми

Рекомендуется располагать свойства в следующем порядке:

  1. Сначала положение элемента относительно других: position , left/right/top/bottom , float , clear , z-index .
  2. Затем размеры и отступы: width , height , margin , padding …
  3. Рамка border , она частично относится к размерам.
  4. Общее оформление содержимого: list-style-type , overflow …
  5. Цветовое и стилевое оформление: background , color , font …

Общая логика сортировки: «от общего – к локальному и менее важному».

При таком порядке свойства, определяющие структуру документа, будут видны наиболее отчётливо, в начале, а самые незначительно влияющие (например цвет) – в конце.

/*+ no-beautify */ #snapshot-box h2 < position: absolute; /* позиционирование */ left: 0; top: 0; padding: 0 0 6px 0; /* размеры и отступы */ color: red; /* стилевое оформление */ font-weight: bold; >

Свойство без префикса пишется последним.

-webkit-box-shadow:0 0 100px 20px #000; box-shadow:0 0 100px 20px #000;

Это нужно, чтобы стандартная (окончательная) реализация всегда была важнее, чем временные браузерные.

Организация CSS-файлов проекта

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

  1. Блоки-компоненты имеют свой CSS. Например, CSS для диалогового окна, CSS для профиля посетителя, CSS для меню. Такой CSS идёт «в комплекте» с модулем, его удобно выделять в отдельные файлы и подключать через @import . Конечно, при разработке будет много CSS-файлов, но при выкладке проекта система сборки и сжатия CSS заменит директивы @import на их содержимое, объединяя все CSS в один файл.
  2. Страничный и интегрирующий CSS. Этот CSS описывает общий вид страницы, расположение компонент и их дополнительную стилизацию, зависящую от места на странице и т.п.

/*+ no-beautify */ .tab .profile < /* профиль внутри вкладки */ float: left; width: 300px; height: 200px; >

Важные страничные блоки можно выделять особыми комментариями:

/** =========================== * Профиль посетителя * =========================== */ .profile < border: 1px solid gray; >.profile h2

CSS-препроцессоры, такие как SASS, LESS, Stylus, Autoprefixer (доступен как онлайн-инструмент) делают написание CSS сильно удобнее.

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

Директивы CSS

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

Обычные правила

Такие директивы следуют стандартному синтаксису:

@[КЛЮЧЕВОЕ СЛОВО] (ПРАВИЛО); 

@charset

Эта директива определяет кодировку, используемую браузером. Это очень удобно, если таблица стилей содержит символы, не входящие в ASCII (например UTF-8). Обратите внимание, что кодировка указанная в HTTP-заголовке переопределяет любые @charset , заданные в вашей таблице стилей.

@charset "UTF-8"; 

@import

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

@import 'global.css'; 

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

@namespace

Эта директива особенно полезна для применения CSS к XML HTML (XHTML), с его помощью XHTML-элементы могут быть использованы как CSS-селекторы.

/* Пространство имён для XHTML */ @namespace url(http://www.w3.org/1999/xhtml); /* Пространство имён для SVG встроенного в XHTML */ @namespace svg url(http://www.w3.org/2000/svg); 

Вложенные правила

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

@[KEYWORD] < /* Вложенные утверждения */ > 

@document

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

@document /* Устанавливает правила для конкретной страницы */ url(http://css-tricks.com/), /* Устанавливает правила для страниц, чей URL начинается с … */ url-prefix(http://css-tricks.com/snippets/), /* Устанавливает правила для всех страниц, принадлежащих домену */ domain(css-tricks.com), /* Правила для всех страниц с протоколом шифрования */ regexp("https:.*") < /* Описание стилей */ body < font-family: Comic Sans; > > 

На момент написания статьи поддержка @document была довольно скудной:

Chrome Safari Firefox Opera IE Android iOS
Нет Нет -moz Нет Нет Нет Нет

@font-face

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

@font-face < font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); > 

@keyframes

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

@keyframes pulse < 0% < background-color: #001f3f; > 100% < background-color: #ff4136; > > 

@media

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

/* iPhone в портретной и альбомной ориентации */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) < .module < width: 100%; > > 

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

@media print

@page

Эта директива определяет стили для отдельных страниц при выводе на печать. Например, она содержит специальные псевдоэлементы для обращения к первой ( :first ), а также к левой ( :left ) и правой ( :right ) страницам при печати двух страниц на листе.

@page :first < margin: 1in; > 

@supports

Эта директива определяет поддерживает ли браузер те или иные возможности, и, если поддерживает, применяет к элементам заданные стили. Как Modernizr, но заточенный на проверку CSS-свойств.

/* Проверка одного условия */ @supports (display: flex) < .module < display: flex; > > /* Проверка нескольких условий */ @supports (display: flex) and (-webkit-appearance: checkbox) < .module < display: flex; > > 

К сожалению, @supports не очень хорошо поддерживается браузерами:

Chrome Safari Firefox Opera IE Android iOS
28+ Нет 31+ 12.1+ Edge 4.4+ Нет

Подводя итоги

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

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

CSS-правила

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Весь CSS-код состоит из повторяющихся блоков следующего вида:

селектор 

Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство.

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

p < /* стили для абзацев */ >h1 < /* стили для заголовков */ >

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

CSS-правила

1. Заголовки

Заголовки являются одним из важнейших инструментов для структурирования текста.

1.1 Рекомендации по использованию заголовков и подзаголовков

Вот некоторые рекомендации по использованию заголовков в HTML-странице.

1.1.1 Использование заголовка h1

Если в разметке не используются теги <section> или <article>, то не рекомендуется, чтобы на одной странице содержалось несколько заголовков верхнего уровня. Внутри тегов <section> и <article> может быть своя иерархия заголовков.

1.1.2 Использование подзаголовков (h2-h6)

При использовании подзаголовков не рекомендуется пропускать уровни заголовков, то есть после заголовка h1 должен идти подзаголовок h2 и только потом подзаголовок h3.

CSS — Урок 3. Правила и селекторы CSS

CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:

Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:

Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег , значит идем на страницу style.css и пишем следующий код:

Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:

Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):

body < background: blue; color: white; >h1 < color:red; >h2 < color:yellow; >

Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.

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

Селекторы CSS

Селекторы по идентификатору

В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них — розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:

Текст параграфа с идентификатором (id).

Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

Абзац с идентификатором (id)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *