VietTuts

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

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • Python
  • PHP
  • Eclipse
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Phần mềm tiện ích
    • Selenium Test
  • Tuyển Dụng

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 CSS Display CSS Float CSS Font CSS Line Height CSS Margin CSS Opacity CSS Overflow CSS Padding CSS Position CSS Vertical Align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Counter

CSS nâng cao

CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS FlexBox CSS @Media Query CSS 2D Transforms CSS 3D Transforms CSS Aural Media CSS User Interface CSS Pagination

CSS Design

CSS Layout CSS Table

Câu hỏi phỏng vấn

Câu hỏi phỏng vấn CSS

Bộ chọn CSS (CSS Selector)


HTML là gì?
CSS Syntax

CSS Selector hay Bộ chọn CSS được sử dụng để chọn nội dung bạn muốn tạo kiểu. Bộ chọn là một phần của bộ quy tắc CSS. Bộ chọn CSS chọn các phần tử HTML theo id, class, type, thuộc tính...

Có một số loại bộ chọn khác nhau trong CSS như sau:

  1. Bộ chọn CSS phần tử
  2. Bộ chọn CSS id
  3. Bộ chọn CSS class
  4. Bộ chọn CSS toàn thể
  5. Bộ chọn CSS nhóm

1. Bộ chọn CSS phần tử

Bộ chọn CSS phần tử chọn phần tử HTML theo tên. Ví dụ đoạn CSS dưới đây sẽ ảnh hưởng đến nội dung trong phần tử p.

<!DOCTYPE html>  
<html>
  <head>
    <style>  
      p{  
      text-align: center;  
      color: blue;  
      }   
    </style>
  </head>
  <body>
    <p>This style will be applied on every paragraph.</p>
    <p id="para1">Me too!</p>
    <p>And me!</p>
  </body>
</html>

Output:


2. Bộ chọn CSS id

Bộ chọn id sẽ chọn thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. Một id luôn luôn là duy nhất trong trang vì vậy nó được chọn để chọn một phần tử độc nhất.

Nó được viết với ký tự thăng (#), tiếp theo là id của phần tử.

Dưới đây là ví dụ với id "para1".

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#para1 {
    text-align: center;
    color: blue;
}
</style>
</head>
<body>
  <p id="para1">Hello CSS</p>
  <p>This paragraph will not be affected.</p>
</body>
</html>

Output:


3. Bộ chọn CSS class

Bộ chọn class chọn các phần tử HTML với một thuộc tính class cụ thể.

Lưu ý: Tên lớp không được bắt đầu với một số
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.center {
    text-align: center;
    color: blue;
}
</style>
</head>
<body>
  <h1 class="center">This heading is blue and center-aligned.</h1>
  <p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

Output:

Bộ chọn CSS class cho một phần tử cụ thể

Nếu bạn muốn chỉ định rằng chỉ có một phần tử HTML cụ thể bị ảnh hưởng thì bạn nên sử dụng tên phần tử với bộ chọn lớp.

Ví dụ 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p.center {
    text-align: center;
    color: blue;
}
</style>
</head>
<body>
  <h1 class="center">This heading is not affected</h1>
  <p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

Output:


4. Bộ chọn CSS toàn thể

Bộ chọn toàn thể được sử dụng làm ký tự đại diện. Nó chọn tất cả các phần tử trên các trang. Dấu sao (*) đại diện cho tất cả các phần tử.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
    color: green;
    font-size: 20px;
}
</style>
</head>
<body>
  <h2>This is heading</h2>
  <p>This style will be applied on every paragraph.</p>
  <p id="para1">Me too!</p>
  <p>And me!</p>
</body>
</html>

Output:


5. Bộ chọn CSS nhóm

Bộ chọn nhóm được sử dụng để chọn tất cả các phần tử có cùng định nghĩa kiểu cách.

Bộ chọn nhóm được sử dụng để giảm thiểu mã. Dấu phẩy được sử dụng để tách từng bộ chọn trong nhóm.

Hãy xem mã CSS mà không sử dụng bộ chọn nhóm.

h1 {
    text-align: center;
    color: blue;
}

h2 {
    text-align: center;
    color: blue;
}

p {
    text-align: center;
    color: blue;
}

Như bạn thấy, bạn cần xác định thuộc tính CSS cho tất cả các phần tử. Nó có thể được nhóm lại theo cách sau:

h1,h2,p {
    text-align: center;
    color: blue;
}

Hãy xem ví dụ đầy đủ về bộ chọn nhóm CSS.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1,h2,p {
    text-align: center;
    color: blue;
}
</style>
</head>
<body>
  <h1>Hello CSS</h1>
  <h2>This is a heading</h2>
  <p>This is a paragraph.</p>
</body>
</html>

Output:


HTML là gì?
CSS Syntax

Recent Updates

Bài tập Python có lời giảiHọc Lập Trình Online Miễn Phí - VietTuts.VnPhân biệt List, Tuple, Set, Dictionary trong PythonHàm Dictionary dict() trong PythonHàm Set set() trong PythonBài tập Java - Trộn 2 mảng trong javaBài tập Java - Chèn phần tử vào mảng trong javaBài tập Java - Sắp xếp mảng theo thứ tự giảm dầnBài tập Java - Sắp xếp mảng theo thứ tự tăng dầnJava - Liệt kê số lần xuất hiện của các phần tử trong một mảngJava - Liệt kê các phần tử xuất hiện trong mảng đúng 2 lầnJava - Liệt kê các phần tử xuất hiện trong mảng đúng 1 lần

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
Học servlet
Học jsp
Học Hibernate
Học Struts2
Học Spring
Học SQL

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

About VietTuts.Vn

Hệ thống bài học trên VietTuts.Vn bao gồm các bài lý thuyết và thực hành về các công nghệ java và công nghệ web. Các bài lý thuyết trên hệ thống VietTuts.Vn được tham khảo và tổng hợp từ các trang http://javatpoint.com, http://www.tutorialspoint.com, http://docs.oracle.com/en …

Scroll back to top

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