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

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

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

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

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

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

Ví dụ 2. Thiết lập font-size: 18px và color: orange cho thẻ tiêu đề h1

    
    



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

Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua tệp main.css

Constructor file directory

index.html
css
----main.css

Tệp main.css nằm trong thư mục

    
    



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

1

p{
    color: #f15c25;
}

Nội dung file index. html

    
    
    


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem doloribus officia reiciendis sed similique sit sunt suscipit tempore! Eaque, possimus?

Trong đó dòng 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

CSS là ngôn ngữ tạo phong cách cho trang web. Biết cách sử dụng CSS trong HTML, ta có thể định dạng các phần tử HTML thật đặc biệt và chuyên nghiệp. Bài viết sau đây sẽ giúp bạn hiểu rõ hơn về CSS cũng như cách sử dụng nó

lục mục

Khái niệm về CSS

Cascading Style Sheets, hay còn gọi là CSS, là một ngôn ngữ tạo phong cách cho trang Web. Về ngữ nghĩa, ta có thể hiểu như sau

• Cascading là cách làm việc của CSS

• Style Sheets điều khiển cách hiển thị các nội dung của trang web

CSS là một ngôn ngữ được sử dụng để định dạng các phần tử HTML như chỉnh sửa kích thước, chữ chữ, màu chữ, màu nền, đường viền, hình nền,…

Chúng ta có thể định dạng các phần tử HTML theo cách chuyên nghiệp và đặc biệt thông qua việc sử dụng CSS

CSS là một ngôn ngữ được sử dụng để định dạng các phần tử HTML

CSS và HTML luôn đi cùng nhau. Cấu trúc và nội dung các phần tử trong trang do HTML tạo ra còn CSS sẽ quy định cách hiển thị phần tử như thế nào trên trang

Lý do cần sử dụng CSS?

Chúng ta cần sử dụng CSS vì nó cho phép bạn định nghĩa kiểu và cách hiển thị các phần tử HTML. Từ đó, CSS sẽ hỗ trợ bạn phân tách nội dung và cách trình bày trang. Nếu chúng ta chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này thực sự khó cho việc bảo trì

Các định dạng sẽ bị loại bỏ khỏi văn bản HTML, định dạng được lưu vào một tệp CSS khi sử dụng CSS

Cách sử dụng CSS trong HTML

Chúng ta sẽ có ba cách sử dụng CSS trong HTML là

• nội tuyến. mã CSS viết tại thuộc tính Kiểu của phần tử HTML

• Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