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

Có nhiều thuộc tính CSS mà bạn có thể sử dụng. quá nhiều để giới thiệu tất cả chúng ngay lập tức (hoặc thậm chí để nhớ tất cả chúng và cách chúng hoạt động), nhưng chúng ta nên xem thêm một vài thứ nữa để chúng ta thực sự có thể làm điều gì đó hữu ích với CSS

Show

Tham chiếu CSS

Giống như chúng ta đã làm với các phần tử HTML và Tham chiếu HTML, chúng ta sẽ sử dụng Tham chiếu CSS cho tất cả các phần của CSS. Bạn nên ghi nhớ các tài liệu tham khảo, nhưng chúng tôi có thể giới thiệu một số thuộc tính chính ngay bây giờ

Chúng tôi đã thấy

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
4. hãy xem
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
4 trong tài liệu tham khảo CSS. Giống như tham chiếu HTML, bạn sẽ thấy mô tả cơ bản về thuộc tính và các giá trị mà thuộc tính có thể được cung cấp

Bạn cũng sẽ nhận thấy trên trang tham khảo cho từng thuộc tính CSS có một phần về “hỗ trợ trình duyệt”. Đây không phải là vấn đề lớn với HTML kế hoạch, nhưng với CSS, chúng ta phải biết một chút về những thuộc tính nào được hỗ trợ bởi các trình duyệt web phổ biến. Các tính năng mới đã được thêm vào với các phiên bản CSS mới và không phải tất cả đều được mọi trình duyệt hỗ trợ hoàn hảo

Trong khóa học này, chúng ta sẽ chỉ thảo luận về những cái được hỗ trợ tốt, nhưng nếu bạn đang quét tham chiếu cho những cái khác, hãy xem nhanh bảng tương thích đó để đảm bảo nó sẽ hoạt động như quảng cáo

Thuộc tính CSS hữu ích

Một lần nữa, chúng tôi chắc chắn sẽ không đề cập đến mọi thuộc tính CSS thú vị ở đây, nhưng có thể giới thiệu một vài thuộc tính (với các liên kết đến tham chiếu CSS cho từng thuộc tính)

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
4Như chúng ta có thể thấy,
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
4 có thể được sử dụng để thay đổi lời biện minh cho văn bản. Các giá trị có thể là
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
0,
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
1,
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
2 và
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
3 (để chứng minh đầy đủ với lề trái hoặc lề phải rách rưới).
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
4Được sử dụng để kiểm soát văn bản in nghiêng. các giá trị có thể bao gồm
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
5 và
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
6 (đối với chữ không in nghiêng).
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
7Được sử dụng để kiểm soát văn bản in đậm. các giá trị có thể bao gồm
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
8 và
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
6 (đối với không in đậm).
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
00Được sử dụng để đặt màu (thường là của văn bản) cho phần tử. Ví dụ: “
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
01”. Chúng ta sẽ thảo luận nhiều hơn về giá trị màu sắc trong Màu sắc trong CSS.
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
02Được sử dụng để đặt màu nền (phía sau văn bản) cho phần tử. Ví dụ: “
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
03”.
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
04
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
05
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
06Những thứ này được sử dụng để kiểm soát đường viền xung quanh một phần tử (chiều rộng của đường, loại đường và màu của đường tương ứng). Bạn có thể sử dụng các thuộc tính này một cách riêng biệt hoặc sử dụng thuộc tính tốc ký
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
07 để kết hợp các thuộc tính này thành một dòng (đưa ra ba giá trị theo bất kỳ thứ tự nào). Hai điều này là tương đương
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
8
________ 108 Kiểm soát lượng không gian theo chiều dọc mà mỗi dòng văn bản chiếm (mà bạn có thể gọi là “dẫn đầu”). Ví dụ: “
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
09” đặt khoảng cách giữa dấu cách đơn và dấu cách đôi (và có thể là giá trị mặc định tốt.
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
10Đặt phông chữ cho văn bản. Bạn nên đưa ra danh sách các phông chữ được thử theo thứ tự cho đến khi trình duyệt tìm thấy một phông chữ có sẵn trên hệ thống của người dùng. Có năm họ phông chữ chung và danh sách của bạn phải kết thúc bằng một trong số họ vì nó được đảm bảo hoạt động. Ví dụ: “
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
11”

Mô hình hộp CSS

Có một số thuộc tính trong CSS thường được nhóm lại với nhau thành thuộc tính hộp kiểm soát cách trình duyệt bố cục trang bằng mô hình hộp CSS

Các thuộc tính này có thể không trực quan ngay lập tức, nhưng không quá khó. Giả sử chúng ta có một phần tử trên trang (như một

h2 { padding: 1em; border: medium dashed black; background-color: grey; }12

). Here are the parts of its “box” when drawn:
Thuộc tính CSS là gì?
Hình minh họa mô hình hộp CSS

Vì vậy, mã CSS này

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}

… sẽ làm cho

có nền màu xám, với khoảng cách h2 { padding: 1em; border: medium dashed black; background-color: grey; }13 giữa văn bản và đường viền. Không gian bên trong đường viền (ngay cả khi nó vô hình vì bạn không có) được bao phủ bởi màu nền và được kiểm soát bởi thuộc tính ________ 214Nếu chúng ta muốn có thêm không gian ngăn cách phần tử này (và đường viền của nó) với những thứ xung quanh nó, chúng ta sẽ phải tăng các giá trị h2 { padding: 1em; border: medium dashed black; background-color: grey; }15Rất dễ nhầm giữa margin và padding, nhất là khi không có viền hoặc màu nền. Nếu bạn đang cố gắng thay đổi không gian xung quanh một phần tử (đặc biệt là khi CSS mặc định của trình duyệt có một số khoảng trống ở đó), hãy thử đặt cả lề và phần đệm thành 0 và thực hiện từ đóh2 { padding: 1em; border: medium dashed black; background-color: grey; }0

Đơn vị CSS

Bạn có thể nhận thấy phép đo

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
13 ở trên.
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
17 là một đơn vị đo lường (độ dài) trong CSS. Dưới đây là một số đơn vị phổ biến cần một chút giải thích

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
17Cỡ chữ hiện tại. nếu văn bản hiện tại là 12 điểm thì đây sẽ là 12 điểm. Một đơn vị khác, một
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
19 bằng một nửa kích thước văn bản.
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
30Một pixel màn hình (chấm) trên màn hình. (Ghi chú. đối với một số thiết bị có độ phân giải rất cao, các “pixel” thực rất nhỏ, vì vậy chiều dài này được điều chỉnh cho gần bằng kích thước của một pixel trên màn hình truyền thống. ) ______331A milimét. Ngoài ra còn có các đơn vị cho centimet, inch, v.v. (Ghi chú. đây là dự đoán tốt nhất của trình duyệt, nhưng có thể không chính xác tùy thuộc vào tỷ lệ của màn hình/máy chiếu/điện thoại/v.v. Ví dụ: nếu bạn hiển thị màn hình của mình trên máy chiếu, “milimet” đột nhiên trở nên lớn hơn nhiều. )

Càng nhiều càng tốt, tôi khuyên bạn nên chỉ định các phép đo bằng cách sử dụng

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
17 và
h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
19. Đây là những đơn vị duy nhất không yêu cầu một số loại ghi chú mô tả khi chúng là lời nói dối. Nếu bạn suy nghĩ trong những năm 217, bạn sẽ suy nghĩ đúng đắn về cách một trang có thể chia tỷ lệ tùy thuộc vào màn hình/phông chữ/bất kỳ kích thước nào hiện tại

Một ngoại lệ là khi xử lý ảnh bitmap. chúng vốn có kích thước bằng pixel, vì vậy điều đó có lẽ hợp lý nhất

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
1

Thí dụ

Đây là một trang ví dụ mà chúng ta có thể tạo kiểu với một số thuộc tính ở trên

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
3

… và một CSS đi kèm với nó

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
0

Bạn có thể tự xem trang đó với biểu định kiểu hoặc trong trình duyệt của tôi, nó trông như thế này

Thuộc tính CSS là gì?
Ảnh chụp màn hình của trang ví dụ

Khi tạo biểu định kiểu cho một trang, hãy nhớ rằng bạn luôn thêm vào kiểu mặc định của trình duyệt. Trong ví dụ này, đặt

h2 {
  padding: 1em;
  border: medium dashed black;
  background-color: grey;
}
35 cho

có lẽ không có bất kỳ tác dụng nào vì mặc định được in đậm, nhưng nó cũng không ảnh hưởng gì. Trong ví dụ này, chúng tôi đã xóa phông chữ đậm khỏi

.Chiều rộng của đường viền được chỉ định là h2 { padding: 1em; border: medium dashed black; background-color: grey; }36 nhưng cũng có thể có độ dài như h2 { padding: 1em; border: medium dashed black; background-color: grey; }37Thử trải nghiệm với CSS trên trang này (hoặc trang bạn đã tạo). Không gì thay thế được việc dùng thử một số nội dung và xem nó ảnh hưởng đến trang như thế nào 5 thuộc tính CSS là gì?

Thuộc tính cơ bản của CSS .
Thuộc tính văn bản
Liệt kê thuộc tính
Thuộc tính đường viền
Thuộc tính phông chữ

Ví dụ về thuộc tính CSS là gì?

Thuộc tính CSS chỉ định kiểu hoặc hành vi cho phần tử HTML. Những ví dụ bao gồm. màu sắc, đường viền, lề, kiểu phông chữ và biến đổi .

CSS là gì và các thuộc tính của nó?

Cascading Style Sheet (CSS) được dùng để thiết lập kiểu trong các trang web có chứa phần tử HTML . Nó đặt thuộc tính màu nền, cỡ chữ, họ phông chữ, màu sắc, v.v. của các thành phần trên trang web. Có ba loại CSS được đưa ra dưới đây. CSS nội tuyến.

3 thuộc tính CSS phổ biến là gì?

Thuộc tính CSS hữu ích . Được sử dụng để kiểm soát văn bản in nghiêng. các giá trị có thể bao gồm chữ nghiêng và bình thường (đối với chữ không nghiêng). Được sử dụng để kiểm soát văn bản in đậm. các giá trị có thể bao gồm in đậm và bình thường (đối với không in đậm)