Cơ Bản CSS

08/08/2020•3 min read

Giới thiệu tổng quan về CSS và sử dụng CSS với HTML.

CSS là gì?

Nếu HTML là thịt của của một website thì CSS như bộ xương và da. CSS hay Cascading Style Sheet là một ngôn ngữ quy định cách trình bày của các thẻ HTML, XHTML, XML, SVG, hay UML, … trong trang web.

Tại sao sử dụng CSS?

HTML hỗ trợ các tag định dạng cơ bản như <h1>, <b>, <i>, nhưng nó khá cứng và không phong phú.

CSS tách rời phần định dạng và các thuộc tính như màu sắt, bố cục giúp dễ dàng dựng hoàn chỉnh 1 trang web hơn, CSS ngày nay đã được hỗ trợ bởi các trình duyệt web hiện đại.

Cú pháp

Cú pháp cơ bản để định nghĩa:

selector {
  property1: value2;
  property2: value2;
  property...: value...;
}

Trong đó:

selector có thể là:
- Tag: <body>, <h1>, <p>, <img>, …
- Class: do người dùng tự định nghĩa.
- Id: do người dùng tự định nghĩa.
property là các thuộc tính và phải tuân thủ theo những gì CSS cung cấp.
- background-color: màu nền.
- color: màu chữ.
- font-size: kích thước chữ.
- ...
value là giá trị của thuộc tính, ví dụ:
- background-color: green;
- color: red;
- font-size: 14px;

Có 3 cách định nghĩa CSS

Cách 1: CSS cục bộ - inline css

Viết mã CSS trực tiếp trong thẻ HTML, cách này chỉ có tác dụng trong cặp thẻ được khai báo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DEMO</title>
  </head>
  <body>
    <h1 style="color: #239e05;">CHÀO MỪNG CÁC BẠN ĐẾN VỚI STDIO</h1>
  </body>
</html>

Cách 2: CSS nội tuyến - internal CSS

CSS nội tuyến là phần mã được khai báo trong cặp thẻ <style> và đặt ở phần <head> trong HTML. Khi sử dụng CSS nó chỉ tác dụng lên trang hiện tại được khai báo không ảnh hưởng đến các file khác.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DEMO</title>
    <style type="text/css">
      h1 {
        color: #239e05;
      }
    </style>
  </head>
  <body>
    <h1>CHÀO MỪNG CÁC BẠN ĐẾN VỚI STDIO</h1>
  </body>
</html>

Cách 3: CSS ngoại tuyến - external CSS

Cách này được sử dụng nhiều trong thực tế, tách biệt file chứa css ra 1 file riêng style.css và chèn vào các file HTML cần sử dụng.

File style.css:

h1 {
	color: #239E05;
}

File index.htm:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DEMO</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>CHÀO MỪNG CÁC BẠN ĐẾN VỚI STDIO</h1>
  </body>
</html>

Kết quả

3 cách sử dụng CSS trên đều nhận được kết quả như sau:

Độ ưu tiên

Có thể sử dụng đồng thời nhiều cách như trên để định nghĩa CSS, trong trường hợp đó, định nghĩa CSS sẽ có độ ưu tiên như sau:

CSS cục bộ (inline) > CSS nội tuyến (internal) > CSS ngoại tuyến (external).

Ví dụ cho thấy độ ưu tiên trong CSS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DEMO</title>

    <style type="text/css">
      h1 {
        color: green;
      }
    </style>
    
  </head>
  <body>
    <h1 style="color: red;">Chào mừng các bạn đến với stdio</h1>
  </body>
</html>

Ví dụ trên sử dụng CSS cục bộ (inline) và độ ưu tiên của nó cao hơn CSS nội tuyến (internal) nên thuộc tính red (cục bộ) ghi đè thuộc tính green (nội tuyến).

Sử dụng important để thay đổi thứ tự ưu tiên

!important được sử dụng để thay đổi độ ưu tiên trong CSS. Khi một thuộc tính được gán !important thì dù thành phần đó có khai báo CSS cục bộ hay CSS ngoại tuyến thì nó vẫn được ưu tiên cao nhất.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DEMO</title>
    <style type="text/css">
      h1 {
        color: green !important;
      }
    </style>
  </head>
  <body>
    <h1 style="color: red;">Chào mừng các bạn đến với stdio</h1>
  </body>
</html>

Và đây là kết quả chúng ta thu được: