Cách chèn CSS để tạo kiểu cách cho trang HTML

Nga Bùi

Khi trình duyệt đọc tập tin định dạng (stylesheet), nó sẽ định dạng văn bản HTML theo thông tin trong tập tin định dạng đó.

3 cách thêm CSS

Có 3 cách để thêm tập tin định dạng cho văn bản HTML.

Tập tin định dạng nội bộ
Tập tin định dạng ngoài
Nội dòng

Tập tin định dạng ngoài

Với một style sheet ngoài, bạn có thay đổi diện mạo của cả website mà chỉ cần thay đổi một tập tin duy nhất, Mỗi trang sẽ có tham chiếu tới tập tin ngoài này trong phần tử <link> nằm trong phần <head> .

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Tập tin định dạng ngoài có thể được viết trên bất kì trình soạn thảo nào, không chứa phần tử HTML và phải được lưu với phần mở rộng là .css.

Đây là ví dụ về một phần trong tập tin style sheet.

body {
 background-color: lightblue;
}

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

Lưu ý: Không thêm khoảng trắng giữa giá trị đặc tính và đơn vị (như thế này margin-left: 20 px;). mà phải viết như sau: margin-left: 20px;

Tập tin định dạng nội bộ

Nên dùng tập tin này khi mỗi trang có một kiểu định dạng khác nhau, được định nghĩa bằng phần tử <style> và nằm trong phần <head> của trang HTML.

<head>
<style>
body {
 background-color: linen;
}

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

Định dạng nội dòng

Nên dùng kiểu định dạng này nếu áp dụng một kiểu định dạng riêng cho một phần tử riêng. Để áp dụng, thêm thuộc tính style cho phần tử liên quan, thuộc tính style có thể chứa đặc tính CSS. Ví dụ dưới đây cho thấy cách thay đổi màu sắc và căn lề cho phần tử <h1>.

<h1 style="color:blue;margin-left:30px;">Tiêu đề</h1>

Nhiều tập tin định dạng

Nếu nhiều đặc tính được định nghĩa cho cùng một Selector (phần tử) trong các tập tin định dạng khác nhau, có thể dùng giá trị từ lần đọc style sheet gần nhất. Giả sử một style sheet ngoài định dạng phần tử <h1> như sau:

h1 {
 color: navy;
}

rồi một style sheet nội bộ định dạng cho phần tử <h1> như thế này:

h1 {
 color: orange;
}

Nếu định dạng nội bộ được định nghĩa sau đường dẫn tới style sheet ngoài, phần tử <h1> sẽ có màu da cam.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
 color: orange;
}
</style>
</head>

Nhưng nếu định dạng nội bộ được định nghĩa trước thì phần tử <h1> sẽ có màu xanh navy.

<head>
<style>
h1 {
 color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Thứ tự phân tầng

Nên dùng kiểu định dạng nào khi có nhiều hơn một kiểu cho một phần tử HTML? Thường thứ tự áp dụng kiểu định dạng tuân theo cấp bậc từ cao xuống thấp như sau:

Định dạng nội dòng (bên trong phần tử HTML)
Các tập tin định dạng nội bộ và bên ngoài (trong phần head)
Mặc định của trình duyệt

Định dạng nội dòng (bên trong phần tử HTML) được ưu tiên cao nhất, tức là có thể ghi đè định dạng được định nghĩa trong thẻ <head> hoặc tập tin style sheet ngoài hoặc giá trị mặc định của trình duyệt.

Bài trước: Cú pháp và Selector trong CSS

Bài sau: Màu sắc trong CSS

Thứ Tư, 13/06/2018 10:06

3,6 ★ 7 👨 10.324

#CSS