Содержание

Оглавление

courses / qa automation / web development

Урок 5. CSS: Типы данных и работа с HTML-элементами

Типы данных, используемые в CSS. Способы задания размеров элементов. Особенности работы с разными HTML-элементами (текстовыми, изображениями и др.) и задание им общих свойств.

Урок 5. CSS: Типы данных и работа с
HTML-элементами

Типы данных, используемые в CSS. Способы задания размеров элементов. Особенности работы с разными HTML-элементами (текстовыми, изображениями и др.) и задание им общих свойств.

Предыдущий урок

Урок 4. CSS: Основные понятия, селекторы, блочная модель

Следующий урок

Урок 6. CSS: Стили кода и построение макетов

ТЕОРЕТИЧЕСКИЙ БЛОК

1

Типы данных в CSS

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

Каких-то конкретных способов понимания того, что за тип данных имеет наблюдаемое нами свойство, в CSS не предусмотрено. Нужно опираться на логику и здравый смысл, а также контекст выражения. В большинстве случаев имеются явные подсказки, позволяющие понять принадлежность значения к тому или иному типу данных (если ширина блока определена как 370 px, то, очевидно, что перед нами абсолютная единица длины, а если задано 72% – то процентная).

В приводимых в уроке примерах будет опускаться скелет HTML-страницы (его необходимо один раз создать и внутри него размещать те или иные куски кода). Вид такого шаблона показан ниже (зададим ему имя index.html).

Пример - HTML


<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Практика CSS</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>


</body>
</html>

Для отображения CSS рядом с html-документом заведем папку css, внутри которой расположится внешний подключаемый файл со стилями style.css. Дополнительно в директории img находятся картинки, с которыми будем работать.

Структура тестового проекта

Рассмотрим типы данных, используемые в языке CSS.

2

Типы данных в CSS. Целые числа (integer).

Являются частным случаем типа number. Сюда включают как положительные, так и отрицательные числа. Применяются для ограниченного круга CSS-свойств (z-index, column-count, counter-increment, grid-row и др.).

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

Допустимые варианты целочисленного типа данных:

Пример


10
+30
-22
+0

Знак плюса не запрещено опускать. Несколько примеров неверного задания целых чисел:

Пример


# Это уже вариант типа number, а не integer;
-20.0
# Допустим лишь один символ + или -
+-75
# Научные обозначения таблицы стилей не умеют интерпретировать.
2е7

В качестве примеров работы с целым типом данных рассмотрим следующие свойства:
1. Свойство column-count
2. Свойство z-index

1. Свойство column-count

Данное свойство разбивает текстовое содержимое блока на некоторое количество столбцов. Оно унаследовано от печатных газет, где текст идет не сплошным полотном на всю ширину страницы, а делится на узкие колонки, что существенно удобнее при чтении. Может принимать только положительные значения и auto (в этом случае количество столбиков вычисляется на основании свойства column-width).

Пример – HTML


<article>
	Статья разбита на ряд колонок, что упрощает ее визуальное восприятие.
	Несмотря на то, что количество текста не меняется, он читается будто легче.
	Такова психология человеческого мозга.
	И хоть печатных газет сегодня мы читаем не так много, на подсознательном
	уровне мы привыкли к такому представлению текстовой информации.
	Правила следующие: данные внутри блока равномерно делятся на столбцы
	с отступами, распределяясь по ним максимально сбалансированно.
</article>

Пример – CSS


article {
	column-count: 5;
  }

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

2. Свойство z-index

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

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

Пример – HTML


<section>
	Фиолетовый блок
	<p class="red-box">Красный блок</p>
	<p class="orange-box">Оранжевый блок</p>
</section>

Пример – CSS


section {
	position: relative;
	z-index: -1;
	border: brown dotted;
	height: 200px;
	margin: 30px 10px;
	background-color: cornflowerblue;
	padding: 25px;
	width: 400px;
}

.red-box {
	position: absolute;
	z-index: 3;
	border: grey solid;
	background-color: firebrick;
	width: 60%;
	left: 100px;
	top: 40px;
	color: ghostwhite;
	height: 150px;
	padding: 12px;
}

.orange-box {
	position: absolute;
	z-index: 5;
	border: navy double;
	background-color: orange;
	padding: 10px;
	width: 40%;
	left: 300px;
	top: -15px;
	height: 90px;
	opacity: 0.6;
}

