Một contextual seclector đề cập đến ngữ cảnh của các phần tử. Để làm mọi thứ sáng sủa hơn, đôi khi ta có hai phần tử với cùng một giá trị. Phần tử chính hoặc phần tử cha có một phần tử con bên trong nó. Trong trường hợp đó, để thay đổi style của phần tử con ta cần dùng một contextual selector.
Điều này dựa trên khái niệm kế thừa, nơi mà phần tử con kế thừa style được gán cho phần tử cha.
Một ví dụ thông thường là phần tử <BODY>. Khi ta thêm một phần tử vào mỗi phần tử <BODY> chứa bên trong những kế thừa của <BODY>.
<p>…<b>…</b>…</p>
P là cha và B là con.
Bây giờ thì xem nó được điều khiển ra sao? Sau khi ta không muốn tất cả các phần tử trên trang Web xuất hiện cùng một style. Như vậy, ta phải ghi đè sự kế thừa. Trong trường hợp đó ta sẽ phải thay đổi style của phần tử con. Xem đoạn code dưới đây:
Ví dụ: <HTML> <HEAD> <TITLE>Contextual selectors</TITLE> </HEAD> <STYLE TYPE=”text/css”> BODY { color:blue; Background:lavender; Font-family:Arial; } UL {color:red} </STYLE>
Selector UL trong style sheet xác định rằng danh sách không đánh số màu đỏ, do đó tất cả các phần tử LI sẽ là màu đỏ trừ khi nó được ghi đè sự kế thừa này.
<UL>
<LI> mangoes <LI> oranges <LI> apples </UL>
Selector UL Selector trong style sheet xác định rằng các chỉ mục danh sách sẽ là màu đỏ. Chúng thừa kế font Arial từ khai báo BODY, màu đỏ từ khai báo UL. Nếu ta xác định một font family trong khai báo UL, nó sẽ ghi đè khai báo selector
BODY. Không có selector OL trong style sheet, do đó danh mục OL kế thừa các thuộc tính của nó từ selector BODY.
<OL> <LI> managoes <LI> oranges <LI> apples </OL> </BODY> </HTML>
Hình VII.10. Contextual Selectors
Các phần tử không được kế thừa trong style sheet như các selector sẽ kế thừa các thuộc tính của phần tử cha nó. Trong ví dụ dưới đây, các phần tử B và I đang kế thừa các thuộc tính của selector P.
Ví dụ: <HTML> <HEAD> <TITLE>Contextual Selectors</TITLE> </HEAD> <STYLE TYPE=”text/css”> BODY { color:blue; background:lavender; font-family:Arial; } P {color:hotpink} </STYLE> <BODY> <P>
<B>I am having fun</B><BR> <I>This is fun too</I><BR>
Để sự trả về của các thuộc tính của selector P, đóng nó lại
</P>
I am having fun <BR>
This is fun too </BODY>
</HTML>
Ví dụ: <HTML> <STYLE TYPE=”text/javascript”> With (tags.BODY){ color=”blue”; backgroundColor=”lavender”; fontFamily=”Arial”; } tags.P.color=”hotpink”; </STYLE> <BODY> <P>
<B>I am having fun</B><BR> <I>This is fun too</I><BR> <P>
I am having fun <BR>
This is fun too </BODY>
</HTML>
Thay đổi các luật
Ta phải tìm hiểu để chỉnh sửa style của một phần tử cụ thể. Có thể các kế thừa khi ta muốn làm các thứ trên phạm vi toàn cục, cho tất cả các trang trong web site. Ta có thể muốn chỉnh sửa một style định nghĩa bởi một style sheet như một lớp hoặc style toàn cục. Khi ta làm điều này, sự sửa đổi có một hiệu ứng gợn sóng. Đó là, style của tất cả các phần tử trên trang mà đưa ra style sheet đặc biệt được thay đổi.
Ví dụ, ta có một định nghĩa style sheet mà xác định hai style:
Một style toàn cục mà cung cấp toàn bộ phần tử <H2> (green, arial font, normal size)
Một lớp style chung gọi là cảnh báo (red, bold, italic) mà sẽ cung cấp bất kỳ một phần tử nào mà sử dụng lớp đó.
Hai ví dụ sau đây miêu tả việc dùng style sheet gọi là sheet1.css mà được liên kết với 1.htm đầu tiên và sau đó là 2.htm
Ví dụ:
sheet1.css:
H2 {color:blue; font-style:italic;}
.warning {color:red; font-weight:bold; font- style:italic;}
Copy đoạn code này và ghi với tên “sheet1.css” Sau đó trong file f1.htm ta sử dụng nó như sau:
f1.htm <HTML> <HEAD>
<TITLE>Changing the Rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<H2>Changing the rules is fun</H2> <BR>
<P class=”warning”>Changing the rules may not be such fun
<H2>The H2 element again<p> </HTML>
Trong file f2.htm ta cũng sử dụng:
f2.htm <HTML> <HEAD>
<TITLE>Changing the Rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<H2>This document uses the sheet1 style sheet<H2>
<BR>
<P class=”warning”>Selecting this option could delete all your files
<H2>The H2 element again<P> </HTML>
VII.2.5. Các chú thích trong Style Sheet
Các chú thích (comments) là một đặc tính mà hầu hết các ngôn ngữ phát triển đều hỗ trợ. Ta cũng có thể thêm các chú thích vào một style sheet để giúp lưu giữ vết của các style mà được hỗ trợ thông qua trang. Các chú thích được bao quanh bởi các dấu /*. Không được đặt lồng vào nhau.
Với cascading style sheet, cú pháp là:
H1 {color:blue;} /*Các phần tử H1 màu xanh*/
tags.H1.color=”blue”; /*Các phần tử H1 màu xanh*/
Với JavaScript style sheet, cú pháp là:
tags.H1.color=”blue”; //Các phần tử H1 màu xanh
VII.2.6. Lợi ích của các Style Sheet
Nếu ta muốn sử dụng điều khiển lớn hơn với các trang Web ta nên sử dụng style. Ta có thể sử dụng style sheet cho: