Nhập css vào html

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



Unitop.vn - Học lập trình web đi làm

3 và



    
    Title



Unitop.vn - Học lập trình web đi làm

4 cho thẻ tiêu đề



    
    Title



Unitop.vn - Học lập trình web đi làm

5. . Thiết lập



    
    Title



Unitop.vn - Học lập trình web đi làm

3 và



    
    Title



Unitop.vn - Học lập trình web đi làm

4 cho thẻ tiêu đề



    
    Title



Unitop.vn - Học lập trình web đi làm

5.



    
    Title



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



Unitop.vn - Học lập trình web đi làm

6

Constructor file directory

index.html
css
----main.css

Tập tin




    
    Title



Unitop.vn - Học lập trình web đi làm

6 is in the directory_______28



    
    Title



Unitop.vn - Học lập trình web đi làm

2

Nội dung file index. html




    
    Title



Unitop.vn - Học lập trình web đi làm

3

Trong đó dòng mã




    
    Title



Unitop.vn - Học lập trình web đi làm

4

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