Результат работы свойства z-index с применением позиционирования блоков

На что обратить внимание

Элементу section мы присвоили самое малое значение z-index, что отодвинуло его на задний план. Абзац с классом orange-box находится как бы ближе всего к нам и перекрывает остальные объекты (для наглядности ему задана прозрачность при помощи opacity). Оставшийся блок расположен посередине (см. рисунок).
Относительное позиционирование (position: relative) тега <section> позволяет разместить внутри него потомков (в нашем примере – абсолютно) при помощи отступов (left, top, bottom, right).
Величина атрибута z-index может быть любой, а порядок наложения блоков будет определяться таким образом: чем меньше число, тем дальше от «наблюдателя» находится этот объект. В некоторых случаях для уверенности того, что интересующий нас элемент всегда расположится впереди, ему присваивают большое значение (например, 1000). Конечно, это не означает, что он как-то сильнее визуально приблизится к нам (так как пока что мониторы еще не стали транслировать голографическую 3D-картинку).

3

Типы данных в CSS. Десятичные дроби (number)

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

Допустимых вариантов написания тут больше, чем в случае задания целых чисел:

Пример


# Является и целым, и десятичным числом
101
# Положительное
2.12
# Отрицательное
-7.1
# Ноль (можно писать как с плюсом, так и с минусом, но проще вообще без знака)
+0.0
# Научное обозначение чисел со степенями
3.1е7 
# Допускается пропуск нуля в начале
.35

Конкретных свойств, которые в чистом виде применяют дроби, на текущее время в CSS практически нет (за исключением степени прозрачности – opacity). Тем не менее, такие числа встречаются в функциях (возьмем scale() для примера). И никто не запрещает задавать ширину или высоту при помощи чисел с плавающей точкой (хоть это и не принято).

Пример – HTML


<div>Стандартный блок</div>
<div class="scaled">Отмасштабированный блок</div>

Пример – CSS


div {
	width: 500px;
	height: 200px;
	background-color: hotpink;
	margin-left: 100px;
}
 
.scaled{
	transform: scale(1.3, -0.6);
	background-color: mediumturquoise;
}

У каждого тега <div> изначально одинаковые ширина и длина. К последнему из них мы применили свойство transform, передав туда функцию scale(). В качестве первого параметра она принимает величину растягивания по оси Х, а в качестве второго – по оси Y. Если абсолютное значение любого аргумента больше единицы, то элемент увеличится, в противном случае – уменьшится. Отрицательные числа не только меняют объект, но и отражают его относительно заданной оси (см. рисунок).

Использование дробных чисел в функции scale()

4

Типы данных в CSS. Измерение (dimension)

В CSS к этому типу данных относят число, к которому прикреплена единица измерения. Это целый класс подкатегорий, включающий длину (length), углы (angle), время (time), разрешения (resolution). Познакомимся с каждой из них.

4.1. Длина

Без этого числового типа не обходится ни один верстальщик, так как задание размеров – часто встречающаяся операция.

Выделяют абсолютные и относительные единицы определения длины.

Абсолютные включают:
– сантиметры (11cm);
– миллиметры (108mm);
– четверть-миллиметры (200Q);
– дюймы (4in);
– пики (17pc);
– точки (212pt);
– пиксели (310px).

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

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

Относительные единицы длины:

Приведем примеры.

Пример - HTML


<h1>Экспериментируем со шрифтами</h1>
<span>Наследуется от html</span>
<p>Текст в абзацах несколько уменьшен по сравнению с остальными блоками</p>

Пример – CSS


html {
	font-size: 25px;
}
 
h1 {
	font-size: 1.5rem;
}
 
p {
	font-size: 0.8rem;
}

Базовый шрифт для страницы определен в размере 25px. Все заголовки первого уровня увеличены относительно него на 50 %, а текст внутри абзацев сделан более мелким.

Пример - HTML


<section>
	Преамбула
	<header>Заголовочная часть</header>
	<article>Основное содержимое</article>
	<footer>Итоговая часть</footer>
</section>

Пример – CSS


section {
	font-size: 3vw;
}
 
header {
	font-size: 5vw;
}
 
article {
	font-size: 4vw;
}
 
