Kiểu HTML (Style)

Trong bài 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.

Mục lục

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:

Style tiết kiệm thời gian
CSS dễ thay đổi
Sự nhất quán
Khả năng chi phối đa dạng
Tạo ra định dạng chung cho toàn bộ Web

Với CSS, rất dễ dàng để chỉ định những thứ như: kích thước và kiểu chữ, 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.

Inline Style Sheet (Nhúng CSS vào tag HTML) - Sử dụng thuộc tính style trong thẻ mở HTML.
Embedding Style Sheet (Nhúng CSS vào trang web) - Sử dụng phần tử <style> trong phần đầu của tài liệu (head).
External Style Sheet (Liên kết CSS với trang web) - 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.

Inline Style Sheet

Inline - CSS 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 kiểu style đượ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:

<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.

Embedding Style Sheet

Các CSS kiểu nhúng nội bộ chỉ ảnh hưởng đến tài liệu mà chúng được nhúng vào.

Các 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.

<head>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: blue; }
        p { color: red; }
    </style>
</head>

External Style Sheet

Một CSS kiểu liên kết bên ngoài là lý tưởng khi kiểu được áp dụng cho nhiều trang.

Kiểu CSS bên ngoài giữ tất cả các quy tắc định dạng 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. Nó là linh hoạt nhất vì với CSS này 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 CSS liên kết 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:

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

Nhập CSS 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>.

<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.

@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.