CSS (3) - Định chuẩn CSS, box model và đơn vị đo

-----

1.1       Định chuẩn CSS, box model và đơn vị đo

Định chuẩn CSS

Như đã biết, nếu chúng ta không viết mã CSS để định dạng cho một phần tử HTML, thì trình duyệt sẽ lấy định dạng mặc định của nó để hiển thị trang web. Hiện tại đang có rất nhiều trình duyệt khác nhau, và định dạng mặc định của mỗi trình duyệt cũng khác nhau.

Bạn có thể xem mã CSS mặc định của một số trình duyệt:

– Chrome: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

– Firefox: https://searchfox.org/mozilla-central/source/layout/style/res/html.css

Do vậy, để kiểm soát được việc hiển thị của từng phần tử HTML, và đảm bảo giao diện trang web luôn ổn định trên mọi trình duyệt, chúng ta nên định chuẩn (hay thiết đặt lại) một số định dạng CSS quan trọng. Trong tiếng Anh, quá trình này được gọi là reset CSS, hay normalize CSS.

Một số cách định chuẩn CSS

Chúng ta có thể sử dụng một số cách sau để định chuẩn CSS:

– Cách đầu tiên, đơn giản nhất là đặt lại giá trị của thuộc tính căn lề (margin), và dãn biên (padding) bằng 0 cho mọi phần tử (kí hiệu *). Cách làm này không được khuyến khích vì nó ảnh hưởng đến tốc độ xử lý, trong khi còn nhiều thiết lập mặc định khác lại không được thực hiện.

    <style>

        * {

            margin: 0;

            padding: 0;

        }

    </style>

– Cách 2, sử dụng các đoạn mã định chuẩn được tạo sẵn, đang có nhiều người sử dụng. Ví dụ normalize.css, reset CSS của Eric Meyer, bộ định chuẩn của Bootstraps.

– Cách 3, chúng ta tự tạo ra bộ định chuẩn.

Điều quan trọng cần nhớ là đoạn mã định chuẩn CSS luôn được thực thi đầu tiên, trước khi bạn thực hiện các lệnh CSS khác.

Chúng ta sẽ cùng sử dụng bộ định chuẩn normalize.css.

– Vào trang chứa mã nguồn của normalize.css. https://necolas.github.io/normalize.css/

– Bấm vào nút Download, trang web sẽ hiện thị toàn bộ mã nguồn của normalize.css > xem qua một số đoạn mã CSS để hiểu thêm > chép toàn bộ mã nguồn này, lưu vào một tập tin trong thư mục css, đặt tên là normalize.css.

– Trong tập tin HTML, khai báo để luôn thực thi đoạn mã trong normalize.css đầu tiên.

    <title>Cooking with Nada Surf</title>

    <link rel="stylesheet" href="css/mormalize.css">

    <style>

Xem hình minh họa cấu trúc thư mục, các tập tin mã nguồn:

Vậy là một số phần tử HTML quan trọng đã được định chuẩn. Chúng ta đã có thể viết thêm các mã định dạng CSS, mà không phải lo giao diện không theo ý muốn, hoặc hiển thị không đồng nhất trên các trình duyệt khác nhau.

Box model

Trong việc định dạng hiển thị, chúng ta sẽ phải đặt các phần tử HTML ở một ví trí cụ thể trên giao diện, với chiều rộng, chiều dài xác định, hoặc đổ màu nền. Để tiện lợi cho việc này, CSS đưa ra khái niệm mô hình cái hộp (box model).

Mô hình cái hộp là công cụ CSS sử dụng để hiển thị các phần tử HTML. CSS quy ước: mỗi phần tử HTML sẽ có một hình chữ nhật tương ứng. Hình chữ nhật này gồm vị trí hiển thị (tọa độ x, y), chiều rộng, chiều dài, đường viền (border), căn lề (margin), dãn biên (padding), màu nền…v.v. Một tài liệu HTML có bao nhiêu phần tử thì có bấy nhiêu cái hộp (trừ các phần tử trong vùng head), không phân biệt là phần tử kiểu inline hay block. Cấu trúc cha-con của tài liệu HTML cũng được thể hiện trong mô hình cái hộp, cụ thể hộp-cha (của phần tử cha) sẽ chứa hộp-con (của phần tử con).

Ví dụ, đoạn mã sau minh họa hình ảnh của box model, gồm 5 cái hộp, với cấu trúc lồng nhau.

…   

   <style>

        body { border: 1px solid red; }

        h1 { border: 1px solid red; }

        div { border: 1px solid red; }

        p { border: 1px solid red; }

        em { border: 1px solid red; }

        * { padding: 3px}

    </style>

   

