Trong bài này tôi hướng dẫn bạn 3 cách nhúng(thêm) css vào tài liệu html của website bao gồm inline css, internal css , external css.
Inline Css
Đây là cách thêm css trực tiếp trên thẻ html cần định dạng. Tập hợp các style css được khai báo bên trong thuộc tính style của thẻ.
Ưu điểm: Style cho một đối tượng html rất nhanh chóng.
Nhược điểm: Những style css 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 có màu đỏ, chúng ta có thể thiết lập như code bên dưới.
<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, unde?</p>
Internal Css
Đây là cách thêm đoạn code css ở một khu vực riêng trong file html.
Ưu điểm: Phân biệt rõ ràng đoạn code css và những nội dung html còn lại.
Nhược điểm: Những style css chỉ áp dụng được trong phạm vi một file cụ thể nơi mà nó được khai báo. Nó không thể sử dụng chung cho nhiều page khác nhau.
Ví dụ 2: Thiết lập font-size: 18px và color: orange cho thẻ tiêu đề h1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
h1 {
color: orange;
font-size: 18px;
}
</style>
<h1>Unitop.vn - Học lập trình web đi làm</h1>
</body>
</html>
External Css
Với hình thức này tất cả những code css được đưa vào trong file có đuôi mở rộng .css (ví dụ: main.css).
Ưu điểm: Giúp Css có thể dùng chung cho nhiều page khác nhau của website và dễ dàng quản lý.
Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua file main.css
Cấu trúc file thư mục:
index.html
css
----main.cssFile main.css nằm trong thư mục css/
p{
color: #f15c25;
}
Nội dung file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Unitop.vn - Học lập trình web đi làm</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem doloribus officia reiciendis sed similique sit sunt suscipit tempore! Eaque, possimus?</p>
</body>
</html>
Trong đó dòng code
<link rel="stylesheet" href="css/main.css">
giúp liên kết đến file main.css nằm trong thư mục css của dự án.
Từ khóa tìm kiếm liên quan:
- Cách chèn css vào html?
- Cách nhúng css vào html?
- Cách gắn css vào html?
- Cách link css vào file html?
Tổng kết
Qua bài này tôi chia sẻ đến 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ể bạn có thể lựa chọn cách thích hợp.
Nếu website chỉ có một page bạn có thể sử dụng internal css là đủ. Nhưng nếu dự án có hệ thống file lớn thì bạn nên sử dụng cách external css.
*** Đây là một phần rất nhỏ trong hành trình hoàn thiện kỹ năng xây dựng giao diện html css từ bản thiết kế và kiếm tiền từ kỹ năng lập trình web. Nếu bạn muốn được học bài bản hãy bắt đầu ngay với Html Css 21 Ngày với 195 bài học chuyên sâu và được kèm cặp hỗ trợ qua nhóm kín.
Phan Văn Cương
