Khám phá khái niệm CSS

  • 4 phút

Cấu trúc CSS

Nếu bạn muốn trang HTML của bạn hiển thị tất cả văn bản giữa các thẻ h1 màu cam, bạn có thể sử dụng mã CSS sau đó.

h1 {
    color: orange;
}

Mã CSS ở trên bắt đầu bằng (h1) chọn HTML bạn muốn tạo kiểu. Giá h1 trong mẫu được gọi là bộ chọn.

Lưu ý mã bên trong các dấu ngoặc nhọn, color: orange;t khai báo cách thẻ định h1 chọn phải được tạo kiểu. Mã CSS trong dấu ngoặc nhọn { }, chẳng hạn như color: orange; được gọi là khai báo định.

Khai báo mẫu của bạn chứa thuộc tính , color, được tách biệt với giá trị , orange, với dấu hai chấm (:) và phần cuối của thiết đặt được đánh dấu bằng dấu chấm phẩy (;).

Ghi

Không cần phải ghi nhớ mọi thuộc tính và giá trị có sẵn trong CSS. Có rất nhiều trang web mà bạn có thể tham khảo. Ngoài ra, các công cụ như vscode.dev hoặc Visual Studio Code cung cấp các tùy chọn tự động hoàn thành có thể giúp hướng dẫn bạn khi bạn tạo CSS.

Nhúng tệp CSS

Một cách nhanh chóng để thêm thông tin kiểu là đặt nó trong thẻ head của trang HTML của bạn bằng cách sử dụng một thuộc style định. Phương pháp này không được coi là cách thực hành tốt nhất, nhưng ok để sử dụng cho việc học tập và kiểm tra.

Ví dụ sau đây sẽ thêm thẻ <style> với thông tin tạo kiểu cho bất kỳ thiết bị h1 hiển thị màu xám. Vì đó là kiểu duy nhất, phần còn lại của HTML hiển thị với phong cách mặc định của trình duyệt.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Khi xem trong trình duyệt, văn bản "Chào mừng" trong thẻ <h1> hiển thị màu xám.

ảnh chụp màn hình của trang H T M L được kết xuất hiển thị đầu đề 1 màu xám.

Áp dụng kiểu cho HTML bằng CSS

Khi bạn thêm kiểu vào Ngôn ngữ Đánh dấu Siêu văn bản (HTML), tốt nhất bạn nên tạo kiểu trong một tệp CSS riêng biệt. Khi một số tệp HTML sử dụng cùng một CSS, chúng có giao diện nhất quán. Ngoài ra, việc cập nhật một tệp CSS sẽ dễ dàng hơn việc cập nhật từng tệp HTML riêng lẻ.

Để tham chiếu tệp CSS, bạn sử dụng thành link này.

link có hai thuộc tính, rel và href. rel được dùng để xác định loại tài nguyên bạn đang tham chiếu, biểu định biểu định kiểu. href được dùng để xác định đường dẫn đến tệp CSS. Nếu tệp CSS của bạn ở trong cùng một thư mục với tệp HTML và có tên style.css, bạn có thể dùng tên sau để tham chiếu tệp từ trang của bạn:

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

Bây giờ bạn có ít nhất hai tệp, một tệp .html và một .css tệp. Ví dụ trước có thể có tệp HTML nối kết đến CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>