Các quy tắc CSS bắt đầu hoạt động sau khi chúng được thêm vào HTML. Có một số cách để thêm CSS vào HTML và trong bài viết này, bạn sẽ học cách thực hiện theo 3 cách khác nhau
Nếu thích, bạn cũng có thể xem phiên bản video của bài đăng này từ kênh của tôi
1. Kiểu nội tuyến
Cách đầu tiên để thêm CSS vào HTML là sử dụng một phương pháp gọi là inline-styling. Kiểu nội tuyến có nghĩa là thêm các quy tắc CSS trực tiếp vào các phần tử HTML [thẻ] với thuộc tính kiểu
Ví dụ: nếu tôi muốn thay đổi màu văn bản của một thành phần
Test Headline
- Trước tiên, tôi cần thêm thuộc tính kiểu cho phần tử cụ thể đó
- Sau đó, bên trong dấu ngoặc kép, tôi có thể xác định một hoặc nhiều quy tắc CSS như trên
Sau đó, quy tắc mới [màu văn bản ở đây] cho phần tử h1 sẽ được áp dụng
cách kiểu nội tuyến
Tuy nhiên, trong lập trình hàng ngày, chúng tôi không muốn sử dụng kiểu nội tuyến, vì nó chỉ nhắm mục tiêu một phần tử HTML duy nhất, thay vì nhắm mục tiêu nhiều phần tử, không dễ dàng tìm kiếm và tìm thấy trong các dự án lớn hơn và lý do quan trọng nhất là chúng tôi có thể'
2. CSS nội bộChúng tôi không thích sử dụng các kiểu nội tuyến trong lập trình hàng ngày
The second way for adding CSS to HTML is by using the internal CSS way. In order to use this way, we need to use an HTML tag called tag [not style attribute] and between the style tags, we can write our CSS selectors & rules:
h1 {
color: red;
}
Test Headline
Cách CSS nội bộ
Vì vậy, đây là cách tiếp cận thứ hai để thêm CSS vào tệp HTML của chúng tôi, nhưng nó vẫn chưa hoàn hảo vì những gì chúng tôi muốn làm là giữ HTML và CSS trong các tệp riêng biệt, điều này dẫn chúng tôi đến cách thứ ba
3. CSS bên ngoàiGiữ CSS & HTML tách biệt là cách tốt nhất. Trong lập trình thực tế, chúng ta cần giữ HTML, CSS và JavaScript trong các tệp riêng biệt và sau đó nhập chúng khi cần thiết. Cách này cải thiện khả năng đọc và giúp bảo trì mã dễ dàng hơn
Để sử dụng cách này chúng ta cần tạo các file CSS riêng biệt có phần mở rộng là
7 sau đó liên kết chúng với HTML
h1 {
color: red;
}
Test Headline
Ví dụ: chúng ta có thể tạo một tệp CSS như thế này.
8. Bên trong
h1 {
color: red;
}
Test Headline
8, chúng tôi viết các quy tắc CSS của mình
h1 {
color: red;
}
Test Headline
h1 {
color: red;
}
Then we can import
8 to HTML with a tag like below:
h1 {
color: red;
}
Test Headline
Test Headline
Và các quy tắc một lần nữa được áp dụng thành công
cách CSS bên ngoài
Sử dụng các tệp CSS bên ngoài và liên kết/nhập chúng vào HTML là cách thường được ưa thích
Vì vậy, đây là 3 cách để thêm CSS vào HTML của chúng tôi. Trong bài viết tiếp theo, tôi sẽ đề cập đến các bộ chọn CSS, đây là một phần thực sự quan trọng để hiểu những điều cơ bản về CSS
Phần tử HTML
h1 {
color: red;
}
1 chứa thông tin kiểu cho tài liệu hoặc một phần của tài liệu. Nó chứa CSS, được áp dụng cho nội dung của tài liệu chứa phần tử h1 {
color: red;
}
1Phần tử
h1 {
color: red;
}
1 phải được đưa vào bên trong h1 {
color: red;
}
4 của tài liệu. Nói chung, tốt hơn là đặt các kiểu của bạn trong các biểu định kiểu bên ngoài và áp dụng chúng bằng cách sử dụng các phần tử h1 {
color: red;
}
5Nếu bạn bao gồm nhiều phần tử
h1 {
color: red;
}
1 và h1 {
color: red;
}
5 trong tài liệu của mình, thì chúng sẽ được áp dụng cho DOM theo thứ tự được đưa vào tài liệu — đảm bảo bạn đưa chúng theo đúng thứ tự, để tránh các sự cố xếp tầng không mong muốnTheo cách tương tự như các phần tử
h1 {
color: red;
}
5, các phần tử h1 {
color: red;
}
1 có thể bao gồm các thuộc tính DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
2 chứa các truy vấn phương tiện, cho phép bạn áp dụng có chọn lọc các biểu định kiểu nội bộ cho tài liệu của mình tùy thuộc vào các tính năng phương tiện như chiều rộng khung nhìnPhần tử này bao gồm các thuộc tính toàn cục
Thuộc tính này xác định kiểu phương tiện nào sẽ được áp dụng cho. Giá trị của nó là một truy vấn phương tiện, mặc định là
DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
4 nếu thiếu thuộc tínhMột nonce mật mã [số được sử dụng một lần] được sử dụng để cho phép các kiểu nội tuyến trong style-src Content-Security-Policy. Máy chủ phải tạo một giá trị nonce duy nhất mỗi khi nó truyền một chính sách. Điều quan trọng là cung cấp một nonce không thể đoán được vì việc bỏ qua chính sách của tài nguyên là chuyện nhỏ
Thuộc tính này chỉ định các bộ biểu định kiểu thay thế
Thuộc tính này chỉ rõ ràng rằng các hoạt động nhất định sẽ bị chặn khi tìm nạp các nguồn phụ quan trọng. Bảng định kiểu phiên bản
DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
8 thường được coi là nguồn phụ quan trọng, trong khi phông chữ và phông chữ DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
9 thì không
0. Hiển thị nội dung trên màn hình bị chặnDOCTYPE html> Test page p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } p { color: blue; background-color: yellow; } This is my paragraph.
không dùng nữa
Thuộc tính này không nên được cung cấp. nếu đúng như vậy, các giá trị được phép duy nhất là chuỗi trống hoặc kết quả khớp không phân biệt chữ hoa chữ thường cho
DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
2Trong ví dụ sau, chúng tôi áp dụng biểu định kiểu rất đơn giản cho tài liệu
0
h1 {
color: red;
}
Test Headline
Trong ví dụ này, chúng tôi đã bao gồm hai phần tử
h1 {
color: red;
}
1 — lưu ý cách các khai báo xung đột trong phần tử h1 {
color: red;
}
1 sau sẽ ghi đè các phần tử trong phần tử trước đó, nếu chúng có tính đặc hiệu như nhauDOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
Trong ví dụ này, chúng tôi xây dựng dựa trên ví dụ trước, bao gồm thuộc tính
DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
2 trên phần tử h1 {
color: red;
}
1 thứ hai để nó chỉ được áp dụng khi chế độ xem có chiều rộng nhỏ hơn 500px________số 8
Danh mục nội dung và nếu có thuộc tính
DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
7. . Nội dung được phépNội dung văn bản phù hợp với thuộc tính DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
1, đó là DOCTYPE html>
Test page
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
p {
color: blue;
background-color: yellow;
}
This is my paragraph.
2. Bỏ sót thẻKhông bỏ sót thẻ nào. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận. Vai trò ARIA ngầm định Vai trò ARIA được phép Không có h1 {
color: red;
}
10 được phép Giao diện DOMh1 {
color: red;
}
11