Các thuộc tính trong CSS với ví dụ là gì?

Thuộc tính CSS là một đặc tính [như màu sắc] có giá trị được liên kết xác định một khía cạnh về cách trình duyệt sẽ hiển thị phần tử

Đây là một ví dụ về quy tắc CSS

/* "div" is a selector indicating that all the div elements */
/* in the document will be styled by that rule */
div {
  /* The property "color" with the value "black" indicates */
  /* that the text will have the color black */
  color: black;

  /* The property "background-color" with the value "white" indicates */
  /* that the background color of the elements will be white */
  background-color: white;
}

Tìm thấy một vấn đề với trang này?

• Chỉnh sửa trên GitHub
• Nguồn trên GitHub
• Báo cáo sự cố với nội dung này trên GitHub
• Bạn muốn tự khắc phục sự cố?

Sửa đổi lần cuối. Ngày 2 tháng 1 năm 2023, bởi những người đóng góp MDN

W3C hiện đang làm việc trên CSS3. CSS3 bao gồm nhiều mô-đun độc lập khác nhau, mỗi mô-đun xử lý một lĩnh vực cụ thể của CSS. Ví dụ: có Mô-đun Màu CSS, Mô-đun Nền và Đường viền CSS, Mô-đun Phông chữ CSS, v.v. Mỗi mô-đun này đang trên con đường phát triển riêng và do đó, chúng có thể có số cấp độ khác nhau. Ví dụ: một người có thể ở cấp 3 trong khi người khác ở cấp 4. Bất kể, tất cả chúng đều được coi là "CSS3"

Đây là một danh sách riêng các thuộc tính CSS3. Đây là một số thuộc tính mới đang được đưa vào CSS thông qua các mô-đun khác nhau của nó. Các thuộc tính này cũng được bao gồm trong danh sách trên

Cách sử dụng Thuộc tính CSS

Các thuộc tính CSS được sử dụng để áp dụng các kiểu cho các tài liệu có cấu trúc, chẳng hạn như các tài liệu được tạo bằng HTML hoặc XML

Thuộc tính CSS được chỉ định trong tiêu chuẩn CSS. Mỗi thuộc tính có một tập hợp các giá trị có thể. Một số thuộc tính có thể ảnh hưởng đến bất kỳ loại phần tử nào và các thuộc tính khác chỉ áp dụng cho các nhóm phần tử cụ thể

Một biểu định kiểu bao gồm một danh sách các quy tắc. Mỗi quy tắc hoặc bộ quy tắc bao gồm một hoặc nhiều bộ chọn và khối khai báo

Các thuộc tính CSS được sử dụng trong một khối khai báo có giá trị tương ứng

Trong ví dụ sau, chúng tôi đặt màu nền của phần tử body thành màu cam

Trong trường hợp này, background-color là thuộc tính và orange là giá trị của nó

Và trong trường hợp này, body là "bộ chọn"

Bạn có thể áp dụng nhiều thuộc tính cho bất kỳ bộ chọn nào

Bạn cũng có thể áp dụng cùng một kiểu cho nhiều bộ chọn cùng một lúc

Đây là một ví dụ về nơi các kiểu có thể phù hợp với tài liệu HTML

Thử nó

Ví dụ này sử dụng biểu định kiểu được nhúng. Bạn cũng có thể sử dụng biểu định kiểu bên ngoài và áp dụng các kiểu đối với toàn bộ trang web

Kiểu trực quan và bố cục của trang web được quyết định bởi CSS hoặc Cascading Style Sheets. Đây là những tài liệu định hình đánh dấu HTML của trang web, cung cấp cho trình duyệt web hướng dẫn về cách hiển thị các trang do đánh dấu đó. CSS xử lý bố cục của trang, cũng như màu sắc, hình nền, kiểu chữ, v.v.

Nếu bạn nhìn vào một tệp CSS, bạn sẽ thấy rằng, giống như bất kỳ ngôn ngữ đánh dấu hoặc mã hóa nào, các tệp này có một cú pháp cụ thể đối với chúng. Mỗi biểu định kiểu được tạo thành từ một số quy tắc CSS. Các quy tắc này, khi được thực hiện đầy đủ, là kiểu trang web

Các phần của quy tắc CSS

Một quy tắc CSS được tạo thành từ hai phần riêng biệt — bộ chọn và phần khai báo. Bộ chọn xác định những gì đang được tạo kiểu trên một trang và phần khai báo là cách nó sẽ được tạo kiểu. Ví dụ

p {
 color: #000;
}

Đây là một quy tắc CSS. Phần bộ chọn là p, là bộ chọn phần tử cho "các đoạn. " Do đó, nó sẽ chọn TẤT CẢ các đoạn trong một trang web và cung cấp cho chúng kiểu này [trừ khi có những đoạn được nhắm mục tiêu theo các kiểu cụ thể hơn ở nơi khác trong tài liệu CSS của bạn].  

Một phần của quy tắc nói rằng, "màu. #000;" là cái được gọi là khai báo. Tuyên bố đó được tạo thành từ hai phần - thuộc tính và giá trị.  

