Thứ tư, ngày 20 tháng 9 năm 2017

CSS – Attribute Selector và HTML5 Custom Data Attribute

Ngày đăng: 9/4/2012, 8:21:15PM | Lượt xem: 1,232
Hot!

Nhân đọc về Attribute Selector của CSS, tôi nhận thấy rằng tính năng này có thể được ứng dụng để tạo ra các attribute mới cho các thẻ HTML. Ví dụ như các attribute có sẵn như required, title, width, height… Nhân tiện, tôi cũng giới thiệu về tính năng Custom Data Attribute của HTML5 và ứng dụng của nó.

Css - earth - world - globalNhân đọc về Attribute Selector của CSS, tôi nhận thấy rằng tính năng này có thể được ứng dụng để tạo ra các attribute mới cho các thẻ HTML. Ví dụ như các attribute có sẵn như required, title, width, height… Nhân tiện, tôi cũng giới thiệu về tính năng Custom Data Attribute của HTML5 và ứng dụng của nó.

CSS Attribute Selector

Để sử dụng attribute selector, bạn đặt tên của attribute trong cặp thẻ vuông [], và có thể thêm điều kiện so sánh nội dung của attribute với cú pháp [attribute_name=attribute_value]:

Ví dụ 1: Thêm dòng chữ “(open in new tab)” sau mỗi thẻ <a> có target=”_blank”

a[target="_blank"]:after
{
  content: " (open in new tab)";
}

Ví dụ 2: Gạch bỏ các thẻ <a> chứa liên kết không tồn tại :

a[died]{
	text-decoration: line-through;
}

Ví dụ 3: Highlight các thẻ quan trọng:

[highlighted]{
	background: #ffff00;
	color: #000000;
}

HTML5 Custom Data Attribute

Một vấn đề gặp phải là các tài liệu HTML sử dụng custom attribute như diedhighlighted trên sẽ được coi là không hợp lệ (kiểm tra tại http://validator.w3.org/). Tuy nhiên, may mắn là HTML5 hỗ trợ tạo các Custom Data Attribute. Nghĩa là bạn có thể bổ sung bất kì attribute nào cho các thẻ HTML miễn là tên của chúng có định dạng là “data-*” hay nói cách khác là các custom attribute phải tiếp đầu ngữ là “data-”. Với custom attribute này của HTML5, bạn có thể lưu trữ những dữ liệu cần thiết vào bất kì thẻ HTML nào.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Attribute Selectors</title>
<style>
a[target="_blank"]:after
{
  content: " (open in new tab)";
}
a[data-died]{
	text-decoration: line-through;
}
[data-highlighted]{
	background-color:yellow;
}
</style>
</head>

<body>
	<h2>Attribute Selectors Demo:</h2>
	<a href="http://yinyangit.wordpress.com">YinYang's Blog</a><br/>
	<a href="http://yinyangit.wordpress.com" target="_blank">YinYang's Blog</a><br/>
	<a href="http://unknown.yinyangit.com" data-died>YinYang's Blog</a><br/>
	<hr />
	<span data-highlighted>Important content</span>
	<h1><a href="#" data-highlighted data-died>Are you paying attention?</a></h1>
</body>
</html>

Kết quả:

CSS - Attribute Selectors Example

YinYang’s Programming Blog

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.