VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Pseudo Class trong CSS


Thuộc tính z-index trong CSS
Pseudo Element trong CSS

Nội dung chính

  • Giới thiệu Pseudo Class trong CSS
  • :link Pseudo Class trong CSS
  • :visited Pseudo Class trong CSS
  • :hover Pseudo Class trong CSS
  • :active Pseudo Class trong CSS
  • :focus Pseudo Class trong CSS
  • :first-child Pseudo Class trong CSS
  • :lang Pseudo Class trong CSS

Giới thiệu Pseudo Class trong CSS

Pseudo Class trong CSS được sử dụng để thêm các hiệu ứng đặc biệt tới một số Selector. Bạn không cần sử dụng JavaScript hoặc bất cứ ngôn ngữ Script nào để sử dụng các hiệu ứng này. Cú pháp đơn giản cho Pseudo Class trong CSS là:


selector:pseudo-class {property: value}

Các Class trong CSS có thể được sử dụng với Pseudo Class với cú pháp sau:


selector.class:pseudo-class {property: value}

Bảng dưới liệt kê một số cách sử dụng của Pseudo Class:

Giá trị Mô tả
:link Sử dụng class này để thêm style đặc biệt cho một unvisited link.
:visited Sử dụng class này để thêm style đặc biệt cho một visited link.
:hover Sử dụng class này để thêm style đặc biệt cho một phần tử khi người dùng di chuyển chuột qua nó
:active Sử dụng class này để thêm style đặc biệt cho một phần tử khi active
:focus Sử dụng class này để thêm style đặc biệt cho một phần tử khi nó được focus
:first-child Sử dụng class này để thêm style đặc biệt cho một phần tử mà là phần tử con đầu tiên của phần tử khác
:lang Sử dụng class này để xác định một ngôn ngữ để sử dụng trong một phần tử cụ thể

Trong khi định nghĩa các Pseudo Class trong một khối <style>...</style>, bạn cần ghi nhớ:

  • a:hover PHẢI theo sau a:link và a:visited trong phần định nghĩa CSS, nếu không nó sẽ không có hiệu quả.

  • a:active PHẢI theo sau a:hover trong CSS, nếu không nó sẽ không có hiệu quả.

  • Các tên được sử dụng cho Pseudo Class là không phân biệt kiểu chữ.

  • Pseudo Class là khác với các Class khác trong CSS, tuy nhiên chúng có thể kết hợp với nhau.



:link Pseudo Class trong CSS

Ví dụ sau minh họa cách sử dụng :link class để thiết lập màu cho Link. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 a:link {color:#000000}
  </style>
</head>
<body>
  <a href="">Ví dụ :link Pseudo Class</a>
</body>
</html>

Kết quả:


:visited Pseudo Class trong CSS

Ví dụ sau minh họa cách sử dụng :visited class để thiết lập màu cho Visited Link. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 a:visited {color: #006600}
  </style>
</head>
<body>
  <a href="">Click vào link này</a>
</body>
</html> 

Kết quả:



:hover Pseudo Class trong CSS

Ví dụ sau minh họa cách sử dụng :hover class để thay đổi màu của Link khi chúng ta di chuyển con trỏ qua link đó. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 a:hover {color: #FFCC00}
  </style>
</head>
<body>
  <a href="">Di chuyển chuột qua link này</a>
</body>
</html> 

Kết quả:


:active Pseudo Class trong CSS

Ví dụ sau minh họa cách sử dụng :active class để thiết lập màu cho Active Link. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 a:active {color: #FF00CC}
  </style>
</head>
<body>
  <a href="">Click vào link này</a>
</body>
</html> 

Kết quả:



:focus Pseudo Class trong CSS

Ví dụ sau minh họa cách sử dụng :focus class để thay đổi màu cho Link được focus. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 a:focus {color: #0000FF}
  </style>
</head>
<body>
  <a href="">Click vào link này</a>
</body>
</html> 

Kết quả một link như dưới đây. Khi link này được focus, màu của nó thay đổi sang màu cam. Màu link sẽ thay đổi trở lại khi không còn được focus nữa.


:first-child Pseudo Class trong CSS

:first-child Pseudo Class xác định một phần tử cụ thể mà là phần tử con đầu tiên của phần tử khác và thêm Style đặc biệt tới phần tử đó.

Để làm cho :first-child có thể làm việc trong IE, phần tử <!DOCTYPE> phải được khai báo ở phần đầu tài liệu.

Ví dụ, để tạo độ thụt dòng cho đoạn văn đầu tiên của tất cả phần tử

, bạn có thể sử dụng định nghĩa CSS sau:


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 div > p:first-child
	 {
		text-indent: 25px;
	 }
  </style>
  
</head>
<body>

  <div>
	 <p>Text 1. Đoạn văn này bị thụt đầu dòng (text-indent).</p>
	 <p>Text 2. Đoạn văn này không bị thụt đầu dòng.</p>
  </div>
  <p>Phần tử p đầu tiên của thẻ div thì mới được áp dụng lệnh 
  text-indent, các doạn văn khác không bị ảnh hưởng</p>
  
  <div>
	 <h3>Ví dụ first-child Pseudo Class trong CSS</h3>
	 <p>Đây là đoạn văn thứ 2 của thẻ p trong thẻ div.</p>
	 <p>Đây là đoạn văn thứ 3 của thẻ p trong thẻ div. </p> 
  </div>
  
</body>
</html>

Kết quả:


:lang Pseudo Class trong CSS

Sử dụng :lang Pseudo Class trong CSS, bạn có thể xác định một ngôn ngữ nào đó cho một phần tử cụ thể.

Class này là thực sự hữu ích với những tài liệu được trình bày bởi nhiều ngôn ngữ và có các qui ước khác nhau. Ví dụ, tiếng Pháp sử dụng cặp dấu ngoặc nhọn (< và >) cho mục đích trích dẫn, trong khi tiếng Anh sử dụng các dấu trích dẫn (' và ').


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 /* 2 cách trính dẫn khác nhau cho từng loại ngôn ngữ*/
	 :lang(en) { quotes: '"' '"'  "'"  "'"; }
	 :lang(fr) { quotes: "<<" ">>" "<" ">"; }
  </style>
</head>
<body>
  <p>...<q lang="fr">Đây là văn bản được trích dẫn</q>...</p>
</body>
</html>

Khi bạn cần chỉ rõ sự khác nhau này trong một tài liệu, thì bạn có thể sử dụng :lang Pseudo Class để thay đổi các dấu trích dẫn một cách hợp lý. Phần ví dụ dưới đây thay đổi thẻ <blockquote> một cách thích hợp cho từng ngôn ngữ được sử dụng:

Kết quả:


Thuộc tính z-index trong CSS
Pseudo Element trong CSS

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSS

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml