Trong bài 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 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. : 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. : 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. : 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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, unde?
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. : 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. : 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
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ập Unitop.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
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ý. : 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
Title h2 { color: orange; font-size: 18px; }6Unitop.vn - Học lập trình web đi làm
Cấu trúc file thư mục:
index.html css ----main.css
File
Title h2 { color: orange; font-size: 18px; }6 nằm trong thư mụcUnitop.vn - Học lập trình web đi làm
Title h2 { color: orange; font-size: 18px; }8Unitop.vn - Học lập trình web đi làm
p{ color: #f15c25; }
Nội dung file index.html
Unitop.vn - Học lập trình web đi làmLorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem doloribus officia reiciendis sed similique sit sunt suscipit tempore! Eaque, possimus?
Trong đó dòng code
giúp liên kết đến file main.css nằm trong thư mục css của dự án.
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.
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học SCSS
- SCSS @import
SCSS @import
- SCSS cung cấp một quy tắc @import thông qua quá trình biên dịch, không như @import của CSS yêu cầu request HTTP từ trình duyệt.
- Việc import SCSS sẽ đồng thời kết hợp các công thức nhận được để biên dịch thành file CSS.
- Việc import SCSS tuân thủ một số quy tắc:
- File import sẽ có dạng dấu gạch dưới ở trước tên file
Title h2 { color: orange; font-size: 18px; }
9.Unitop.vn - Học lập trình web đi làm
- Nội dung import chỉ chứa
index.html css ----main.css
0 mà không có dấu gạchindex.html css ----main.css
1 và định dạng fileindex.html css ----main.css
2.
- File import sẽ có dạng dấu gạch dưới ở trước tên file
Ví dụ về SCSS @import
_base.scssbase.scss.box { padding: 20px; line-height: 0; } style.scss@import 'base';
.list {
color: red;
li {
font-size: 14px;
}
} | .box {
padding: 20px;
line-height: 0;
}
.list {
color: red;
}
.list li {
font-size: 14px;
}
|
- Nhìn vào kết quả CSS, ta thấy nội dung file
index.html css ----main.css
3 đã được import vàoindex.html css ----main.css
4.
SCSS @import nhiều file
_reset.scssreset.scssp, div { padding: 0; margin: 0; } _base.scssbase.scss.box { padding: 20px; line-height: 0; } style.scssTitle h2 { color: orange; font-size: 18px; }1 | Title h2 { color: orange; font-size: 18px; }2 |
- Nhìn vào kết quả CSS, ta thấy nội dung file
index.html css ----main.css
5 vàindex.html css ----main.css
3 đã được import vàoindex.html css ----main.css
4. - Tới đây ta đã kết thúc chuỗi bài học về SCSS, hi vọng sẽ giúp các bạn hiểu được phần nào nội dung của SCSS, tất nhiên SCSS vẫn còn nhiều điều khám phá, các bạn có thể vô trang chính thức của SCSS để tìm hiểu thêm nhé.