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 ...
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.
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
