Get Over
[HD] Sự liên kết phần từ và giá trị forumotion
on 25/01/2013Get Over
Nếu bạn muốn là 1 tay ripper thì bạn phải hiểu được về sự liên kết về các phần tử và giá trị giữa Templates, CSS và Javascript.
Thường thì trong Templates các bạn hay thấy có các chữ như id, class, span,... đúng không? Vậy đó chình là các giá trị
Hôm nay mình sẽ giúp bạn tìm hiểu về 2 thứ là ID và CLASS
I- Tìm hiểu về ID
1. Thế nào là ID
Id là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Do đó trong một trang HTML của bạn mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của bạn không hợp lý và sẽ lỗi HTML.
VD :
<div id="pun-head">
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
2. Cách dùng ID
ID được sử dụng theo mẫu sau :
VD : <div id="tên ID">
Nội dung
</div>
<div id="pun-head">
Tôi đi học
</div>
• 'tên ID' là tên bạn muốn gán hay đặt cho nội dung. Tên ID bạn có thể tự đặt một tên bất kỳ
• 'Nội dung' là phần bạn thể hiện các nội dung mà mình đã soạn
3. Mối liên hệ của ID với CSS
TRong CSS các ID được ký hiệu trước nó là dấu #
Cấu trúc ID trong CSS : # + 'tên ID'
VD như phần 2, trong CSS mình sẽ được đoạn : #pun-head
Kết luận : Vậy là đó nếu bạn muốn rip 1 skin thì đừng quên lấy CSS mà hãy lấy cả ID của nó nhé
II- Tìm hiểu về CLASS
1.Thế nào là Class ?
Class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class nào đó.
VD về class
2. Cách dùng Class
<div id="wrapper">
[color=blue]<div class="info">[/color]
<p>Nội dung thông tin...<p>
</div>
</div>
Class dùng theo mẫu sau :
• Tên Class bạn có thể tự đặt hoặc đặt giống tên ID
<div class="Tên Class">
<p>Nội dung<p>
</div>
• NỘi dung trong phần Class của bạn
3. Mối liên hệ của Class với CSS
Dùng class đôi khi sẽ khó hơn ID
Sẽ có dấu "." trước tên Class
Cấu trúc : . + tên Class
VD : .wrapper
Không chỉ vậy nếu bạn muốn đặt màu nền cho nội dung ta thêm thẻ div và author
VD
• margian : là số mép, số rìa
div.author .tên Class {
margin: 5px 10px;
padding: 10px;
border: 1px solid #F0F0F0;
background-color: #000000;
color: #FFFFFF;
}
• Padding : độ dày
• Border : Đường viền
• Background-color : màu nền ( Nếu bạn muốn dùng ảnh thì background-image : url(link anh)
• Color : màu
CHú ý sau mỗi tên phải dùng dấu ; để ngăn cách các giá trị
Vậy là ta đi được 1/10 trong những phần đơn giản nhất của forum