Kiểu HTML - CSS
CSS là viết tắt của Cascading Style Sheets.
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 trang web cùng một lúc.
CSS = Kiểu dáng và Màu sắc
CSS là gì?
Cascading Style Sheets (CSS) được sử dụng để định dạng bố cục của một trang web.
Với CSS, bạn có thể kiểm soát màu sắc, phông chữ, kích thước của văn bản, khoảng cách giữa các phần tử, cách các phần tử được định vị và bố trí, hình nền hoặc màu nền sẽ được sử dụng, các màn hình khác nhau cho các thiết bị và kích thước màn hình khác nhau, và nhiều hơn nữa!
Mẹo: Từ xếp tầng có nghĩa là một kiểu được áp dụng cho phần tử cha cũng sẽ áp dụng cho tất cả các phần tử con trong phần tử cha. Vì vậy, nếu bạn đặt màu của nội dung thành "xanh lam", tất cả các tiêu đề, đoạn văn và các thành phần văn bản khác trong nội dung cũng sẽ có cùng màu (trừ khi bạn chỉ định một cái gì đó khác)!
Sử dụng CSS
CSS có thể được thêm vào tài liệu HTML theo 3 cách:
- Nội tuyến - bằng cách sử dụng
stylethuộc tính bên trong các phần tử HTML - Nội bộ - bằng cách sử dụng một
<style>phần tử trong<head>phần - Bên ngoài - bằng cách sử dụng một
<link>phần tử để liên kết với tệp CSS bên ngoài
Cách phổ biến nhất để thêm CSS là giữ các kiểu trong các tệp CSS bên ngoài. Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ sử dụng các kiểu nội dòng và kiểu nội bộ, vì điều này dễ chứng minh hơn và bạn cũng dễ dàng tự mình thử nó hơn.
CSS nội tuyến
CSS nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một phần tử HTML.
CSS nội tuyến sử dụng stylethuộc tính của một phần tử HTML.
Ví dụ sau đặt màu văn bản của <h1>phần tử thành màu xanh lam và màu văn bản của <p>phần tử thành màu đỏ:
Thí dụ
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
CSS nội bộ
CSS nội bộ được sử dụng để xác định kiểu cho một trang HTML.
CSS nội bộ được định nghĩa trong <head>phần của trang HTML, bên trong một <style>phần tử.
Ví dụ sau đặt màu văn bản của TẤT CẢ các <h1>phần tử (trên trang đó) thành màu xanh lam và màu văn bản của TẤT CẢ các <p>phần tử thành màu đỏ. Ngoài ra, trang sẽ được hiển thị với màu nền "bột màu":
Thí dụ
<!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>
CSS bên ngoài
Biểu định kiểu bên ngoài được sử dụng để xác định kiểu cho nhiều trang HTML.
Để sử dụng biểu định kiểu bên ngoài, hãy thêm liên kết đến biểu định kiểu này trong <head>phần của mỗi 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>
Bảng định kiểu bên ngoài có thể được viết trong bất kỳ trình soạn thảo văn bản nào. Tệp không được chứa bất kỳ mã HTML nào và phải được lưu bằng phần mở rộng .css.
Đây là tệp "styles.css" trông như thế nào:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Mẹo: Với biểu định kiểu bên ngoài, 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!
Màu sắc, phông chữ và kích thước CSS
Ở đây, chúng tôi sẽ trình bày một số thuộc tính CSS thường được sử dụng. Bạn sẽ tìm hiểu thêm về chúng sau.
Thuộc tính CSS colorxác định màu văn bản sẽ được sử dụng.
Thuộc tính CSS font-familyxác định phông chữ sẽ được sử dụng.
Thuộc tính CSS font-sizexác định kích thước văn bản sẽ được sử dụng.
Thí dụ
Sử dụng các thuộc tính màu CSS, font-family và font-size:
<!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>
Đường viền CSS
Thuộc tính CSS borderxác định đường viền xung quanh phần tử HTML.
Mẹo: Bạn có thể xác định đường viền cho gần như tất cả các phần tử HTML.
Thí dụ
Sử dụng thuộc tính đường viền CSS:
p {
border: 2px
solid powderblue;
}
CSS Padding
Thuộc tính CSS paddingxác định một khoảng đệm (khoảng trắng) giữa văn bản và đường viền.
Thí dụ
Sử dụng thuộc tính đường viền và đệm CSS:
p {
border: 2px
solid powderblue;
padding: 30px;
}
Lề CSS
Thuộc tính CSS marginxác định một lề (khoảng trắng) bên ngoài đường viền.
Thí dụ
Sử dụng thuộc tính đường viền và lề CSS:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Liên kết với CSS bên ngoài
Các biểu định kiểu bên ngoài 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.
Thí dụ
Ví dụ này sử dụng một URL đầy đủ để liên kết đến một biểu định kiểu:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Thí dụ
Ví dụ này liên kết đến một biểu đị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">
Thí dụ
Ví dụ này liên kết đến một biểu định kiểu nằm trong cùng thư mục với trang hiện tại:
<link rel="stylesheet" href="styles.css">
Bạn có thể đọc thêm về đường dẫn tệp trong chương Đường dẫn tệp HTML .
Tóm tắt chương
- Sử dụng thuộc tính HTML
styleđể tạo kiểu nội tuyến - Sử dụng phần tử HTML
<style>để xác định CSS nội bộ - Sử dụng phần tử HTML
<link>để tham chiếu đến tệp CSS bên ngoài - Sử dụng phần tử HTML
<head>để lưu trữ các phần tử <style> và <link> - Sử dụng thuộc tính CSS
colorcho màu văn bản - Sử dụng thuộc tính CSS
font-familycho phông chữ văn bản - Sử dụng thuộc tính CSS
font-sizecho các kích thước văn bản - Sử dụng thuộc tính CSS
bordercho đường viền - Sử dụng thuộc tính CSS
paddingcho khoảng trống bên trong đường viền - Sử dụng thuộc tính CSS
margincho không gian bên ngoài đường viền
Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi .
Bài tập HTML
Thẻ kiểu HTML
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .