HTML STYLE - CSS
Nội dung chính
❶ Cascading Style Sheets - CSS là gì?
❷ Cách sử dụng Cascading Style Sheets CSS
❸ CSS nội tuyến
❹ CSS nội bộ
❺ CSS bên ngoài
❻ Màu sắc, Font chữ và kích thước CSS
❼ Đường viền CSS
❽ CSS Padding
❾ Lề CSS
❿ Liên kết với CSS bên ngoài
Cascading Style Sheets được viết tắt là CSS, giúp chúng ta thao tác nhanh hơn tiết kiệm được nhiều thời gian cho việc viết Code. Có thể nói CSS kiểm soát bố cục của nhiều trang web cùng một lúc.
❶ Cascading Style Sheets - CSS là gì?
Cascading Style Sheets - CSS thường được sử dụng định dạng bố cục của Website. Khi sử dụng CSS, bạn sẽ kiểm soát màu sắc, Font 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,...
❷ Cách sử dụng Cascading Style Sheets - CSS
Chúng ta có thể thêm Cascading Style Sheets - CSS vào tài liệu HTML theo 3 cách sau:
👉 Nội tuyến: Bằng cách sử dụng Style thuộc tính bên trong các phần tử HTML
👉 Nội bộ: Là khi bạn sử dụng một <style> phần tử trong phần <head>
👉 Bên ngoài: Đây là cách sử dụng một <link> phần tử để liên kết đến một tệp CSS bên ngoài
👀 Cách phổ biến nhất để thêm CSS được sử dụng phổ biến là các tệp CSS bên ngoài.
⒜ CSS nội tuyến
CSS nội tuyến sử dụng thuộc tính Style của một phần tử HTML.
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.
Ví dụ Hãy đặt màu văn bản của <H1> phần tử thành màu Xanh Lam và màu đoạn văn bản phần tử <p> thành màu đỏ:
!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;"> Tiêu đề màu xanh lam </h1>
<p style="color:red;"> Đoạn văn màu đỏ </p>
</body>
</html>
⒝ 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 phần tử <head> của trang HTML, bên trong một phần tử <style>
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1> Là tiêu đề </h1>
<p> Là đoạn văn </p>
</body>
</html>
⒞ CSS bên ngoài
CSS nội bộ được sử dụng để xác định kiểu cho 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 kiểu bên ngoài, chúng ta thêm liên kết đến biểu định kiểu này trong <head> phần của mỗi trang HTML
Ví dụ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Là tiêu đề </h1>
<p> Là đoạn văn </p>
</body>
</html>
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 có phần mở rộng .css
Đây là tệp "styles.css"
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Lưu ý: Với CSS 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, Font chữ và kích thước CSS
Một số thuộc tính CSS thường được sử dụng như:
Thuộc tính CSS Color xác định màu văn bản.
Thuộc tính CSS Font - Family xác định font chữ.
Thuộc tính CSS Font - Size xác định kích thước văn bản.
Ví dụ: Hãy 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> Đây là tiêu đề </h1>
<p> Đây là đoạn văn </p>
</body>
</html>
Đường viền CSS
Thuộc tính CSS Border xác định đường viền xung quanh phần tử HTML.
Lưu ý: Chúng ta có thể xác định đường viền cho gần như tất cả các phần tử HTML.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>
<h1> Đây là tiêu đề </h1>
<p> Đây là đoạn văn </p>
<p> Đây là đoạn văn </p>
<p> Đây là đoạn văn </p>
</body>
</html>
CSS Padding
Thuộc tính CSS Padding xác định một khoảng đệm (khoảng trắng) giữa văn bản và đường viền.
Ví dụ: Sử dụng thuộc tính đường viền trong CSS
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1> Tiêu đề </h1>
<p> Là đoạn văn.</p>
<p> Là đoạn văn.</p>
<p> Là đoạn văn.</p>
</body>
</html>
Lề CSS
Thuộc tính CSS Margin xác định lề (khoảng trắng) bên ngoài đường viền.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1> Tiêu đề </h1>
<p> Đoạn văn </p>
<p> Đoạn văn </p>
<p> Đoạn văn </p>
</body>
</html>
Liên kết với CSS bên ngoài
Các 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 Website hiện tại.
Ví dụ: Sử dụng một URL đầy đủ để liên kết đến một kiểu:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://www.workonlinevn.com/html/styles.css">
</head>
<body>
<h1> Tiêu đề </h1>
<p> Đoạn văn </p>
</body>
</html>
Ví dụ: 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:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/html/styles.css">
</head>
<body>
<h1> Đây là một tiêu đề </h1>
<p> Đây là một đoạn văn.</p>
</body>
</html>
Ví dụ: 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:
<!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>
Cảm ơn bạn đã xem bài viết!
