автордың кітабынан сөз тіркестері  Наглядный CSS

Грег Сидельников

Определить CSS-переменную в глобальной области видимости можно с помощью селектора :root. Здесь элемент используется только в качестве заполнителя, в реальной же работе он будет заменен допустимым именем HTML-элемента:

Не все CSS-свойства одинаковы. В зависимости от типа свойства значение может быть мерой пространства, заданного в пикселах, единицах pt, em или fr, цветом, указанным в виде имени (red, blue, black и т.д.), шестнадцатеричного значения (#0F0 или #00FF00…) или rgb (r, g, b).

Можно изменить размер шрифта с помощью свойства font-size. 16px — это размер по умолчанию (medium):

Далее приведен пример свойства font-family:"CMUClassicalSerif". Это один из лучших шрифтов.

А вот свойство font-family:"CMUBright". Еще один красивый шрифт!

Свойство font-family:Arial,sans-serif используется в Google:

Свойство font-family:Verdana,sans-serif:

Далее приведен простой код, чтобы навигационная панель «прилипала» к верхней (top:0) границе экрана. Обратите внимание: добавлен код -webkit-sticky для совместимости с браузерами на движке Webkit (такими как Chrome):

001 .navbar {

002 /* Определение некоторых основных настроек */

003 padding: 0px;

004 border: 20px solid silver;

005 background-color: white;

006 /* Добавить липкость */

007 position: -webkit-sticky;

008 position: sticky;

009 top: 0;

010 }

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

Следовательно, свойство position:relative не гарантирует полную точность при необходимости разместить элемент в идеальном месте в его родительском контейнере. Для такой цели больше всего подходит свойство position:absolute.

По сути, элементы с позиционированием static и relative одинаковы, за исключением того, что элементы relative могут иметь top (верхнюю) и left (левую) позиции относительно их исходного местоположения. Относительные элементы также могут иметь right (правое) и bottom (нижнее) положение.

5.2. Статичное и относительное позиционирование
По умолчанию свойство position установлено в static, то есть элементы отображаются в том порядке, в котором они были указаны в вашем HTML-документе, в соответствии с нормальным потоком HTML-страницы.

На статично позиционированные элементы не влияют свойства top, left, right и bottom.

Чтобы понять разницу, создадим несколько основных стилей CSS:

001 /* Применить границу ко всем элементам */

002 div { border: 1px solid gray; }

003

004 /* Установить произвольные значения ширины и положения */

005 #A { width: 100px; top: 25px; left: l00px; }

006 #B { width: 215px; top: 50px; }

007 #C { width: 250px; top: 50px; left:25px; }

008 #D { width: 225px; top: 65px; }

009 #E { width: 200px; top: 70px; left:50px; }

Граница 1pxsolid gray применена ко всем элементам div, поэтому теперь легче увидеть фактические размеры каждого HTML-элемента при отображении его в браузере.

Далее мы применим свойства position: static и position: relative к элементу div, чтобы увидеть разницу между статичным и относительным позиционированием.

Доступно пять типов позиционирования: static (статичное) (по умолчанию), relative (относительное), absolute (абсолютное), fixed (фиксированное) и sticky («липкое»). Мы рассмотрим их на протяжении всей этой главы.

По умолчанию для всех элементов используется статичное позицио­нирование:

Относительное позиционирование практически такое же, как и статичное:

5.1. Тестовый элемент

Обратите внимание: на самом деле здесь три элемента. Во-первых, сам документ. Но теоретически это может быть html, или body, или любой другой родительский контейнер. Фактические стили будут применены к тестовому элементу в данном родительском контейнере. Данный образец в качестве примера будет использоваться в главе 6, касающейся позиции элемента.