Bài 8: Học HTML, Định dạng các phần tử HTML bằng CSS phần 2

Hôm nay chúng ta sẽ học phần 2 của nội dung Định dạng các phần tử HTML bằng CSS

HTML, Học HTML

 

4. Bộ chọn HTML:

 Bộ chọn HTML cho phép chúng ta chỉ cần định nghĩa các thuộc tính một lần duy nhất cho một loại thẻ HTML nào đó (Ví dụ P, INPUT, H1, H2 ....), và về sau tất cả các văn bản nằm trong loại thẻ này sẽ có cùng định dạng nh¬ư nhau. Điều này rất có lợi cho ta trong thực tế, chẳng hạn khi bạn tạo một website cho một cuốn sách nào đó mà trong cuốn sách này lại có rất nhiều chương và bạn muốn màu sắc, kích cỡ, font chữ, kiểu dáng... cho tiêu đề các chương là như nhau, thì bạn chỉ cần định nghĩa một lần và về sau tiêu đề các chương sẽ có cùng định dạng giống như nhau.
Việc chúng ta tạo ra các tính chất chung cho một loại thẻ nào đó thì ta gọi là một bộ chọn (Selector) HTML
Để định nghĩa ra một bộ chọn HTML, ta có 2 cách, bạn có thể tuỳ ý chọn một trong 2 cách này. Cách thứ nhất là ta viết theo một dạng cú pháp mà ta gọi là cú pháp dạng CSS, dạng thứ hai là ta viết theo cú pháp của JavaScript.

Cú pháp để tạo bộ chọn theo CSS như sau:

<Style type = "text/CSS">
    <Tên thẻ HTML> { <Tên thuộc tính> : <Giá trị> }
    <Tên thẻ HTML> { <Tên thuộc tính> : <Giá trị> }
    <Tên thẻ HTML> { <Tên thuộc tính> : <Giá trị> }
    ........................
</Style>

Trong đó: 

<Tên thẻ HTML> là một trong các thẻ mà bạn đã học, ví dụ nó có thể là thẻ P, INPUT, LI, UL, B, H1, H2 v.v...
Tên thuộc tính : Là tên của thuộc tính của loại thẻ mà bạn muốn thay đổi  . Nó có thể là color, background-color, cursor, text-align v.v... Tên các thuộc tính này các bạn có thể tra trong bảng (File Cac the su dung trong CSS.doc" nằm trong thư mục tài liệu về JavaScript của máy Server)
Giá trị: Là giá trị mới mà bạn muốn đặt cho thuộc tính. Ví dụ, "red", "lavender", "hand", "center" v.v.... Để có thể đặt giá trị cho hợp lệ, bạn tham khảo trong file:  Cac the su dung trong CSS.doc" trong server.

Sau khi đã định nghĩa tên của một loại thẻ với các thuộc tính của nó, thì tất cả các thẻ cùng loại về sau sẽ có tất cả các thuộc tính như đã định nghĩa. Để làm sáng tỏ điều này, chúng ta hãy lấy một số ví dụ.

Ví dụ 1: Giả sử bạn cần tạo một danh mục các đầu sách của NIIT , theo định dạng dưới đây
KNOW YOUR DESKTOP
Office 2000
Access 2000
Logic Building with C
HTML, DHTML and JavaScript
Dream Weaver

Một cách thông thường nhất, với các kiến thức ở những phần trước, bạn hoàn toàn có thể tạo được bằng cách viết như sau :

Tuy nhiên nếu theo cách ở trên thì chúng ta dễ dàng thấy có một điểm chưa được thuận tiện, đó là mỗi khi thêm tên một loại sách chúng ta cần phải thêm trong thẻ P dòng:

<style="font-family:.vntimeH; font-size:20pt; color:red". 
 
Trong trường hợp này, Bằng cách định ra một qui tắc (Định dạng) chung cho tất cả các thẻ P ta có thể có kết quả như mong đợi mà không phải viết lại các dòng dư thừa như ở trên. Việc định ra qui tắc chung cho thẻ P ta gọi là định nghĩa bộ chọn P.
Áp dụng cú pháp định nghĩa bộ chọn theo dạng CSS để định nghĩa bộ chọn P như sau:

<style type = "text/css">
    P {font-family:.vntimeH}
P {font-size:20pt}
P {color:red}
</style>
 
Hoặc định nghĩa một cách ngắn gọn :

<style type = "text/css">
    P {font-family:.vntimeH; font-size:20pt; color:red}
</style>
 
Qua phần trên các bạn đã có thể hiểu rõ hơn về bộ chọn HTML. Để tìm hiểu kỹ hơn về HTML các bạn có thể tham khảo phần nội dung khóa học Tạo web với HTML5 & CSS 3 tại học viện iNET

Mọi thông tin xin liên hệ: Ms Lâm: 0904 936 399