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

Có hàng trăm và hàng trăm thuộc tính khác nhau theo ý của chúng tôi để thay đổi giao diện trang web của chúng tôi. Trong phần này, chúng tôi sẽ bắt đầu từ đầu và giới thiệu một số thuộc tính cơ bản hơn để giúp bạn bắt đầu. Từ đó, các phần trong tương lai sẽ được xây dựng dựa trên điều này

Trước khi chúng tôi đi sâu vào

Tôi không tin rằng sẽ hữu ích nếu chúng tôi xem xét từng tài sản riêng lẻ có sẵn cho bạn. Thay vào đó, những gì tôi sẽ làm là giới thiệu cho bạn một số thuộc tính được sử dụng thường xuyên hơn để cho bạn cảm nhận về cách chúng hoạt động. Một khi bạn cảm thấy thoải mái với chúng, chọn những cái mới không khó lắm. Chúng ta sẽ bắt đầu với các thuộc tính CSS ở CSS Cấp 1. CSS Cấp độ 2 và 3 hầu hết chỉ giới thiệu các thuộc tính mới (một số thuộc tính hơi khó để hiểu được sự phức tạp của chúng nhưng khi kỹ năng của bạn với CSS phát triển thì chúng sẽ không đáng sợ như vậy)

Bạn có thể tìm thấy tiêu chuẩn CSS Cấp 1 chính thức tại đây

Nếu bạn cuộn xuống một chút trên tài liệu, bạn sẽ thấy họ đã cung cấp một mục lục rất hay. Thuộc tính bắt đầu từ mục 5. Hầu hết các thuộc tính được đặt tên để bạn có thể dễ dàng hiểu những gì chúng làm. Điều này giúp bạn dễ dàng tìm thấy các thuộc tính bạn cần. Nếu bạn nhấp vào một thuộc tính, nó sẽ cung cấp cho bạn toàn bộ phác thảo về nó. Điêu nay bao gôm

• Giá trị - những giá trị thuộc tính chấp nhận
• Mô tả - phác thảo những gì nó làm và bất kỳ khía cạnh thú vị nào trong hành vi của nó
• Mã mẫu - để cung cấp cho bạn ý tưởng về cách nó được triển khai

Có những thứ khác sẽ được liệt kê nhưng những thứ này sẽ hữu ích nhất cho bạn

Tôi sẽ không cố nhớ tất cả các thuộc tính mà thay vào đó, hãy để tài liệu này mở khi bạn đang viết mã để bạn có thể dễ dàng tham khảo lại nó

Một số HTML mẫu

Trong phần còn lại của phần này, chúng tôi sẽ chứng minh các thuộc tính CSS. Chúng ta sẽ áp dụng tất cả chúng vào HTML sau

our_page. html

1. Sở thích
5. Sở thích

6. Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

7. Nó hóa ra là một vòng eo thời gian

Thuộc tính văn bản

Đây là một ví dụ nhỏ về những điều bạn có thể thay đổi bằng văn bản

Họ phông chữ

Thuộc tính font-family cho phép chúng tôi thay đổi phông chữ cụ thể mà chúng tôi đang sử dụng. Bạn có thể chọn bất kỳ phông chữ nào được cài đặt trên máy khách với thuộc tính này. Một số phông chữ thường được sử dụng bao gồm

• Times New Roman
• Arial
• rau xanh

Có thể chỉ định và bao gồm các phông chữ không chuẩn nhưng điều này phức tạp hơn một chút. Chúng ta sẽ xem xét điều này sau

Phong cách. css

