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é.
Đang xem: Include Css Là Gì Cách Nhúng Mã Css Vào Html
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é.
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.
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:
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 n
Trong 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ụ:
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 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.
https://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é.
Xem thêm: Hướng Dẫn Sử Dụng Data Table 1 Biến, 2 Biến Để Thống Kê Dữ Liệu Trong Excel
Trong bài học trước, chúng ta đã khởi động tìm hiểu khái niệm CSS là gì, ở bài viết này chúng tôi sẽ giới thiệu bạn các loại CSS được dùng trong kỹ thuật thiết kế website và chuẩn định dạng CSS nào có độ ưu tiên cao nhất.
Khi trình duyệt web đọc file CSS, nó sẽ định dạng nội dung dựa vào thông tin có trong file CSS.
03 CÁCH CHÈN CSS VÀO HTML
Có 03 cách chèn CSS vào HTML :
– External Style Sheet. (css ngoại tuyến)
– Internal Style Sheet. (css nội tuyến)
– Inline Style. (css cục bộ)
EXTERNAL STYLE SHEET (CSS NGOẠI TUYẾN)
Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế và cách khai báo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏi tài liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lần trong ứng dụng của họ.
CSS ngoại tuyến có phạm vi ảnh hưởng đến toàn bộ website chứ không chỉ một file .html riêng biệt. Do vậy mỗi khi muốn thay đổi thuộc tính của một thành phần nào đó trong website thì ta chỉ cần thay đổi file này.
Một External Style Sheet được sử dụng để xử lý nhiều trang có cùng định dạng. Bằng cách sử dụng External Style Sheet, bạn có thể thay đổi toàn bộ website thông qua một file duy nhất.
Mỗi trang HTML phải chứa liên kết đến file CSS bằng cách dùng thẻ
được đặt trong cặp thẻ
.
Một file external Style Sheet có thể được tạo bởi bất kì bộ soạn thảo như Notepad, Notepad++,… File này không chứa bất kì thẻ HTML nào, và được lưu với phần mở rộng là .css. Sau đây là một ví dụ về CSS :
“style.css”
hr {color: sienna;}p {margin-left: 20px;}body {background-image: url(“images/background.gif”);}
Không chèn khoảng trắng giữa giá trị thuộc tính và đơn vị (như margin-left: 20 px;). Cách viết đúng phải là : margin-left: 20px;
Không chèn khoảng trắng giữa giá trị thuộc tính và đơn vị (như margin-left: 20 px;). Cách viết đúng phải là : margin-left: 20px;
|
Không chèn khoảng trắng giữa giá trị thuộc tính và đơn vị (như margin-left: 20 px;). Cách viết đúng phải là : margin-left: 20px; |
INTERNAL STYLE SHEET (CSS NỘI TUYẾN)
CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ
INLINE STYLES (CSS CỤC BỘ)
Là viết mã trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính Style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được khai báo.
Việc sử dụng Inline Style sẽ loại bỏ đi các thế mạnh của Style sheet (bởi việc trộn lẫn nội dung và định dạng). Bạn có thể dùng phương pháp này một cách tự do trong quá trình thiết kế website các dự án bất kì.
Để dùng Inline Styles, bạn hãy thêm thuộc tính Style và thẻ tương ứng. Thuộc tính Style có thể chứa bất kì thuộc tính CSS nào.
Ví dụ sau đây sẽ minh hoạ cách thay đổi màu sắc và lề trái của đoạn text :
This is a paragraph.
MULTIPLE STYLE SHEETS
Nếu một số thuộc tính được thiết lập cho cùng một bộ chọn với các chuẩn định dạng khác nhau, thì các giá trị sẽ kế thừa từ style sheet ưu tiên hơn.
Ví dụ, giả sử một external style sheet có các thuộc tính sau đối với bộ chọn h3 :
h3 { color: red; text-align: left; font-size: 8pt;}
Khi đó, giả sử cũng có một internal style sheet với các thuộc tính sau dành cho bộ chọn h3 ;
h3 { text-align: right; font-size: 20pt;}
Nếu như nội dung trang web được định dạng với internal style sheet cũng liên kết với với external styple sheet thì các thuộc tính đối với phần tử h3 sẽ là
color: red;text-align: right;font-size: 20pt;
Ta nhận thấy, thuộc tính color thừa hưởng từ external style sheet trong khi các thuộc tính text-align và font-size được thay thế bởi internal style sheet.
MULTIPLE STYLES SẼ GỘP VÀO THÀNH MỘT
Các chuẩn định dạng có thể được phân thành :
– Chuẩn định dạng đặt bên trong phần tử HTML.
– Chuẩn định dạng đặt bên trong phần HEAD của trang HTML.
– Chuẩn định dạng đặt bên trong file external CSS.
Lưu ý : Ta có thể đặt nhiều external style sheets trên cùng một file HTML.
CASCADING ORDER
vấn đề đặt ra là nếu có nhiều hơn một chuẩn định dạng đáp ứng cho một phẩn tử HTML thì khi đó chuẩn định dạng nào sẽ được sử dụng ?
Về cơ bản, tất cả các chuẩn dịnh dạng sẽ được “cascade” vào một style sheet “ảo” mới theo quy tắc sau, (trong đó mục số 4 có độ ưu tiên cao nhất):
1. Browser default (Chuẩn định dạng mặc định của trình duyệt)
2. External Style Sheet
3. Internal Style Sheet (trong phần HEAD)
4. Inline Style (trong phần tử HTML)
Vậy, Inline Style có độ ưu tiên cao nhất, nghĩa là nó sẽ ghi đè lên chuẩn định dạng đặt trong thẻ
, hoặc trong external style sheet, hoặc chuẩn định dạng mặc định của trình duyệt.
Xem thêm: Tại sao phải nén file? khi nén file có những lợi ích gì? máy tính không mở được file nén
|
Nếu liên kết đến External Sheet đặt sau Internal Style Sheet trong phần HEAD của file HTML thì External Style Sheet sẽ ghi đè lên Internal Style Sheet. |
