Cafedev chia sẻ cho ace một số cách để thêm code css của mình vào trong file html.
Khi trình duyệt đọc style sheet(một bảng chứa các style), nó sẽ định dạng tài liệu HTML theo thông tin trong style sheet đó.
Có 3 cách để chèn code css vào html:
- CSS chèn từ bên ngoài html
- CSS được chèn ở bên trong html
- CSS được chèn nội tuyến trong phần tử cần css đó
Sau đây chúng ta sẽ đi chi tiết các cách này.
Nội dung chính
1. CSS chèn từ bên ngoài html
Với style sheet bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi chỉ một file!
Mỗi trang HTML phải bao gồm một tham chiếu đến file style sheet bên ngoài, bên trong phần tử, bên trong phần header.
Kiểu bên ngoài được xác định trong phần tử <link>, bên trong phần <head> của trang HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Một style sheet bên ngoài có thể được viết trong bất kỳ trình soạn thảo văn bản nào và phải được lưu với phần mở rộng .css.
file .css bên ngoài không được chứa bất kỳ thẻ HTML nào.
Đây là cách tập tin “mystyle.css” trông như thế này:
“mystyle.css”
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Lưu ý: Không thêm khoảng trắng giữa giá trị thuộc tính và đơn vị (chẳng hạn như margin-left: 20 px;). Cách chính xác là: margin-left: 20px;
2. CSS được chèn ở bên trong html
Một style sheet nội bộ có thể được sử dụng nếu một trang HTML duy nhất có một kiểu duy nhất.
Kiểu bên trong được xác định bên trong phần tử <style> trong phần header
Ví dụ: Các kiểu bên trong được xác định trong phần tử <style>, bên trong phần <head> của trang HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 3. CSS được chèn nội tuyến trong phần tử cần css đó
Một kiểu nội tuyến có thể được sử dụng để áp dụng một kiểu duy nhất cho một phần tử.
Để sử dụng kiểu nội tuyến, hãy thêm thuộc tính style cho thành phần có liên quan. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào.
Ví dụ: Kiểu nội tuyến được xác định trong thuộc tính “style” của phần tử có liên quan:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html> Mẹo: Kiểu nội tuyến sẽ mất nhiều ưu điểm của style sheet (bằng cách trộn nội dung với bản trình bày). Vậy nên bạn sử dụng phương pháp này một cách tiết kiệm và hạn chế.
4. Nhiều Style Sheets
Nếu một số thuộc tính đã được xác định cho cùng một bộ chọn (phần tử) trong các style sheets khác nhau, giá trị từ style sheets đọc cuối cùng sẽ được sử dụng.
Giả sử rằng một style sheets bên ngoài có kiểu sau cho phần tử h1:
h1 {
color: navy;
}Sau đó, giả sử rằng một style sheets nội bộ cũng có kiểu sau cho phần tử h1:
h1 {
color: orange;
}Ví dụ: Nếu kiểu bên trong được xác định sau liên kết đến style sheet bên ngoài, các phần tử h1 sẽ là “orange”:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Ví dụ: Tuy nhiên, nếu kiểu bên trong được xác định trước liên kết đến biểu định kiểu ngoài, các phần tử h1 sẽ là “navy”:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 5. Thứ tự xếp tầng
Kiểu nào sẽ được sử dụng khi có nhiều hơn một kiểu được chỉ định cho một phần tử HTML?
Tất cả các kiểu trong một trang sẽ “xếp tầng” thành một biểu định kiểu “ảo” mới theo các quy tắc sau, trong đó số một có mức ưu tiên cao nhất:
- Kiểu nội tuyến (bên trong một phần tử HTML)
- Style sheets bên ngoài và bên trong (trong phần đầu)
- Kiểu mặc định của trình duyệt
Vì vậy, một kiểu nội tuyến có mức ưu tiên cao nhất và sẽ ghi đè các kiểu bên ngoài và bên trong và mặc định của trình duyệt.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
