Trong bài viết này, tôi hướng dẫn bạn 3 cách thêm css vào tài liệu html của trang web bao gồm css nội tuyến, css nội bộ, css bên ngoài
Nội dung chính Hiển thị
- Css nội bộ
- Css bên ngoài
- SCSS @nhập khẩu
- Ví dụ về SCSS @import
- SCSS @import nhiều tệp
Css nội tuyến
Đây là cách thêm css trực tiếp vào thẻ html cần định dạng. Tập hợp các kiểu css được khai báo bên trong kiểu thuộc tính của thẻ
ưu điểm. Tạo kiểu cho một đối tượng html rất nhanh chóng. . Tạo kiểu cho một đối tượng html rất nhanh chóng
nhược điểm. Những style css này chỉ áp dụng cho một cụ thể, không áp dụng chung cho nhiều thẻ html cùng lúc. . Những style css này chỉ áp dụng cho một cụ thể, không áp dụng chung cho nhiều thẻ html cùng lúc
Ví dụ 1. Thiết lập đoạn văn bản có màu đỏ, chúng ta có thể thiết lập như mã bên dưới. . Thiết lập đoạn văn bản có màu đỏ, chúng ta có thể thiết lập như mã bên dưới
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, unde?
Css nội bộ
Đây là cách thêm đoạn mã css vào một vùng riêng trong tệp html
ưu điểm. Phân vùng rõ ràng đoạn mã css và những nội dung html còn lại. . Phân vùng rõ ràng đoạn mã css và những nội dung html còn lại
nhược điểm. Những kiểu css này chỉ được áp dụng trong phạm vi một tệp cụ thể mà nó được khai báo. Nó không thể sử dụng chung cho nhiều trang khác nhau. . Những kiểu css này chỉ được áp dụng trong phạm vi một tệp cụ thể mà nó được khai báo. Nó không thể sử dụng chung cho nhiều trang khác nhau
Ví dụ 2. Setup
Title h2 { color: orange; font-size: 18px; }3 vàUnitop.vn - Học lập trình web đi làm
Title h2 { color: orange; font-size: 18px; }4 cho thẻ tiêu đềUnitop.vn - Học lập trình web đi làm
Title h2 { color: orange; font-size: 18px; }5. . Thiết lậpUnitop.vn - Học lập trình web đi làm
Title h2 { color: orange; font-size: 18px; }3 vàUnitop.vn - Học lập trình web đi làm
Title h2 { color: orange; font-size: 18px; }4 cho thẻ tiêu đềUnitop.vn - Học lập trình web đi làm
Title h2 { color: orange; font-size: 18px; }5.Unitop.vn - Học lập trình web đi làm
Title h2 { color: orange; font-size: 18px; }Unitop.vn - Học lập trình web đi làm
Css bên ngoài
Với công thức này, tất cả các mã css được đưa vào trong tệp có đuôi mở rộng. css [ví dụ. chủ yếu. css]
ưu điểm. Giúp Css có thể sử dụng chung cho nhiều trang khác nhau của website và quản lý dễ dàng. . Giúp Css có thể sử dụng chung cho nhiều trang khác nhau của website và quản lý dễ dàng
Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua tệp
Title h2 { color: orange; font-size: 18px; }6Unitop.vn - Học lập trình web đi làm
Constructor file directory
index.html css ----main.css
Tập tin
Title h2 { color: orange; font-size: 18px; }6 is in the directory_______28Unitop.vn - Học lập trình web đi làm
Title h2 { color: orange; font-size: 18px; }2Unitop.vn - Học lập trình web đi làm
Nội dung file index. html
Title h2 { color: orange; font-size: 18px; }3Unitop.vn - Học lập trình web đi làm
Trong đó dòng mã
Title h2 { color: orange; font-size: 18px; }4Unitop.vn - Học lập trình web đi làm
giúp liên kết đến tập tin chính. css nằm trong thư mục css của dự án
Tổng kết
Qua bài viết này tôi chia sẻ cho bạn 3 cách thêm css vào tài liệu html. Tùy vào từng trường hợp cụ thể mà bạn có thể lựa chọn cách thích hợp
Nếu trang web chỉ có một trang, bạn có thể sử dụng css nội bộ là đủ. Nhưng nếu dự án có tệp hệ thống lớn thì bạn nên sử dụng cách css bên ngoài