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

Сколько способов использования свойств css

  • автор:

Оформление Web-страниц

В современной версии стандарта HTML5 практически все оформление страницы делается при помощи каскадных листов стилей, CSS. Команда CSS состоит из селектора и соответствующих ему свойств:

Иллюстрация из Большая книга CSS3. Д. Макфарлард.

  • Все относящиеся к селектору свойства записываются в фигурных скобках
  • Описания свойств разделяются точкой с запятой. Не поставил «;» между свойствами – получил ошибку
  • Свойства и их значения разделяются двоеточием
  • Вокруг селекторов, свойств, их значений можно ставить любое количество пробелов, знаков табуляции и переносов строки

Способы использования CSS в HTML

  1. внешние стили, подключаются тегом в голове документа, т.е. внутри тега :

Наследование

У элементов есть связи внутри объектной модели DOM.

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

Свойства предков могут наследоваться потомками.

Виды селекторов

Селектор – от to select: выбирать, отбирать. Чаще всего используются первые шесть.

  1. универсальный (*): Выбирает все элементы (теги) на странице;
  2. элемент: выбирает все элементы (теги) с указанным именем;
  3. класс (class): выбирает все элементы (теги) с указанным классом (в атрибуте class);
  4. идентификатор (id): выбирает элемент (тег) с указанным уникальным идентификатором (атрибут id);
  5. вложенные селекторы, запись через пробел;
  6. дочерний селектор, должен располагаться непосредственно внутри родительского элемента. Записывается через >. Также используются дочерние псевдоклассы :first-child, :last-child, :only-child, :nth-child (odd), :nth-child (even) и др.
  7. Соседние селекторы: i + b. Стиль применяется к тегу b, соседнему по оотношению к i.
  8. Родственные селекторы: i ~ b. Стили применяются ко всем близлежащим элементам.
  9. Селекторы атрибутов: стили приименяются, если задан атрибут тега. Например: q[title]
  10. [атрибут=»значение»] устанавливает стиль для элемента в том случае, если задано определённое значение указанного атрибута. Пример: a[target=»_blank»]
  11. [атрибут~=»значение»] Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом. Пример: [class~=»block»]
  12. [атрибут|=»значение»] Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идет дефис. Пример: div[class|=»block»] применится к
  13. [атрибут^=»значение»] стиль применяются ко всем элементам, у которых значение атрибута начинается с указанного текста. Пример: a[href^=»http://»]
  14. [атрибут$=»значение»] стиль применяются ко всем элементам, у которых значение атрибута оканчивается указанным текстом. Пример: a[href$=».ru»]
  15. [атрибут*=»значение»] определяет, что значение атрибута содержит указанный текст. Пример: [href*=»000webhost»]

Свойства селектора будут применены ко всем выбранным элементам (тегам) на странице.

Ниже для удобства свойства разбиты на несколько категорий.

Стили по умолчанию

У Web-страницы без стилевого файла есть оформление: элементы имеют отступы, используются шрифты с определенными параметрами и так далее. Например, ссылки – синие и подчеркнуты. Это браузерные стили по умолчанию, они определены в стандарте CSS консорциумом W3C.

Все свойства CSS

Фон – background

  • background-color: red; или функция rgba(255, 0, 0, 0.5) задает цвет фона. Фон с указанием альфа-канала будет полупрозрачным.
  • background: white url(«image.jpg») no-repeat 50% 0; Общее свойство, описывающее фон страницы.

Размеры, ширина, высота – width, height

  • ширина, width: 100px;
  • минимальная ширина, min-width: 100px;
  • максимальная ширина, max-width: 100px;
  • высота, height: 100px;
  • минимальная высота, min-height: 100px;
  • касимальная высота, max-height: 100px;

Цвет – color

  • color: green;

Шрифт – font

  • font-family: arial sans-serif;
    Гротеск: sans – без + serif – засечек. Антиква, serif – с засечками:
  • font-size: 16pt;

Текст – text

  • text-align: justify; (left, right, center)
  • text-decoration: underline;
  • line-height: 20pt;

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

Любой блочный элемент состоит из четырех составляющих:

  • Основой блока выступает его контент: текст, изображения и т.д. Контент имеет 2 размера: ширина (задается свойством width) и высота (height);
  • вокруг контента идет внутреннее поле (padding), создающее пустое пространство от контента до внутреннего края границ;
  • затем идут границы (border).
  • Завершают блок внешние отступы (margin, от «маргиналии»), пустое пространство от внешнего края границ.

Похоже на матрешки: поменять местами контент, padding, border и margin невозможно!

Каждая составляющая, кроме контента, может иметь различные размеры с каждой из четырех сторон.
Часто задаются по часовой стрелке: top, right, bottom, left.
Таким образом, блочный макет страницы с контентом описывается максимум 14 размерами. Если толщина рамки со всех сторон одинаковая, параметров 11.

Схлопывание отступов

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

Зачем? Для корректного отображения текста: расстояние между абзацами (тег

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

box-sizing

Свойство box-sizing применяется для изменения алгоритма расчета ширины и высоты элемента; чтобы свойства width и height задавали размеры не контента, а размеры блока.

  • box-sizing: content-box; свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
  • box-sizing: border-box; Свойства width и height включают в себя значения полей и границ, но не отступов (margin).
  • box-sizing: padding-box; Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
  • box-sizing: inherit; Наследует значение родителя.

Рамка – border

У рамки есть дополнительные свойства: тип линии, скругление и т.д. Примеры:

  • обобщенное правило. border: 2px dashed blue;
  • радиус скругления рамки. border-radius: 5px;
  • Скруглить квадрат до круга – border-radius: 50%; пример.
  • border-collapse: collapse (separate, inherit); Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. При значении collapse линия между ячейками отображается только одна.

Поля – margin и padding

Поля страницы можно инспектировать в браузере по нажатию F12, вкладка Elements

  • margin: 0 auto; (внешнее поле) Так заданное поле центрирует блок
  • padding: 20px; (внутреннее поле)

Положение и видимость

  • display: block; (inline, inline-block, none). display: none используется для скрытия элемента со страницы.
  • position: relative; (absolute)
  • float: right; (left)
  • object-fit: cover; (contain, scale-down. Для тегов img и video)
  • object-position: 50% 50%;
  • overflow-y: scroll;

Горизонтальное и вертикальное выравнивание

  • Центрирование блочного элемента:
  • Центрирование строчного элемента: text-align: center;
  • Центрировать горизонтально и вертикально: #mysection

Flexbox

Остальное

  • list-style: none; (применяется для скрытия буллетов у ненумерованных списков)

Геометрия в CSS

  • Прямоугольник
  • Треугольники
  • Круги
  • The Shapes of CSS
  • CSS3 drawing unconventional shapes

Альтернативы CSS?

Сравнение стилевых языков. Существует XSL (eXtensible Stylesheet Language) – семейство рекомендаций консорциума W3C, описывающее языки преобразования и визуализации XML-документов. Состоит из трех частей:

  • XSL Transformations (XSLT) – язык преобразования XML-документов.
  • XSL Formatting Objects (XSL-FO) – язык разметки типографских макетов и иных предпечатных материалов.
  • XPath – язык путей и выражений, используемый в том числе и в XSLT для доступа к отдельным частям XML-документа.

Языком, лежащим в основе XSL, является XML, а это означает, что XSL более гибок, универсален. Почти не используется в вебе, потому что более сложен и требует более строгого подхода. Дизайнеры и верстальщики всего мира сделали все, чтобы технологии, основанные на XML, не стали рабочими стандартами веба. Что, конечно, не избавило от недостатков HTML и CSS. В итоге имеем постоянно и стихийно меняющиеся технологии разных версий, по-разному поддерживаемые разными браузерами. Хороший дизайнер должен учитывать особенности поддержки технологий разными версиями разных браузеров. С прекращением поддержки старых версий операционной системы Windows и ростом популярности мобильных технологий ситуация улучшилась, но пока еще далека от идеала.

Применение свойств классов к простому html-коду:

Ссылки:

  • Основы CSS
  • Руководство по CSS
  • Блоковая модель (box model)
  • CSS box model
  • Наглядно о CSS селекторах
  • CSS-цвета: основные ключевые слова, числовые значения цвета
    Если цвет – это слово, но не ключевое: Почему chucknorris — это красный цвет, а chucknorr — желтый?Проверить.
  • css-tricks,
  • CSS Default Values Reference,
  • горизонтальное меню,
  • position (Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице).
  • Calc of max, or max of calc in CSS

Ос­нов­ные спо­собы вёрст­ки. Часть вто­рая: бес­таб­лич­ная вёрст­ка

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

Обтекаемые блоки Скопировать ссылку

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

Особенности Скопировать ссылку

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

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

Обычный блок, в котором находится обтекаемый, заканчивается раньше обтекаемого блока, что не подходит для раскладки. Для получения предсказуемого результата (а также во избежание проблем в Internet Explorer 7 и ниже) желательно каждый ряд с раскладкой обтекаемыми блоками заключать в специальный оборачивающий элемент, создающий новый контекст форматирования, или воспользоваться трюком, известным как «очистка» (clearfix).

Контекст форматирования Скопировать ссылку

Когда элемент создаёт новый контекст форматирования, через его границы не проникают обтекаемые элементы, а поля не складываются. В Internet Explorer 7 и ниже аналогично ведут себя элементы с hasLayout, что помогает достичь кроссбраузерности.

Согласно CSS 2.1, новый контекст форматирования создают: обтекаемые блоки; абсолютно позиционированные блоки; содержащие блоки элементы (вроде строчных блоков inline-block и элементов таблиц); блоки, значение свойства display которых отличается от block ; и блоки с overflow , отличным от visible . Новые типы блоков из других модулей CSS также имеют подобный эффект.

Очистка Скопировать ссылку

Трюк «очистка» заключается в использовании свойства clear для псевдоэлемента ::after , генерируемого в конце блока, что вынуждает браузер разместить нижнюю границу после обтекаемых элементов.

Первоначальный код (существуют вариации) для современных браузеров выглядит так:

.clearfix::after < clear: both; /* Сама очистка */ display: block; /* По умолчанию — display: inline */ content: "."; /* Предотвращение сложения полей */ height: 0; /* Устранение влияния текста */ visibility: hidden; /* Скрытие текста */ >

Спустя некоторое время появилась обновлённая версия, «микроочистки», выглядящая следующим образом:

.clearfix::before, .clearfix::after < display: table; content: ""; >.clearfix::after

В этом варианте сложение полей (margin collapsing), которое может происходить и сквозь пустой псевдоэлемент, предотвращается с помощью display: table , причём не только в конце элемента, но и в начале.

А благодаря пустой строке в значении свойства content отпадает необходимость прятать сгенерированное содержимое.

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

Адаптация Скопировать ссылку

Блок, у которого новый контекст форматирования задан с помощью значения overflow , отличного от visible (то есть auto , scroll или hidden ), обладает примечательным свойством: такой блок занимает всё доступное место по горизонтали. Если он следует за обтекаемым блоком, его ширина соответственно уменьшается на значение ширины обтекаемого блока.

Хотя такое поведение — необязательное требование спецификации, браузеры солидарны в данном вопросе.

Эта особенность даёт возможность задействовать эффект обрезания неуместившегося текста с многоточием на месте сокращения: text-overflow: ellipsis , которого нельзя достигнуть таблицей с автоматическим расчётом ширины.

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

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

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

Ограничения Скопировать ссылку

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

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

Расположение элементов по рядам — это то, с чем хорошо справляются строчные блоки.

Строчные блоки Скопировать ссылку

Строчный блок — это блок, который размещается в текстовой строке, имеющий свойство display: inline-block . Строчные блоки предоставляют уникальные возможности в рамках CSS 2.1, так как, будучи строчными элементами, они могут содержать любые блоки.

В особенной модели Internet Explorer 7 и ниже строчные блоки — это обычные строчные элементы, у которых есть свойство hasLayout. Правило display: inline-block включает именно это свойство, но эффект достигается только на строчных элементах. Блочным элементам требуется задать display: inline и включить hasLayout другим способом: например, с помощью zoom: 1 , или вынести объявление display: inline-block в отдельный блок правил.

Так же, как и у обтекаемых блоков или ячеек таблиц, ширина строчных блоков, если не указана, рассчитывается браузером с учётом содержимого.

Как и ячейки таблиц, они идут в строгом порядке друг за другом: слева направо или справа налево в зависимости от направления письма.

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

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

Горизонтальное выравнивание Скопировать ссылку

Кроме привычного выравнивания слева или справа строчным блокам можно делать полную выключку — выравнивание одновременно по обоим краям одновременно — с помощью text-align: justify . Последняя строка, однако, всё равно остаётся выровненной слева или справа в зависимости от направления письма.

Проблему с последней строкой можно обойти при помощи свойства text-align-last: justify , которое поддерживается браузерами Internet Explorer 5.5+ и Firefox 12+ (с префиксом -moz- ), и включено в разрабатываемый модуль CSS3 Text.

Отсутствие поддержки этого свойства в остальных браузерах можно заменить добавлением псевдоэлемента ::after или пустого строчного блока со стопроцентной шириной:

.justify::after

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

Недостатки метода в дополнительном элементе и лишней строке, добавляющей отступ, если не принять соответствующие меры.

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

Вертикальное выравнивание Скопировать ссылку

Строчные блоки по умолчанию выравниваются по базовой линии нижней строки. Но если значение overflow отличается от visible , строчные блоки должны выравниваться по своей нижней границе, чему, однако, не следуют браузеры на основе WebKit.

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

Если нужно разместить какой-либо текст или изображение в ограниченном пространстве, выровняв по середине, то для этого можно использовать вспомогательный строчный блок с заданной высотой. Ему и блоку с содержимым задаётся вертикальное выравнивание по середине vertical-align: middle .

 .holder < word-wrap: none; >.edge, .centered < display: inline-block; vertical-align: middle; >.edge < height: 100px; >.centered

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

Чтобы избежать возможного переноса строк между вспомогательным элементом и содержимым, используется word-wrap: none . Следует вернуть значение свойства для содержимого обратно word-wrap: normal , чтобы оставить возможность переноса строк внутри текста.

Пробельные символы Скопировать ссылку

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

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

От лишних промежутков, добавляемых пробелами, можно избавиться с помощью CSS-свойства word-spacing :

word-spacing: -0.25em; 

Данное объявление уменьшает пробелы между словами везде, кроме браузеров, основанных на WebKit. Дефект в WebKit был исправлен только недавно, и на момент написания этих строк его уже нет в Chrome 26, но он ещё присутствует в остальных браузерах на основе старых версий движка WebKit.

Проблему в WebKit можно обойти через аналогичное объявление свойства letter-spacing :

letter-spacing: -0.25em; 

Можно было бы всегда использовать это правило, но оно не работает в браузере Opera вплоть до 12 версии включительно. Есть и другие недостатки: браузер Mozilla Firefox имеет дефект, из-за которого строчные блоки переносятся на следующую строку в обтекаемом блоке из-за неверного расчёта ширины, а в Internet Explorer 7 теряется эффект при одновременном наличии обоих свойств.

Поэтому следует выделить свойство letter-spacing: -0.25em только для WebKit, устранив при этом действие word-spacing . Либо же использовать только letter-spacing и выделить word-spacing отдельно для браузера Opera

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

В примере использовано значение 0.25em — примерный размер пробела в гарнитуре Arial и некоторых других. Однако в иных гарнитурах значение может отличаться, например, Verdana имеет пробел шириной 0.34em .

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

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

Ограничения Скопировать ссылку

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

Если ширина не задана, то она зависит от содержимого (shrink-to-fit) и по мере заполнения элемента может увеличиваться вплоть до ширины родительского элемента или даже превысить её.

Абсолютное позиционирование Скопировать ссылку

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

Особенности Скопировать ссылку

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

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

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

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

Выравнивание Скопировать ссылку

Когда заданы координаты с двух противоположных сторон, абсолютно позиционированный элемент растягивается между указанными координатами. Этого не было в Internet Explorer 6, но, начиная с Internet Explorer 7, появилось и работает во всех браузерах.

Если при этом задан соответствующий размер: ширина или высота, а свойство margin по той же оси имеет значение auto , то элемент выровняется посередине этих координат. Эту ситуацию правильно обрабатывают все браузеры, начиная с Internet Explorer 8.

Заполнение Скопировать ссылку

Если задана левая координата left , но не задана правая, то по мере заполнения элемент расширяется вплоть до правой границы предка, относительно которого идёт позиционирование, после чего начинается перенос текста. Аналогично и для обратного случая с правой координатой right .

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

Браузеры соблюдают данное правило, начиная с Internet Explorer 8. В Internet Explorer 7 бывают ошибки, а в Internet Explorer 6 нет такого ограничения.

Контекст размещения Скопировать ссылку

Свойство z-index указывает взаимное расположение позиционированных элементов по оси z , направленной к пользователю. Элементы с большим z-index показываются поверх элементов с меньшим значением свойства.

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

Существует такое понятие как контекст размещения (stacking context): если значение z-index у родительского элемента отличается от auto , позиционированные элементы располагаются только внутри этого контекста. Даже элементы с отрицательным z-index отображаются поверх оформления родительского элемента, создающего контекст размещения, хотя и остаются под его содержимым.

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

Контекст размещения появляется не только при наличии z-index , но и при использовании свойств opacity или transform из модулей CSS 3.

К сожалению, не обошлось без ошибок: Internet Explorer 8 по-особому размещает позиционированные псевдоэлементы ::before и ::after . Они имеют проблемы с расположением относительно как обычного, так и позиционированного содержимого элемента, к которому относятся. Эти дефекты не воспроизводятся в режиме эмуляции более старших версий вроде «Internet Explorer 10 в режиме Internet Explorer 8».

Internet Explorer 7 (и ниже) по-своему работает с z-index : в этой версии браузера нет значения auto , значение свойства по умолчанию равно нулю. Понятие контекста размещения при этом имеется и действует на все позиционированные элементы.

Интересно отметить, что какое-то время Internet Explorer 6 был единственным браузером, учитывающим контекст размещения.

Заключение Скопировать ссылку

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

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

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

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

Кастомные свойства

Удобный способ сохранить повторяющееся значение и потом использовать его в разных местах кода. Как переменные в языках программирования.

Время чтения: 7 мин

Открыть/закрыть навигацию по статье

  1. Что это и как пишется?
  2. Наследование кастомных свойств
  3. Запасные значения
  4. Корректность использования
  5. Использование в JavaScript
  6. Подсказки
  7. На практике
    1. Денис Ежков советует

    Контрибьюторы:

    Обновлено 21 декабря 2021

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

     .header-primary  font-size: 2em; color: #18191C; margin-bottom: .5em;> .header-secondary  font-size: 1.6em; color: #18191C;> .text  font-family: "Open Sans", sans-serif; color: #18191C; margin-top: 0;> .form-input  font-size: 1em; color: #18191C; padding-top: 4px; padding-bottom: 4px;> .header-primary  font-size: 2em; color: #18191C; margin-bottom: .5em; > .header-secondary  font-size: 1.6em; color: #18191C; > .text  font-family: "Open Sans", sans-serif; color: #18191C; margin-top: 0; > .form-input  font-size: 1em; color: #18191C; padding-top: 4px; padding-bottom: 4px; >      

    Конкретный оттенок чёрного #18191 C используется по всей странице в совершенно разных элементах: заголовках, тексте, кнопках, полях ввода. Кажется, что это не должно создавать никаких проблем, но на самом деле есть ряд неудобств, которых хотелось бы избежать.

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

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

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

    Что это и как пишется?

    Скопировать ссылку «Что это и как пишется?» Скопировано

    Кастомное свойство — это произвольное свойство с определённым значением. Оно отличается от стандартного CSS-свойства способом записи. Чтобы применить кастомное свойство, нужно передать его в CSS-функцию var ( ) .

     .list-item  margin-left: 10px;> .list-item .link  margin-left: 10px;> .list-item  margin-left: 10px; > .list-item .link  margin-left: 10px; >      
     .list  --element-gap: 10px;> .list-item  margin-left: var(--element-gap);> .list-item .link  margin-left: var(--element-gap);> .list  --element-gap: 10px; > .list-item  margin-left: var(--element-gap); > .list-item .link  margin-left: var(--element-gap); >      

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

    Наследование кастомных свойств

    Скопировать ссылку «Наследование кастомных свойств» Скопировано

    Как и обычные наследуемые свойства (например, font — size ), кастомные свойства наследуются вниз по дереву. Определив переменную в родительском элементе, мы сможем переиспользовать её в любом дочернем элементе:

     .cards  --main-color: #E6E6E6;> .card-header, .benefits-item  color: var(--main-color);> .card--primary  --main-color: black;> .cards  --main-color: #E6E6E6; > .card-header, .benefits-item  color: var(--main-color); > .card--primary  --main-color: black; >      

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

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

     :root  --gap-small: 10px; --gap-medium: 20px;> :root  --gap-small: 10px; --gap-medium: 20px; >      

    В первом примере цвет #18191 C используется в самых разных элементах страницы. Мы можем назначить этот цвет кастомному свойству с осмысленным названием и дальше везде использовать именно это свойство. Очень удобно, ведь запомнить название свойства проще, чем HEX-код цвета:

     :root  --text-color: #18191C;> .header-primary  font-size: 2em; color: var(--text-color); margin-bottom: .5em;> .header-secondary  font-size: 1.6em; color: var(--text-color);> .text  font-family: "Open Sans", sans-serif; color: var(--text-color); margin-top: 0;> .form-input  font-size: 1em; color: var(--text-color); padding-top: 4px; padding-bottom: 4px;> :root  --text-color: #18191C; > .header-primary  font-size: 2em; color: var(--text-color); margin-bottom: .5em; > .header-secondary  font-size: 1.6em; color: var(--text-color); > .text  font-family: "Open Sans", sans-serif; color: var(--text-color); margin-top: 0; > .form-input  font-size: 1em; color: var(--text-color); padding-top: 4px; padding-bottom: 4px; >      

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

     :root  --main-color: #18191C;> .article-promo  --main-color: #272822;> :root  --main-color: #18191C; > .article-promo  --main-color: #272822; >      

    Запасные значения

    Скопировать ссылку «Запасные значения» Скопировано

    Если по какой-то причине значение переменной не определено, мы можем передавать в функцию var ( ) второй параметр, который станет «запасным» значением. По аналогии со свойством font — family . Если не найдено первое значение, браузер будет подставлять следующее:

     .section-title  color: var(--primary-color, #222);> .section-title  color: var(--primary-color, #222); >      

    В качестве запасного значения может быть передана функция var ( ) , которая в свою очередь также может иметь запасное значение:

     .section-title  color: var(--primary-color, var(--black, #222));> .section-title  color: var(--primary-color, var(--black, #222)); >      

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

    Скопировать ссылку «Корректность использования» Скопировано

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

    Используем HEX-запись цвета для свойства color . Это правильно.

     .valid-value  color: #272822;> .valid-value  color: #272822; >      

    Используем размерную величину для свойства color . Это неправильно.

     .invalid-value  color: 10px;> .invalid-value  color: 10px; >      

    У кастомных свойств всё иначе. Значения вычисляются в браузере непосредственно перед отрисовкой страницы. Браузер заранее не знает, в каком месте будет применено кастомное свойство, поэтому по умолчанию считает любую переменную корректной. И только после подстановки значения свойству браузер узнаёт, правильно ли мы его применили. Для такого поведения есть причины, рассмотрим пример:

     :root  --big-header: 20px;> .promo-header  color: var(--big-header);> :root  --big-header: 20px; > .promo-header  color: var(--big-header); >      

    В этом примере браузер подставляет значение переменной — — big — header ( 20px ) в качестве значения свойства color , но это не имеет смысла. В такой ситуации браузер делает две вещи:

    • Проверяет, является ли свойство наследуемым. Если да, то значение для него ищется выше по дереву.
    • Если свойство не наследуемое или значение не найдено выше по дереву, то берётся начальное значение по умолчанию ( initial ). Для свойства color у заголовка это будет black .

    Использование в JavaScript

    Скопировать ссылку «Использование в JavaScript» Скопировано

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

    Чтобы получить значение:

     element.style.getPropertyValue("--main-color") element.style.getPropertyValue("--main-color")      

    Чтобы задать значение:

     element.style.setProperty("--translate", `$px`) element.style.setProperty("--translate", `$currentScroll>px`)      

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

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

     .logo  display: inline-block; width: calc(var(--size, 1) * 15px); height: calc(var(--size, 1) * 15px);> .logo--small  --size: 2;> .logo--medium  --size: 3;> .logo--big  --size: 4;> .logo  display: inline-block; width: calc(var(--size, 1) * 15px); height: calc(var(--size, 1) * 15px); > .logo--small  --size: 2; > .logo--medium  --size: 3; > .logo--big  --size: 4; >      

    В этом примере мы задали значение по умолчанию, равное 1 . Если будет использоваться только класс .logo , браузер установит — — size : 1 . Если будет применён один из классов-модификаторов, значение — — size будет переопределено, и ширина и высота элемента будут пересчитаны благодаря использованию calc ( ) .

    А вот так можно применить CSS-переменную в функции linear — gradient .

     .element  --angle: 45deg; background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);> .element--inverted  --angle: -45deg;> .element  --angle: 45deg; background-image: linear-gradient(var(--angle), #235ad1, #23d1a8); > .element--inverted  --angle: -45deg; >      

    На практике

    Скопировать ссылку «На практике» Скопировано

    Денис Ежков советует

    Скопировать ссылку «Денис Ежков советует» Скопировано

    �� Можно эффективно использовать кастомные свойства при разработке дизайн-системы:

    �� Кастомные свойства сильно упрощают жизнь, если нужны цветовые схемы или ночная тема:

    �� Можно даже применять кастомные свойства в инлайновых стилях:

    Конспект: основы CSS

    CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений:

    селектор

    Для комментариев в CSS используются символы /* и */ .

    Селекторы

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

    .feature-kitten

    Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и >и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class .

    h1 < color: red; >.info

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

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

    Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:

    nav a .menu ul .post .title

    Свойства и значения

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

    .feature-kitten

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

    Наследование

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

    Составные свойства

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

    font: 16px/26px "Arial", sans-serif;

    Если значение обычного свойства не было задано в составном, то браузер при «расшифровке» использует исходное значение этого свойства.

    Типы значений: абсолютные и относительные

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

    font-size: 1cm; font-size: 10mm; font-size: 38px;

    Относительные единицы измерения описывают значения, которые зависят от других значений. Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em , rem , vh , vw и некоторые другие, ну и, конечно же, проценты.

    Стили по умолчанию

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

    Каскадирование

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

    Зелёный - мой любимый цвет

    .beloved-color
    margin: 1em 0;
    color: green; margin: 1em 0;

    Конфликт свойств

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

    ul < list-style: disc; >.blog-navigation ul

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

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

    Каскад работает и внутри CSS-правил.

    Встраивание и подключение внешних стилей

    Внешние стили подключаются через тег

    Встраивание стилей в тег . Его обычно размещают внутри :

       

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

    Встраивание в атрибут style :

    </div>

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

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

    • Наша группа в VK
    • Наш канал на YouTube
    • Наша страница в Twitter
    • Наш канал в Telegram

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

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