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

Введение

Здравствуйте, будущие маги CSS! Я рад быть вашим проводником в увлекательном путешествии по миру типов данных CSS. Как某人, кто teaches computer science на протяжении более десяти лет, я могу告诉你, что понимание типов данных похоже на изучение алфавита перед написанием романа. Это основа, и позвольте мне сказать, это весело! Так что погружаемся и разворачиваем тайны типов данных CSS вместе.

Синтаксис

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

селектор {
свойство: значение;
}

Например:

p {
color: red;
font-size: 16px;
}

Здесь 'red' и '16px' являются значениями разных типов данных. 'Red' - это ключевого слова цвета, а '16px' - это значение длины. Видите, как легко? Вы уже bắt đầu понимать!

Текстовые типы данных

Теперь давайте поговорим о тексте. CSS любит текст и имеет несколько способов работы с ним.

Строки

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

.greeting::before {
content: "Hello, World!";
}

В этом примере "Hello, World!" - это строка. Это как tell CSS, "Эй, относись к этому exactly как я написал!"

Идентификаторы

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

#main-header {
font-family: Arial, sans-serif;
}

Здесь 'Arial' и 'sans-serif' являются идентификаторами. Они tell CSS, какие шрифты использовать.

URL

URL в CSS как адреса для ресурсов. Они обычно используются с функцией url().

body {
background-image: url('background.jpg');
}

Это tell CSS, где найти изображение для фона.

Числовые типы данных

Числа являются основой многих свойств CSS. Давайте сосчитаем способами!

Целые числа

Целые числа - это целые числа, без дробей!

.container {
z-index: 5;
}

Здесь 5 - это целое число, определяющее порядок стека элементов.

Числа

Числа в CSS могут включать десятичные знаки.

.opacity-example {
opacity: 0.5;
}

Это устанавливает непрозрачность до 50%, делая элемент полупрозрачным.

Размеры

Размеры - это числа с прикрепленными единицами измерения.

.box {
width: 100px;
height: 50%;
margin: 10em;
}

Здесь мы видим пиксели (px), проценты (%) и ems (em) в действии.

Количество

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

Длины

Длины могут быть абсолютными (например, пиксели) или относительными (например, em или %).

.container {
width: 80vw;
padding: 2rem;
}

'vw' означает ширину окна, а 'rem' относителен к размеру шрифта корневого элемента.

Углы

Углы используются для поворотов и градиентов.

.rotated {
transform: rotate(45deg);
}

Это поворачивает элемент на 45 градусов.

Время

Значения времени используются для анимаций и переходов.

.animated {
transition: all 0.5s ease;
}

Это устанавливает полусекундный переход для всех свойств.

Комбинации типов

Иногда CSS любит смешивать и匹配 типы данных.

Значения функций

Функции в CSS принимают аргументы и возвращают значение.

.gradient {
background: linear-gradient(to right, red, blue);
}

Это создает градиент от красного к синему.

Цвет

Цвета в CSS как画家ская палитра. Есть несколько способов их определить.

.colorful {
color: #ff0000;  /* Шестнадцатеричный */
background-color: rgb(0, 255, 0);  /* RGB */
border-color: hsl(240, 100%, 50%);  /* HSL */
}

Каждый из этих определяет разный цвет с использованием разныхnotations.

Изображения

Изображения в CSS могут быть больше, чем просто pictures из файлов.

.image-types {
background-image: url('cat.jpg');
list-style-image: linear-gradient(to right, red, blue);
}

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

2D позиционирование

Позиционирование в CSS как игра в шахматы на веб-странице.

.positioned {
position: absolute;
top: 50px;
left: 100px;
}

Это позиционирует элемент на 50 пикселей сверху и 100 пикселей слева от содержащего элемента.

Типы данных для расчетов

Иногда нам нужно, чтобы CSS делал математику за нас.

.calculated {
width: calc(100% - 20px);
}

Это calculates ширину до 100% родителя минус 20 пикселей.

Отображение

Отображение определяет, как элемент рендерится.

.flex-container {
display: flex;
}

Это делает элемент flex-контейнером, enabling flexible box layout.

Другие типы данных

CSS имеет несколько других трюков в рукаве.

Глобальные значения

Глобальные значения могут быть использованы на любом свойстве.

.inherited {
color: inherit;
}

Это tell элемент использовать тот же цвет, что и у родителя.

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

Тип данных	Пример	Описание
Строка	"Hello, World!"	Текст, окруженный кавычками
Идентификатор	Arial	Непroquoted имя для шрифтов, свойств и т.д.
URL	url('image.jpg')	Адрес ресурса
Целое число	5	Целое число
Число	0.5	Число, которое может включать десятичные знаки
Длина	10px, 2em, 50%	Измерение с единицами измерения
Угол	45deg	Значение поворота
Время	0.5s	Продолжительность для анимаций
Цвет	#ff0000, rgb(255,0,0)	Значение цвета
Функция	calc(), linear-gradient()	Выполняет расчеты или создает эффекты

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

Credits: Image by storyset