Bản thân các thẻ HTML div
và span
không có giá trị trình bày. Điều này có nghĩa là nếu bạn đặt then trong HTML của mình, chúng sẽ không thực sự hiển thị bất cứ thứ gì
Các thẻ này chủ yếu được sử dụng làm "móc nối" cho CSS của bạn. Bạn sử dụng chúng để phân chia hoặc gắn nhãn HTML của mình [khi một thẻ khác, nhiều ngữ nghĩa hơn sẽ không hoạt động] và sử dụng bộ chọn CSS để nhắm mục tiêu chúng
Lớp và Id là Thuộc tính HTML. Chúng cũng được sử dụng làm móc CSS
Chặn so với các phần tử HTML nội tuyến
Từ Stylin' With CSS của Charles Wyke-Smith
hầu hết các thẻ XHTML thuộc hai loại lớn đối với cách chúng hiển thị trên trang. khối và nội tuyến. Các yếu tố cấp độ khối như tiêu đề
thông qua và đoạn vănsẽ tự động xếp chồng trang xuống mà không cần ngắt dòng. Chúng thậm chí còn có các lề đặt trước để tạo khoảng cách giữa chúng. Các phần tử nội tuyến không có lề như vậy và nằm cạnh nhau trên trang, chỉ ngắt dòng tiếp theo nếu không có đủ chỗ cho chúng nằm cạnh nhau. [P. 18]
thẻ div
Thẻ div là một phần tử HTML cấp khối. Nó được sử dụng để phân chia hoặc phần của các thẻ HTML khác thành các nhóm có ý nghĩa
Một ví dụ hoàn hảo về việc sử dụng thẻ div là chỉ định danh sách điều hướng
________0
Thẻ kéo dài
Thẻ span
là một phần tử HTML nội tuyến được sử dụng để nhóm một tập hợp các phần tử nội tuyến. Nói chung, bạn sử dụng span để nối văn bản hoặc một nhóm thẻ mà bạn muốn tạo kiểu khác. Tuy nhiên, thông thường, bạn có thể làm điều này một cách ngữ nghĩa hơn bằng cách sử dụng các phần tử khác như em
hoặc strong
Bây giờ bạn biết rằng một tệp HTML chứa các thẻ cho trình duyệt biết nội dung sẽ hiển thị. Bạn đã thấy một vài ví dụ về các thẻ mà bạn có thể sử dụng, chẳng hạn như
thẻ đoạn văn, các
thẻ tiêu đề và thẻ hình ảnhNếu bạn muốn tạo kiểu cho trang HTML này, bạn có thể sử dụng CSS bằng cách thêm một
p {
color: white;
text-align: center;
font-size: 24px;
}
0p {
color: white;
text-align: center;
font-size: 24px;
}
1p {
color: white;
text-align: center;
font-size: 24px;
}
2Điều này thiết lập ba quy tắc phong cách
- Thẻ có màu nền là
p {
color: white;
text-align: center;
font-size: 24px;
}
3, màu xám đậm - Các
thẻ có màu trắng [bạn có thể sử dụng màu hex hoặc tên màu cho màu], căn giữa và cỡ chữ là 24 pixel
- Thẻ có màu
p {
color: white;
text-align: center;
font-size: 24px;
}
4, đường viền màu đỏ và được căn chỉnh về bên phải
Để tạo quy tắc kiểu, bạn chỉ định một bộ chọn, theo sau là
p {
color: white;
text-align: center;
font-size: 24px;
}
5 dấu ngoặc nhọn và bên trong các dấu ngoặc nhọn đó, bạn đặt danh sách các thuộc tính và giá trị css, mỗi giá trị kết thúc bằng dấu chấm phẩy p {
color: white;
text-align: center;
font-size: 24px;
}
6Đây là một ví dụ từ phía trên
p {
color: white;
text-align: center;
font-size: 24px;
}
Quy tắc kiểu này chọn mọi
gắn thẻ và liệt kê ba thuộc tính và giá trị của chúng. Những tính chất đó mang lại cho mọi
gắn thẻ trên trang một kiểu có màu trắng, văn bản căn giữa và cỡ chữ 24px
Có rất nhiều thuộc tính CSS mà bạn có thể sử dụng và mỗi thuộc tính có bộ giá trị riêng mà bạn có thể chọn. Bạn có thể tìm hiểu thêm về các tùy chọn của mình trên W3Schools và MDN. Bạn cũng có thể tìm một thuộc tính và giá trị CSS bằng cách tra Google một cái gì đó như “căn chỉnh văn bản css” hoặc tương tự
Đây là một ví dụ khác tạo kiểu ba
thẻ
CSS P Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
Cho đến nay, tất cả các ví dụ CSS đều chọn
thẻ, tạo kiểu cho tất cả các
thẻ trên trang. Đây được gọi là bộ chọn phần tử, vì nó chọn mọi phần tử có thẻ đó
Bây giờ bạn đã biết cách tạo kiểu cho tất cả các thẻ trên trang của mình, nhưng nếu bạn muốn cung cấp cho từng thẻ thì sao?
gắn thẻ phong cách riêng của họ?
nhãn
Một cách để có được cụ thể hơn là cung cấp cho mỗi của bạn
gắn thẻ ID. Bạn có thể làm điều này bằng cách thêm thuộc tính
p {
color: white;
text-align: center;
font-size: 24px;
}
7 vào các thẻ HTMLThis is the first paragraph.
This is the second paragraph!
And here's a third one!
Giờ đây, các thẻ của bạn đã có ID, bạn có thể sử dụng bộ chọn id trong CSS của mình để chọn từng thẻ
gắn thẻ riêng
Để sử dụng bộ chọn ID trong CSS của bạn, bạn sử dụng dấu thăng
p {
color: white;
text-align: center;
font-size: 24px;
}
8, sau đó là id, rồi quy tắc kiểu bên trong dấu ngoặc nhọn p {
color: white;
text-align: center;
font-size: 24px;
}
5, như thế này#first {
background-color: red;
}
Đặt tất cả lại với nhau, nó trông như thế này
CSS ID Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
Bây giờ bạn có thể tạo kiểu cho từng
gắn thẻ riêng. Cũng lưu ý rằng
các thẻ có cả kiểu từ bộ chọn phần tử và kiểu từ bộ chọn id tương ứng của chúng. Đây là ý nghĩa của tầng. quy tắc phong cách kết hợp để bạn có thể chuyển từ quy tắc chung sang quy tắc cụ thể hơn
ID phải là duy nhất, vì vậy bạn không nên có nhiều thẻ có cùng ID. Ngoài ra, mỗi thẻ chỉ có thể có một ID. Nhưng nếu bạn muốn áp dụng cùng một kiểu cho nhiều thành phần hoặc bạn muốn áp dụng nhiều kiểu cho cùng một thành phần thì sao?
Đây là nơi bộ chọn lớp có ích. Các lớp CSS tương tự như ID, ngoại trừ nhiều phần tử có thể có cùng một lớp và một phần tử có thể có nhiều lớp
Ví dụ, bạn có thể có nhiều
các thẻ có nhiều lớp, được phân tách bằng dấu cách
This is a dark paragraph.
This is a light paragraph.
This paragraph is highlighted.
This paragraph is dark and highlighted.
This one is light and highlighted.
Lưu ý rằng các lớp giống nhau được sử dụng trong nhiều
thẻ, và một
thẻ có thể có nhiều lớp
Sau đó, bạn có thể xác định quy tắc kiểu của mình bằng cách sử dụng bộ chọn lớp, đó là dấu chấm
CSS P Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
0 theo sau là tên lớp, theo sau là quy tắc kiểu bên trong dấu ngoặc nhọn p {
color: white;
text-align: center;
font-size: 24px;
}
5.dark {
background-color: black;
color: white;
}
Đặt tất cả lại với nhau, nó trông như thế này
CSS Class Selectors
This is a dark paragraph.
This is a light paragraph.
This paragraph is highlighted.
This paragraph is dark and highlighted.
This one is light and highlighted.
Các quy tắc kiểu dáng trong các lớp cho từng phần tử được kết hợp. Ví dụ, các
phần tử tuân theo các quy tắc từ lớp
CSS P Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
2 và các quy tắc từ lớp
CSS P Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
3. Đây là một hình thức xếp tầng khác, trong đó các quy tắc được kết hợpCho đến nay, tất cả các ví dụ đã sử dụng các biểu định kiểu nội bộ, có nghĩa là chúng đã xác định các quy tắc CSS bên trong một
p {
color: white;
text-align: center;
font-size: 24px;
}
0
CSS P Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
5
CSS P Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
6Kiểu CSS này mỗi
gắn thẻ bằng cách đặt nền màu hồng, văn bản màu đen và căn giữa. Sau đó, nó cung cấp cho các phần tử với lớp
CSS P Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
3 một đường viền. Cuối cùng, nó cung cấp cho phần tử có p {
color: white;
text-align: center;
font-size: 24px;
}
7 của
CSS P Selector
This is the first paragraph.
This is the second paragraph!
And here's a third one!
9 nền đỏLưu ý rằng quy tắc
This is the first paragraph.
This is the second paragraph!
And here's a third one!
0 trong bộ chọn id This is the first paragraph.
This is the second paragraph!
And here's a third one!
1 ghi đè quy tắc This is the first paragraph.
This is the second paragraph!
And here's a third one!
0 trong bộ chọn phần tử This is the first paragraph.
This is the second paragraph!
And here's a third one!
3, vì bộ chọn id cụ thể hơn. Đây là một quy tắc quan trọng cần ghi nhớ. khi các quy tắc kiểu xếp tầng, các quy tắc từ các bộ chọn cụ thể hơn sẽ được ưu tiên. ID là cụ thể nhất, sau đó là các lớp và bộ chọn phần tử là ít cụ thể nhất. Tương tự, các kiểu nội tuyến là cụ thể nhất, sau đó là biểu định kiểu bên trong và biểu định kiểu bên ngoài là ít cụ thể nhấtViệc hiểu tính đặc hiệu của các bộ chọn và kiểu CSS có thể khó khăn, nhưng nếu bạn cảm thấy bối rối, hãy thử tạo một ví dụ nhỏ hơn như trên để kiểm tra mọi thứ
Bây giờ bạn đã quen thuộc hơn với các nguyên tắc cơ bản của CSS, hãy xem các tài nguyên khác này để tìm hiểu thêm
Thẻ CSS là gì?
CSS là viết tắt của Cascading Style Sheets . CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc phương tiện khác. CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc.
Có bao nhiêu thẻ trong CSS?
520 tên thuộc tính riêng biệt từ 66 báo cáo kỹ thuật và 66 bản thảo của biên tập viên.
Có các thẻ trong CSS không?
Trong W3. Thế giới CSS không có sự khác biệt thực sự giữa thẻ, nhãn hoặc ký hiệu .
Bạn có thể đặt CSS vào thẻ nào?
CSS có thể được thêm vào tài liệu HTML theo 3 cách. Nội tuyến - bằng cách sử dụng thuộc tính kiểu bên trong các phần tử HTML. Nội bộ - bằng cách sử dụng phần tử element in the section . Bên ngoài - bằng cách sử dụng phần tử