Bài 13: Định kiểu HTML với CSS
Định kiểu HTML với CSS
Định kiểu HTML với CSS
CSS là tên viết tắt của Cascading Style Sheets
Định kiểu có thể được thêm vào các phần tử HTML theo 3 cách:
- Inline( trong một dòng) – sử dụng một thuộc tính style trong các phần tử HTML
- Internal(bên trong) – sử dụng một phần tử <style> trong phần head của trang HTML
- External(bên ngoài) – sử dụng một hoặc nhiều tệp CSS bên ngoài
Cách phổ biến nhất để thêm một định kiểu là giữ các định kiểu nằm ở các tệp CSS tách riêng rẽ. Nhưng trong bài viết này chúng tôi sử dụng định kiểu bên trong (Internal), bởi vì nó có thể dễ dàng demo và dễ dàng hơn để bạn có thể tự mình thử làm.
 |
Bạn có thể tìm hiểu nhiều hơn về CSS trong các bài học về CSS của chúng tôi. |
|---|
Định kiểu trong một dòng
Định kiểu trong một dòng được dùng để áp dụng định kiểu duy nhất với một phần HTML.
Định kiểu trong một dòng sử dụng thuộc tính style .
Dưới đây là ví dụ thay đổi màu sắc văn bản của<h1>phần tử này sẽ chuyển chữ sang màu xanh:
Định kiểu bên trong
Định kiểu bên trong sử dụng để xác định kiểu cho một trang của HTML.
Định kiểu bên trong được định nghĩa trong thẻ <head> của trang HTML với phần tử <style>:
Ví dụ 2
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body><h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn.</p></body>
</html>
Định kiểu bên ngoài
Định kiểu bên ngoài được sử dụng để định kiểu cho nhiều trang.
Với định kiểu bên ngoài, bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi trong một tệp CSS!
Để sử dụng một định kiểu bên ngoài, thêm một liên kết đến nó đặt trong thẻ <head> của trang HTML:
Ví dụ 3
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“styles.css”>
</head>
<
body><h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn.</p></body>
</html>
Định kiểu bên ngoài có thể được viết bằng bất kì trình soạn thảo văn bản nào. Tệp này không nên chứa thẻ HTML. Tệp định kiểu này phải được lưu với đuôi là .css
Dưới đây nội dung được lưu trong “styles.css” :
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS Fonts
Thuộc tính color của CSS xác định màu sắc của văn bản được sử dụng cho các phần tử HTML.
Thuộc tính font-family của CSS xác định các font chữ được sử dụng cho các phần tử HTML.
Thuộc tính font-size của CSS xác định kích thước chữ được sử dụng cho các phần tử HTML.
Ví dụ 4
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body><h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn.</p></body>
</html>
Mô hình khung với CSS
Mỗi phần tử HTML có một khung bao quanh nó thậm chí bạn không thể nhìn thấy.
Thuộc tính border của CSS được định nghĩa đường biên xung quanh phần tử HTML:
Thuộc tính padding của CSS xác định một phần đệm (khoảng trống) phía trong đường biên:
Các thuộc tính margin của CSS xác định không gian bên ngoài đường biên:
|
Ví dụ trên CSS sử dụng px để xác định kích thước bằng pixel. |
|---|
Thuộc tính id
Tất cả các ví dụ trên đều sử dụng CSS để định kiểu cho toàn bộ các phần tử HTML trên trang, ví dụ ở trên định dạng này dùng cho thẻ p.
Để định kiểu cho một phần tử đặc biệt, trước hết thêm một thuộc tính id cho phần tử:
<p id=“p01”>I am different</p>rồi định nghĩa một định dạng khác cho phần tử có id tương ứng ở trên:
Thuộc tính class
Để định kiểu cho một dạng đặc biệt (class) của các phần tử, thêm một thuộc tính class cho phần tử:
<p class=“error”>I am different</p>Bây giờ bạn có thể định nghĩa một định dạng khác cho các phần tử sử dụng class này:
|
Sử dụng id để định kiểu cho một phần tử. Sử dụng class giải quyết một nhóm các phần tử. |
|---|
Tóm tắt bài học
- Sử dụng thuộc tính style của HTML để định dạng kiểu trên một dòng
- Sử dụng phần tử <style> của HTML để định nghĩa một CSS bên trong
- Sử dụng phần tử <link> của HTML để tham chiếu đến một tệp CSS từ bên ngoài
- Sử dụng phần tử <head> của HTML để chứa các phần tử <style> và <link>
- Sử dụng thuộc tính color của CSS để xác định màu săc của văn bản
- Sử dụng thuộc tính font-family của CSS để xác định font chữ của văn bản
- Sử dụng thuộc tính font-size của CSS để xác định kích thước chữ
- Sử dụng thuộc tính border của CSS hiển thị đường biên xung quanh phần tử
- Sử dụng thuộc tính padding của CSS định nghĩa vùng đệm phía trong đường biên
- Sử dụng thuộc tính margin của CSS định nghĩa không gian bên ngoài đường biên
Các thẻ định dạng trong HTML
| Thẻ | Mô tả |
|---|---|
| <style> | Định nghĩa thông tin định kiểu cho một tài liệu HTML |
| <link> | Định nghĩa một liên kết giữa một tài liệu với một tài nguyên bên ngoài |
”
