Liên hệ

CSS là gì, cách nhúng mã CSS vào HTML

Khái niệm về CSS, sử dụng các cách nhúng mã CSS vào văn bản HTML như viết CSS trực tiếp, viết CSS trong một file riêng biệt

CSS là gì?

CSS viết tắt của cụm từ Cascading Style Sheets, về ngữ nghĩa thì có thể hiểu: Cascading là cách làm việc của CSS, một kiểu CSS có thể áp đề nên một kiểu CSS khác. Còn Style Sheets điều khiển cách hiện thị nội dung trang web.

CSS và HTML luôn đi cùng nhau: HTML trình bày cấu trúc phần tử trang. CSS quy định cách hiện thị phần tử trên trang.

Để hiểu về CSS trước tiên phải hiểu cơ bản về HTML.

Tại sao cần dùng CSS?

CSS cho phép bạn định nghĩa kiểu hiện thị cho các phần tử HTML. Giúp bạn phân tách giữa nội dung trang và cách trình bày trang. Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp nên. Khi sử dụng CSS thì các định dang được loại bỏ khỏi văn bản HTML và lưu vào một file CSS.

Nhúng CSS vào HTML

Để sử dụng mã CSS trong văn bản HTML có ba cách: Inline, InternalExternal

Nhúng CSS dạng inline - thuộc tính style

Cách này là đặt mã CSS vào thẳng thuộc tính style của phần tử. Mã CSS chỉ tác động nên chính phần tử đó.

Ví dụ đoạn mã CSS sau đặt màu chữ phần tử là trắng, màu nền phần tử là đỏ

color:white; background-color:red;

Giờ gán CSS đó cho một phần tử (ví dụ p) trong HTML, ở dạng inline thì thực hiện như sau:

<p style="color:white; background-color:red;">
    Đây là ví dụ về CSS dạng inline
</p>

Đây là ví dụ về CSS dạng inline

Nhúng CSS dạng Internal - thẻ style

Cách này bạn sẽ dùng thẻ <style> bên trong thẻ <head> của HTML để tạo ra nơi viết mã CSS.

Ví dụ sau, trong khối <style> nó sẽ định nghĩa kiểu cho mọi phần tử <p> trong HTML, đều có màu trắng, nền đỏ.

<html>
   <head>
   
      <style>
          p {
             color:white;
             background-color:red;
          }
      </style>
      
   </head>
   <body>
      <p>Đoạn văn 1. </p>
      <p>Đoạn văn 2. </p>
   </body>
</html>

Kết quả:

Đoạn văn 1.

Đoạn văn 2.

Nhúng CSS dạng External - thẻ link tải file CSS

Cách này các mã CSS bạn viết tập trung vào một file độc lập với file HTML (thường đặt phần mở rộng là css) sau đó dùng thẻ link đặt ở phần head để nạp vào theo cú pháp, ví dụ file ngoài là demo.css

<html>
   <head> 
      <link rel="stylesheet" href="demo.css">
   </head>
   <body>
      <p>Đoạn văn 1. </p>
      <p>Đoạn văn 2. </p>
   </body>
</html>

Trong file demo.css bạn viết nội dung CSS (không có thẻ style), ví dụ:

p {
   color:white;
   background-color:red;
}

Kết quả sẽ tương tự như ví dụ trên, chỉ có điều mã CSS đã đặt ra một file độc lập. Thuộc tính href trỏ đến địa chỉ URL của file CSS, ở ví dụ trên là địa chỉ dạng tương đối vì file CSS và HTML cùng thư mục.