Bài 08: Sử dụng CSS tùy chỉnh giao diện HTML - Học HTML căn bản & nâng cao
Theo mặc định giao diện của các thẻ HTML sẽ không đẹp và không thể nào làm giống như giao diện trong file PSD được, vì vậy ta phải sử dụng thêm CSS để tùy chỉnh hiển thị mặc định của HTML. 1. Ví dụ sử dụng CSS định dạng giao diện Để các bạn rõ hơn thì mình sẽ làm một ví dụ sử dụng ...
Theo mặc định giao diện của các thẻ HTML sẽ không đẹp và không thể nào làm giống như giao diện trong file PSD được, vì vậy ta phải sử dụng thêm CSS để tùy chỉnh hiển thị mặc định của HTML.
1. Ví dụ sử dụng CSS định dạng giao diện
Để các bạn rõ hơn thì mình sẽ làm một ví dụ sử dụng CSS để định dạng cho thẻ P như sau:
Không sử dụng CSS: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<title>Tùy chỉnh giao diện HTML bằng CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>
Chào mừng bạn đến với website học lập trình online Zaidap.com.net
</p>
</body>
</html>
Giao diện:
Có sử dụng CSS: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<title>Tùy chỉnh giao diện HTML bằng CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
p{
background: blue;
color: white;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<p>
Chào mừng bạn đến với website học lập trình online Zaidap.com.net
</p>
</body>
</html>Giao diện:
Chạy hai ví dụ trên bạn sẽ thấy sự khác nhau giữa chúng là ở ví dụ một hiển thị đơn giản, còn ví dụ hai thì có background và chữ màu trắng. Về HTML thì không có gì khác nhưng ỏ ví dụ hai mình có bổ sung một đoạn mã CSS như sau:
<style type="text/css">
p{
background: blue;
color: white;
text-align: center;
font-size: 30px;
}
</style>Như vậy để bổ sung CSS cho thẻ HTML thì ta đặt nó bên trong thẻ style. Còn cú pháp CSS như thế nào thì bạn có thể đọc bài cú pháp CSS để hiểu rõ hơn.
2. Lời kết
Như vậy bạn đã hiểu được ý nghĩa của CSS là gì và cách viết CSS đơn giản. Tuy nhiên đó không phải là tất cả nên mình khuyên bạn nên đọc qua serie Css căn bản này để hiểu rõ hơn.
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.
Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.
