CSS là gì? Cách nhúng CSS vào HTML như thế nào?
Một trong những ngôn ngữ thiết kế web không thể thiếu đó chính là CSS. Nó có vai trò quan trọng trong việc dựng bố cục (Layout) cho website. Vậy CSS là gì? Và cách nhúng CSS vào HTML như thế nào cùng tìm hiểu qua bài này.
Mục lục
CSS là gì?
CSS viết đầy đủ trong tiếng Anh là Cascading Style Sheets. Nó được dùng để miêu tả HTML và XHTML.
Hay là sử dụng để quy định kiểu dáng của các phần tử HTML trông đẹp mắt hơn khi làm website.
Hãy tưởng tượng một ngôi nhà HTML là bê tông cốt thép còn CSS sẽ là lớp sơn trang trí lộng lẫy hào nhoáng.
Đối với Web Developer chắc chắn phải biết về CSS nếu thiếu nói thì trang web sẽ trình bày hỗn loạn và không ra kiểu dáng gì cả.
Khi truy cập vào website nào đó đập vào mắt là màu sắc, font chữ, in đậm, in nghiêng hay background… đó chính là CSS.
Cách viết CSS như thế nào?
Cấu trúc CSS như sau:
vùng chọn {
thuộc tính: giá trị;
…
}
Ví dụ:
body {
background: #fffffff;
}
body: vùng chọn
background: thuộc tính
#ffffff: giá trị
Cách nhúng CSS vào HTML
Để nhúng CSS vào HTML bạn sẽ dùng tới 3 cách thêm khác nhau. đó là Inline, Internal và External. Chúng ta sẽ tìm hiểu sâu hơn về 3 kiểu này sử dụng như thế nào nhé!
Inline Styles
Với cách này bạn sẽ áp dụng trực tiếp vào đối tượng nào đó bằng cách sử dụng thuộc tính style. Ví dụ:
<p style=”font-size: 20px; color: #000000″>Đây là văn bản</p>
Internal Styles
Cách này bạn sẽ đặt mã CSS trong cặp thẻ <head>…</head>
Ví dụ:
<head>
<style>
body {
font-family: Arial;
font-size: 25px;
}
</style>
</head>
External Styles
Cách này được sử dụng tối ưu nhất trong thiết kế website. Nó sẽ gọi một file bên ngoài với đuôi là .css
Ví dụ:
Bạn sẽ tạo ra 2 tập tin khác nhau là vidu.html và style.css
– Nội dung tập tin vidu.html
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
</head>
<body>
</body>
</html>
– Nội dung style.css
body {
background: blue;
font-size: 25px;
color: red;
}
Bạn sẽ đặt 2 tập tin này cùng thư mục sau đó thử chạy file vidu.html trên trình duyệt xem kết quả.
Kết luận: Qua những ví dụ trên bạn đã hiểu CSS là gì và cách nhúng tập tin CSS vào HTML rồi phải không nào. Bước đầu khá đơn giản phải không nhưng để hiểu sâu về CSS cần một thời gian dài thực hành đấy.
Những bài tiếp theo chúng tôi sẽ giới thiệu đầy đủ các thuộc tính thường sử dụng để thiết kế website mời bạn cùng theo dõi.
