Ba cách để chèn CSS
Có ba cách để chèn một style sheet:
Style Sheet bên ngoài
Với một phong cách trang ngoài, 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 sheet bên ngoài bên trong <link> phần tử. <Link> yếu tố đi bên trong <head>:
Thí dụ
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Một style sheet bên ngoài có thể được viết bằng bất kỳ trình soạn thảo. Các tập tin không được chứa bất kỳ thẻ html. Các tập phong cách trang phải được lưu với phần mở rộng .css.
Dưới đây là cách "myStyle.css" trông:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
 | Đừng thêm một khoảng trống giữa giá trị tài sản và các đơn vị (như margin-left:20 px; ). Cách đúng là: margin-left:20px; |
|---|
Style Sheet nội
Một phong cách trang nội bộ có thể được sử dụng nếu một trang duy nhất có một phong cách độc đáo.
phong cách nội bộ được định nghĩa trong <style> yếu tố, bên trong <head> của trang HTML:
Thí dụ
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Styles inline
Một phong cách nội tuyến có thể được sử dụng để áp dụng một phong cách độc đáo cho một yếu tố duy nhất.
Để sử dụng phong cách nội tuyến, thêm các thuộc tính phong cách cho các yếu tố có liên quan. Các thuộc tính phong cách 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 một <h1> yếu tố:
Thí dụ
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
| Một phong cách nội tuyến mất rất nhiều trong những lợi thế của một phong cách trang (bằng cách trộn nội dung với bài thuyết trình). Sử dụng phương pháp này một cách tiết kiệm! |
|---|
Nhiều Sheets Phong cách
Nếu một số tài sản đã được xác định cho các bộ chọn cùng (phần tử) ở dạng tấm phong cách khác nhau, giá trị từ phong cách trang đọc cuối cùng sẽ được sử dụng.
Thí dụ
Giả sử rằng một sheet bên ngoài có phong cách sau cho <h1> yếu tố:
h1 {
color: navy;
}
sau đó, giả định rằng một phong cách trang nội bộ cũng có những phong cách sau cho <h1> yếu tố:
h1 {
color: orange;
}
Nếu phong cách nội bộ được xác định sau khi các liên kết đến các sheet bên ngoài, <h1> phần tử sẽ là "màu da cam":
Thí dụ
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Tuy nhiên, nếu các phong cách nội bộ được xác định trước khi liên kết với các style sheet bên ngoài, <h1> phần tử sẽ là "hải quân":
Thí dụ
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Cascading thứ tự
kiểu gì sẽ được sử dụng khi có nhiều hơn một phong cách cụ thể cho một phần tử HTML?
Nói chung chúng ta có thể nói rằng tất cả các phong cách sẽ "cascade" thành một "ảo" style sheet mới theo các quy tắc sau đây, nơi số một có ưu tiên cao nhất:
- phong cách nội tuyến (trong một phần tử HTML)
- style sheets bên ngoài và nội bộ (trong phần đầu)
- Trình duyệt mặc định
Vì vậy, một phong cách nội tuyến (bên trong một phần tử HTML cụ thể) có ưu tiên cao nhất, có nghĩa là nó sẽ ghi đè lên một phong cách được định nghĩa bên trong thẻ <head>, hoặc trong một tấm phong cách bên ngoài, hoặc một giá trị mặc định của trình duyệt.
0 Bình luận:
Đăng nhận xét
Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!