Tài liệu Khái niệm về CSS Một số kiểu Selector đặc biệt: pdf

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ụ

Trang 1

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>

</head>

<style>

a:link{color:blue; text-decoration:none}

a:visited{color:brown; text-decoration:none}

a:hover{color:red; text-decoration:underline}

a:active{color:red; font-weight:bold}

</style>

<body>

</body>

</html>

Trang 2

Chú ý quan trọng:

Khi định nghĩa các trạng thái (có thể bạn không định nghĩa tất cả các trạng thái) bạn bắt buộc phải đặt đúng thứ tự: link, visited, hover, active Trái điều này có thể sẽ có cái gì đó không hoạt động

Các selector lồng nhau

Tại mỗi vùng của trang web, cùng một thẻ nhưng cũng có thể cần các cách thể hiện khác nhau

Ví dụ: Cùng 1 thẻ <A>

để tạo liên kết nhưng cách thể hiện thẻ <A> trong phần Banner có thể phải khác với cách thể hiện <A> trong phần menu

trái, phải và khác với nội dung

Để làm được như vậy chúng ta cần sử dụng đến một khái niệm mà tôi tạm gọi là các selector lồng nhau Cú pháp của cái

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>

</div>

</body>

</html>

Trang 3

VD2: Với các liên kết: Tương tự như ví dụ 1 nhưng với các liên kết Tôi muốn các liên kết trong vùng 1 thể hiện màu xanh,

hover màu đỏ, các liên kết trong vùng 2 thì có cỡ chữ lớn hơn: thể hiện màu xanh green, hover màu vàng

Code:

<html>

<head>

<title>Demo selector long nhau</title>

</head>

<style>

.loai1 a:link, loai1 a:visited{color:blue;}

.loai1 a:hover {color:red;}

.loai2 a:link, loai2 a:visited{color:green; font-size:xx-large;}

.loai2 a:hover {color:yellow;}

</style>

<body>

<a href="#">Lien ket nay trong vung loai 1</a>

</div>

<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

Trang 4

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>

</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>

hr {color: sienna}

Trang 5

</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>

<!

hr {color: sienna}

>

</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

This is a paragraph

</p>

Trang 6

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

Còn tiếp

Tiêu đề	Khái Niệm Về Css Một Số Kiểu Selector Đặc Biệt
Tác giả	Traibingo
Trường học	Tự Học PHP
Thể loại	tài liệu

Định dạng
Số trang	6
Dung lượng	508,61 KB