Định kiểu HTML với CSS
CSS là viết tắt của Cascading Style Sheets
CSS mô tả cách các phần tử HTML sẽ được hiển thị trên màn hình, trang, hoặc trong các phương tiện khác.
CSS giúp tiết kiệm rất nhiều công việc. Nó có thể điều khiển bố cục của nhiều trang web cùng một lúc.
CSS có thể được thêm vào phần tử HTML bằng 3 cách:
Inline (Nội tuyến) – bằng cách dùng thuộc tính style trong phần tử HTML.
Internal (Nội bộ) – bằng cách dùng phần tử <style> trong phần <head>.
External (Từ bên ngoài) – bằng cách dùng file CSS bên ngoài.
Cách phổ biến nhất để thêm CSS là giữ các mẫu trong các file CSS riêng biệt (External). Tuy nhiên, ở đây chúng ta sử dụng kiểu inline và internal, vì chúng biểu thị và giúp bạn thực hành dễ dàng hơn.
CSS kiểu nội tuyến (inline)
Một 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 đơn.
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 chữ cho phần tử <h1> thành màu xanh dương.
Ví dụ
<h1 style="color:blue;">This is a Blue Heading</h1>
CSS kiểu nội bộ (internal)
Một CSS nội bộ được sử dụng để xác định kiểu cho một trang HTML đơn.
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ụ
<!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 từ bên ngoài (external)
Một CSS từ bên ngoài có thể được dùng để định kiểu 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 chỉnh sửa một file duy nhất!
Để sử dụng CSS từ bên ngoài, ta thêm một đường dẫn tới file CSS ở phần <head> của 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>
Một file CSS ngoài có thể được viết bởi mọi trình soạn thảo. File này không được chứa bất kỳ đoạn mã HTML nào, và phải được lưu lại với đuôi “.css”
File “style.css” trông giống như sau:
body {
background-color: white;
}
h1 {
color: mediumseagreen;
}
p {
color: tomato;
}
.png)
CSS Fonts
Thuộc tính CSS color giúp xác định màu chữ được sử dụng.
Thuộc tính CSS font-family giúp xác định kiểu font được sử dụng.
Thuộc tính font-size giúp xác định cỡ chữ đượ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>
Đường viền (border)
Thuộc tính border giúp xác định một đường viền bao quanh phần tử HTML:
Ví dụ
p {
border: 1px solid powderblue;
}
Ở ví dụ trên 1px là độ dày đường viền, solid là kiểu của đường viền, powderblue là màu đường viền.
CSS Padding
Thuộc tính padding giúp xác định một khoảng đệm (khoảng trống) giữa văn bản và viền:
Ví dụ
p {
border: 1px solid powderblue;
padding: 30px;
}
Margin
Thuộc tính margin giúp xác định một khoảng lề bên ngoài đường viền:
Ví dụ
p {
border: 1px solid powderblue;
margin: 50px;
}
.png)
Ví dụ ở hình trên, phần màu cam là margin, phần màu xanh lá là padding và phần viền ở giữa margin và padding chính là border. Đây là 2 thuộc tính thường được sử dụng để căn chỉnh phần tử và bố cục trang web.
Để dễ nhớ thì các bạn có thể hiểu margin là lề ngoài, dùng để điều chỉnh khoảng cách với các phần tử khác. Và padding là lề trong để điều chỉnh khoảng cách giữa nội dung và viền phần tử.
Thuộc tính id
Để xác định một style riêng cho một phần tử đặc biệt, hãy thêm thuộc tính id cho phần tử:
<p id="p01">I am different</p>
Sau đó style cho phần tử đó với id cụ thể.
Ví dụ
#p01 {
color: blue;
}
Note: id của một phần tử nên là duy nhất trong một trang web, để bộ chọn id có thể chỉ ra chính xác phần tử đó.
Thuộc tính class
Để xác định style cho các loại phần tử đặc biệt, hãy thêm thuộc tính class cho phần tử:
<p class="error">I am different</p>
Sau đó style cho các phần tử đó với tên class vừa đặt.
Ví dụ
p.error {
color: red;
}
Tham chiếu đến file CSS ngoài
File CSS ngoài có thể được tham chiếu với đường dẫn tuyệt đối, hoặc đường dẫn tương đối tới trang web hiện tại.
Ví dụ sử dụng đường dẫn tuyệt đối:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Ví dụ sử dụng đường dẫn tương đối nếu file CSS đặt trong thư mục css
<link rel="stylesheet" href="/css/styles.css">
Ví dụ sử dụng đường dẫn tương đối nếu file CSS đặt cùng thư mục với trang hiện tại (file index.html)
<link rel="stylesheet" href="styles.css">
Tổng kết chương
Dùng thuộc tính style để định kiểu nội tuyến
Dùng thuộc phần tử <style> để định kiểu nội bộ
Dùng phần tử <link> để tham chiếu tới file CSS ngoài
Dùng phần tử <head> để lưu trữ các phần tử <style> và <link> (Đặt thẻ <style> và thẻ <link> bên trong thẻ <head>)
Dùng thuộc tính color để xác định màu chữ
Dùng thuộc tính font-family để xác định font chữ
Dùng thuộc tính font-size để xác định cỡ chữ
Dùng thuộc tính border để tạo đường viền
Dùng thuộc tính padding để thêm khoảng trống bên trong viền
Dùng thuộc tính margin để thêm khoảng trống bên ngoài viền
Bảng tham khảo
|
Thẻ |
Mô tả |
|
<style> |
Xác định style cho tài liệu HTML |
|
<link> |
Xác định liên kết giữa tài liệu và tài nguyên bên ngoài |
Trích nguồn từ: (https://www.w3schools.com/html/html_css.asp)