footer {
	font-size: 2vw;
}

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

Меньше ширина экрана - меньше текст

Увеличили ширину экрана - увеличился текст

4.2 Углы

В CSS предусмотрены следующие меры углов: градусы (deg), радианы (rad), грады (grad) и повороты (turn). Чтобы не запутаться в соотношении этих единиц, посмотрим на следующее равенство:

Соотношение единиц


180deg = 200grad = 0.5turn = 3.142rad.

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

Продемонстрируем на практике.

Пример 1: Разворачиваем градиент на 90 градусов - HTML


<div></div>
<div class="deg"></div>

Пример 1: Разворачиваем градиент на 90 градусов – CSS


div {
	margin: 2vw;
	width: 80vw;
	height: 20vh;
	background: linear-gradient(blue, green);
}
 
.deg {
	background: linear-gradient(90deg, blue, green);
}

Для второго блока мы задали поворот на 90 градусов, что поменяло направление градиента.

У второго прямоугольника градиент повернут на 90 градусов

Пример 2. Поворачиваем блок на четверть поворота по часовой стрелке - HTML


<div>Обычный блок</div>
<div class="rotated">Блок с поворотом на 90 градусов</div>

Пример 2. Поворачиваем блок на четверть поворота по часовой стрелке – CSS


div {
	width: 20vw;
	height: 20vh;
	background-color: palegreen;
	margin: 1vw;
	padding: 1vh;
}
 
.rotated {
	transform: rotate(0.25turn);
	background-color: mistyrose;
}

Размеры обоих элементов <div> одинаковы, но второй мы повернули на четверть поворота по часовой стрелке.

Второй блок повернут на четверть поворота по часовой стрелке

4.3 Время

Используется только две единицы времени: секунды (s) и миллисекунды (ms). Актуально для анимаций и трансформаций, чтобы визуально было видно этот процесс.

Пример - HTML


<div>Вот это растяжка</div>

Пример – CSS


div {
	transition: 0.5s;
	width: 15vw;
	height: 15vh;
	background-color:palegreen;
	margin: 10vw;
	padding: 1vh;
}
 
div:hover {
	transform: skew(70.2grad, -0.21rad);
	background-color: mistyrose;
}

В нашем примере при наведении мыши на элемент он несколько растягивается и скручивается. Задание объявления transition: 0.5s позволило увидеть весь процесс не моментально, а плавно на протяжении полусекунды.

Изначальное состояние блока

Растяжка блока при наведении

4.4 Разрешения

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

Выделяют следующие единицы разрешения:
– dpi (количество точек на дюйм);
– dpcm (количество точек на сантиметр);
– dppx (количество точек на пиксель).

Пример - HTML


<div>Проверь свое устройство</div>

Пример – CSS


div {
	width: 15vw;
	height: 15vh;
	background-color: teal;
	margin: 10vw;
	padding: 1vh;
	text-align: center;
	border: tomato 5px double;
	color: whitesmoke;
}
 
@media screen and (min-resolution: 200dpi) {
	div {
    	background-color: midnightblue;
	}
}

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

5

Типы данных в CSS. Проценты.

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

Пример - HTML


Описание сайта
<section>
	Некий блок сайта
	<article>Содержимое блока</article>
</section>

Пример – CSS


body {
	height: 100vh;
	background-color:silver;
}
 
section {
	margin: 3%;
	font-size: 90%;
	width: 70%;
	height: 60%;
	background-color: moccasin;
}
 
article {
	font-size: 140%;
	width: 80%;
	height: 40%;
	background-color: thistle;
}

Перед нами наглядная демонстрация работы процентов как со шрифтами, так и блочными элементами. Тег <section> унаследовал размеры от <body>, тогда как тег <article> – от <section>, т.е. своего прямого родителя.

Изначальное состояние блока

Длина блоков пропорционально увеличивается при растяжке родительского блока

6

Типы данных в CSS. Цвет.

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

В общем случае цветовые значения определяются следующими способами:

6.1 Ключевые слова

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

Пример - HTML


<h1>Оттенки зеленого</h1>
<div class="green">Green</div>
<div class="aquamarine">Aquamarine</div>
<div class="chartreuse">Chartreuse</div>
<div class="darkgreen">DarkGreen</div>
<div class="darkseagreen">DarkSeaGreen</div>

