Tìm hiểu về cách chèn CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Tìm hiểu về cách chèn CSS

Khi một trình duyệt đọc một style sheet, nó sẽ định dạng tài liệu HTML theo thông tin trong sheet đó.

Ba cách để chèn CSS

Có ba cách để chèn một định dạng:

  • Định dạng bên ngoài
  • Định dạng bên trong
  • Định dạng inline

Định dạng bên ngoài

Với một định dạng bên 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ỉ một tập tin! Mỗi trang phải bao gồm một tham chiếu đến tệp định dạng bên ngoài bên trong phần tử <link>. Phần tử <link> nằm trong phần <head>:

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

Một định dạng 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 được chứa bất kỳ thẻ html nào. Tệp định dạng phải được lưu với một phần mở rộng .css.

Đây là ví dụ về tệp định dạng “mystyle.css” :

body {
    background-color: lightblue;
}

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

Lưu ý: Không thêm khoảng trống giữa giá trị thuộc tính và đơn vị (chẳng hạn như margin-left: 20 px;). Cách chính xác là: margin-left: 20px;

Định dạng bên trong

Một tệp định dạng bên trong có thể được sử dụng nếu một trang duy nhất có định dạng riêng biệt. Định dạng bên trong được định nghĩa trong phần tử <style>, bên trong phần <head> của một trang HTML:

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

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

Định dạng inline

Định dạng inline có thể được sử dụng để áp dụng cho một phần tử nào đó. Để sử dụng các định dạng inline, hãy thêm thuộc tính style cho phần tử có liên quan. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào.

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 phần tử <h1>:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Mẹo: định dạng inline có thể gây nhiều lỗi khi định dạng toàn bộ trang web, chính vì thế bạn nên hạn chế cách chèn CSS này.

Định dạng cho nhiều trang

Nếu một số thuộc tính đã được xác định cho cùng một bộ chọn (phần tử) trong các tệp định dạng khác nhau, giá trị từ tệp định dạng cuối cùng sẽ được sử dụng.

Giả sử rằng định dạng bên ngoài cho phần tử <h1>:

h1 {
    color: navy;
}

sau đó, giả sử rằng một định dạng bên trong cũng cho phần tử <h1>:

h1 {
    color: orange;    
}

Nếu định dạng bên trong được định nghĩa sau liên kết tới định dạng bên ngoài, các phần tử <h1> sẽ là “orange”:

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

Tuy nhiên, nếu định dạng bên trong được định nghĩa trước liên kết tới định dạng bên ngoài, các phần tử <h1> sẽ là “navy”:

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

Thứ tự ưu tiên định dạng

Định dạng nào sẽ được sử dụng khi có nhiều kiểu được 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 định dạng sẽ “chèn” vào một định dạng “ảo” mới theo các quy tắc sau đây, trong đó số một có mức ưu tiên cao nhất:

  • Kiểu nội tuyến inline (bên trong một phần tử HTML)
  • Định dạng bên ngoài và bên trong (trong phần header)
  • Mặc định của trình duyệt

Vì vậy, một định dạng nội tuyến inline (bên trong một phần tử HTML cụ thể) có mức độ ưu tiên cao nhất, có nghĩa là nó sẽ ghi đè lên một định dạng được xác định bên trong thẻ <head> hoặc trong một trang định dạng ngoài, hoặc một giá trị mặc định của trình duyệt.