Tạo kiểu HTML với CSS
CSS là viết tắt của heets C ascading S tyle S
Tạo kiểu có thể được thêm vào các phần tử HTML trong 3 cách:
- Inline - sử dụng một thuộc tính phong cách trong các yếu tố HTML
- Internal - sử dụng một thẻ <style> phần tử trong HTML <head>
- Bên ngoài - sử dụng một hoặc nhiều file CSS bên ngoài
Cách phổ biến nhất để thêm phong cách, là để giữ cho các phong cách trong file CSS riêng biệt. Nhưng, trong hướng dẫn này, chúng tôi sử dụng phong cách nội bộ, bởi vì nó là dễ dàng hơn để chứng minh, và dễ dàng hơn cho bạn để thử nó cho mình.
 | Bạn có thể tìm hiểu nhiều hơn về CSS tại của chúng tôi Hướng dẫn CSS . |
|---|
Inline Styling (Inline CSS)
Kiểu nội tuyến được sử dụng để áp dụng một phong cách độc đáo với một phần tử HTML duy nhất:
Kiểu nội tuyến sử dụng thuộc tính phong cách.
Ví dụ này thay đổi màu sắc văn bản của <h1> yếu tố để màu xanh:
Thí dụ
<h1 style="color:blue;">This is a Blue Heading</h1>
Tạo kiểu nội bộ (Internal CSS)
phong cách nội bộ được sử dụng để xác định một phong cách cho một trang HTML.
Phong cách nội bộ được định nghĩa trong <head> của một trang HTML, bên trong một thẻ <style> yếu tố:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Styling bên ngoài (External CSS)
Sheet bên ngoài được sử dụng để xác định kiểu cho nhiều trang.
Với một phong cách trang ngoài, bạn có thể thay đổi giao diện của một trang web bằng cách thay đổi một tập tin!
Để sử dụng một sheet bên ngoài, thêm một liên kết đến nó trong phần <head> của trang HTML:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Một style sheet bên ngoài có thể được viết bằng bất kỳ trình soạn thảo. Các tập tin không được chứa bất kỳ thẻ html. Các tập phong cách trang phải được lưu với phần mở rộng .css.
Dưới đây là cách "styles.css" trông:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}
CSS Fonts
Thuộc tính màu CSS xác định màu sắc văn bản được sử dụng cho các phần tử HTML.
Các thuộc tính CSS font-family định nghĩa các font chữ được sử dụng cho các phần tử HTML.
Các thuộc tính CSS font-size xác định kích thước văn bản được sử dụng cho các phần tử HTML.
Thí dụ
<!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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Box mẫu
Mỗi phần tử HTML có một hộp xung quanh nó, ngay cả khi bạn không thể nhìn thấy nó.
Các tài sản biên giới CSS định nghĩa một biên giới rõ ràng xung quanh một phần tử HTML:
Thí dụ
p {
border: 1px solid black;
}
Các thuộc tính CSS đệm định nghĩa một lớp đệm (không gian) bên trong biên giới:
Thí dụ
p {
border: 1px solid black;
padding: 10px;
}
Các thuộc tính margin CSS định nghĩa một ký quỹ (không gian) ở bên ngoài biên giới:
Thí dụ
p {
border: 1px solid black;
padding: 10px;
margin: 30px;
}
| Các ví dụ trên sử dụng CSS px để xác định kích thước bằng pixel. |
|---|
Các id Attribute
Tất cả các ví dụ trên sử dụng CSS để định dạng các phần tử HTML một cách tổng quát.
Để xác định một phong cách đặc biệt cho một yếu tố đặc biệt, đầu tiên thêm một thuộc tính id cho thành phần:
<p id="p01">I am different</p>
sau đó xác định một phong cách cho các phần tử với id cụ thể:
Thí dụ
#p01 {
color: blue;
}
Các thuộc tính lớp
Để xác định một phong cách cho một loại đặc biệt (lớp) của các yếu tố, thêm một thuộc tính class để các yếu tố:
<p class="error">I am different</p>
Bây giờ bạn có thể xác định một phong cách khác nhau cho các yếu tố với các lớp học cụ thể:
Thí dụ
p.error {
color: red;
}
| Sử dụng id để giải quyết một yếu tố duy nhất. Sử dụng lớp để giải quyết các nhóm yếu tố. |
|---|
Chương Tóm tắt
- Sử dụng các thuộc tính style của HTML cho kiểu nội tuyến
- Sử dụng các thẻ <style> yếu tố để xác định CSS nội
- Sử dụng các thẻ <link> yếu tố để tham khảo một file CSS bên ngoài
- Sử dụng các thẻ <head> yếu tố để lưu trữ <style> và <link> yếu tố
- Sử dụng thuộc tính màu CSS cho màu sắc văn bản
- Sử dụng thuộc tính CSS font-family cho các phông chữ văn bản
- Sử dụng thuộc tính cho các kích cỡ văn bản CSS font-size
- Sử dụng thuộc tính CSS biên giới cho biên giới yếu tố có thể nhìn thấy
- Sử dụng thuộc tính CSS đệm cho không gian bên trong biên giới
- Sử dụng các thuộc tính margin CSS cho không gian bên ngoài biên giới
Tự kiểm tra với bài tập!
HTML Phong cách khóa
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
0 Bình luận:
Đăng nhận xét
Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!