Пример – CSS


body {
	background-color:honeydew;
	text-align: center;
}
 
h1 {
	color: forestgreen;
}
 
div {
	height: 50px;
	margin-bottom: 0.5em;
	color: honeydew;
	font-size: 2em;
	
}
 
.green {
	background-color: green;
}
 
.aquamarine {
	background-color: aquamarine;
}
 
.chartreuse {
	background-color: chartreuse;
}
 
.chartreuse {
	background-color: chartreuse;
}
 
.darkgreen {
	background-color: darkgreen;
}
 
.darkseagreen {
	background-color: darkseagreen;
}

Ниже продемонстрирован даже не весь перечень именованных оттенков зеленого цвета.

Именованные оттенки зеленого цвета

6.2 Шестнадцатеричные RGB-цвета

Не для каждого возможного оттенка имеется название, поэтому никто не запрещает задавать окраску элементов в виде шестнадцатеричного кода. Hex-значения предваряются решеткой, за которой следует 6 цифр (или 3, в случае достаточности). Для обозначения ссылок используется ряд тегов.

Пример - HTML


<h1>Можно три 16-ричных числа использовать</h1>
<h2>А можно и 6, при желании</h2>

Пример – CSS


h1 {
	color: #a0a;
}
 
h2 {
	color: #123456;
}

Использование hex-значений для задания цвета

6.3 Применение функций rgb() и rgba()

Данные функции принимают 3 целых числа от 0 до 255, задающих диапазон оттенков красного, зеленого и синего цветов соответственно. Для rgba() последним параметром можно назначить степень прозрачности от 0 до 1.

Пример - HTML


<p class="p1">Непрозрачный абзац</p>
<p class="p2">Прозрачный абзац</p>

Пример – CSS


body {
	background-color: rgb(255, 201, 53);
}
 
.p1 {
	background-color: rgb(118, 123, 202);
	height: 100px;
}
 
.p2 {
	background-color: rgba(224, 89, 89, 0.47);
	height: 10vh;
}

Использование функций rgb() и rgba() для задания цвета

6.4 Применение функций hsl() и hsla()

Оттенок (число от 0 до 360), насыщенность и яркость (от 0 до 100 %) – порядок задания параметров для данных функций. В hsla(), дополнительно, выставляется прозрачность.

Пример - HTML


<p class="p1">Непрозрачный абзац</p>
<p class="p2">Прозрачный абзац</p>

Пример – CSS


body {
	background-color: hsl(86, 70%, 81%);
}
 
.p1 {
	background-color: hsl(221, 37%, 49%);
	height: 100px;
}
 
.p2 {
	background-color: rgba(124, 29, 153, 0.38);
	height: 10vh;
}

7

Типы данных в CSS. Картинка (image).

Изображение – тип данных для представления двумерной графики. Сюда включают объекты, обозначенные:
– функцией url();
– градиентами;
– частями страниц, выделенными функцией element() – экспериментальное свойство, которое пока не поддерживается большинством браузеров;
– изображениями, определенными функций image() – пока не реализовано;
– смешиванием картинок при помощи cross-fade() – работает не везде, нужно указывать свойство с учетом браузера;
– набором изображений image-set() – также может не везде работать.

Важно
Для работы последующий нескольких примеров необходимо положить файлы с картинками в папку css. Для этого выберите 3 произвольные картинки, назовите их 3.jpg, 4.jpg и 5.jpg соответственно. Внутри папки css создайте папку img и положите в нее картинки.

Пример - HTML


<div class="bg-im"></div>
<div class="grad-im"></div>
<div class="mix-im"></div>
<div class="set-im"></div>

Пример – CSS


div {
	height: 20vh;
	background-color: sandybrown;
	margin: 1vw;
}
 
.bg-im {
	background: url("img/3.jpg") no-repeat center;
}
 
.grad-im {
	background: linear-gradient(to left, red, blue);
}
 
.mix-im {
	background: cross-fade(url("img/3.jpg"), url("img/5.png"), 35%) no-repeat center;
	background: -webkit-cross-fade(url("img/3.jpg"), url("img/5.png"), 35%) no-repeat center;
 
}
 
.set-im {
	background: url("img/5.png") no-repeat center;
	background: -webkit-image-set("img/3.jpg" 1dppx,
                                "img/4.jpg" 2dppx) no-repeat center;
	background: -webkit-image-set("img/3.jpg" 1dppx,
                                "img/4.jpg" 2dppx) no-repeat center;
}

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

8

Типы данных в CSS. Позиция (position).

Тип данных актуален для свойств background-position и offset-anchor и отвечает за положение элемента относительно родительского блока (не обязательно, что он будет находиться внутри предка в результате модификаций).

Задается при помощи ключевых слов: top, bottom, left, right, center. Помимо ключевых слов позиция может определяться процентами, абсолютными и относительными величинами либо наследоваться от вышестоящего в DOM-дереве объекта.

Синтаксис следующий:

8.1 Синтаксис position: Одно значение

Задание ключевого слова, процента или единицы длины.

Важно
Для работы примера внутри папки css нужно создать папку img с картинками.

Пример - HTML


<div class="center"></div>
<div class="bottom"></div>
<div class="percentage"></div>

Пример – CSS


div {
	height: 30vh;
	background-color: sandybrown;
	margin: 1vw;
	background-size: 200px;
}
 
.center {
	
	background-image: url("img/3.jpg");
	background-position: center;
	background-repeat: no-repeat;
}
 
.bottom {
	background-image: url("img/3.jpg");
	background-position: bottom;
	background-repeat: no-repeat;
}
 
.percentage {
	background-image: url("img/3.jpg");
	background-position: 60%;
	background-repeat: no-repeat;
}

Первый блок выровнял фоновую картинку строго по центру вертикально и горизонтально. У второго блока рисунок переместился вниз по вертикали, но остался центрированным по оси X. В последнем случае мы сдвинули изображение влево на 60 % от ширины элемента, тогда как вертикальное центрирование не нарушилось.

Задание выравнивания картинки с помощью свойства position

8.2 Синтаксис position: Два значения

В данном варианте ключевые слова left-right и top-bottom взаимоисключающие, а вторая величина означает сдвиг по второй оси – сверху или слева соответственно.

Важно
Для работы примера внутри папки css нужно создать папку img с картинками.

Пример - HTML


<!-- Перемещение изображения вниз вправо -->
<div class="bottom-right"></div>
<!-- Центровка картинки -->
<div class="center"></div>
<!-- Сдвиг на 10 писелей слева и 10% сверху -->
<div class="values"></div>

Пример – CSS


div {
	height: 30vh;
	background-color: sandybrown;
	margin: 1vw;
	background-size: 200px;
}
 
.bottom-right {
	
	background-image: url("img/3.jpg");
	background-position: bottom right;
	background-repeat: no-repeat;
}
 
