Bắt đầu với CSS

Tệp CSS chỉ đơn giản là một tệp văn bản thuần túy được lưu với phần mở rộng .css.

Bắt đầu với CSS

Trong hướng dẫn này, bạn sẽ tìm hiểu cách dễ dàng để thêm thông tin định dạng và kiểu dáng vào các trang web bằng CSS. Tuy nhiên, trước khi bắt đầu, hãy đảm bảo rằng bạn có một số kiến thức về HTML.

Nếu bạn mới bắt đầu trong thế giới phát triển web, hãy bắt đầu học từ đây

Không chần chừ gì nữa, hãy bắt đầu với Cascading Style Sheets (CSS).

Thêm CSS vào tài liệu HTML

CSS 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 trong chính tài liệu HTML. Có ba phương pháp đưa CSS vào tài liệu HTML:

Kiểu nội tuyến — Sử dụng thuộc tính style trong thẻ bắt đầu HTML.
Kiểu nhúng — Sử dụng thẻ <style> vào đầu của tài liệu.
Link đến source bên ngoài — Sử dụng <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ất cả ba phương pháp này để chèn CSS từng cái một.

Lưu ý: Kiểu nội tuyến có mức độ ưu tiên cao nhất và file CSS 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 một phần tử trong cả file CSS được nhúng và file CSS bên ngoài , các quy tắc kiểu xung đột trong file CSS được nhúng sẽ ghi đè lên file CSS bên ngoài.

Kiểu nội tuyến

Các 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 file CSS được nhúng hoặc bên ngoài. Nhưng nó cần phải nằm trong một dòng, tức là không ngắt dòng sau dấu chấm phẩy, như được hiển thị ở đây:

Ví dụ

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</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 tốt. Vì các quy tắc kiểu dáng được nhúng trực tiếp vào bên trong thẻ HTML, nó làm cho phầ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 mã khó bảo trì và phủ nhận mục đích sử dụng CSS.

Lưu ý: Không thể tạo kiểu cho các phần tử giả và lớp giả bằng các kiểu nội tuyến. Do đó, bạn nên tránh sử dụng các thuộc tính kiểu dáng trong mã của mình. Sử dụng file CSS bên ngoài là cách ưa thích để thêm kiểu vào tài liệu HTML.

Kiểu nhúng

file CSS nhúng hoặc nội bộ chỉ ảnh hưởng đến tài liệu mà chúng được nhúng vào.

file CSS nhúng được xác định trong phần <head> bằng thẻ <style>. Bạn có thể xác định bất kỳ số lượng thẻ <style> nào trong tài liệu HTML nhưng chúng phải xuất hiện giữa các thẻ <head> và </head>. Hãy xem một ví dụ:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <style>
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Mẹo: Thuộc tính type của thẻ <style> và <link> (type="text/css") xác định ngôn ngữ của file CSS. Thuộc tính này hoàn toàn là thông tin. Bạn có thể bỏ qua điều này vì CSS là ngôn ngữ file CSS tiêu chuẩn và mặc định trong HTML5.

Kiểu link đến liên kết bên ngoài

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

file CSS bên ngoài chứa 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ệp HTML nào trên trang web của mình. file CSS bên ngoài là linh hoạt nhất vì với file CSS bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉ thay đổi một tệp.

Bạn có thể đính kèm file CSS bên ngoài theo hai cách — liên kết và nhập tệp .

Liên kết các file CSS bên ngoài

Trước khi liên kết, trước tiên chúng ta cần tạo một file CSS. Hãy mở trình chỉnh sửa mã yêu thích của bạn và tạo một tệp mới. Bây giờ hãy nhập mã CSS sau vào bên trong tệp này và lưu dưới dạng "style.css".

Ví dụ

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h1 {
    color: orange;
}

Một file CSS bên ngoài có thể được liên kết với một tài liệu HTML bằng cách sử dụng thẻ <link>. Thẻ <link> nằm bên trong <head>, như bạn có thể thấy trong ví dụ sau:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Mẹo: Trong số cả ba phương pháp, sử dụng file CSS bên ngoài là phương pháp tốt nhất để xác định và áp dụng kiểu cho tài liệu HTML. Như bạn có thể thấy rõ với file CSS bên ngoài, tệp HTML bị ảnh hưởng yêu cầu những thay đổi tối thiểu trong phần đánh dấu.

Nhập các file CSS bên ngoài

Sử dụng @import là một cách khác để tải file CSS bên ngoài. Câu lệnh @import hướng dẫn trình duyệt tải một file CSS bên ngoài và sử dụng các kiểu của nó.

Bạn có thể sử dụng nó theo hai cách. Đơn giản nhất là trong thẻ <head> của bạn. Lưu ý rằng, các file CSS khác vẫn có thể được đưa vào thẻ <style>. Đây là một ví dụ:

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 @import để nhập một file CSS trong một file CSS khác.

Ví dụ

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

Lưu ý: Tất cả các @import phải xuất hiện khi bắt đầu file CSS. Bất kỳ giá trị nào được xác định trong file CSS sẽ tự ghi đè lên các @import xung đột trong file CSS đã nhập. Tuy nhiên, không nên nhập một file CSS trong một file CSS khác do vấn đề về hiệu suất.