Bộ chọn phổ quát

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 15 trên 76.

Bộ chọn toàn cục là một bộ chọn mạnh mẽ trong CSS, nhắm đến mọi phần tử HTML trên trang. Bộ chọn này được biểu thị bằng dấu hoa thị (*).

Khi được sử dụng, bộ chọn phổ quát áp dụng các kiểu đã chỉ định cho mọi phần tử, bất kể loại, lớp hay ID của chúng. Trình duyệt áp dụng các kiểu mặc định trước khi áp dụng kiểu của bạn (ví dụ: lề quanh tiêu đề và đoạn văn, khoảng đệm trong danh sách), vì vậy bộ chọn phổ quát hữu ích khi thiết lập kiểu toàn cục hoặc đặt lại các kiểu mặc định đó của trình duyệt trên toàn bộ tài liệu.

Đây là cú pháp cơ bản để sử dụng bộ chọn toàn cục:

* {
    property: value;
}

Ví dụ, giả sử bạn muốn đặt màu chữ và cỡ chữ mặc định cho tất cả phần tử trên một trang. Bạn có thể dùng bộ chọn phổ quát như sau:

* {
    color: black;
    font-size: 14px;
}

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có nhiều phần tử, gồm tiêu đề (<h1>, <h2>), đoạn văn (<p>) và phần tử div (<div>). Nhiệm vụ của bạn là dùng bộ chọn phổ quát để tạo kiểu cho các phần tử này. Làm theo bước dưới đây:

Viết một quy tắc CSS dùng bộ chọn phổ quát để đặt màu văn bản của tất cả phần tử thành darkgray và cỡ chữ thành 16 pixel.

Tự làm thử

<html>
<head>
    <title>Universal Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>