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 Element trong CSS


Pseudo Class trong CSS
Các quy tắc trong CSS

Nội dung chính

  • Giới thiệu Pseudo Element trong CSS
  • :first-line Pseudo Element trong CSS
  • :first-letter Pseudo Element trong CSS
  • :before Pseudo Element trong CSS
  • :after Pseudo Element trong CSS

Giới thiệu Pseudo Element trong CSS

Pseudo Element (có thể gọi là các phần tử giả) được sử dụng để thêm các hiệu ứng đặc biệt cho 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 của Pseudo Element trong CSS như sau:


selector:pseudo-element {property: value}

Các Class trong CSS cũng có thể được sử dụng với Pseudo Element như sau:


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

Dưới đây là một số cách sử dụng phổ biến của Pseudo Element:

Giá trị Mô tả
:first-line Sử dụng phần tử này để thêm Style đặc biệt cho dòng đầu tiên của đoạn văn trong một Selector
:first-letter Sử dụng phần tử này để thêm Style đặc biệt cho chữ cái đầu tiên của đoạn văn trong một Selector
:before Sử dụng phần tử này để chèn nội dung nào đó vào trước một phần tử
:after Sử dụng phần tử này để chèn nội dung nào đó vào sau một phần tử


:first-line Pseudo Element trong CSS

Nếu bạn cần thêm một số hiệu ứng đặc biệt nào đó cho dòng đầu tiên của đoạn văn, bạn có thể sử dụng :first-line Pseudo Element trong CSS. Ví dụ:


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 p:first-line { text-decoration: underline; }
	 p.noline:first-line { text-decoration: none; }
  </style>
</head>
<body>
  <p class="noline"> Dòng văn bản này không co dấu gạch chân, vì thuộc tinh text-decoration là none.</p>
  
  <p>Dòng văn bản này có dấu gạch chân theo CSS rule bên trên. 
  Các dòng văn bản còn lại hiển thị bình thường (không có dấu gạch chân). 
  Đây là ví dụ :first-line Pseduo Element để áp dụng hiệu ứng cho dòng chữ đầu tiên.</p>
</body>
</html>

Kết quả:


:first-letter Pseudo Element trong CSS

Chẳng hạn, nếu bạn muốn thay đổi kích cỡ font cho chữ cái đầu tiên trong các phần tử, bạn có thể sử dụng :first-letter trong CSS. Phần tử này sẽ áp dụng Style đặc biệt cho chữ cái đầu tiên của các phần tử trong một Selector. Ví dụ:


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 p:first-letter { font-size: 5em; }
	 p.normal:first-letter { font-size: 10px; }
  </style>
</head>
<body>
  <p class="normal"> Chữ cái đầu tiên được hiển thị bình thường và có kích cỡ là 10px.</p>
  
  <p>Chữ cái đầu tiên được hiển thị với Size là 5em và có màu đen như CSS rule bên trên. 
  Các ký tự con lai trong đoàn văn bản hiện thị bình thường theo Font Size mặc định. 
  Ví dụ :first-letter Pseduo Element để tạo hiệu ứng cho chữ cái đầu tiên trong đoạn văn.</p>
</body>
</html>

Kết quả:



:before Pseudo Element trong CSS

Để thêm một số nội dung vào trước phần tử nào đó, bạn có thể sử dụng :before Pseudo Element trong CSS. Ví dụ:


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 p:before
	 {
		content: url(/images/css/lotus_flower.png)
	 }
  </style>
</head>
<body>
  <p> Dòng text này được đặt trước bởi một bông hoa.</p>
  <p> Dòng text này được đặt trước bởi một bông hoa.</p>
  <p> Dòng text này được đặt trước bởi một bông hoa.</p>
</body>
</html>

Kết quả:


:after Pseudo Element trong CSS

Sử dụng :after Pseudo Element trong CSS, bạn có thể thêm một số nội dung vào sau một phần tử nào đó trong một Selector. Ví dụ:


<html>
<head>
<meta charset="UTF-8">
  <style type="text/css">
	 p:after
	 {
		content: url(/images/css/lotus_flower.png)
	 }
  </style>
</head>
<body>
  <p> Dòng text này được theo sau bởi một bông hoa.</p>
  <p> Dòng text này được theo sau bởi một bông hoa.</p>
  <p> Dòng text này được theo sau bởi một bông hoa.</p>
</body>
</html>

Kết quả:


Pseudo Class trong CSS
Các quy tắc 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