Bạn đã có một file CSS của bạn, bây giờ công việc tiếp theo là làm thế nào để chèn những đoạn CSS của bạn vào trong trang, Và xem chúng hoạt động như thế nào. Trong phần này chúng ta sẽ đi tìm hiểu chi tiết về cách chèn một đoạn style trong trang HTML hay liên kết tới một file CSS viết sẵn.Khi trình duyệtđọc đếnCSS, thì toàn bộ Website sẽđược định dạng theo các thuộc tính đã được khai báo trong phầnCSS. Có ba cách cho phép chúng tachèn định dạng CSS vào trong Website.
1. CSS đượckhai báo trong file riêng.Toàn bộmã CSS được chứa trong file riêng có phần mở rộng.css là mộtý tưởng được dùng khi một file CSS sẽ được áp dụng cho nhiều trangkhác nhau. Bạn có thể thay đổi cách hiển thị của toàn bộ site mà chỉ cần thay đổi một file CSS. Trong cách này thì file CSS sẽ đượcchèn vào văn bản HTML thông qua thẻ<link>...</link>. Ta có cú pháp như sau:
<html>
<head>
<link rel="stylesheet"type="text/css"href="http://kenhsv.xtgem.com/css/creator_template.css"medial="all"/>
</head>
<body> </body>
</html>
Trình duyệt sẽ đọc toàn bộ cácđịnh dạng được quy định trong file myhttp://kenhsv.xtgem.com/creator_template.css và định dạng cho văn bản HTML.File CSS có thể được soạn thảo bằngmột số trình duyệt khác nhau. Trong file không được chứa mã HTML, khi ghi lại chúng ta bắt buộc phải ghi lại với phần mở rộng là.css. Giả sửchúng trong file myhttp://kenhsv.xtgem.com/creator_template.cssở trên chứa đoạn mã sau:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Không bao giờ sử dụng khoảng trắng trong nhãn, giả sử rằng nếu bạn dùng margin-left: 20 px; thay cho margin-left:20px; thì IE6 sẽ hiểu còn các trình duyệt như Firefox, Opera sẽ không hiểu.
-CHÚ Ý : Cách này là thông dụng và nhiều người sử dụng nhất.
Nếu bạn nào muốn sử dụng CSS của mình thì cứ dán đoạn mã trên lên đầu wap,web là được.
2. Chèn CSS trong tài liệu HTMLChèn thẳng CSs trong tài liệu được áp dụng trong trường hợp những định dạng CSS này chỉ giành riêngcho tài liệu HTML đó. Khi bạn chèn trực tiếp thì đoạn mã của bạn phải đặt trong thẻ <style>và đặt trong phần<head>.
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Có một số trình duyệt cũ sẽ không hiểu thẻ<style>, nósẽ bỏ qua thẻ này. Tuy nhiên thìnội dung trong thẻ<style>vẫn hiển thị ra chúng ta sẽ phải dùng định dạng chú thích trong HTML đểchứa phần nội dung của thẻ<style>.
<head>
<style type="text/css">
<!--hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
3. Chèn trực tiếp vào thẻ của HTML(inline style)
Inline style được sử dụng nhiều trong trườnghợp mộtthẻ HTML nào đó cần có style riêng cho nó.Inline style đượcáp dụng cho chính thẻ HTML đó, cách này sẽ có độ ưu tiên lớn nhất so với hai cách trên. Dưới đây là một ví dụmà chúng tadùng Inline style
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
4. Nhiều Stylesheet
Trong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. Giả sử như sau:h1, h2, h3 {
margin-left: 10px; font-size: 150%; ...
}
Giống đoạn mãtrên thì cả bathẻ h1, h2, h3 đều có cùng 3 thuộc tính như trên.
*Coi như đã xong phần đầu bây giời sửdụng các lớp ra sao uh?
Mã nguồn[chọn]
<div class="menu">Ví dụ văn bản</div>
thẻ div tìm hiểu thêm ở HTML ha.
Và trong cặp DIV này có thể chèn vô số thứ
Mã nguồn[chọn]
<div class="bmenu"><a href="http://kenhsv.xtgem.com">Quayvề trang chủ</a></div>
nhưng ví dụ vẫn chỉ là ví dụ thử làm các bạn sẽ thấy .
Kết thúc phần này ha!
Add Free BackLinkBacklinkviet - giokim.com
.png){kind=small}