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

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 text-align. hãy xem text-align 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;
}

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

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

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

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

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

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

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

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

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

ul {
  margin: 0em;
  padding: 0em;
}

ul {
  margin: 0em;
  padding: 0em;
}

ul {
  margin: 0em;
  padding: 0em;
}

ul {
  margin: 0em;
  padding: 0em;
}

ul {
  margin: 0em;
  padding: 0em;
}

ul {
  margin: 0em;
  padding: 0em;
}

ul {
  margin: 0em;
  padding: 0em;
}

ul {
  margin: 0em;
  padding: 0em;
}

figure {
  border-style: solid;
  border-width: 3px;
  border-color: red;
}
figure {
  border: solid red 3px;
}

ul {
  margin: 0em;
  padding: 0em;
}

ul {
  margin: 0em;
  padding: 0em;
}

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

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

p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }2

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 p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }3 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 p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }4Nế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ị p { line-height: 1.5em; } blockquote { margin-left: 2em; border-left: 0.25em solid black; } img#ourlogo { width: 120px; height: 160px; float: left; margin-left: 1em; }5Rấ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ừ đóul { margin: 0em; padding: 0em; }

Đơn vị CSS

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

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

CSS Properties

 

CSS Properties

Goals
This is a page that we're using to demonstrate various CSS
properties and techniques. Because of that, it's probably going
to be ugly.

Results
Yup, it's turning out rather ugly, but it's important to
demonstrate some CSS stuff. Here are some of the new things:

more CSS properties
the box model
the units of length used

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

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

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

p {
  line-height: 1.5em;
}
blockquote {
  margin-left: 2em;
  border-left: 0.25em solid black; 
}
img#ourlogo {
  width: 120px;
  height: 160px;
  float: left;
  margin-left: 1em;
}

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

CSS Properties

 

CSS Properties

Goals
This is a page that we're using to demonstrate various CSS
properties and techniques. Because of that, it's probably going
to be ugly.

Results
Yup, it's turning out rather ugly, but it's important to
demonstrate some CSS stuff. Here are some of the new things:

more CSS properties
the box model
the units of length used

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

body {
  font-family: "Helvetica", sans-serif;
}
h1 {
  text-align: center;
  font-weight: bold;
  background-color: silver;
  color: teal;
  padding: 0.25em;
}
h2 {
  border: medium dotted teal;
  font-weight: normal;
  padding: 0.1em;
}

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

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

CSS Properties

 

CSS Properties

Goals
This is a page that we're using to demonstrate various CSS
properties and techniques. Because of that, it's probably going
to be ugly.

Results
Yup, it's turning out rather ugly, but it's important to
demonstrate some CSS stuff. Here are some of the new things:

more CSS properties
the box model
the units of length used

.Chiều rộng của đường viền được chỉ định là CSS Properties CSS Properties Goals

This is a page that we're using to demonstrate various CSS properties and techniques. Because of that, it's probably going to be ugly.

Results

Yup, it's turning out rather ugly, but it's important to demonstrate some CSS stuff. Here are some of the new things:

• more CSS properties
• the box model
• the units of length used

CSS Properties

 

CSS Properties

Goals
This is a page that we're using to demonstrate various CSS
properties and techniques. Because of that, it's probably going
to be ugly.

Results
Yup, it's turning out rather ugly, but it's important to
demonstrate some CSS stuff. Here are some of the new things:

more CSS properties
the box model
the units of length used

Thử 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

CSS và ví dụ là gì?

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

Điều nào sau đây là ví dụ về giá trị thuộc tính CSS?

Thuộc tính CSS dùng để làm gì?