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 trang web.
Với CSS, bạn có thể kiểm soát màu sắc, phông chữ, kích thước văn bản, khoảng cách giữa các thành phần, cách các thành phần được định vị và bố trí, hình nền hoặc màu nền nào sẽ được sử dụng, các hiển thị 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à 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 văn bản 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 thứ 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 thuộc tính
stylebên trong các phần tử HTML - Nội bộ - bằng cách sử dụng phần tử
<style>trong phần<head> - Bên ngoài - bằng cách sử dụng phần tử
<link>để liên kết đến tệp CSS bên ngoài
Cách phổ biến nhất để thêm CSS là giữ 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 tuyến và nội bộ vì cách này dễ minh họa hơn và bạn cũng dễ dàng tự mình thử 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 thành phần HTML.
CSS nội tuyến sử dụng thuộc tính style của phần tử HTML.
Ví dụ sau đặt màu văn bản của phần tử <h1> thành màu xanh lam và màu văn bản của phần tử <p> thành màu đỏ:
Ví dụ
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p> Hãy tự mình thử » 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 xác định trong phần <head> của trang HTML, bên trong phần tử <style> .
Ví dụ sau đặt màu văn bản của TẤT CẢ các phần tử <h1> (trên trang đó) thành màu xanh lam và màu văn bản của TẤT CẢ các phần tử <p> thành màu đỏ. Ngoài ra, trang sẽ được hiển thị với màu nền "xanh bột":
Ví 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> Hãy tự mình thử »CSS bên ngoài
Một 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 đó trong phần <head> của mỗi trang HTML:
Ví 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> Hãy tự mình thử »Bảng đị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 không được chứa bất kỳ mã HTML nào và phải được lưu với phần mở rộng .css.
Tệp "styles.css" trông như thế này:
"style.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ề họ sau.
Thuộc tính CSS color xác định màu văn bản sẽ được sử dụng.
Thuộc tính CSS font-family xác định phông chữ sẽ được sử dụng.
Thuộc tính CSS font-size xác định kích thước văn bản sẽ được sử dụng.
Ví dụ
Sử dụng các thuộc tính CSS color, 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> Hãy tự mình thử »Đường viền CSS
Thuộc tính CSS border xá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 thành phần HTML.
Phần đệm CSS
Thuộc padding CSS xác định khoảng đệm (khoảng trắng) giữa văn bản và đường viền.
Ví dụ
Sử dụng các thuộc tính đường viền và phần đệm CSS:
p {
border: 2px
solid powderblue;
padding: 30px;
} Hãy tự mình thử »Ký quỹ CSS
Thuộc margin CSS xác định lề (khoảng trắng) bên ngoài đường viền.
Ví dụ
Sử dụng các thuộc tính viền và lề CSS:
p {
border: 2px
solid powderblue;
margin: 50px;
} Hãy tự mình thử »Liên kết tới CSS bên ngoài
Các biểu định kiểu bên ngoài có thể được tham chiếu bằng một URL đầy đủ hoặc bằng một đường dẫn liên quan đến trang web hiện tại.
Ví 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.example.com.vn/html/styles.css">
Ví 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">
Ví 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
styleHTML để 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 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
paddingCSS cho khoảng trống bên trong đường viền - Sử dụng thuộc tính
marginCSS cho khoảng trống 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.
Video: HTML CSS
