Chúng ta đã thảo luận qua về HTML, nhưng hình như chưa thấy đâu vào đâu...
Có thể "in ra được" mấy dòng chữ trên một web page, có thể "nhúng" vài hình ảnh, làm chữ to nhỏ khác nhau, lên dòng, xuống dòng...Nhưng so với những trang web lộng lẫy "ngoài kia" thì còn một khoảng cách quá xa! Chúng ta thấy HTML không chứa bất cứ một thẻ nào để định dạng một trang web. HTML được tạo chỉ để miêu tả nội dung của một trang web.CSS (Cascading Style Sheet) là ngôn ngữ chúng ta sử dụng để định dạng một tài liệu HTML, định dạng có thể là: vị trí, chiều rộng, độ cao, màu sắc, font chữ, màu nền, hình nền, ..., có thể xem là công việc trang trí, làm cho trang web đẹp hơn, dễ nhìn hơn. Nói cách khác, CSS là người thợ trang điểm "sắc đẹp" cho các trang HTML.
Đây là ví dụ khi trang HTML chưa được "tô son trét phấn", chỉ thuần các mã HTML mà thôi
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Ví dụ CSS</h1>
<p>Học lập trình Online.</p>
</body>
</html>
Sử dụng OnlineGDB để thực thi
Bây giờ chúng ta sẽ thêm CSS vào
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Ví dụ CSS</h1>
<p>Học lập trình Online.</p>
</body>
</html>
Bấm Run để thực thi, "sắc đẹp của em ấy" đã khác xưa!
Ưu điểm của việc sử dụng CSS trong HTML là không phải bàn cãi:
- CSS giúp webpage tải nhanh hơn: Chúng ta chỉ cần viết một CSS rule trong .css file và áp dụng cho tất cả các thẻ HTML. Ít code hơn tức là sẽ giúp webpage của bạn tải nhanh hơn.
- CSS giúp bạn dễ dàng duy trì website hơn. Muốn sửa gì chỉ cần sửa trong file .css
- CSS giúp chúng ta tạo các webpage đẹp hơn nhiều khi so sánh với việc sử dụng các thẻ và thuộc tính HTML thuần.
- Sử dụng CSS là phù hợp với chuẩn Quốc tế.
CSS được phát triển bởi Håkon Wium Lie vào 10/10/1994 và được duy trì bởi một nhóm CSS Working Group của W3C. Nhóm này duy trì và công bố các tài liệu mới nhất về CSS.
Chúng ta sẽ thảo luận chi tiết CSS trong các phần sau.
Phần tiếp theo
Không có nhận xét nào:
Đăng nhận xét