Tự Học PHP
By traibingo 1 | P a g e
Khái niệm về CSS
Một số kiểu Selector đặc biệt:
- Đối với các liên kết:
Một liên kết thông thường có 4 trạng thái:
- Trạng thái liên kết chưa thăm (link): Đây là trạng thái mà người sử dụng chưa từng truy cập
vào địa chỉ mà liên kết này trỏ đến, không quan tâm đến việc người sử dụng đã click chuột vào
liên kết này hay chưa (thực tế là trong cache của trình duyệt chưa có địa chỉ này).
- Trạng thái liên kết đã thăm (visited): Ngược lại của link (nghĩa là người sử dụng đã từng truy
cập vào địa chỉ này rồi).
- Trạng thái hover: xảy ra khi người sử dụng di chuyển chuột qua liên kết.
- Trạng thái active: xảy ra khi người sử dụng nhấn chuột vào liên kết (người sử dụng chưa nhả
phím chuột ra).
Trong các trang web, thông thường cách hiển thị các trạng thái này khác nhau và khác với các
văn bản thông thường làm cho vui mắt và làm cho người dùng dễ dàng nhận biết đâu là văn bản
thường, đâu là liên kết, đâu là liên kết đã xem (để đỡ phải xem lại),
CSS cho phép định nghĩa các định dạng khác nhau cho từng trạng thái bằng cách sử
dụng :tên_trạng_thái Ví dụ:
Để định nghĩa các liên kết (link) sẽ có màu blue và không gạch chân, các liên kết đã thăm
(visited) có màu brown và không gạch chân, khi chuyển chuột qua liên kết thành màu đỏ và có
gạch chân, khi click chuột vào liên kết có màu đỏ và in chữ đậm ta làm như sau:
Code:
<html>
<head>
<title>Demo link</title>
</head>
này cũng rất đơn giản như sau:
Code:
selectorX selectorY{
property1: value1;
property2: value2;
}
Đoạn mã trên quy định cách thể hiện của selectorY khi nó được đặt trong selectorX.
Nói loằng ngoằng X, Y mãi có vẻ khó hiểu. Bây giờ tôi lấy ví dụ như sau:
VD1: Giả sử tôi có 2 vùng trên trang web được xác định bằng 2 thẻ <DIV>. Trong 2 vùng này
tôi có các thẻ <H1>. Tôi
muốn các thẻ <H1> ở vùng 1 có màu xanh còn các thẻ <H1> ở vùng 2 có màu đỏ tôi có thể làm
như sau:
Code:
<html>
<head>
<title>Demo selector long nhau</title>
</head>
<style>
.loai1 h1{color:blue;}
.loai2 h1{color:red;}
</style>
<body>
<div class="loai1">
<h1>Tieu de nay co mau xanh</h1>
</div>
<div class="loai2">
<div class="loai2">
<a href="#">Lien ket nay trong vung loai 2</a>
</div>
</body>
</html>
Qua hai ví dụ trên, chúng ta đã làm quen với các selector lồng nhau. Các ví dụ trên mới trình bày
các selector lồng nhau 2
cấp tuy nhiên CSS chấp nhận các bạn có thể lồng nhiều cấp hơn nhiều lần như thế.
Túm lại, lồng các Selector là một kỹ thuật rất hữu ích khi làm web. Các ví dụ mang tính thực tế
cao hơn sẽ được trình bày trong một mục khác.
Cách định kiểu thông qua CSS – cách dùng 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.
Tự Học PHP
By traibingo 4 | P a g e
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ẻ
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Tự Học PHP
By traibingo 5 | P a g e
</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)
}
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
Còn tiếp
Copyright: Tài liệu đại học ©