Ba cách dùng CSS điều chỉnh style cho trang web

Khi bạn muốn điều chỉnh style cho trang web, bạn có thể sử dụng một trong ba cách sau, hoặc kết hợp cả ba cách, tùy tình huống cụ thể.

Ba cách đó là: nội tuyến – inline; nhúng – embedded & liên kết tới một file stylesheet bên ngoài.

Thông thường chúng ta sử dụng cách thứ ba, nghĩa là liên kết tới một stylesheet bên ngoài – bởi vì cách này cho phép cập nhật những thay đổi ngay lập tức cho toàn bộ trang web một cách thống nhất & đỡ mất công, tốn sức. Ngoài ra css dạng file bên ngoài còn giúp bạn cải thiện tốc độ truy cập cho những lần duyệt web lặp lại của người dùng, khi những file đó đã được cache sẵn trên trình duyệt.


Style nội tuyến

Còn được gọi là style cục bộ, nó được thêm vào thẻ bằng thuộc tính style như ví dụ dưới đây:

<h2 style="font-size:30px; color: red">Blog Kiến càng</h2>

Với lệnh trên thì thẻ h2 này sẽ cho chữ có kích thước 30px và có màu đỏ.

Trong việc thiết kế web ngày nay, người ta cố gắng hạn chế tối đa style nội tuyến.


Style nhúng

Chính là đoạn code CSS được đưa vào giữa thẻ style – và đặt trong thẻ head của trang html, cụ thể nó sẽ giống như thế này:

<!DOCTYPE html>
<html>
    <head>
        <title>Style CSS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 {font-size:50px; color:red;}
        </style>
    </head>

    <body>
        <h2>Kiến càng</h2>
    </body>
</html>

Đoạn code trên sẽ làm cho thẻ h2 có kích thước 50px và có màu đỏ.

Style nhúng thường được áp dụng trên các trang mà người ta có nhu cầu cục bộ chỉ với trang đó mà thôi, ngoài ra nó style nhúng giúp tốc độ render trang nhanh hơn so với style liên kết, vì CSS nằm ngày trong file HTML rồi, không cần phải gọi file bên ngoài nữa như style liên kết.


Style Liên Kết

Cũng giống như style nhúng là được đặt trong thẻ head nhưng khác là style liên kết nó là một liên kết đến file style mà bạn viết ở bên ngoài trang html đó.

<head>
<link rel="stylesheet" href="css/style.css">
<title>Home</title>
</head>

href="css/style.css" chính là đường dẫn đến file css, chính nơi đây bạn sẽ định kiểu cho trang.

Style liên kết đặc biệt có ưu điểm trên các trang mà dùng chung nhiều đoạn mã CSS, và điều này cũng thường xảy ra vì bố cục trang thường đồng nhất.

Để giảm ảnh hưởng của việc gọi file CSS chậm trễ không theo thứ tự người ta có thể kết hợp thêm lệnh preload để file CSS quan trọng được gọi sớm (không bị cạnh tranh với các tài nguyên tĩnh khác) do vậy trang nhanh chóng được render và hiển thị cho người dùng.

Style liên kết cũng có ưu điểm trong trường hợp máy chủ gốc đặt ở xa, khi ấy việc kết hợp với CDN sẽ giúp style liên kết được tải từ máy chủ phân tán gần người dùng hơn.


Ưu và nhược điểm của từng loại

  1. Style cục bộ chỉ ảnh hưởng tới thẻ mà nó được định kiểu. Việc sử dụng tràn lan style cục bộ làm cho việc sửa chữa trang trở nên khó khăn;
  2. Style cục bộ là cách mà ngày xưa các trang web sử dụng – chính sự bất cập của nó làm người ta phát triển Style Liên Kết;
  3. Style cục bộ sẽ ghi đè các thuộc tính bà bạn đã điều chỉnh trong Style Liên Kết và Style Nhúng, điều này có nghĩa là thuộc tính ở style cục bộ sẽ là thuộc tính cuối cùng được áp dụng, ví dụ, bạn để thẻ h2 có kích thước 50px ở Style Liên Kết, 40px ở Style Nhúng và 30px ở Style Cục Bộ, thế thì cuối cùng trình duyệt sẽ hiển thị thẻ h2 đó với kích thước 30px;
  4. Có thể loại bỏ hoàn toàn việc sử dụng style cục bộ bằng cách tạo một ID cho thẻ đó rồi viết style trong stylesheet;
  5. Style Nhúng chỉ tác động lên trang có chứa style đó (Phạm vi tác động rộng hơn Style cục bộ nhưng nhỏ hơn Style Liên Kết);
  6. Style Nhúng ghi đè lên Style Liên Kết, nhưng bản thân Style Nhúng lại bị Style Cục Bộ ghi đè;
  7. Style Nhúng là một cách hay để bạn nhanh chóng thực hiện điều chỉnh style cho trang, sau khi ưng í bạn copy đoạn CSS trong Style Nhúng vào Style Liên Kết;
  8. Style Liên Kết nhìn chung vẫn là cách định kiểu chuyên nghiệp và có lợi ích nhất.