</head>

 

<body>

    <h1 id="tieu-de">Hi bac Teo!</h1>

    <div>

        <p>Mô hình cái hộp là cách thức tổ

            chức của CSS để <em>hiển thị</em> các phần tử ra giao diện.</p>

    </div>

Qua quan sát, bạn sẽ thấy các hộp của phần tử kiểu block có chiều rộng chiếm hết màn hình, trong khi các hộp của phần tử kiểu inline có kích thước vừa đủ để chứa nội dung bên trong.

Chúng ta cũng có thể sử dụng Developer tools để quan sát box model một cách trực quan. Như hình sau:

Chúng ta có thể sử dụng Developer tools để điều chỉnh các thông số của cái hộp. Trong cửa sổ Styles, bấm đúp chuột vào giá trị, điền giá trị mới, hoặc dùng mũi tên lên-xuống của bàn phím để điều chỉnh. Kết quả sẽ được thay đổi ngay lập tức trên giao diện. Tuy nhiên, các điều chỉnh trong Developer tools không ảnh hưởng tới tập tin mã nguồn. Do vậy, khi giao diện đã theo ý muốn, bạn có thể chép các giá trị đã điều chỉnh vào tập tin mã nguồn. Đây cũng là một phương pháp hay để viết mã CSS.

Đơn vị đo kích thước trong CSS

Trong phần box model, chúng ta đã thực hiện điều chỉnh các giá trị liên quan đến khoảng cách giữa các phần tử (căn lề) (margin), độ dày của biên (border), khoảng cách giữa biên và vùng nội dung (dãn biên) (padding). Trong quá trình CSS cho các phần tử, chúng ta cũng phải xác định các giá trị liên quan đến kích thước của chữ, khoảng lùi đầu hàng (indent). Các giá trị luôn phải có đơn vị đo đi kèm. Vậy đơn vị đo trong CSS là gì?

CSS có nhiều đơn vị đo, chúng thuộc một trong hai loại sau: đơn vị đo tuyệt đối (absolute), và đơn vị đo tương đối (relative).

Đơn vị đo tuyệt đối

Đơn vị đo tuyệt đối là đơn vị đo tường minh, đang được dùng nhiều trong cuộc sống. Ví dụ:

cm: centimet

mm: minimet

in: inch (1in = 96px = 2.54cm)

pt: point (1pt = 1/72in)

pc: pica (1pc = 12pt)

px: pixel, tương đương 1/96in

Tuy nhiên, ngoại trừ pixel, trong làm web người ta ít sử dụng kiểu đơn vị đo này, vì chúng không linh hoạt.

Đơn vị đo tương đối

Đơn vị đo tương đối là đơn vị đo không tường minh, vì chúng dựa trên một độ đo khác, như dựa trên kích cỡ của phông chữ mặc định, hoặc dựa trên kích thước của phần tử cha. Ví dụ:

em: tương đương với kích thước phông chữ của phần tử đang xét (hoặc phần tử cha)

ex: tương đương với kích thước của chữ x

rem: viết rút gọn của root em, tương đương với em của phần tử html (phần tử root)

ch: tương đương với độ rộng của số 0 trong phông chữ hiện hành

vw: tương đương với 1/100 độ rộng của cửa sổ trình duyệt (viewport)

vh: tương đương với 1/100 độ cao của cửa sổ trình duyệt (viewport)

vmin: tương đương với 1/100 kích thước cửa sổ trình duyệt (giữa độ rộng và độ cao, cái nào nhỏ hơn thì lấy làm chuẩn)

vmax: tương đương với 1/100 kích thước của cửa sổ trình duyệt (giữa độ rộng và độ cao, cái nào lớn hơn thì lấy làm chuẩn)

– % (phần trăm): mặc dù chỉ là con số, về bản chất nó cũng có thể được xếp vào nhóm đơn vị đo tương đối.

fr: cũng được xếp vào đơn vị đo tương đối, là viết tắt của fraction, nghĩa là một phần của thùng chứa (container)

Lưu ý

Với đơn vị đo tương đối, các phần tử con không kế thừa giá trị tương đối từ phần tử cha, mà nó kế thừa giá trị đã được quy đổi (đã được tính toán).

– Đơn vị đo tuyệt đối được dùng nhiều nhất là px

– Đơn vị đo tương đối được dùng nhiều là: %, em, rem, vw, vh, fr

Phần dưới đây trình bày sơ lược một số đơn vị đo.

% (phần trăm)

Là con số, theo sau là kí hiệu %; được tính bằng cách lấy giá trị % nhân với kích thước thuộc tính của phần tử cha nó (hoặc mức cao hơn). Một số loại thuộc tính có thể sử dụng % như width, height, margin, padding và font-size.

Trong thiết kế bố cục (layout), đơn vị đo này giúp cho trang web luôn giữ được tỉ lệ cố định, sự cân đối giữa các thành phần, khi người dùng thay đổi kích thước cửa sổ trình duyệt.

Ví dụ:

     <div style="color: red; width: 200px">

        <p style="width: 50%">width: 50% == 100px</p>

        <p style="width: 90%">width: 90% == 180px</p>

    </div>

Kết quả,

em

Là đơn vị đo tương đối. Trong kĩ thuật soạn thảo truyền thống, một em sẽ có kích thước đúng bằng độ rộng của chữ M (viết hoa), trong tiếng Anh chữ “m” đọc là “em”. Trong đặc tả của CSS, một em chính là độ cao của một hàng (khoảng cách giữa các baseline, không tính khoảng trắng giữa các hàng). Như vậy, nếu văn bản có kích thước phông chữ là 16px thì một em sẽ là 16px, nếu phông chữ có kích thước là 12px thì một em sẽ là 12px. Tóm lại, một em sẽ tương đương với kích thước phông chữ của phần tử hiện hành.

Đừng nhầm đơn vị đo em với phần tử em trong HTML. Hai khái niệm này hoàn toàn khác nhau, và không liên quan gì với nhau.

Khi trình duyệt đã xác định được giá trị của em, thì có thể sử dụng đơn vị đo này cho nhiều mục đích khác, như căn lề, thụt đầu hàng, xác định kích thước cho các phần tử.

Tương tự như việc sử dụng độ đo là phần trăm (%), sử dụng em giúp cho các thành phần duy trì được tỉ lệ cố định, cho dù kích thước của văn bản có thay đổi.

Ví dụ: đoạn mã sau thiết lập font-size cho h1 và h2 lần lượt là 32px và 20px. Sau đó, thiết lập margin đều là 2em, nhưng khi xem kết quả trên trình duyệt sẽ thấy khoảng căn lề (margin-left) của h1h2 là khác nhau, lần lượt là 64px và 40px. Bạn có thể sử dụng tab Computed trong Developer tools để kiểm tra kết quả.

    <style>

        body { border: 1px solid red; }

        h1 {

            font-size: 32px;

            margin-left: 2em;

        }

        h2 {

            font-size: 20px;

            margin-left: 2em;

        }

    </style>

   

</head>

 

<body>

    <h1>Font-size: 32px </h1>

    <h2>font-size: 20px</h2>

</body>

Màn hình kết quả:


Lưu ý: 1 em tương đương với kích thước phông chữ hiện tại của phần tử. Vậy nếu phần tử hiện tại không thiết lập kích thước phông chữ thì sao? Khi đó 1 em sẽ tương đương với kích thước phông chữ của phần tử cha của nó.

Rem

Sử dụng đơn vị đo là em có khá nhiều ưu điểm, tuy nhiên trong một số trường hợp, do việc tính giá trị em phải dựa vào phần tử cha, điều này gây ra bất tiện cho lập trình viên khi tài liệu HTML gồm nhiều cấp. Để khắc phục nhược điểm này, có thể sử dụng đơn vị đo khác là rem.

Rem là viết tắt của “root em”. Một rem sẽ tương đương với kích thước phông chữ của phần tử html. Như vậy, nếu thiết lập kích thước cho một phần tử bất kì là rem, nghĩa là kích thước của phần tử đó sẽ được tính theo kích thước của phần tử html chứ không phải phần tử cha của nó.

Ví dụ,

    <style>

        h1 { font-size: 3rem; }

        body {

            font-size: 10px;

        }

    </style>

   

</head>

<body>

    <h1>font-size: 3rem == 48px</h1>

</body>

Chúng ta sẽ tìm hiểu kĩ hơn các đơn vị đo trong các tình huống sử dụng cụ thể, mục tiêu là hiểu rõ ý nghĩa và sử dụng các độ đo một cách chuyên nghiệp, hiệu quả.

1.2       Xem và đọc thêm

– [1] Jenifer Niederst Robbins, Learning Web Design, O’Reilly, 2018, trang 239 – 251

– [2] MDN, what is CSS: https://developer.mozilla.org/en-US/docs/Web/CSS

– [3] Learn CSS (chapter 1) What is CSS: https://www.youtube.com/watch?v=OXGznpKZ_sA&t=68s

– [4] User style sheet, https://www.thoughtco.com/user-style-sheet-3469931

– [5] https://css-tricks.com

-----

Cập nhật: 20/5/2024
-----

Tải tài liệu đầy đủ: Tự học HTML căn bản