Đăng chủ đề Đăng  trả lời 
 
Đánh giá chủ đề:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
ID và Class trong CSS!!!
02-12-2010, 11:14 AM
Bài viết: #1
Level: 8
Life: 15 / 198
Magic: 33 / 1,984
Experience: 94
ID và Class trong CSS!!!

Đọc là một chuyện ứng dụng được vào thực tế nó lại là chuyện khác bạn nhé!!!
(Lưu ý: CSS – Cascading Style Sheet - tạm dịch: Mẫu định dạng phân tầng - là một phần của trang web giữ chức năng định nghĩa các định dạng quy định sự hiển thị của một trang web hoặc một phần của trang web trên trình duyệt.)

Trong CSS có hai định nghĩa rất quan trọng là ID và Class xuất phát từ (X)HTML. Cho đến bây giờ vẫn còn một số bạn mới tìm hiểu CSS thường vẫn chưa hiểu rõ sự khác biệt của 2 thẻ HTML này.

Sự khác biệt giữa ID và Class

Về cơ bản có thể nói 2 thẻ ID (#) và Class (.) đều mang thuộc tính giống nhau, nhưng sự khác biệt nằm ở chỗ với thẻ ID (div) được gán cho một div thì div đó là duy nhất trong file (X)HTML. Không bao giờ được phép có 2 thẻ ID trùng tên. Trong khi đó Class thì lại được gán cho mọi đối tượng có cùng lớp (class), các đối tượng có cùng class sẽ chịu sự điều khiển của CSS cho Class đó. Trong bài viết này ta sẽ tìm hiểu tại sao và những nơi nào thì dùng ID hay Class.

Trước tiên ta hãy xem qua cách sử dụng hai thẻ ID và Class trong một đoạn (X)HTML.

<div id="container">
container là tên được gán cho ID và nó chứa toàn bộ các thành phần của một trang web
</div>

<div class="module">
module là tên được gán cho Class và nó sẽ được sử dụng lặp lại nhiều lần trên một trang web
</div>

Qua hai đoạn (X)HTML chúng ta có thể dễ dàng nhận thấy ID được sử dụng cho các thành phần mang tính tuyệt đối và duy nhất trong toàn bộ trang web, và nó thường được gán cho heading, container, leftcol, rightcol, content-warpper, footer ...

Còn với Class sẽ được gán cho các thành phần sẽ lặp lại nhiều lần như Module, Module H3, Content title, readon, ul li ... bởi khi gán Class cho nhiều thành phần của trang web thì bạn chỉ việc khai báo style trên file CSS cho các thành phần này một lần duy nhất.

Chúng ta hãy xem cách khai báo thuộc tính cho ID và Class trong file CSS ở ví dụ sau:

#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

.module{
font-size: small;
color: #008080;
font-weight: bold;
}

Đến bây giờ ta đã có thể nắm bắt được về cơ bản của các thành phần trong một website, cách thể hiện chúng bằng ngôn ngữ HTML và điều khiển chúng theo ý muốn bằng CSS. Trong toàn bộ các bài viết này xin các bạn hãy đọc kỹ, hiểu và thử trực tiếp ngay trên một trang (X)HTML mà bạn tạo ra.
Tìm tất cả bài viết của thành viên này
Cảm ơn bài viết này Trích dẫn và trả lời bài này
Có 1 thành viên nói cảm ơn 3211111182 bài viết này:
ruacon (03-12-2010)
03-12-2010, 08:40 PM
Bài viết: #2
Level: 1
Life: 0 / 15
Magic: 2 / 149
Experience: 60
RE: ID và Class trong CSS!!!

con bai nao nua ko ?
gui de cung tham khao ???
Tìm tất cả bài viết của thành viên này
Cảm ơn bài viết này Trích dẫn và trả lời bài này
03-12-2010, 09:51 PM
Bài viết: #3
Level: 8
Life: 15 / 198
Magic: 33 / 1,984
Experience: 94
RE: ID và Class trong CSS!!!

uhm
minh se gui !!!!
Tìm tất cả bài viết của thành viên này
Cảm ơn bài viết này Trích dẫn và trả lời bài này
Đăng chủ đề Đăng  trả lời 


Chuyển nhanh:


Các thành viên đang xem bài viết này:
1 khách

Lên trênNội dung