Kiểu HTML (Style)
Trong hướng dẫn này, bạn sẽ học cách áp dụng các quy tắc kiểu cho các phần tử HTML.
Tạo kiểu các phần tử HTML
HTML khá hạn chế khi nói đến việc trình bày một trang web. Ban đầu nó được thiết kế như một cách đơn giản để trình bày thông tin. CSS (Cascading Style Sheets) được giới thiệu vào tháng 12 năm 1996 bởi World Wide Web Consortium (W3C) để cung cấp một cách tốt hơn để tạo kiểu cho các phần tử HTML.
Với CSS, rất dễ dàng để chỉ định những thứ như, kích thước và kiểu chữ cho phông chữ, màu sắc cho văn bản và nền, căn chỉnh của văn bản và hình ảnh, khoảng cách giữa các phần tử, đường viền và đường viền cho các phần tử và rất nhiều của các thuộc tính tạo kiểu khác.
Thêm kiểu vào phần tử HTML
Thông tin kiểu có thể được đính kèm dưới dạng một tài liệu riêng biệt hoặc được nhúng vào chính tài liệu HTML. Đây là ba phương pháp triển khai thông tin kiểu cho tài liệu HTML.
- Kiểu nội tuyến - Sử dụng thuộc tính style trong thẻ mở HTML.
- Kiểu nhúng - Sử dụng phần tử
<style>trong phần đầu của tài liệu (head). - Biểu định kiểu bên ngoài - Sử dụng phần tử
<link>, trỏ đến tệp CSS bên ngoài.
Trong hướng dẫn này, chúng tôi sẽ đề cập đến từng loại style sheet khác nhau.
Ghi chú: Các kiểu nội tuyến có mức ưu tiên cao nhất và các kiểu bên ngoài có mức ưu tiên thấp nhất. Điều đó có nghĩa là nếu bạn chỉ định kiểu cho các đoạn văn của mình trong cả bảng định kiểu được nhúng và bên ngoài , thì các quy tắc kiểu xung đột trong biểu định kiểu được nhúng sẽ ghi đè trang định kiểu bên ngoài.
Kiểu nội tuyến
Kiểu nội tuyến được sử dụng để áp dụng các quy tắc kiểu duy nhất cho một phần tử, bằng cách đặt các quy tắc CSS trực tiếp vào thẻ bắt đầu. Nó có thể được gắn vào một phần tử bằng cách sử dụng thuộc tính style.
Thuộc tính style bao gồm một loạt các cặp giá trị và thuộc tính CSS. Mỗi cặp property: value được phân tách bằng dấu chấm phẩy ( ;), giống như cách bạn viết vào biểu định kiểu được nhúng hoặc bên ngoài. Nhưng nó cần phải là tất cả trong một dòng, tức là không có ngắt dòng sau dấu chấm phẩy.
Ví dụ sau minh họa cách đặt color và font-size của văn bản:
Ví dụ
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>Sử dụng các kiểu nội tuyến thường được coi là một cách làm không hay và không được khuyến khích. Bởi vì các quy tắc kiểu được nhúng trực tiếp vào bên trong thẻ html, nó làm cho bản trình bày bị trộn lẫn với nội dung của tài liệu, điều này làm cho việc cập nhật hoặc duy trì một trang web rất khó khăn.
Để tìm hiểu chi tiết về các thuộc tính CSS khác nhau, vui lòng xem phần hướng dẫn CSS .
Ghi chú: Nó trở thành không thể theo phong cách giả yếu tố và pseudo-classes với phong cách nội tuyến. Do đó, bạn nên tránh sử dụng các thuộc tính style trong thiết kế của mình. Sử dụng bảng định kiểu bên ngoài là cách ưa thích để thêm thông tin kiểu vào tài liệu HTML.
Nhúng biểu định kiểu (Style sheet)
Các biểu định kiểu nội bộ hoặc được nhúng chỉ ảnh hưởng đến tài liệu mà chúng được nhúng vào.
Các biểu định kiểu nhúng được xác định trong phần <head> của tài liệu HTML bằng cách sử dụng thẻ <style>. Bạn có thể xác định bất kỳ số phần tử <style> nào bên trong phần <head> này.
Ví dụ sau minh họa cách các quy tắc kiểu được nhúng vào bên trong một trang web.
Ví dụ
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>Biểu định kiểu bên ngoài
Một bảng định kiểu bên ngoài là lý tưởng khi kiểu được áp dụng cho nhiều trang.
Biểu định kiểu bên ngoài giữ tất cả các quy tắc kiểu trong một tài liệu riêng biệt mà bạn có thể liên kết từ bất kỳ tài liệu HTML nào trên trang web của mình. Bảng định kiểu bên ngoài là linh hoạt nhất vì với bảng định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web chỉ bằng cách cập nhật một tệp.
Bạn có thể đính kèm các biểu định kiểu bên ngoài theo hai cách - liên kết và nhập :
Liên kết biểu định kiểu bên ngoài
Một biểu định kiểu bên ngoài có thể được liên kết với tài liệu HTML bằng thẻ <link>.
Các thẻ <link> đi bên trong phần <head>, như ở đây:
Ví dụ
<head>
<link rel="stylesheet" href="css/style.css">
</head>Nhập biểu định kiểu bên ngoài
Quy tắc @import là một cách khác để tải một style sheet bên ngoài. Câu lệnh @import hướng dẫn trình duyệt tải một biểu định kiểu bên ngoài và sử dụng biểu định kiểu của nó.
Bạn có thể sử dụng nó theo hai cách. Cách đơn giản nhất là sử dụng nó trong phần tử <style> trong phần <head> của bạn. Lưu ý rằng, các quy tắc CSS khác vẫn có thể được bao gồm trong phần tử <style>.
Ví dụ
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Tương tự, bạn có thể sử dụng quy tắc @import để nhập một biểu định kiểu trong một biểu định kiểu khác.
Ví dụ
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}Ghi chú: Tất cả các @import phải xuất hiện ở đầu biểu định kiểu. Bất kỳ quy tắc kiểu nào được xác định trong biểu định kiểu chính nó sẽ ghi đè quy tắc xung đột trong các biểu định kiểu đã nhập. Các @import có thể gây ra vấn đề hiệu suất, bạn thường nên tránh sử dụng @import style sheets.