<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Styling HTML with CSS
- CSS là viết tắt của Cascading Style Sheets
- Styling có thể được thêm vào HTML bằng 3 cách:
+ Inline - sử dụng một thuộc tính phong cách trong các yếu tố HTML
<h1 style="color:blue">This is a Blue Heading</h1>+ Internal - sử dụng thẻ <style> trong thẻ <head>
<head>+ External - sử dụng một hoặc nhiều file CSS bên ngoài
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
Cách phổ biến nhất là sử dụng file css riêng biệt. Tuy nhiên trong tut này chúng tôi sử dụng phong cách nội bộ (Internal) để tiện cho việc thực hành.
Cú pháp CSS
CSS có cú pháp như sau
element { property:value; property:value }- element: phần tử HTML
- property: Thuộc tính css
- value: Giá trị CSS
- Mỗi phong cách được phân cách bằng dấu chấm phẩy.
Inline Styling (Inline CSS)
- Inline CSS rất hữu ích cho việc áp dụng một phong cách độc đáo với một phần tử HTML duy nhất:- Inline CSS sẽ thay đổi màu sắc văn bản của một đề mục duy nhất:
<h1 style="color:blue">This is a Blue Heading</h1>
Internal Styling (Internal CSS)
- Một phong cách trang nội bộ có thể được sử dụng để xác định một phong cách phổ biến cho tất cả các yếu tố HTML trên một trang.
- Phong cách nội bộ được định nghĩa trong thẻ <head> của trang HTML, bằng cách sử dụng thẻ <style> :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External Styling (External CSS)
- Sử dụng file css riêng là lý tưởng khi các phong cách được áp dụng cho nhiều trang.
- Bằng cách sử dụng file css riêng 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.
- External Styling sử dụng file css riêng và sau đó liên kết đế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>
CSS Fonts
- Các thuộc tính CSS color màu văn bản được sử dụng cho các phần tử HTML.
- Các thuộc tính CSS font-family định nghĩa các font chữ được sử dụng cho các phần tử HTML.
- Các thuộc tính CSS font-size xác định kích thước văn bản để được sử dụng cho các phần tử HTML.
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
The CSS Box Model
- Mỗi phần tử HTML có một hộp xung quanh nó, ngay cả khi bạn không nhìn thấy nó.
- border dùng để đóng khung xung quanh một phần tử HTML.
p {
border:1px solid black;
}
- padding xác định khoảng trống (space) bên trong khung (border)
p {
border:1px solid black;
padding:10px;
}
- margin xác định một biên độ (không gian) ở bên ngoài khung
p {
border:1px solid black;
padding:10px;
margin:30px;
}
Chú ý: Các ví dụ trên sử dụng pixels (px) để xác định kích thước
Thuộc tính id
Tất cả các ví dụ trên sử dụng CSS để định dạng các phần tử HTML trong một cách tổng quát.
Để xác định một phong cách đặc biệt cho một yếu tố đặc biệt, hãy thêm thuộc tính id cho phần tử:
<p id="p01">I am different</p>ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
p#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>
Thuộc tính class
Để xác định một phong cách cho các phần tử đặc biệt, hãy thêm một thuộc tính class
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color:red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>
</body>
</html>
* Chú ý: Sử dụng id cho một yếu tố duy nhất, sử dụng class cho một nhóm yếu tố
Deprecated Tags and Attributes in HTML5
In older HTML versions, several tags and attributes were used to style documents.
These tags and attributes are not supported in HTML5!
Avoid using the <font>, <center>, and <strike> elements.
Avoid using the color and bgcolor attributes.
Dịch và biên tập từ w3schools bởi Quỷ Lệ
Đăng nhận xét Blogger Facebook