CSS Cơ Bản

Sau khi tải trang HTML về trình duyệt sẽ đọc mã CSS có trên trang và sẽ hiển thị nội dung trang HTML tương ứng với mã CSS này.

Có 3 cách khác nhau để nhúng mã CSS vào trang HTML:

  • Nhúng CSS trong thẻ mở HTML (hay inline embed)
  • Nhúng CSS trong trang HTML (hay internal embed)
  • Nhúng CSS ngoài trang HTML (hay external embed)

Nhúng CSS Trong Thẻ HTML - Inline Embed

Với cách nhúng mã CSS trong thẻ HTML, chúng ta sẽ đặt mã CSS bên trong thuộc tính style ở trong thẻ mở của phần tử HTML.

Ví dụ:

<p style="color: red; font-size: 20px;">Đoạn văn bản thứ nhất...</p>
<p>Đoạn văn bản thứ hai...</p>
<p>Đoạn văn bản thứ ba...</p>

Ở ví dụ trên mã CSS được nhúng bên trong thuộc tính style của phần tử p thứ nhất và chỉ được áp dụng cho phần tử này mà không được áp dụng cho các phần tử p thứ hai và thứ ba.

Nhúng CSS Trong Trang HTML - Internal Embed

Với cách nhúng mã CSS trong trang HTML, chúng ta sẽ đặt mã CSS vào bên trong thẻ <style> và mã CSS này sẽ được áp dụng trên phạm vi toàn trang thay vì cho một phần tử duy nhất như cách nhúng trong thẻ HTML.

<head>
  <style>
  body {
      font-family: Arial;
      font-size: 13px;
  }
  h1 {
      margin-left: 20px;
      font-size: 18px;
  } 
  </style>
</head>

Thẻ <style> thường được đặt bên trong thẻ <head>. Tuy nhiên bạn cũng có thể đặt thẻ <style> này ở bất cứ đâu bên trong thẻ <body>.

Nhúng CSS Ngoài Trang - External Embed

Với cách nhúng mã CSS ngoài trang, chúng ta sẽ tham chiếu tới một tập tin CSS bên ngoài khác.

Việc tham chiếu tới tập tin CSS khác được thông qua nhờ sử dụng thẻ <link>:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

Thông thường thẻ <link> thường được bên trong thẻ <head>, ngoài đặt bên trong thẻ <head> chúng ta cũng có thể đặt thẻ này ở bất cứ đâu bên trong thẻ <body>.

Tập tin CSS có phần mở rộng là .css và chỉ chứa mã CSS không chứa mã HTML.

Một ví dụ về nội dung bên trong tậptin CSS như sau:

body {
    font-family: Arial;
    font-size: 13px;
    color: #000;
}

Ưu điểm của phương pháp nhúng ngoài:

  • Với việc tham chiếu tới tập tin CSS bên ngoài như trên chúng ta có thể tái sử dụng mã CSS trong tập tin này cho nhiều trang HTML khác nhau.
  • Nếu cần thay đổi một đoạn mã CSS áp dụng cho nhiều trang khác nhau thì chúng ta chỉ cần sửa ở một file duy nhất.
  • Ngoài ra việc tách mã CSS ra khỏi HTML như trên sẽ giúp chúng ta dễ quản lý source code hơn.

Nhược điểm của phương pháp này đó là trình duyệt sau khi tải về tập tin HTML sẽ cần gửi thêm yêu cầu tới máy chủ để tải về các tập tin CSS và do đó có thể làm tăng thời gian hiển thị toàn bộ trang.

Thứ Tự Áp Dụng Mã CSS

Mã CSS được áp dụng theo thứ tự (từng tầng) như sau:

  • Mã CSS trong thẻ HTML (mã CSS nhúng theo kiểu inline embed).
  • Mã CSS trong thẻ <style><link> được áp dụng với thứ tự ưu tiên như nhau. Mã CSS được áp dụng theo thứ tự xuất hiện của chúng trên văn bản. Ví dụ nếu thẻ <style được đặt trước thẻ đóng </body> và thẻ <link> được đặt bên trong thẻ <head> thì mã CSS tham chiếu trong thẻ <link> sẽ được áp dụng trước và mã nhúng trong <style> sẽ được áp dụng sau.
  • Mã CSS mặc định của trình duyệt. Trình duyệt cũng có các quy luật CSS mặc định áp dụng cho các phần tử HTML để hiển thị trang.

Như vậy mã CSS ở tầng inline có thứ tự ưu tiên cao nhất. Chúng sẽ viết đè các quy luật CSS khác nếu trùng được nhúng theo kiểu internal hoặc external.

CSS Frontend Thiết Kế Web
Thêm Bình Luận: