Объявления стилей CSS

Объявления стилей CSS

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

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

отображать

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

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

emh1 Название курсивом / h1 / em

Тег em> должен быть встроен в тег h1>, потому что по умолчанию em> является встроенным элементом, а h1> — блочным элементом. Остается вопрос, нельзя ли записывать их в обмен, если мы заранее заявили в стилях:

em {display: block; }

Таким образом, элемент em> также становится блочным.

Ответ — нет!

«Нет», потому что стили не имеют значения для проверки HTML. Код HTML должен быть действителен для всех стилей, а в другом стиле у нас может не быть объявления, указывающего, что em> будет отображаться как элемент блока. По той же логике у нас не будет проблем с валидацией, если мы будем использовать следующий стиль:

Читать также:  Платформа анимации GreenSock (GSAP)

h1 {display: inline; } em {display: block; }

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

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

поля и отступы

Элементы также могут иметь внешнее и внутреннее расстояние и рамку..

  • маржа — буквально «предел», я предпочитаю переводить это как внешнее расстояние
  • обивка — буквально «печать», я называю это внутренним расстоянием
  • граница — рамка

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

Изнутри элементы сначала имеют ширину и высоту своего содержимого. Затем идет внутреннее расстояние, затем рамка, а затем внешнее расстояние..

Я называю расстояния внутренними и внешними именно потому, что так хорошо видна разница в их положении по отношению к кадру..

Следует иметь в виду, что ширина (соответственно высота) элементов определяется шириной / высотой их содержимого плюс внутреннее расстояние и рамка, но не внешнее расстояние..

ширина и высота

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

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

Взаимодействие между шириной и полем

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

Если у нас есть экран шириной 1280 пикселей (обычное разрешение для 17-дюймовых мониторов, а также некоторых старых ноутбуков) и блок div шириной 640 пикселей, у нас также будет поле со значением 640 пикселей. В частности, это поле будет справа от div, если мы будем читать слева направо. Даже если мы попытаемся перезаписать это поле, используя:

Читать также:  Начало работы в HTML некоторые основные теги

div {маржа-право: 100 пикселей; }

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

маржа: авто

Однако, если мы добавим margin-left: auto; тогда правое внешнее расстояние будет точно 100 пикселей (как мы установили), ширина элемента будет 640 пикселей (опять же, как мы установили), а автоматическое значение левого внешнего расстояния заставит его заполнить пустое пространство слева с помощью значение, такое как необходимо (540 пикселей).

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

Краткий синтаксис

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

div {маржа: верхний правый нижний левый; }

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

Можно установить 3 вместо 4 значений. Пропуская значение для левой стороны, оно автоматически копируется справа..

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

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

Единицы измерения

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

В HTML мы можем установить ширину изображения, например

img src = "image.jpg" width = "100" alt = "" /

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

Читать также:  Бандлеры

Единицы измерения в CSS делятся на две большие группы — абсолютные и относительные. Единственным представителем абсолютных значений являются пиксели. Относительные:%, em, ex, pt, pc, inch, cm и mm..

Проценты указаны относительно ближайшего относительного элемента. Если мы не установим его через CSS — по умолчанию только body.

Интерес

С точки зрения шрифта проценты рассчитываются иначе. Они считаются относительными к унаследованным стилям..

Если мы установили шрифт на 12 пикселей для тела, а для абзацев мы можем установить размер шрифта на 120%. Абзацы наследуют размер от основного текста и составляют 120% от него. Это составляет 14,4 пикселей. Последнее округляется до 14 пикселей на обычных мониторах. На устройствах с высоким разрешением (также называемых «сетчатка») мы можем разделить пиксель на части..

Когда уместно использовать относительные размеры шрифта? Почти всегда. Тогда мы можем установить только абсолютное значение тела. Все остальные шрифты будут относиться к нему. Если в какой-то момент мы решаем изменить размер текста — меняем только основной. Остальные наследуют и используют его, пересчитывая свой размер..

Эмоции

Эмми — это единицы, которые зависят от шрифта. Один em равен столько пикселей, сколько пиксель — это высота заглавной буквы M текущего шрифта..

Exos

Exes, как и ems, зависят от шрифта. Они равны высоте строчной буквы x текущего шрифта. Это в основном половина эм).

Точки

Точки (pt — point) равны 1/72 дюйма, что зависит от разрешения монитора. dpi — это сокращение от точек на дюйм или точек на дюйм. Мобильные устройства имеют более мелкие пиксели и соответственно больше точек на дюйм.

Пикассо

Пикассо (pc — picas) — 12pt.

Дюймы, сантиметры и миллиметры

Дюймы, сантиметры и миллиметры (дюймы, см, мм) снова зависят от dpi текущего монитора..

Чаще всего используются следующие единицы измерения: пиксели,% и em..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?