Các thuộc tính CSS trong HTML
Định dạng HTML với CSS CSS là viết tắt của Cascading Style Sheets. CSS mô tả các phần tử HTML được hiển thị như thế nào trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều webpage cùng một ...
Định dạng HTML với CSS
CSS là viết tắt của Cascading Style Sheets. CSS mô tả các phần tử HTML được hiển thị như thế nào trên màn hình, giấy hoặc trên các phương tiện khác.
CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều webpage cùng một lúc. CSS có thể được thêm vào các phần tử HTML theo 3 cách:
- Inline – bằng cách sử dụng thuộc tính style trong các phần tử HTML
- Internal – bằng cách sử dụng một phần tử <style> trong phần <head>
- External – bằng cách sử dụng tệp CSS bên ngoài
Cách phổ biến nhất để thêm CSS là tạo ra các file CSS riêng biệt. Tuy nhiên trong ví dụ dưới đây, để bạn dễ hình dung thì chúng ta sẽ áp dụng hai cách đó là Inline và Internal.
Inline CSS
Inline CSS được sử dụng để áp dụng định dạng riêng cho một phần tử HTML duy nhất. Inline CSS sử dụng thuộc tính style của một phần tử HTML.
Ví dụ dưới đây đặt màu văn bản của phần tử <h1> thành màu xanh lam:
<h1 style=”color:blue;”>This is a Blue Heading</h1>
Internal CSS
Internal CSS được sử dụng để xác định kiểu cho một trang HTML. Internal CSS được định nghĩa trong phần <head> của một trang HTML, bên trong một phần tử <style>:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
External CSS
External CSS được sử dụng để định dạng cho nhiều trang HTML. Với External CSS, bạn có thể thay đổi giao diện của toàn bộ trang web, bằng cách thay đổi một tập tin.
Để sử dụng External CSS, thêm liên kết vào nó trong phần <head> của trang HTML:
<!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>
External CSS có thể được viết bằng bất kỳ trình soạn thảo văn bản nào. File này không được chứa bất kỳ mã HTML nào và phải được lưu với một phần mở rộng .css. File “styles.css” có dạng như sau:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
- Thuộc tính color trong CSS xác định màu văn bản sẽ được sử dụng.
- Thuộc tính font-family trong CSS xác định phông chữ được sử dụng.
- Thuộc tính font-size trong CSS xác định kích thước chữ sẽ được sử dụng.
Ví 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 Border
Thuộc tính Border định nghĩa một đường viền xung quanh một phần tử HTML:
p {
border: 1px solid powderblue;
}
CSS Padding
Thuộc tính Padding xác định khoảng đệm (khoảng trống) giữa văn bản và đường viền:
p {
border: 1px solid powderblue;
padding: 30px;
}
CSS Margin
Thuộc tính Margin định nghĩa một lề (khoảng trắng) bên ngoài:
p {
border: 1px solid powderblue;
margin: 50px;
}
Thuộc tính id
Để xác định định dạng cụ thể cho phần tử đặc biệt, thêm một thuộc tính id vào phần tử:
<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ể:
#p01 {
color: blue;
}
Lưu ý: Id của một phần tử phải là duy nhất trong một trang.
Thuộc tính class
Để xác định định dạng cho loại phần tử đặc biệt, thêm một thuộc tính class vào phần tử:
<p class=”error”>I am different</p>
Sau đó xác định định dạng cho các phần tử với một class cụ thể:
p.error {
color: red;
}
Tham khảo thêm về External
External CSS có thể được tham chiếu với một URL đầy đủ hoặc với một đường dẫn liên quan đến trang web hiện tại.
<link rel=”stylesheet” href=”https://www.w3schools.com/html/styles.css”>
Ví dụ dưới đây liên kết đến một bảng định kiểu nằm trong thư mục html trên trang web hiện tại:
<link rel=”stylesheet” href=”/html/styles.css”>
Ví dụ dưới đây liên kết đến một bảng định dạng nằm trong cùng thư mục với trang hiện tại:
<link rel=”stylesheet” href=”styles.css”>
Tổng kết
- Sử dụng thẻ style cho inline CSS.
- Sử dụng phần tử <style> để xác định internal CSS.
- Sử dụng phần tử <link> để tham khảo một tệp external CSS.
- Sử dụng phần tử <head> để lưu trữ các phần tử <style> và <link>.
- Sử dụng thuộc tính color cho màu văn bản.
- Sử dụng thuộc tính font-family cho phông chữ văn bản.
- Sử dụng thuộc tính font-size cho các kích thước văn bản.
- Sử dụng thuộc tính border để định dạng đường viền.
- Sử dụng thuộc tính padding cho không gian bên trong đường viền.
- Sử dụng thuộc tính margin cho không gian ngoài đường viền.
| Thẻ | Mô tả |
|---|---|
| <style> | định dạng cho tệp tin HTML |
| <link> | định nghĩa liên kết giữa tài liệu và tài nguyên bên ngoài |
- Khóa học lập trình frontend cơ bản : Bootstrap 4, Jquery, CSS3, HTML5
- Học lập trình Frontend nâng cao qua project thực tế