.center {
	background-image: url("img/3.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
 
.values {
	background-image: url("img/3.jpg");
	background-position: 10px 10%;
	background-repeat: no-repeat;
}

Задание выравнивания картинки с помощью свойства position

8.3 Синтаксис position: Три значения

Два ключевых слова и сдвиг по последнему.

Важно
Для работы примера внутри папки css нужно создать папку img с картинками.

Пример - HTML


<!-- Перемещение изображения вниз вправо со сдвигом на 40 пикселей справа -->
<div class="bottom-right"></div>
<!-- Центровка картинки и помещение ее вниз с отступом от нижнего края на 1em-->
<div class="center-bottom"></div>

Пример – CSS


div {
	height: 30vh;
	background-color: sandybrown;
	margin: 1vw;
	background-size: 200px;
}

.bottom-right {
	
	background-image: url("img/3.jpg");
	background-position: bottom right 40px;
    background-repeat: no-repeat;
}
 
.center-bottom {
	background-image: url("img/3.jpg");
	background-position: center bottom 1em;
	background-repeat: no-repeat;
}

Задание выравнивания картинки с помощью свойства position

8.4 Синтаксис position: Четыре значения

Ключевые слова и их значения.

Важно
Для работы примера внутри папки css нужно создать папку img с картинками.

Пример - HTML


<!-- Перемещение изображения вниз со сдвигом 10% и вправо со сдвигом на 40px -->
<div class="bottom-right"></div>
<!-- Изображение находится слева вверху и отодвинуто на 25px-->
<div class="left-top"></div>

Пример – CSS


div {
	height: 30vh;
	background-color: sandybrown;
	margin: 1vw;
	background-size: 200px;
}
 
.bottom-right {
	
	background-image: url("img/3.jpg");
	background-position: bottom 10% right 40px;
	background-repeat: no-repeat;
}
 
.left-top {
	background-image: url("img/3.jpg");
    background-position: top 25px left 25px;
	background-repeat: no-repeat;
}

Задание выравнивания картинки с помощью свойства position

9

Типы данных в CSS. Строка.

Строковые данные применимы для следующих свойств: content (заменяет содержимое элемента сгенерированным контентом), font-family (задает шрифты) и quotes (определяет поведение цитат).

Пример - HTML


<h1>Применяем шрифты</h1>
	<p>Здесь мы использовали другой шрифт</p>

Пример – CSS


p {
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

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

10

Типы данных в CSS. Функции.

Современный CSS постоянно внедряет новый функционал. Функции в таблицах стилей уже никого не удивляют. Помимо рассмотренных выше (для задания цвета) имеются и другие:

- calc() – позволяет вычислять значения свойств;
- min() – определяет минимальную величину;
- max() – возвращает максимум;
- clamp() – работает с диапазоном границ и на основании предпочитаемого значения задает свойство;
- attr() – извлекает значение атрибута, которое можно применять в таблицах стилей.

Пример - HTML


<h1 data-before="Меняем " data-after="!">атрибуты</h1>

Пример – CSS


h1::before {
	content: attr(data-before);
}
 
h1::after {
	content: attr(data-after);
}

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

Формирование содержимого элемента в помощью функции attr()

11

Подходы к заданию размеров элементов в
HTML-документах

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

11.1. Естественный размер

Представим картинку, которую мы планируем разместить на своей странице. Мы ее помещаем в тег <img> и запускаем код. Что случится? Скорее всего, она отразится в своей натуральной величине. Это может привести к определенным неудобствам: фото очень большое, а если их много – и все разного размера – на странице будет твориться каша и неразбериха, которая вызовет у посетителя ресурса одно желание – быстрее его покинуть.

Многие HTML-элементы имеют так называемый естественный размер: они занимают столько места на странице, сколько составляет объем их контента. В частности, теги <span> и <div> вовсе не имеют начальных параметров высоты. Их можно создать сотню, но вы их не увидите, пока не наполните. Добавление границ, отступов приводит к появлению размеров у таких объектов.

Пример - HTML


<article></article>
<article></article>
<article></article>

Пример – CSS


article {
	border: seagreen 4px solid;
}

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

Три элемента с пустым контентом, но заданными границами в 4px

11.2. Заданный размер

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

Пример - HTML


<article>Программируем красиво</article>
<article>Изучаем свойства CSS</article>
<article>Углубляемся в стили</article>

Пример – CSS


article {
	border: seagreen 2px dotted;
	height: 100px;
	width: 10vw;
}

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

Три элемента с заданными размерами: height=100px и width=10vw

11.3. Размеры в процентах

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

Пример - HTML


<article>
	<h1>Основы дедукции</h1>
</article>
<article>
	<h1>Азы индукции</h1>
</article>
<article>
	<h1>Аналогия для чайников</h1>
</article>

Пример – CSS


article {
	border: rgb(67, 0, 99) 2px solid;
	height: 100px;
	width: 90vw;
}
 
h1 {
	width: 75%;
	height: 90%;
	padding: 5%;
	text-align: center;
}

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

Три элемента с размерами в px и vw и заголовками в процентах

11.4. Минимальные и максимальные размеры

Жестко заданный формат элементов – не всегда хорошо. У некоторых пользователей страница будет выглядеть слишком маленькой (много пустого пространства по сторонам), а другим придется пользоваться горизонтальной прокруткой, за что в 21 веке могут обозвать самыми некрасивыми словами.

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

Есть промежуточное решение, основная цель которого: ограничить размеры блоков для эстетичности и удобства. Для этого используют min и max при определении ширины и высоты объектов.

Пример - HTML


<div>Сайт в разработке</div>
<div>Сообщим, когда будет готово</div>

Пример – CSS


div {
	min-height: 100px;
	background-color: skyblue;
	margin: 3%;
	max-width: 500px;
	padding: 2em;
	text-align: right;
}

Элементы с ограниченным максимальным значением ширины 500px

11.5. Размеры в зависимости от величины окна браузера

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

Пример - HTML


<p>Меня читать удобно и на мониторе, и на небольшом экране телефона</p>

Пример – CSS


p {
	height: 70vh;
	width: 95vw;
	font-size: 4vmax;
}

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

Отображение текста на маленьком экране

Отображение текста на экране с бОльшей шириной - текст увеличился

12

Работаем с HTML-элементами: общие свойства

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

12.1. Фон

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

Все эти свойства можно одновременно перечислить в атрибуте background.

Важно
Для работы примера внутри папки css нужно создать папку img с картинками.

Пример - HTML


<div></div>
<div></div>

Пример – CSS


div {
	width: 80vw;
	height: 30vh;
	background-color: lightcoral;
	background-image: url("img/4.jpg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position: bottom right;
 
}
 
div + div {
	background: rgb(255, 189, 142) url("img/3.jpg") repeat-x top/22%;
}

В первом случае мы использовали полную форму свойств фона, а во втором – сокращенную.

Два элемента с разными параметрами фона

12.2. Границы

Определение границ у элементов можно проводить как сразу для 4-х сторон, так и для каждой по отдельности. Основные свойства:

Пример - HTML


<div></div>

Пример – CSS


div {
	width: 30vw;
	height: 30vw;
	background-color:lightcoral;
	border: purple 5px groove;
	border-radius: 50%;
}

В результате операций над элементом и задания ему скругленных границ максимальной величины мы превратили квадратный <div> в круг.

Круг из квадратного блока с помощью скругления границ

Круг из квадратного блока <div> с помощью скругления границ

12.3. Перекрытие содержимого (overflow)

Нередко случаются ситуации, когда внутрь контейнера не помещается его содержимое. В результате сбивается верстка, блоки накладываются друг на друга. Хорошо, что этим поведением можно управлять. Для этого имплементировано свойство overflow. Его возможные значения:

Пример - HTML


<p class="visible">Много разного текста, предоставленного сайтом для своих дорогих посетителей</p>
<p class="hidden">Много разного текста, предоставленного сайтом для своих дорогих посетителей</p>
<p class="scroll">Много разного текста, предоставленного сайтом для своих дорогих посетителей</p>

Пример – CSS


p {
	width: 130px;
	height: 70px;
	border: indigo 8px solid;
	padding: 5px;
	margin-bottom: 40px;
}
 
.visible {
	overflow: visible;
}
 
.hidden {
	overflow: hidden;
}
 
.scroll {
	overflow: scroll;
}

Все три параграфа ведут себя по-разному: в первом текст выходит за его границы, во втором – обрезается, а в третьем – обрезается с прокруткой.

Три элемента с разным перекрытием

ПРАКТИЧЕСКИЙ БЛОК

1

Вопросы

2

Задачи

Задача 1

Для более красивого отображения надписей на странице Иван решил внедрить свой собственный шрифт под названием Mega Font Cool. Помогите дизайнеру при помощи каскадных таблиц стилей привязать его к сайту. Не забудьте про тот факт, что не все посетители имеют такой шрифт у себя на компьютере. К слову, шрифт относится к семейству моноширинных.

Задача 2

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

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

3

Решения

Задача 1

Чтобы шрифт охватил все блоки ресурса, удобнее всего его присвоить тегу <html>. В будущем, конечно, логичнее будет подключить его через свойство @import, но для начала нужно не забыть указать несколько альтернатив для тех, у кого нет данного творения дизайнера.

Решение - CSS


html {
	font-family: 'Mega Font Cool', 'Courier New', monospace;
}

Задача 2

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

Решение - HTML


<div>
	<div>
    	<div>
        	<div>
            	<div>
                	<div>
                    	<div></div>
               	 </div>
            	</div>
        	</div>
    	</div>
	</div>
</div>

Решение - CSS


div {
	width: 600px;
	height: 600px;
	background-color: rgb(145, 125, 130);
	border: rgb(2, 44, 20) 1px solid;
}
 
div > div {
	width: 50%;
    height: 50%;
	margin: 25% 25%;
}

Предыдущий урок

Урок 4. CSS: Основные понятия, селекторы, блочная модель

Следующий урок

Урок 6. CSS: Стили кода и построение макетов

Как вам материал?