CSS là gì? Cách nhúng CSS vào trang web

CSS là gì? Cách nhúng CSS vào trang web

Anh NguyễnBạn nghĩ gì về bài viết này?

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, các CSS tác dụng vào phần tử HTML có thể bị đè (định nghĩa lại) bởi CSS khác hoặc kết hợp cùng với CSS khác. Còn Style Sheets điều khiển cách hiện thị nội dung trang web.

Ví dụ, CSS định nghĩa màu chữ đỏ cho phần tử <p> đặt ở một file css, thì ở file css khác nó có thể định nghĩa lại thành màu xanh, hoặc cho thêm thuộc tính là chữ đậm, kết quả cuối cùng là sự kết hợp của 2 định nghĩa CSS (thuộc tính trước định nghĩa chỗ này có thể ghi đè hoặc bổ xung bởi thuộc tính định nghĩa ở chỗ khác).

Đó là ý nghĩa của từ Cascading. Khi làm việc với CSS bạn sẽ dần lĩnh hội được khái niệm này.

CSS và HTML luôn đi cùng nhau: HTML tạo ra cấu trúc, nội dung các phần tử trong trang, CSS quy định cách hiện thị phần tử trên trang.

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

CSS cho phép bạn định nghĩa kiểu, cách 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 đạng được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS.

Cách nhúng CSS vào trang web

Để áp dụng CSS tác dụng vào các phần HTML có ba cách nhúng CSS: Inline, Internal và External

  • Inline: mã CSS viết tại thuộc tính style của phần tử HTML
  • Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ <style>
  • External: mã CSS ở một file riêng biệt sau đó nạp vào HTML bằng phần tử <link>

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

Bạn có thể thử thay các màu khác để kiểm tra như: blue, green, navy, orange, …

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

Cách này bạn sẽ dùng thẻ <style>, tạo ra khu vực để viết CSS, bạn có thể để bất kỳ đâu trong HTML, nhưng nên đặt trong thẻ <head>.

Ví dụ sau, trong khối <style> nó sẽ định nghĩa kiểu cho mọi phần tử <p>, đề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>

Đ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.

Đoạn văn 1.

Đoạn văn 2.

Tóm tắt

  • Sử dụng thuộc tính style để tạo kiểu inline
  • Sử dụng phần tử <style> để tạo kiểu internal
  • Sử dụng phần tử <link> để tạo kiểu external
  • Sử dụng phần tử <head> để lưu trữ các phần tử <style> và <link>

Kết luận

Qua đây là một số chia sẻ về CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận