III. Cách Định Kiểu Thông Qua CSS
Hai bài trên đã giới thiệu với bạn cách viết các mã định dạng CSS. Bài này sẽ hướng dẫn bạn cách sử dụng các mã đã được tạo ra.
Làm thế nào để chèn một đoạn mã CSS vào trang web
- Khi trình duyệt web đọc trang web của bạn nó sẽ định dạng trang web theo cách CSS đã qui định cho nó.
-
Theo như bài đầu tiên đã đề cập, chúng ta có tất cả 3 loại CSS dó đó
chúng ta cũng sẽ có 3 cách để chèn CSS vào trang web của mình.
Với External Style ( Sử dụng file CSS được định nghĩa thành 1 file riêng)
Sử dụng External Style là một cách lý tưởng khi ta cần phải
định dạng nhiều trang web theo một mẫu thống nhất. Với External Style
chúng ta có thể thay đổi dáng vẻ của một trang web chỉ với việc thay đổi
duy nhất 1 file. Mỗi trang web sử dụng file CSS ngoài
này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên
trong thẻ <HEAD>, với thuộc tính href sẽ trỏ đến file .CSS bên
ngoài.
Ví dụ:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Nếu
một trang web có đoạn mã trên thì khi hiển thị trang web trình duyệt sẽ
đọc các style được định nghĩa trong file mystyle.css và định dạng văn
bản theo nó. Nếu tên file của bạn không phải là mystyle.css thì bạn chỉ
cần đổi tên của file thành tên file của bạn.
Một file CSS có thể
được viết ra từ bất kì trình soạn thảo văn bản nào. Trong file CSS chỉ
chứa các định dạng, không bao gồm các thẻ HTML. Một tệp CSS nên ghi với phần mở rộng là .CSS Ví dụ dưới đây thể hiện toàn bộ nội dung của một file CSS.
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Với Internal Style (Định nghĩa các style sheet ngay trong trang web)
Trong
trường hợp mỗi trang web của bạn sử dụng các định dạng khác nhau, bạn
hãy dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet bạn sử
dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>.
Ví dụ:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Trình duyệt sẽ đọc đoạn mã này và định dạng trang web theo nó.
Chú ý:
-
Thông thường trình duyệt sẽ bỏ qua đoạn mã mà nó không thể hiểu nổi.
Điều đó có nghĩa là với các trình duyệt cũ chúng sẽ bỏ qua thẻ
<STYLE>. Tuy nhiên nó không bỏ qua nội dung bên trong thẻ này.
Điều đó có nghĩa là phần thông tin định nghĩa style của bạn sẽ bị "phơi"
hết lên trang web. Do đó để giải quyết vấn đề này bạn hãy sử dụng chú
thích của HTML để bao quanh các mã định nghĩa CSS. Đoạn mã trên được sửa
lại thành như sau:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Với Inline Style (style được qui định ngay trong mỗi thẻ HTML)
Khi
sử dụng Inline Style Sheet là bạn đã đánh mất đi những tác dụng to lớn
của CSS với việc trộn lẫn mã định dạng với nội dung trang. Bạn chỉ nên
sử dụng phương pháp này trong một số trường hợp rất đặc biệt mà cách
định dạng thẻ chỉ áp dụng duy nhất 1 lần trong 1 trang web.
Sử
dụng phương pháp này bạn đưa ngay những mã định dạng vào thẻ HTML cần
thiết. Các mã định dạng này có thể bao gồm mọi thứ có thể dùng trong
Internal Style Sheet và External Style Sheet.
Đoạn mã dưới đây sẽ thay đổi màu sắc và lề của một đoạn trong trang web.
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Sử dụng nhiều Style Sheet
Nếu
cùng một thẻ được định nghĩa ở nhiều nơi thì thẻ này sẽ kế thừa tất cả
các thuộc tính đã được định nghĩa ở tất cả các vị trí. Nếu như các thuộc
tính định nghĩa xung đột nhau chúng sẽ được lấy theo thứ tự ưu tiên đã
đề cập đến ở bài 1.
Ví dụ:
Một file style sheet ngoài được định nghĩa thẻ <H3> như sau:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Sau đó một trang web sử dụng file CSS ở trên trong nó lại có phần định nghĩa cho thẻ <H3> như sau:
h3
{
text-align: right;
font-size: 20pt
}
Và kết quả thẻ <H3> sẽ được định nghĩa là kết hợp của 2 định nghĩa trên và là:
color: red;
text-align: right;
font-size: 20pt
-
IMindMap 8.0.4 iMindMap là công cụ tuyệt vời để vẽ bản đồ tư duy đem mọi chi tiết trong đầu bạn ra thành các ý tươgnr, để nắm bắt ý tư...
-
1. Download Bamboo in : http://www.atlassian.com/software/bamboo/download?os=linux cd ~ mkdir BAMBOO cd BAMBOO wget http://www.atlassia...
-
1.Giới thiệu về Vim Vim – Vi iMprove là bản cải thiện của Vim – một trình soạn thảo phổ biến trên Unix. Vim có tính cấu hình rất cao ...
Không có nhận xét nào:
Đăng nhận xét