CSS là gì - Giới thiệu về CSS

Ngày tạo: 2018-10-04 11:10:41

Ngày cập nhật: 2018-10-26 08:50:03

CSS là một tập tin có tác động đến sự hiển thị của các thẻ HTML ( HTML là gì ) như màu sắc, phông chữ, đường viền, kích thước... Có 3 cách để sử dụng CSS, đó là: "CSS cục bộ", "CSS nội tuyến" và "CSS ngoại tuyến".

CSS là gì - Giới thiệu về CSS

  1. Mô tả về CSS
  2. Sử dụng CSS
  3. Mức độ ưu tiên của CSS
  4. Cú pháp cơ bản của CSS

Mô tả về CSS

CSS là tên viết tắt của của từ "Cascading Style Sheets" là các tập tin định kiểu theo tầng, được lưu với phần mở rộng là .css 
CSS được tổ chức World Wide Web Consortium ( W3C ) giới thiệu vào năm 1996, được phát triển bởi Hakon Wium Lie vào 10/10/1994 và được duy trì bởi một nhóm CSS Working Group của W3C.
Có một ví dụ trực quan để diễn tả nhiệm vụ của CSS như sau, giả sử bạn xây nhà và bạn sẽ sử dụng gạch để xây dựng ngôi nhà. Nhưng để trang trí cho ngôi nhà thì bạn sẽ sử dụng một số đồ nội thất khác như sơn màu, ... thì lúc này sơn màu sẽ tác động làm thay đổi màu mặc định của gạch. Nói ví von thì màu sơn chính là CSS và gạch chính là HTML. CSS đóng một vai trò rất quan trọng khi bạn xây dựng giao diện Website ( Website là gì? ).

Sử dụng CSS

Có 3 cách để sử dụng CSS:

  1. "Inline CSS ( CSS cục bộ )": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style:
    <span style="font-weight:bold; text-decoration:underline; color:#FF0000;">Đoạn text sẽ hiển thị in đậm, gạch chân, màu đỏ</span>


  2. "Internal CSSCSS nội tuyến )": Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của Web ( giữa thẻ <head> và thẻ </head> ):
    <style type="text/css">
    body {font-family:verdana; color:#0000FF;}
    /* Kiểu chữ trong trang Web là "Verdana", màu chữ thông thường là màu xanh dương */
    </style>


  3. "External CSSCSS ngoại tuyến )": Đặt các thuộc tính CSS vào một tệp tin riêng biệt có phần mở rộng là .css, khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau:
    - Ví dụ về nội dung tệp "style.css":
    body {font-family:verdana; color:#0000FF;}

    - Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã ( mã có thể nằm ngoài thẻ <head> ):

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

Mức độ ưu tiên của CSS

CSS cục bộ » CSS nội tuyến » CSS ngoại tuyến » CSS mặc định của trình duyệt.

Cú pháp cơ bản của CSS

css_selector_1 {
      thuộc_tính_1: giá_trị_của_thuộc_tính_1;
      thuộc_tính_2: giá_trị_của_thuộc_tính_2;
      ...
      thuộc_tính_n: giá_trị_của_thuộc_tính_n;
}

css_selector_2 {
      thuộc_tính_1: giá_trị_của_thuộc_tính_1;
      thuộc_tính_2: giá_trị_của_thuộc_tính_2;
      ...
      thuộc_tính_n: giá_trị_của_thuộc_tính_n;
}

...

css_selector_n {
      thuộc_tính_1: giá_trị_của_thuộc_tính_1;
      thuộc_tính_2: giá_trị_của_thuộc_tính_2;
      ...
      thuộc_tính_n: giá_trị_của_thuộc_tính_n;
}

ví dụ:

body {
  background: #ffffff;
  /* trang Web sẽ có nền màu trắng */
  font-family: Verdana;
  /* font chữ mặc định là Verdana */
  color: #ff0000;
  /* màu chữ mặc định là màu đỏ */
}