- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,687
CSS How To - CSS Làm thế nào
Khi một trình duyệt đọc một style sheet, nó sẽ định dạng các tài liệu HTML theo các thông tin trong style sheet.
Ba cách để chèn CSS
Có ba cách để chèn một style sheet:
Với một external style sheet, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi chỉ là một tập tin!
Mỗi trang phải bao gồm một tham chiếu đến tập tin trên external style sheet trong phần tử <link>. Phần tử <link> bên trong <head>:
Ví dụ:
External style sheet có thể được viết bằng bất kỳ trình soạn thảo văn bản. Các tập tin không được chứa bất kỳ tag html. Các tập tin style sheet phải được lưu với một phần mở rộng .css.
Dưới đây là cách làm "myStyle.css":
Internal Style Sheet
Một internal style sheet có thể được sử dụng nếu một trang duy nhất có một style độc đáo.
Internal styles được định nghĩa trong phần tử <style>, bên trong <head> của trang HTML:
Inline Styles
Inline style có thể được sử dụng để áp dụng một style độc đáo cho một phần tử duy nhất.
Để sử dụng inline styles, thêm thuộc tính style cho các phần tử có liên quan. Các thuộc tính style có thể chứa bất kỳ thuộc tính CSS.
Ví dụ dưới đây cho thấy làm thế nào để thay đổi màu sắc và lề trái của phần tử <h1>:
Multiple Style Sheets
Nếu một số thuộc tính đã được xác định cho bộ chọn cùng (phần tử) ở dạng style sheets khác nhau, các giá trị từ các style sheets đọc cuối cùng sẽ được sử dụng.
Ví dụ:
Giả sử rằng một external style sheet có style sau cho phần tử <h1>:
sau đó, giả định rằng một internal style sheet cũng có những style sau cho phần tử <h1>:
Nếu internal style được xác định sau khi các liên kết đến các external style sheet, các phần tử <h1> sẽ được là "orange":
Ví dụ:
Tuy nhiên, nếu internal style được xác định trước khi liên kết với các external style sheet, các phần tử <h1> sẽ là "navy":
Cascading Order
Style gì sẽ được sử dụng khi có nhiều hơn một style chỉ định cho một phần tử HTML?
Nói chung chúng ta có thể nói rằng tất cả các style sẽ "cascade" thành một "virtual" style sheet mới theo các quy tắc sau đây, trong đó có một số ưu tiên cao nhất:
Chúc các bạn thành công.
Khi một trình duyệt đọc một style sheet, nó sẽ định dạng các tài liệu HTML theo các thông tin trong style sheet.
Ba cách để chèn CSS
Có ba cách để chèn một style sheet:
- External style sheet
- Internal style sheet
- Inline style
Với một external style sheet, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi chỉ là một tập tin!
Mỗi trang phải bao gồm một tham chiếu đến tập tin trên external style sheet trong phần tử <link>. Phần tử <link> bên trong <head>:
Ví dụ:
Mã:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>External style sheet có thể được viết bằng bất kỳ trình soạn thảo văn bản. Các tập tin không được chứa bất kỳ tag html. Các tập tin style sheet phải được lưu với một phần mở rộng .css.
Dưới đây là cách làm "myStyle.css":
Mã:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Đừng thêm một dấu cách giữa giá trị và các đơn vị (như margin-left:20 px. Viết đúng là: margin-left:20px;
Internal Style Sheet
Một internal style sheet có thể được sử dụng nếu một trang duy nhất có một style độc đáo.
Internal styles được định nghĩa trong phần tử <style>, bên trong <head> của trang HTML:
Mã:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>Inline Styles
Inline style có thể được sử dụng để áp dụng một style độc đáo cho một phần tử duy nhất.
Để sử dụng inline styles, thêm thuộc tính style cho các phần tử có liên quan. Các thuộc tính style có thể chứa bất kỳ thuộc tính CSS.
Ví dụ dưới đây cho thấy làm thế nào để thay đổi màu sắc và lề trái của phần tử <h1>:
Mã:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>Multiple Style Sheets
Nếu một số thuộc tính đã được xác định cho bộ chọn cùng (phần tử) ở dạng style sheets khác nhau, các giá trị từ các style sheets đọc cuối cùng sẽ được sử dụng.
Ví dụ:
Giả sử rằng một external style sheet có style sau cho phần tử <h1>:
Mã:
h1 {
color: navy;
}sau đó, giả định rằng một internal style sheet cũng có những style sau cho phần tử <h1>:
Mã:
h1 {
color: orange;
}Nếu internal style được xác định sau khi các liên kết đến các external style sheet, các phần tử <h1> sẽ được là "orange":
Ví dụ:
Mã:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>Tuy nhiên, nếu internal style được xác định trước khi liên kết với các external style sheet, các phần tử <h1> sẽ là "navy":
Mã:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Cascading Order
Style gì sẽ được sử dụng khi có nhiều hơn một style chỉ định cho một phần tử HTML?
Nói chung chúng ta có thể nói rằng tất cả các style sẽ "cascade" thành một "virtual" style sheet mới theo các quy tắc sau đây, trong đó có một số ưu tiên cao nhất:
- Inline style (trong một phần tử HTML)
- External và internal style sheets (trong phần đầu)
- Trình duyệt mặc định
Chúc các bạn thành công.
Nguồn: w3schools.com
Bài viết liên quan
Bài viết mới
