ID và Class trong CSS – CSS ID and Class [2]

Bài viết này sẽ trình bày một số vấn đề liên quan đến ID và Class trong CSS. imagesRed rose

Đây là một trong những vấn đề cơ bản mà người tìm hiểu về CSS cần được.

Ngoài việc thiết lập một style cho các phần tử của HTML, CSS cho phép bạn chỉ định Sectors riêng của mình được gọi là “ID” và “Class”.

1. ID sector

– ID selector được sử dụng để xác định một style cho một phần tử duy nhất.

– ID selector sử  dụng các thuộc tính ID của các phần tử HTML, và được định nghĩa với một “#”.

– Các quy tắc về style(style rule) dưới đây sẽ được áp dụng cho các phần tử với ID = “para1”:fd

#para1
{
text-align:center;
color:red;
}

Click vào đây để thử chỉnh sửa trong ví dụ về ID sector

– Hoặc bạn cũng có thể viết một đoạn HTML giống như bên dưới bằng Notepad rồi save as với đuôi mở rộng là .html. Sau đó chạy nó bằng trình duyệt Web sẽ thấy kiết quả.

<html>
  <head>
       <style type="text/css">#para1{text-align:center;color:red;} </style>
   </head>
  <body>
   <p id="para1">Hello World!</p>
   <p>This paragraph is not affected by the style.</p>
  </body>
</html>

* Lưu ý: tên của id không nên bắt đầu bằng một số, nó sẽ không làm việc trong Mozilla/Firefox.

2. Class Selector

– Class selector được sử dụng để xác định style cho một nhóm các phần tử. Không giống như ID selector, class selector thường được sử dụng trên một số yếu tố. Điều này cho phép thiết lập  (setting) một style đặc biệt cho bất kỳ phần tử HTML với cùng class.

– Class selector sử dụng các thuộc tính của lớp HTML. Và được định nghĩa với một dấu “.”.

– Trong ví dụ dưới đây, tất cả các yếu tố HTML với class = “center” sẽ được canh giữa (center-aligned).

.center {text-align:center;}

Click vào đây để thử trên trình duyệt. Bạn có thể sử một số yếu tố sau đó click Edit and click me để xem lại kết quả khi đã đã thay đổi một số yếu tố.

– Hoặc bạn cũng có thể copy đoạn HTML dưới đây vào trình notepad và lưu lại với định dạng .html rồi chạy bằng trình duyệt để kiểm tra.

<html>
      <head>
            <style type="text/css">.center{text-align:center;}</style>
       </head>

      <body>
            <h1 class="center">Center-aligned heading</h1>
             <p class="center">Center-aligned paragraph.</p>
  </body>
</html>

– Bạn cũng có thể chỉ rõ rằng cụ thể một phần tử HTML phải sử dụng hiệu ứng của một class.

– Trong ví dụ dưới đây, tất cả các yếu tố p với class = “center” sẽ được canh giữa (center-aligned).

p.center {text-align:center;}

Click vào đây để text thẳng trên trình duyệt

– Hoặc bạn cũng có thể sử dụng notepad để text đoạn HTMl bên dưới.

<html>
      <head>
              <style type="text/css">p.center{text-align:center;}</style>
       </head>

      <body>
                 <h1 class="center">This heading will not be affected</h1>
                 <p class="center">This paragraph will be center-aligned.</p>
  </body>
</html>

* Lưu ý: đừng bắt đầu tên của một class bằng số vì nó chỉ hỗ trợ trong internet explorer. Các trình duyệt khác có thể báo lỗi.

Advertisements

About thanhcuong1990

Handsome and talent!! ^^
This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s