3 cách xác định vùng chọn cơ bản trong CSS

Thứ tư - 29/06/2016 00:47

Như bài giới thiệu về cú pháp CSS ở phần trước tôi đã giới thiệu qua về Selector đây là thành phần này dùng để xác định đối tượng ta muốn tác động tới. Selector hay nói cách khách là Vùng chọn trong CSS đóng vai trò rất quan trọng, bởi nếu bạn không nắm rõ cá quy tắc trỏ đến đối tượng thì mọi mã lệnh CSS của bạn sẽ không thể thực thi hoặc thực thi không đúng chỗ.

cang ban ve css

Bài này tôi xin giới thiệu tới các bạn 6 cách xác định vùng chọn cơ bản trong lập trình CSS.

Cách 1. Dựa vào tên thẻ trong HTML

Đây là kiểu lấy vùng chọn đơn giản nhất, dựa vào tên thẻ trong file HTML để áp dụng CSS. Tuy nhiên cách này cũng khá bất tiện vì toàn bộ các thẻ HTML được chọn trong CSS đều bị tác động, đồng nghĩa là bạn không thể áp dụng riêng cho một khu vực độc lập nào

Ví dụ:

Ta có một file HTML "demo-1.html" như sau

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <title>Inline Styles</title>
     <link rel="stylesheet" href="style-1.css" />
  </head>

  <body>
    <h1>Tiêu đề thứ nhất</h1>
    <p>Đây là một đoạn chữ đã được định dạng với CSS</p>.
    <h1>Tiêu đề thứ hai</h2>
  </body>
</html>
Và một file CSS "style-1.css" như sau
h1 {
  color: red;
}
  Kết quả ta được
 

Tiêu đề thứ nhất

Đây là một đoạn chữ đã được định dạng với CSS

Tiêu đề thứ hai

Cách 2. Dựa vào ID của thẻ trong HTML

Với cách này thẻ HTML được thêm một thuộc tính ID với cú pháp ( <h1 id="#tênid">Nội dung thẻ H1</h1> ), và nhờ vào thuộc tính ID mà ta có thể xác định bất cứ vùng nào trên trang HTML một cách động lập. Vì mục đích lấy các thẻ một cách độc lập nên mỗi phần tử HTML  phải mang một id riêng biệt không trùng nhau.

Ví dụ:

Ta có một file HTML "demo-2.html" như sau

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <title>Inline Styles</title>
     <link rel="stylesheet" href="style-2.css" />
  </head>

  <body>
    <h1 id="post-title">Nội dung chứa có thiết lập ID</h1>
     <h1>Nội dung thông thường</h1>
  </body>
</html>


Và một file CSS "style-2.css" như sau

#post-title {
  color: blue;
}
Ta được Kết quả như sau

Nội dung chứa có thiết lập ID

Nội dung thông thường

Cách 3. Dựa vào CLASS của thẻ trong HTML

Giống như các chèn thuộc tính id như với thẻ class ta có thể áp dụng nhiều thể với một class giống nhau. Để hiểu rõ hơn về cách dùng thuộc tính class bạn xem ví dụ dưới đây

Ví dụ:
Ta có một file HTML "demo-3.html" như sau
<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <title>Inline Styles</title>
     <link rel="stylesheet" href="style-3.css" />
  </head>

  <body>
<h1 class="title-h1">Tiêu đề quan trọng</h1>
<h1>Tiêu đề thông thường</h1>
<h1 class="title-h1">Tiêu đề quan trọng</h1>
  </body>
</html>
Và một file CSS "style-3.css" như sau
.title-h1 {
  color: red;
  font-style:italic;
}
Kế quả cho ra

Nội dung có thuộc tính Class

Nội dung thông thường

Nội dung có thuộc tính Class

Tổng kết: Tùy theo ý đồ của người thiết kế web mà họ lựa chọn áp dụng 3 cách trên như
Nếu chỉ cần áp dụng cho một thẻ duy nhất tôi áp dụng cách 2
Nếu tôi muốn áp dụng với nhiều đối tượng hơn tôi chọn cách 3
Cách một thường thì ít được áp dụng trong trường hơp code ít phát sinh, những code đơn giản 

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây

Chat với WEBPHANG