Hướng dẫn what is the value of css? - giá trị của css là gì?

Kiểu dữ liệu văn bản

• Từ khóa được xác định trước là
• url()

Các loại dữ liệu văn bản là , một loạt các ký tự được trích dẫn hoặc , một "Định danh CSS" là một chuỗi chưa được trích xuất. Một phải được trích dẫn với trích dẫn đơn hoặc đôi. Định danh CSS, được liệt kê trong các thông số kỹ thuật là hoặc , phải không được trích xuất.

Trong các thông số kỹ thuật của CSS, các giá trị có thể được xác định bởi nhà phát triển web, như hoạt hình KeyFrame, tên gia đình hoặc khu vực lưới được liệt kê là , hoặc cả hai.

Khi cả hai giá trị văn bản do người dùng được trích dẫn và chưa được trích xuất, thông số kỹ thuật sẽ liệt kê

.item {
  grid-area: content;
}

@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' {
  /* keyframes go here */
}

Một số giá trị văn bản không hợp lệ nếu được bao gồm trong trích dẫn. Ví dụ: giá trị của

.item {
  grid-area: content;
}

.item {
  grid-area: content;
}

.item {
  grid-area: content;
}

So sánh, một loại dữ liệu là , chẳng hạn như giá trị chuỗi của thuộc tính

.item {
  grid-area: content;
}

.item::after {
  content: "This is my content.";
}

Mặc dù bạn thường có thể tạo bất kỳ tên nào bạn muốn, bao gồm cả việc sử dụng biểu tượng cảm xúc, thì mã định danh không thể là

.item::after {
  content: "This is my content.";
}

.item::after {
  content: "This is my content.";
}

.item::after {
  content: "This is my content.";
}

.item::after {
  content: "This is my content.";
}

Giá trị từ khóa được xác định trước

Các từ khóa được xác định trước là các giá trị văn bản được xác định bởi đặc tả cho thuộc tính đó. Các từ khóa này cũng là số nhận dạng CSS và do đó được sử dụng mà không cần trích dẫn.

Khi xem cú pháp giá trị thuộc tính CSS trong đặc tả CSS hoặc trang thuộc tính MDN, các từ khóa được phép sẽ được liệt kê trong biểu mẫu sau. Các giá trị sau là các giá trị từ khóa được xác định trước được phép cho

.item::after {
  content: "This is my content.";
}

left | right | none | inline-start | inline-end

Các giá trị như vậy được sử dụng mà không có báo giá:

Các giá trị toàn bộ CSS

Ngoài các từ khóa được xác định trước là một phần của đặc điểm kỹ thuật cho một thuộc tính, tất cả các thuộc tính CSS đều chấp nhận các giá trị thuộc tính rộng CSS

.item::after {
  content: "This is my content.";
}

.item::after {
  content: "This is my content.";
}

.item::after {
  content: "This is my content.";
}

Từ khóa

.item::after {
  content: "This is my content.";
}

.item::after {
  content: "This is my content.";
}

Từ khóa

.item::after {
  content: "This is my content.";
}

.item::after {
  content: "This is my content.";
}

.item::after {
  content: "This is my content.";
}

Giá trị thứ tư của

left | right | none | inline-start | inline-end

URL

Loại url() sử dụng ký hiệu chức năng, chấp nhận là URL. Đây có thể là một URL tuyệt đối hoặc URL tương đối. Ví dụ: nếu bạn muốn bao gồm một hình ảnh nền, bạn có thể sử dụng một trong hai điều sau đây.

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

Tham số cho url() có thể được trích dẫn hoặc không được trích dẫn. Nếu không được trích dẫn, nó được phân tích cú pháp như một

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

Các loại dữ liệu số

Số nguyên

Một số nguyên là một hoặc nhiều chữ số thập phân,

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

Số

A

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

Kích thước

A 5 là

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

CSS sử dụng kích thước để chỉ định:

• 1 (Đơn vị khoảng cách)
• 2
• 3
• 4
• 5
• 6

Tất cả đều được đề cập trong các tiểu mục dưới đây.

Đơn vị khoảng cách

Trong trường hợp một đơn vị khoảng cách, còn được gọi là chiều dài, được cho phép làm giá trị cho một thuộc tính, thì đây được mô tả là loại 1. Có hai loại chiều dài trong CSS: tương đối và tuyệt đối.

Các đơn vị chiều dài tương đối chỉ định một độ dài liên quan đến một cái gì đó khác. Ví dụ, 8 liên quan đến kích thước phông chữ trên phần tử và 9 có liên quan đến chiều cao chế độ xem.

Các đơn vị chiều dài tuyệt đối được cố định với một chiều dài vật lý: một inch hoặc một cm. Do đó, nhiều đơn vị trong số này hữu ích hơn khi đầu ra là phương tiện có kích thước cố định, chẳng hạn như in. Ví dụ, 0 là một milimet vật lý, 1/10 của một cm.

Khi bao gồm một giá trị độ dài, nếu độ dài là

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

Đơn vị góc

Các giá trị góc được biểu diễn bằng loại 2 và chấp nhận các giá trị sau:

Đơn vị thời gian

Giá trị thời gian được biểu thị bằng loại 3. Khi bao gồm một giá trị thời gian, định danh đơn vị - 4 hoặc 5 - được yêu cầu. Nó chấp nhận các giá trị sau.

Đơn vị tần số

Giá trị tần số được biểu thị bằng loại 4. Nó chấp nhận các giá trị sau.

7, cũng có thể được viết là 8 hoặc 9, là một chu kỳ mỗi giây.

Đơn vị uốn cong

Các đơn vị Flex được biểu thị bằng loại 5. Nó chấp nhận giá trị sau.

Đơn vị giải quyết

Các đơn vị độ phân giải được biểu thị bằng loại 6. Chúng đại diện cho kích thước của một chấm duy nhất trong một biểu diễn đồ họa, chẳng hạn như màn hình, bằng cách chỉ ra có bao nhiêu chấm này phù hợp với một inch CSS, centimet hoặc pixel. Nó chấp nhận các giá trị sau:

Tỷ lệ phần trăm

Một url()2 là một loại đại diện cho một phần của một số giá trị khác.

Giá trị phần trăm luôn liên quan đến một đại lượng khác, ví dụ như độ dài. Mỗi thuộc tính cho phép tỷ lệ phần trăm cũng xác định số lượng mà tỷ lệ phần trăm đề cập đến. Số lượng này có thể là một giá trị của một thuộc tính khác của cùng một yếu tố, giá trị của một thuộc tính của một phần tử tổ tiên, một phép đo của một khối chứa hoặc một cái gì đó khác.

Ví dụ, nếu bạn chỉ định url()3 của một hộp theo tỷ lệ phần trăm, nó sẽ đề cập đến tỷ lệ phần trăm chiều rộng được tính toán của cha mẹ của hộp:

Tỷ lệ và kích thước trộn lẫn

Một số thuộc tính chấp nhận một kích thước có thể là một trong hai loại, ví dụ A 1 hoặc url()2. Trong trường hợp này, giá trị được phép được chi tiết trong đặc điểm kỹ thuật như một đơn vị kết hợp, ví dụ: url()6. Các kết hợp có thể khác như sau:or a url()2. In this case the allowed value is detailed in the specification as a combination unit, e.g. url()6. Other possible combinations are as follows:

• url()7
• url()8
• url()9

Các loại dữ liệu đặc biệt (được xác định trong các thông số kỹ thuật khác)

• 0
• 1
• 2

Màu sắc

Giá trị 0 chỉ định màu của tính năng phần tử (ví dụ: đó là màu nền) và được xác định trong mô -đun màu CSS.

Hình ảnh

Giá trị 1 chỉ định tất cả các loại hình ảnh khác nhau có thể được sử dụng trong CSS và được xác định trong các giá trị hình ảnh CSS và mô -đun nội dung được thay thế.

Chức vụ

Loại 2 xác định vị trí 2D của một đối tượng bên trong khu vực định vị, ví dụ như một hình ảnh nền bên trong một thùng chứa. Loại này được hiểu là 6 và do đó được chỉ định trong nền tảng CSS và đặc tả Biên giới.

Ký hiệu chức năng

• 7
• 8
• 9

• .item {
    grid-area: content;
  }
  

  00

• .item {
    grid-area: content;
  }
  

  01

• .item {
    grid-area: content;
  }
  

  02

• .item {
    grid-area: content;
  }
  

  03

Ký hiệu chức năng là một loại giá trị có thể đại diện cho các loại phức tạp hơn hoặc gọi xử lý đặc biệt bằng CSS. Cú pháp bắt đầu với tên của hàm ngay lập tức theo sau là dấu ngoặc đơn trái

.item {
  grid-area: content;
}

.item {
  grid-area: content;
}

Không gian trắng được cho phép, nhưng tùy chọn bên trong dấu ngoặc đơn. (Nhưng xem ghi chú về khoảng trắng trong các trang cho các hàm 8, 9,

.item {
  grid-area: content;
}

.item {
  grid-area: content;
}

Một số ký hiệu chức năng kế thừa như

.item {
  grid-area: content;
}

Xem thêm