CSS - Loại dữ liệu

Giới thiệu

Xin chào các pháp sư CSS tương lai! Tôi rất vui mừng được hướng dẫn các bạn trong hành trình thú vị qua thế giới các loại dữ liệu CSS. Là một ai đó đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể告诉 bạn rằng việc hiểu các loại dữ liệu giống như học bảng chữ cái trước khi viết một tiểu thuyết. Nó rất cơ bản, và dám nói, rất thú vị! Hãy cùng nhau lặn sâu và giải mã bí ẩn các loại dữ liệu CSS nhé.

Cú pháp

Trước khi chúng ta đi vào chi tiết về các loại dữ liệu, hãy nói về cách CSS thích dữ liệu được phục vụ. CSS có một cách đặc biệt để biểu thị giá trị, và rất quan trọng để bạn quen thuộc với cú pháp này.

selector {
property: value;
}

Ví dụ:

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

Ở đây, 'red' và '16px' là các giá trị của các loại dữ liệu khác nhau. 'Red' là từ khóa màu, trong khi '16px' là giá trị chiều dài. Thấy rằng dễ dàng như thế nào? Bạn đã bắt đầu quen thuộc với nó rồi!

Loại dữ liệu văn bản

Bây giờ, hãy nói về văn bản. CSS yêu văn bản, và nó có nhiều cách để xử lý nó.

Strings

Strings trong CSS giống như giấy gói quà cho từ. Chúng có thể được bọc trong dấu nháy đơn hoặc kép.

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

Trong ví dụ này, "Hello, World!" là một chuỗi. Nó giống như nói với CSS, "Hey, xử lý chính xác như tôi đã viết nó!"

Identifiers

Identifiers giống như tên của các thứ trong CSS. Chúng không cần dấu nháy và được sử dụng cho các thuộc tính, lớp, ID, và hơn thế nữa.

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

Ở đây, 'Arial' và 'sans-serif' là các identifiers. Chúng đang告诉 CSS哪种字体要使用。

URLs

URLs trong CSS giống như địa chỉ cho các tài nguyên. Chúng thường được sử dụng với hàm url().

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

Điều này告诉 CSS nơi tìm thấy hình ảnh cho nền.

Loại dữ liệu số học

Số học là xương sống của nhiều thuộc tính CSS. Hãy đếm cách!

Integers

Integers là các số nguyên, không có phần thập phân!

.container {
z-index: 5;
}

Ở đây, 5 là một integer, xác định thứ tự stacking của các phần tử.

Numbers

Numbers trong CSS có thể bao gồm cả số thập phân.

.opacity-example {
opacity: 0.5;
}

Điều này đặt độ trong suốt thành 50%, làm cho phần tử semi-transparent.

Dimensions

Dimensions là các số có đơn vị kèm theo.

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

Ở đây chúng ta thấy pixels (px), percentages (%) và ems (em) trong hành động.

Quantities

Quantities trong CSS giống như các phép đo trong nấu ăn. Chúng giúp chúng ta định nghĩa muốn bao nhiêu của một thứ.

Lengths

Lengths có thể là tuyệt đối (như pixels) hoặc tương đối (như em hoặc %).

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

'vw' đại diện cho viewport width, và 'rem' là tương đối với kích thước字体 của phần tử root.

Angles

Angles được sử dụng cho các rotations và gradients.

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

Điều này xoay một phần tử 45 độ.

Time

Time values được sử dụng cho các animations và transitions.

.animated {
transition: all 0.5s ease;
}

Điều này đặt một transition nửa giây cho tất cả các thuộc tính.

Kết hợp các loại

Đôi khi, CSS thích kết hợp và ghép các loại dữ liệu.

Function Values

Functions trong CSS nhận các đối số và trả về một giá trị.

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

Điều này tạo một gradient từ đỏ đến xanh dương.

Màu sắc

Màu sắc trong CSS giống như bảng màu của một họa sĩ. Có nhiều cách để định nghĩa chúng.

.colorful {
color: #ff0000;  /* Hexadecimal */
background-color: rgb(0, 255, 0);  /* RGB */
border-color: hsl(240, 100%, 50%);  /* HSL */
}

Mỗi trong số này xác định một màu khác nhau sử dụng các ký hiệu khác nhau.

Hình ảnh

Hình ảnh trong CSS có thể là hơn chỉ là hình ảnh từ các tệp.

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

Ở đây, chúng ta sử dụng cả một hình ảnh bên ngoài và một gradient như hình ảnh.

Định vị 2D

Định vị trong CSS giống như chơi cờ vua trên trang web.

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

Điều này định vị một phần tử 50 pixel từ trên cùng và 100 pixel từ bên trái của phần tử chứa nó.

Loại dữ liệu tính toán

Đôi khi, chúng ta cần CSS thực hiện toán học cho chúng ta.

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

Điều này tính toán chiều rộng để là 100% của cha minus 20 pixel.

Display

Display xác định cách một phần tử được render.

.flex-container {
display: flex;
}

Điều này biến một phần tử thành một flex container, cho phép layout flexbox.

Các loại dữ liệu khác

CSS còn một vài tuyệt chiêu khác trong túi áo của mình.

Global Values

Global values có thể được sử dụng trên bất kỳ thuộc tính nào.

.inherited {
color: inherit;
}

Điều này告诉 phần tử sử dụng cùng màu như phần tử cha.

Dưới đây là bảng tóm tắt các loại dữ liệu CSS chính mà chúng ta đã xem xét:

Loại dữ liệu	Ví dụ	Mô tả
String	"Hello, World!"	Văn bản trong dấu nháy
Identifier	Arial	Tên không dấu nháy cho phông chữ, thuộc tính, v.v.
URL	url('image.jpg')	Địa chỉ của một tài nguyên
Integer	5	Số nguyên
Number	0.5	Số có thể bao gồm cả số thập phân
Length	10px, 2em, 50%	Đo lường với đơn vị
Angle	45deg	Giá trị xoay
Time	0.5s	Thời gian cho animations
Color	#ff0000, rgb(255,0,0)	Giá trị màu
Function	calc(), linear-gradient()	Thực hiện tính toán hoặc tạo hiệu ứng

Nhớ rằng, CSS giống như một bộ công cụ, và các loại dữ liệu là công cụ của bạn. Càng quen thuộc bạn trở nên với chúng, thiết kế của bạn càng trở nên sáng tạo và chính xác. Hãy tiếp tục thực hành, và sớm bạn sẽ định dạng các trang web như một chuyên gia!

Credits: Image by storyset