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 đến CSS, thì toàn bộ Website sẽ được định dạng
theo các thuộc tính đã được khai báo trong phần CSS. Có ba cách cho
phép chúng ta chèn định dạng CSS vào trong Website.
1. CSS được khai 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 trang khá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ẽ được chè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://yenhung.xtgem.com/style.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
mystyle.css và định dạng cho văn bản HTML.File CSS có thể được soạn
thảo bằng mộ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 mystyle.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êng cho 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 trang HTML. Vì vậy mà 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ường hợp một thẻ 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 ta dù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%; ...
}
thehe9x.wap.sh-học css
Giống đoạn mã trên thì cả ba thẻ 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://yenhung.xtgem.com">Quay về trang
chủ</a></div>
nhưng ví dụ vẫn chỉ là ví dụ thử làm các bạn sẽ thấy .
