1
Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 5 Sat Nov 03, 2012 8:33 pm
Admin
Admin
Bài viết : 3191
Xu : 9210
Thanks : 8
Age : 34Đến từ : Thanh Hóa
Tài Sản:
.:
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.
ID Selector
Một ID Selector dùng thuộc tính ID của một phần tử HTML. Một ID
selector được dùng để cung cấp một style cho một phần tử cụ thể trên
trang Web. Ví dụ, ta có thể dùng một ID selector để cung cấp cho một
tiêu đề <H2>. Không có nghĩa là cùng một style sẽ được cung cấp
cho sự kiện khác của một phần tử <H2> trên cùng một trang, trừ khi
chỉ rõ. Nó tương tự như việc dùng một inline style do đó một style được
cung cấp cho một phần tử xác định. Một ID selector được bắt đầu bởi một
dấu thăng (#). Khi dùng cú pháp JavaScript, ta phải dùng thuộc tính ID.
Ví dụ:
Hình 62 Hình VII.8. Sử dụng ID selector.
Ví dụ:
Hình 64 Hình VII.9. Kết hợp ID và Class selector.
Ví dụ:
b. Các selector ngữ cảnh (Contextual Selectors)
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 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ụ:
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.
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.
Hình 69 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ụ:
Để sự trả về của các thuộc tính của selector P, đóng nó lại.
Hình 72 Hình VII.11. Contextual Selectors.
Ví dụ:
Hết phần 5
Nguồn: Sưu tầm Internet
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.
ID Selector
Một ID Selector dùng thuộc tính ID của một phần tử HTML. Một ID
selector được dùng để cung cấp một style cho một phần tử cụ thể trên
trang Web. Ví dụ, ta có thể dùng một ID selector để cung cấp cho một
tiêu đề <H2>. Không có nghĩa là cùng một style sẽ được cung cấp
cho sự kiện khác của một phần tử <H2> trên cùng một trang, trừ khi
chỉ rõ. Nó tương tự như việc dùng một inline style do đó một style được
cung cấp cho một phần tử xác định. Một ID selector được bắt đầu bởi một
dấu thăng (#). Khi dùng cú pháp JavaScript, ta phải dùng thuộc tính ID.
Ví dụ:
Hình 62 Hình VII.8. Sử dụng ID selector.
Ví dụ:
Hình 64 Hình VII.9. Kết hợp ID và Class selector.
Ví dụ:
b. Các selector ngữ cảnh (Contextual Selectors)
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 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ụ:
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.
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.
Hình 69 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ụ:
Để sự trả về của các thuộc tính của selector P, đóng nó lại.
Hình 72 Hình VII.11. Contextual Selectors.
Ví dụ:
Hết phần 5
Nguồn: Sưu tầm Internet