Thuộc tính là phần màu của khai báo này. Nó chỉ ra khía cạnh nào của bộ chọn sẽ được thay đổi một cách trực quan.  

Giá trị là thuộc tính CSS đã chọn sẽ được thay đổi thành. Trong ví dụ của chúng tôi, chúng tôi đang sử dụng giá trị hex là #000, đây là cách viết tắt CSS cho "black. "

Vì vậy, sử dụng quy tắc CSS này, trang của chúng tôi sẽ có các đoạn văn được hiển thị bằng phông chữ màu đen

Khái niệm cơ bản về thuộc tính CSS

Khi bạn viết các thuộc tính CSS, bạn không thể đơn giản tạo ra chúng khi bạn thấy phù hợp. Chẳng hạn, "màu" là một thuộc tính CSS thực tế, vì vậy bạn có thể sử dụng nó. Thuộc tính này là thứ xác định màu văn bản của một phần tử. Nếu bạn cố gắng sử dụng "text-color" hoặc "font-color" làm thuộc tính CSS, thì những thuộc tính này sẽ không thành công vì chúng không phải là một phần thực sự của ngôn ngữ CSS

Một ví dụ khác là thuộc tính "background-image. " Thuộc tính này thiết lập một hình ảnh có thể được sử dụng làm nền, như thế này

.logo {
 background-image: url["/images/company-logo.png"];
}

Nếu bạn cố gắng sử dụng "background-picture" hoặc "background-graphic" làm thuộc tính, chúng sẽ không thành công vì một lần nữa, đây không phải là thuộc tính CSS thực

Một số thuộc tính CSS

Có một số thuộc tính CSS mà bạn có thể sử dụng để tạo kiểu cho trang web. Một số ví dụ

• Đường viền [bao gồm kiểu đường viền, màu đường viền và độ rộng đường viền]
• Đệm [bao gồm đệm-trên, đệm-phải, đệm-dưới và đệm-trái]
• Lề [bao gồm lề trên, lề phải, lề dưới và lề trái]
• họ phông chữ
• Cỡ chữ
• Màu nền
• Chiều rộng
• Chiều cao

Các thuộc tính CSS này là những thuộc tính tuyệt vời để sử dụng làm ví dụ, bởi vì tất cả chúng đều rất đơn giản và ngay cả khi bạn không biết CSS, bạn vẫn có thể đoán được chức năng của chúng dựa trên tên của chúng.  

Có những thuộc tính CSS khác mà bạn cũng sẽ gặp phải, có thể không rõ ràng về cách chúng hoạt động dựa trên tên của chúng

• Trôi nổi
• Xa lạ
• Tràn ra
• chuyển đổi văn bản
• chỉ số Z

Khi bạn tìm hiểu sâu hơn về thiết kế web, bạn sẽ gặp [và sử dụng] tất cả các thuộc tính này và hơn thế nữa

Thuộc tính cần giá trị

Mỗi khi bạn sử dụng một thuộc tính, bạn phải cung cấp cho nó một giá trị — và một số thuộc tính chỉ có thể chấp nhận một số giá trị nhất định

Trong ví dụ đầu tiên về thuộc tính "color", chúng ta cần sử dụng một giá trị màu. Đây có thể là giá trị hex, giá trị RGBA hoặc thậm chí là từ khóa màu. Bất kỳ giá trị nào trong số đó sẽ hoạt động, tuy nhiên, nếu bạn sử dụng từ "ảm đạm" với thuộc tính này, thì nó sẽ không có tác dụng gì bởi vì, theo mô tả như từ đó có thể, nó không phải là giá trị được công nhận trong CSS

Ví dụ thứ hai của chúng tôi về "hình nền" yêu cầu sử dụng đường dẫn hình ảnh để tìm nạp hình ảnh thực tế từ các tệp trên trang web của bạn. Đây là giá trị/cú pháp được yêu cầu

Tất cả thuộc tính CSS đều có giá trị mà chúng mong đợi. Ví dụ

• Màu viền mong đợi một giá trị màu
• Kích thước đường viền yêu cầu một giá trị kích thước, như pixel hoặc tỷ lệ phần trăm
• Các kiểu đường viền yêu cầu một trong các kiểu dành riêng được sử dụng cho thuộc tính này, chẳng hạn như "rắn. "

Nếu bạn xem qua danh sách các thuộc tính CSS, bạn sẽ phát hiện ra rằng mỗi thuộc tính có các giá trị cụ thể mà chúng sẽ sử dụng để tạo các kiểu mà chúng dành cho

Trích dẫn bài viết này

Định dạng

trích dẫn của bạn

Kyrnin, Jennifer. "Định nghĩa thiết kế thuộc tính CSS. "ThinkCo. https. //www. suy nghĩ. com/property-definition-3466899 [truy cập ngày 4 tháng 1 năm 2023]

10 thuộc tính CSS là gì?

3 thuộc tính CSS là gì?

Các thuộc tính danh sách của CSS là gì?

Có bao nhiêu thuộc tính CSS?