Cách nhúng, chèn CSS vào tài liệu HTML

Trong bài học CSS trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về cú pháp và Selector trong CSS, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn một số cách nhúng, chèn CSS vào tài liệu HTML nhé.

Bằng cách nhúng, chèn CSS vào tài liệu HTML, chúng ta có thể sử dụng các file style sheet để xác định bố cục tài liệu HTML. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn dể tìm hiểu các chèn CSS vào tài liệu HTML như thế nào nhé.

Cach nhung chen CSS vao tai lieu HTML

Cách nhúng, chèn CSS vào tài liệu HTML

1. Cách nhúng, chèn CSS vào tài liệu HTML

Có nhiều cách để nhúng, chèn CSS vào tài liệu HTML, trong đó bao gồm:

Chèn trực tiếp CSS vào tài liệu HTML (Inline CSS)

Chúng ta có thể xác định các rules (quy tắc) Inline CSS bằng cách sử dụng thuộc tính "style" của phần tử HTML. Rules Inline style chỉ được áp dụng cho phần tử HTML được xác định.

Để chỉ định nhiều rules CSS, chúng ta sử dụng dấu chấm phẩy để phân tách giữa các rules. Các rules này được đặt bằng cách sử dụng thuộc tính "style" kèm theo tên thuộc tính và giá trị.

- Ví dụ về Inline CSS:

cach nhung chen css vao tai lieu html 2

Trong ví dụ trên Taimienphi.vn áp dụng Inline CSS cho phần tử p (phần tử chứa đoạn văn bản), và áp dụng 2 kiểu rules bao gồm màu cho văn bản được chỉ định là màu đỏ và căn chỉnh văn bản ra giữa.

Nội tuyến (Internal CSS)

Internal CSS được đặt trong thẻ (HEAD) và được khai báo trong thẻ "style". Style này chỉ được áp dụng cho tài liệu HTML mà nó được nhúng.

- Ví dụ về Internal CSS:

cach nhung chen css vao tai lieu html 3

Trong ví dụ trên, Internal CSS được đặt trong thẻ head. CSS đã cho sẽ được áp dụng trong phần body và tất cả các thẻ p (paragraph) trên trang web này.

cach nhung chen css vao tai lieu html 4

Ngoại tuyến (External CSS)

Trong External CSS, chúng ta sử dụng phần tử "link" để thêm các file style sheet bên ngoài vào tài liệu HTML.

Đầu tiên chúng ta tạo các rules (quy tắc) trong một file riêng có phần đuôi mở rộng là .css, sau đó thêm file CSS này vào phần tử head trong tài liệu HTML.

Đây là phương pháp phổ biến nhất để nhúng, chèn CSS vào tài liệu HTML. Bằng cách này chúng ta có thể viết CSS cho nhiều trang web khác nhau và thêm cùng một file CSS cho tất cả các trang.

- Ví dụ về External CSS:

cach nhung chen css vao tai lieu html 5

Trong ví dụ trên, External CSS được đặt trong thẻ head. Các rules CSS ngoại tuyến (External CSS) sẽ được áp dụng cho các phần tử HTML trên trang Taimienphi.vn cũng nTrong External CSShư trên các trang web chèn External CSS.

Import CSS

Ngoài những cách chèn CSS vào tài liệu HTML ở trên, chúng ta có thể import (nhập) một file stylesheet vào file stylesheet khác bằng cách sử dụng quy tắc @import.

Có 2 cách để import file stylesheet, cách thứ nhất là sử dụng thẻ head trong tài liệu HTML và cách còn lại là import vào file CSS.

Imported CSS trong thẻ head

Chúng ta có thể import file CSS vào thẻ style bằng cách sử dụng quy tắc @import. Tuy nhiên cách này không được hữu ích lắm.

Ví dụ:

cach nhung chen css vao tai lieu html 6

Import stylesheet vào stylesheet khác

