Cách sử dụng CSS

Khi một trình duyệt đọc một style sheet (bảng định kiểu), nó sẽ định dạng tài liệu HTML theo các thông tin mô tả trong style sheet.
Ba cách để chèn mã CSS
Hiện có ba cách để chèn mã style sheet vào trang web:
·      Style sheet nằm bên ngoài tài liệu HTML
·      Style sheet nằm trong tài liệu HTML
·      Inline style

Style sheet độc lập (bên ngoài)

Với một style sheet độc lập, 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 style sheet độc lập bên ngoài bằng phần tử <link>. Phần tử <link> đặt trong phần tử <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Style sheet bên ngoài có thể được viết bằng bất kỳ trình soạn thảo văn bản nào. Tệp không chứa bất kỳ thẻ html nào. Style sheet độc lập cần được lưu trong một tệp có đuôi (phần mở rộng) là .css.
Ví dụ về một tệp tin style sheet có tên là "myStyle.css" dưới đây:
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Style sheet nội bộ 

Một style sheet nội bộ có thể được sử dụng nếu bạn chỉ có một trang HTML với kiểu là duy nhất.
Kiểu (style) nội bộ được định nghĩa trong phần tử <style>, phần tử này đặt trong phần đầu của một trang HTML (nằm trong <head>):
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Inline style

Inline style (kiểu nội tuyến) có thể được sử dụng để áp dụng duy nhất một kiểu cho chỉ một phần tử.
Inline style sẽ làm mất nhiều lợi thế của style sheet (bởi trộn nội dung với cách trình bày). Không nên lạm dụng phương pháp này!
Để sử dụng inline style, bạn chỉ cần thêm thuộc tính "style" cho phần tử liên quan. Thuộc tính "style" có thể chứa bất kỳ thuộc tính nào của CSS.
Ví dụ dưới đây cho thấy cách hay đổi màu sắc và canh lề trái của phần tử <h1>:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Đa kiểu (multiple style sheet)

Nếu một số thuộc tính đã được xác định cho cùng một bộ chọn (selector) (phần tử) trong các style sheet khác nhau, các giá trị style sheet được đọc cuối cùng sẽ được sử dụng.
Ví dụ
Giả sử rằng một style sheet bên ngoài có định nghĩa kiểu sau đây cho các phần tử <h1>:
h1 {
color: navy;
}
sau đó, giả sử rằng có một style sheet nội bộ cũng đã định nghĩa kiểu cho <h1> như sau:
h1 {
color: orange;
}
Nếu style sheet nội bộ được xác định sau khi liên kết tới style sheet bên ngoài, phần tử <h1> sẽ có văn bản màu "orange"(cam):
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Tuy nhiên, nếu style sheet nội bộ được xác định trước khi liên kết với style sheet bên ngoài, các phần tử <h1> sẽ có văn bản màu "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Try it yourself »

CodeLean.vn

Facebook: CodeLean Community

Post a Comment

Mới hơn Cũ hơn