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

Khái niệm về CSSMộ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). - ...
Nội dung trích xuất từ tài liệu:
Khái niệm về CSS Một số kiểu Selector đặc biệt: Tự Học PHP Khái niệm về CSSMộ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ậpvà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àoliê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 truycậ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ácvă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ảnthườ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áiVí 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: Demo linka: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} Day la lien ket 1 Day la lien ket 2 Day la lien ket 3 Day la lien ket 4By traibingo 1|P a ge Tự Học PHP 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ộcphả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 nhauTạ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ẻ để tạo liên kết nhưng cách thể hiện thẻ trong phần Banner có thể phải khác với cách thểhiện trong phần menutrá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 selectorlồng nhau. Cú pháp của cáinà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ẻ . Trong 2 vùng nàytôi có các thẻ . Tôimuốn các thẻ ở vùng 1 có màu xanh còn các thẻ ở vùng 2 có màu đỏ tôi có thể làmnhư sau:Code:Demo selector long nhau.loai1 h1{color:blue;}.loai2 h1{color:red;} Tieu de nay co mau xanh Tieu de nay co mau doBy traibingo 2|P a ge Tự Học PHPVD2: 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 trongvù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, hovermàu vàng.Code:Demo selector long nhau.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;} Lien ket nay trong vung loai 1 Lien ket nay trong vung loai 2Qua 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àycác selector lồng nhau 2cấ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ẫnbạ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ó 3cách để chèn CSS vào trang web của mình.By traibingo 3|P a ge ...