Bằng cách sử dụng quy tắc @import để import stylesheet vào stylesheet khác giúp chúng ta có thể quản lý đoạn mã CSS lớn, đồng thời quá trình tải cũng nhanh hơn thông qua việc sử dụng bộ nhớ cache trình duyệt.

Lưu ý: @import phải được đặt trước tất cả các nội dung khác trong file CSS của bạn.

Ví dụ:

@import url('/css/stylesheet-1.css');

@import url('/css/stylesheet-2.css');

@import url('/css/colors.css');

p { color: blue; font-size: 14px; }

h1 { font-weight:bold; color:black; }

Trong ví dụ trên, file CSS chính có chứa nhiều file CSS phụ khác.

2. Áp dụng cách nào để chèn CSS vào tài liệu HTML?

Các trang web khác nhau áp dụng các phương pháp chèn, nhúng CSS khác nhau, tùy thuộc vào yêu cầu.

- Nếu muốn chèn, nhúng CSS cho nhiều trang web khác nhau, bạn có thể lựa chọn External CSS.

- Ngoài ra bạn cũng có thể sử dụng Internal CSS nếu áp dụng CSS cho nhiều yếu tố HTML khác nhau như trên cùng một trang.

- Nếu muốn ghi đè hoặc thêm CSS vào phần tử HTML bất kỳ, bạn có thể lựa chọn Inline CSS.

http://thuthuat.taimienphi.vn/cach-nhung-chen-css-vao-tai-lieu-html-48837n.aspx
Bài học CSS trên đây Taimienphi.vn vừa hướng dẫn bạn cách nhúng, chèn CSS vào tài liệu HTML. Trong các bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn màu trong CSS nhé.

Tác giả: Duy Vinh     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Học CSS cho người mới
Các lớp Helper trong Bootstrap, cách sử dụng
Thuộc tính background trong CSS
Cảnh báo hacker sử dụng kỹ thuật mới cài đặt plugin dính Backdoor trên WordPress
Học phí Đại học kỹ thuật Y Dược Đà Nẵng 2019, 2020 mới nhất
Từ khoá liên quan:

Cách nhúng CSS vào tài liệu HTML

, chèn CSS vào tài liệu HTML, cách chèn CSS vào trang web,

SOFT LIÊN QUAN
  • Kỹ thuật lập trình

    Tìm hiểu về ngôn ngữ lập trình C

    Kỹ thuật lập trình là tài liệu mang đến cho bạn các thông tin về ngôn ngữ lập trình C cũng như học các thuật toán, cấu trúc dữ liệu để thực hiện lập trình bằng loại ngôn ngữ khá thông dụng này. Tài liệu này rất hữu ích v ...

Tin Mới

  • Thuộc tính định dạng bảng trong CSS

    Trong bài học CSS trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về các thuộc tính link trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính định dạng bảng (table) trong CSS

  • Cách nhúng, chèn CSS vào tài liệu HTML

    Trong bài học CSS trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về cú pháp và Selector trong CSS, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn một số cách nhúng, chèn CSS vào tài liệu HTML nhé.

  • Học CSS cho người mới

    Có nhiều lý do vì sao chúng ta nên học CSS - ngôn ngữ được sử dụng để tạo kiểu, định dạng và hiển thị những thứ được tạo bởi HTML. Bạn đọc cùng tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu thêm thông tin nhé.

  • Trật Tự Mới, Giang hồ Chợ Mới tiền truyện

    Quý vị và các bạn cùng theo dõi bộ phim Trật Tự Mới, Giang hồ Chợ Mới tiền truyện với sự tham dự của rất nhiều những diễn viên nổi tiếng. Với cái tên Trật tự mới là một trong số drama mới của nghệ sĩ Việt Hương. Đây là những câu chuyện từ các ngày gian khó, thị phi đến những thử thách khó khăn để chiếm được một chỗ đứng vững chắc trong xã đoàn. Các bạn theo dõi từng tập ngay dưới đây nhé.


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá