Quay về MỤC LỤC TỰ HỌC CSS
1. Cú pháp:
Tên phần tử:lớp giả lập{thuộc tính: giá trị}
Ví dụ:
a:hover{background-color:blue;}
è
Gọi lớp giả lập hover của siêu liên kết
2. Lớp giả lập của siêu liên kết:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
3. Lớp giả lập vs lớp CSS
Ví dụ:
a.highlight:hover {
color: #ff0000;
}
color: #ff0000;
}
4. Hiệu ứng hover trên thẻ div
div:hover {
background-color: blue;
}
background-color: blue;
}
5. Hiệu ứng tooltip hover
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
6. Lớp giả lập :first-child
Ví dụ 1:
chọn phần tử con(của phần tử bất kỳ) đầu tiên là thẻ <p>
chọn phần tử con(của phần tử bất kỳ) đầu tiên là thẻ <p>
p:first-child {
color: blue;
}
color: blue;
}
và các giá trị HTML trong thẻ body
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work
in IE8 and earlier, a DOCTYPE must be declared.</p>
Trong ví dụ này sẽ chọn phần tử đầu tiên của thẻ
<body>
Ví dụ 2: chọn phần tử i là phần tử con đầu tiên của mọi phần
tử p
p i:first-child {
color: blue;
}
color: blue;
}
và các giá trị HTML trong thẻ
body:
<p>I am a <i>strong</i> person. I am a
<i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a
<i>strong</i> person.</p>
<p><b>Note:</b> For :first-child to work
in IE8 and earlier, a DOCTYPE must be declared.</p>
Ví dụ 3: chọn tất cả phần tử I trong thẻ p là phần tử con đầu
tiên (của phần tử nào đó)
p:first-child i {
color: blue;
}
color: blue;
}
7. Lớp giả lập :lang
Lớp giả lập :lang cho phép ta thiết
lập 01 quy tắc đặc biệt cho những ngôn ngữ khác nhau
Ví dụ:
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
Tác giả: #drM
Nguồn: Sưu Tầm
Nguồn: Sưu Tầm
Và sau đây là bảng phụ lục tất cả
các lớp – phần tử giả lập:
https://www.w3schools.com/css/css_pseudo_classes.asp
Không có nhận xét nào:
Đăng nhận xét