1. h1 {
2. họ phông chữ. Times New Roman;
3. }
4. P {
5. họ phông chữ. rau xanh;
6. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

Cỡ chữ

Kích thước phông chữ có thể được chỉ định bằng một số loại khác nhau nhưng cách dễ làm việc nhất là pixel (px)

Phong cách. css

1. h1 {
2. cỡ chữ. 30px;
3. }
4. P {
5. cỡ chữ. 16px;
6. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

Trọng lượng phông chữ

Thuộc tính css font-weight cho phép chúng ta chỉ định độ dày của các dòng ký tự. Nó có thể là một trong các giá trị sau

Một số họ phông chữ chỉ có trọng lượng bình thường và đậm. Trong trường hợp này nếu bạn chỉ định nhẹ hơn, nó sẽ mặc định trở lại bình thường và nếu bạn chỉ định đậm hơn, nó sẽ mặc định trở lại đậm

Phong cách. css

1. h1 {
2. trọng lượng phông chữ. thông thường;
3. }
4. P {
5. trọng lượng phông chữ. in đậm;
6. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

Thuộc tính màu

Màu sắc là một thứ khá phức tạp để xác định. Có một số cách mà chúng ta có thể làm điều này. Chúng ta sẽ xem xét màu sắc chi tiết hơn trong phần sau. Ở đây chúng ta sẽ chỉ làm việc với nó ở dạng đơn giản nhất là với các số thập lục phân. Một màu được chỉ định bởi một hàm băm ( # ) theo sau là 6 số thập lục phân. 2 cái đầu tiên là lượng màu đỏ, 2 cái thứ hai là lượng màu xanh lá cây và 2 cái cuối cùng là lượng màu xanh lam

Cũng lưu ý rằng trong CSS, chúng tôi sử dụng cách đánh vần màu sắc của người Mỹ nên chúng tôi bỏ chữ u, ví dụ: color. Nếu bạn là người Mỹ thì điều này sẽ không thành vấn đề nhưng đối với những người khác thì đó là điều cần lưu ý

Màu

Thuộc tính color cho phép chúng ta chỉ định màu của văn bản

Phong cách. css

1. h1 {
2. màu. #9ACA42;
3. }
4. P {
5. màu. #357180;
6. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

Màu nền

Thuộc tính background-color cho phép chúng ta chỉ định màu nền cho phần tử

Phong cách. css

1. h1 {
2. màu nền. #9ACA42;
3. }
4. P {
5. màu nền. #A0D2DC;
6. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

Chọn màu sắc phù hợp cho nội dung của bạn có thể có tác động rất lớn đến giao diện của nó

Thuộc tính giãn cách

Khoảng cách là một lĩnh vực khác dễ thực hiện nhưng khó thành thạo. Có rất nhiều chi tiết nhỏ tinh tế cần hiểu khi chúng ta bắt đầu tạo bố cục phức tạp. Chúng ta sẽ đề cập đến chủ đề này chi tiết hơn khi chúng ta xem xét mô hình hộp trong phần sau. Tuy nhiên, đừng để điều này ngăn cản bạn khám phá và thử nghiệm các thuộc tính bên dưới trong thời gian chờ đợi

Tương tự như kích thước phông chữ, chúng có thể được chỉ định theo nhiều đơn vị khác nhau nhưng hiện tại chúng tôi sẽ chỉ sử dụng pixel để giữ cho nó đơn giản

đệm

phần đệm đề cập đến không gian xung quanh nội dung bên ngoài. Chúng tôi cũng đã bao gồm thuộc tính màu nền ở đây để giúp dễ dàng xem điều gì đang xảy ra hơn một chút

Chúng tôi có thể chỉ định phần đệm theo 3 phương pháp

• Một giá trị duy nhất - trong trường hợp đó, nó sẽ được áp dụng cho mọi bên
• Là hai giá trị - trong trường hợp đó, đơn vị đầu tiên chỉ định phần đệm trên cùng và dưới cùng và đơn vị thứ hai chỉ định phần đệm bên trái và bên phải
• Dưới dạng bốn giá trị - trong trường hợp đó, giá trị đầu tiên áp dụng cho trên cùng, giá trị thứ hai ở bên phải, giá trị thứ ba ở dưới cùng và giá trị thứ tư ở bên trái

Phong cách. css

1. h1 {
2. đệm. 5px;
3. màu nền. #9ACA42;
4. }
5. P {
6. đệm. 5px 10px 8px 30px;
7. màu nền. #A0D2DC;
8. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

Lề

lề tương tự như phần đệm ảnh hưởng đến khoảng cách xung quanh nội dung. Tuy nhiên, đây là khu vực thứ hai bên ngoài phần đệm. So sánh ví dụ bên dưới với ví dụ bên trên về phần đệm và lưu ý nơi màu nền kết thúc

Tương tự như phần đệm, bạn có thể chỉ định một giá trị hoặc hai hoặc bốn

Phong cách. css

1. h1 {
2. lề. 10px;
3. màu nền. #9ACA42;
4. }
5. P {
6. lề. 5px 10px 8px 30px;
7. màu nền. #A0D2DC;
8. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

Ranh giới

Đường viền nằm giữa phần đệm và lề. Tôi sẽ phác thảo cách sử dụng cơ bản ở đây nhưng có nhiều thuộc tính khác nhau có sẵn để kiểm soát giao diện của đường viền với chi tiết hơn, vì vậy tôi khuyên bạn nên xem Thuộc tính đường viền trong đặc tả CSS

Các khía cạnh khác nhau của đường viền mà bạn có thể kiểm soát là

• Đó là chiều rộng
• Đó là màu sắc
• Đó là phong cách (không có, chấm, nét đứt, liền nét, gấp đôi, rãnh, sườn núi, hình nhỏ, hình đầu)

Phong cách. css

1. h1 {
2. ranh giới. 2px liền #E9B82B;
3. }
4. P {
5. ranh giới. 1px gạch ngang #4D8353;
6. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

thành phẩm

Bây giờ hãy đặt tất cả các thuộc tính trên lại với nhau và xem nó có tác dụng gì. Chúng có vẻ hơi nhàm chán khi xem xét riêng lẻ nhưng như bạn sẽ thấy trong ví dụ bên dưới, thậm chí chỉ với những điều chỉnh đơn giản, chúng tôi thực sự có thể làm cho nội dung của mình tỏa sáng

Phong cách. css

1. h1 {
2. họ phông chữ. Arial;
3. cỡ chữ. 24px;
4. trọng lượng phông chữ. thông thường;
5. màu. #efefef;
6. màu nền. #9ACA42;
7. lề. 2px 0px 20px 0px;
8. đệm. 5px;
9. viền dưới. chất rắn 2px #4D8353;
10. }
11. P {
12. lề. 10px 0px 10px 30px;
13. màu. #357180;
14. cỡ chữ. 16px;
15. }

Sở thích

Vào cuối tuần, tôi lấy tất cả đồng hồ của mình và gắn chúng lại với nhau thành một chiếc thắt lưng

Nó hóa ra là một vòng eo thời gian

Tóm lược

font-familyĐặt phông chữ cho mục đã cho. font-sizeĐặt phông chữ cho mục đã cho. font-weightĐặt độ dày cho phông chữ (ví dụ: đậm hoặc bình thường). colorĐặt màu phông chữ cho mục đã cho. background-colorĐặt màu nền cho mục đã cho. paddingĐặt phần đệm xung quanh mục đã cho. marginĐặt lề xung quanh mục đã cho. borderĐặt đường viền xung quanh mục đã cho

Các hoạt động

Tôi biết chúng ta chưa xem xét nhiều quy tắc nên đối với các hoạt động này, hãy sử dụng một số quy tắc mà chúng ta đã thấy trong các ví dụ. Khi bạn thay đổi mã trong các tệp của mình, bạn có thể cần phải làm mới trang để xem các thay đổi (thay vì chỉ tải lại nó), điều này là do trình duyệt sẽ lưu trang vào bộ đệm theo mặc định

Thuộc tính CSS là gì?

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

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

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