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

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

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

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

  1. внешние стили, подключаются тегом <link> в голове документа, т.е. внутри тега <head>:
    <link rel="stylesheet" href="style.css">
  2. внутренние стили, внутри тега <style> (a <style> – внутри тега <head> документа html)
  3. встроенные стили, как значение атрибута style:
    <p style="display:none">

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

У элементов есть связи внутри объектной модели 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"] применится к <div class="block-menu-item">
  13. [атрибут^="значение"] стиль применяются ко всем элементам, у которых значение атрибута начинается с указанного текста. Пример: a[href^="http://"]
  14. [атрибут$="значение"] стиль применяются ко всем элементам, у которых значение атрибута оканчивается указанным текстом. Пример: a[href$=".ru"]
  15. [атрибут*="значение"] определяет, что значение атрибута содержит указанный текст. Пример: [href*="000webhost"]

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

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

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

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

Алфавитный список элементов HTML и их стилей по умолчанию.

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

Список 300+ CSS-свойств, Таблица css-свойств.

Фон – background

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

В чем задаются значения? В абсолютных и относительных единицах.
Единицы измерения

Цвет – color

Шрифт – font

Отдельная страница про шрифты и их свойства.

Шрифт в CSS с картинками.

CSS Web Safe Font Combinations, Мобильная типографика

Текст – text

Отдельная страница про свойства текста.

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

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

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

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

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

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

Зачем? Для корректного отображения текста: расстояние между абзацами (тег <p>) без схлопывания увеличится в два раза, тогда как верхний отступ первого абзаца и нижний отступ последнего абзаца останутся неизменными. Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым.

Схлопывание внешних отступов: полное описание и примеры

box-sizing

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

Рамка – border

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

Поля – margin и padding

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

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

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

Центрирование в css выравнивание в css

Flexbox

Basic concepts of flexbox

Остальное

Геометрия в CSS

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

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

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

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