Bài 2: Cách Đưa CSS Vào Trang Web
Cách Đưa CSS Vào Trang Web Khi một trình duyệt đọc một style sheet, nó sẽ định dạng HTML tương ứng thông tin style sheet. “Style sheet”: là mã, là code CSS. Có 3 cách để đưa CSS vào webpage : External style sheet Internal style sheet Inline style External ...
Cách Đưa CSS Vào Trang Web
Khi một trình duyệt đọc một style sheet, nó sẽ định dạng HTML tương ứng thông tin style sheet.
“Style sheet”: là mã, là code CSS.
Có 3 cách để đưa CSS vào webpage :
- External style sheet
- Internal style sheet
- Inline style
External Style Sheet (đưa từ bên ngoài vào)
Với một external style sheet, bạn có thể thay đổi toàn bộ website bằng việc thay đổi một file!
Mổi trang phải include một tham chiếu tới file external style sheet bên trong thẻ <link>. Thẻ <link> nằm bên trong phần <head>….</head>.
Chúng ta tạo một file css và viết tất cả các style sheet trong file đó, sau đó import file vào trang html và file có phần mở rộng là .css.
Ví dụ: tạo file mystyle.css với nội dung sau:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Tiếp đến tạo trang tài liệu, trang chúng ta cần chạy hiễn thị, tôi ví dụ là file index.html, rồi import file css vào.
File index.html với nội dung sau:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Kết quả sẽ là :
Bạn có thể dùng bất kỳ text editor để soạn thảo file css, và file css thì không chứa đựng bất kỳ tab html.
Lưu ý: không thêm khoảng trắng giữa giá trị thuộc tính và đơn vị (như là : margin-left: 20 px;). Cách viết đúng là margin-left: 20px;
Internal Style sheet
Một internal style sheet có thể được sử dụng nếu một trang duy nhất có một style duy nhất.
Internal style được định nghĩa bên trong <style> element, và cũng nằm bên trong phần <head> …</head> của trang HTML.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Kết quả:
Như file bạn thấy, phần trên là viết style sheet để định dạng page, phần dưới <body> là nội dung trang HTML.
Viết theo kiểu này thì CSS chỉ ảnh hưởng của file hiện tại mà thôi.
Inline Styles
Một inline style có thể được sử dụng để áp dụng một style duy nhất cho một element duy nhất.
Để sử dụng inline style, thêm thuộc tính style tới element muốn định dạng.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Chúng ta muốn nội dung trong thẻ <h1> màu xanh, và cách mép trái 30px.
Multiple Style Sheet
Nếu một số thuộc tính được định nghĩa cùng selector(element) trong các style sheet khác nhau, thì giá trị sẽ đọc style sheet sau cùng.
Ví dụ:
Giả định rằng một external style sheet có địn dạng thẻ <h1> như sau:
h1 {
color: navy;
}
Sau đó, giả sử một internal style sheet cũng có định dạng cho <h1>:
h1 {
color: orange;
}
Nếu internal style được định nghĩa sau link external style sheet, thì trong ví dụ trên <h1> sẽ lấy giá trị là màu “orange”;
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Kết quả:
Tuy nhiên nếu internal style được định nghĩa trước link của external style sheet, thì <h1> sẽ lấy giá trị “navy”:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Cascading Order
Độ ưu tiên của style sheet.
Nếu như có nhiều hơn một style được cùng đưa vào để định đạng cho một HTML element, thì nó sẽ lấy cái nào,như ví dụ về internal và external bạn thấy đó.
Và theo tổng quát thì có độ ưu tiên sau:
- Inline style (sử dụng bên trong HTML element
- External và internal style sheet (nằm trong phần head)
- Mặc định của browser
Vì thế một inline style có mức ưu tiên cao nhất, có nghĩa là nó sẽ đề các style định nghĩa trong thẻ <head>, ơr trong một external style sheet, hoặc giá trị mặc định của browser.
Tóm tắt:
Bài học cho ta thấy các cách đưa style sheet css vào để định dạng page html.
Và nếu một trang có sử dụng hết các cách cùng một lúc, và sẽ có trùng lắp vậy thì sẽ lấy theo độ ưu tiên, là inline rồi mới tới internal hoặc external.
Ý nghĩa là như thế này: vì 2 loại internal và external phải bỏ vào thẻ <head>, mà thẻ này nằm trên đầu file html, nen xem như nó nằm trên nhất, tiếp đến là nếu bạn có inline style thì nó sẽ nằm ở phần body trở về sau rồi, nên xem như nó nằm dưới nhất, do vậy giá trị của thèn nằm sau sẽ ghi đè thèn nằm trước.
Giống như ta gán giá trị :
A=1;
A= 100;
Nếu bạn in ra thì giá trị A là 100, giá trị sau cùng được lấy.
