[TIL-CSS] Cẩn thận với shorthand property

— Anh Tèo này, sao CSS chỗ này của em không được nhỉ

— Đâu, anh xem

Bạn đọc có thể click vào link này để xem live demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo CSS Hằng béo</title>
</head>
<body>
<div>In đậm trông thế này</div>
<p class="simple">Chữ này đậm mới đúng</p>
<style>
div {
font-weight: bold;
font-size: 32px;
font-family: Helvetica, Arial, sans-serif;
}
p {
font-weight: bold;
}
.simple {
font: 32px Helvetica, Arial, sans-serif;
}
</style>
</body>
</html>
view raw css_example.html hosted with ❤ by GitHub

— Rõ ràng em đã set thẻ <p> là in đậm, sau đó set cho class simple có font-size 32px. Nhưng sao nó không giống thẻ div kia nhỉ.

— À, em bị lỗi do dùng short hand property. Lỗi này khá phổ biến .

— Anh giải thích kĩ hơn được không?

— Thực tế, đoạn code CSS của em trình duyệt sẽ hiểu thành thế này

p {
    font-weight: bold;
}
    
 .simple {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    line-height: normal;
    font-size: 32px;
    font-family: Helvetica, Arial, sans-serif;
}

— Hm… sao lại thế nhỉ ?

— Một số thuộc tính CSS như font có thể khai báo dạng shorthand, ví dụ

font:  <style> <variant> <weight> <line-height> <font-size> <font-family>

thay vì

        font-style: <style>
        font-variant: <variant>
        font-weight: <weight>
        font-stretch: <stretch>
        line-height: <line-height>
        font-size: <size>
        font-family: <family>

— Ủa nếu trong shorthand mà em không khai báo thuộc tính nào đó thì sao?

— Thì nó lấy mặc định

— Oh. Như vậy là css mặc định của class .simple đè lên css của thẻ p.

— Đúng vậy. Nếu Hằng và bạn đọc muốn tìm hiểu thêm cả về cách tính độ ưu tiên của CSS, click vào bài “[CSS] Cùng giúp Hằng béo tính độ ưu tiên của selector” để đọc thêm nha

— Em hiểu rồi, cảm ơn anh

Trả lời

Điền thông tin vào ô dưới đây hoặc nhấn vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s