Thành phần FIELDSET cho phép nhóm một số thành phần điều
khiển có liên quan với nhau. NSD dễ hiểu hơn, còn người thiết
kế trang cũng dễ xử lí di chuyển focus hơn.
1.3 Thêm tính cấu trúc cho FORM

a. FIELDSET và LEGEND

Thành phần LEGEND cho phép gắn một dòng chú giải cho một FIELDSET

Các thuộc tính




♦ top: legend đặt ở phía trên của fieldset. Đây là giá trị mặc định.

♦ bottom: legend đặt ở phía dưới của fieldset.

♦ left: legend đặt ở phía trái.

♦ right: legend đặt ở phía phải của fieldset.

Vi dụ :




Trình duyệt sẽ hiển thị như sau:




Hình 36 Hình VII.1. Kết quả ví dụ.


2. Cascading style sheet
Style Sheets là một đặc tính quan trọng mà có thể được dùng trong
HTML động (Dynamic HTML). Mặc dù trang Web không thật sự cần phải có một
style sheet, nhưng việc dùng nó có nhiều lợi ích. Trong phần này, ta sẽ
làm quen về công nghệ style sheet dùng để nâng cao việc thiết kết và
phát triển trang Web.

2.1 Inline Style

Một đặc tính quan trọng của Dynamic HTML là các style động. Ta có thể
thay đổi style của nhiều phần tử HTML trên trang sau khi nó được hiển
thị trong trang. Sự thay đổi có thể thể hiện bằng cách đáp lại tương tác
của người dùng hoặc sự kiện thay đổi trạng thái (như sự kiện thay đổi
kích thước).

Có hai cách thay đổi style của trang:

- Thay đổi style bên trong.

- Viết các scripts để thay đổi style.

Sử dụng các inline style ta có thể viết các style động mà không phải viết thêm script vào trang.

Một "inline style" là một style mà được gán vào một phần tử đặc biệt.
Style không hỗ trợ cho tất cả các phần tử của một kiểu hoặc một lớp nào
đó. Một inline style được định nghĩa dùng thuộc tính STYLE cho tag của
các phần tử. Ví dụ, nếu ta muốn gán màu của <H1> (Heading 1) thành
màu đỏ, ta có thể gán thuộc tính STYLE của thẻ H1.




Nếu ta muốn dùng script để sửa một inline style bất kỳ lúc nào, khi
đó ta phải dùng đối tượng style (Style Object). Style Object hỗ trợ mọi
thuộc tính mà CSS hỗ trợ cho các style. Để dùng thuộc tính trong scrip:

- Loại bỏ gạch nối từ tên thuộc tính style CSS.

- Thay đổi chữ đầu tiên của từ sau gạch nối thành chữ viết hoa.

Ví dụ, thuộc tính CSS font-weight thành fontWeight trong DHTML. Hoặc text-align thành textAlign.

Ta hãy xem một ví dụ để xóa mọi thứ. Ta sẽ dùng inline style để gán
các thuộc tính của nhân tố <P>. Xem đoạn code dưới đây trong
Internet Explorer:








Hình 39 Hình VII.2. Sử dung Inline Style.


2.2 Giới thiệu Style Sheet

Style sheet là nơi mà ta quản lý và điều khiển các style. Style sheet
mô tả diện mạo và việc biểu diễn của một tài liệu HTML như nó sẽ được
đưa ra trên màn hình, hoặc in ra ngoài. Trong thực tế, ta có thể nghĩ về
nó như một khuôn mẫu để căn cứ vào các tài liệu HTML của ta. Đặc biệt
ta cũng có thể định rõ vị trí và sự xuất hiện của các phần tử trên một
trang và tạo các hiệu ứng đặc biệt. Ví dụ ta có thể tạo một style sheet
định nghĩa cho thẻ <H1> là chữ béo và nghiêng và màu xanh. Hoặc
thẻ phần tử <P> được đưa ra với màu đỏ với font Arial.

Ta có thể định nghĩa thông tin style mà ta muốn trong một vị trí –
style sheet. Khi đó style sheet có thể được liên kết để tất cả các trang
trong một Web site để tạo một diện mạo thích hợp, đồng nhất qua site
bên trong. Ta có thể định nghĩa nhiều style sheet và liên kết chúng
thành một tập như nhau của các trang Web để mềm dẻo hơn nhiều trong khi
tạo các trang Web.

Một trang Web có thể không có style sheet, nếu không có style sheet
được xác định, khi đó trình duyệt sẽ sử dụng cách hiển thị theo quy ước
ngầm định của nó. Ví dụ, một thẻ <H1> luôn được hiển thị cùng một
định dạng, các đoạn và các lề cũng như vậy. Dù sao việc dùng style sheet
ta có thể xác định cách mà thẻ <H1> được hiển thị trong trình
duyệt.

Về mặt lý thuyết, ta có thể dùng bất kỳ công nghệ style sheet nào với
HTML. Dù sao thực tế thì chỉ công nghệ Cascading Style Sheet (CSS) được
các trình duyệt hỗ trợ tốt. CSS là một chuẩn được phát triển bởi World
Wide Web Consortium (thường gọi là "W3C") dùng trong các trình duyệt
Web.

2.3 Javascript Style Sheet

Netscape hỗ trợ các cascading style sheet. Nó cũng hợ trợ style sheet
mà được viết trông giống JavaScript và dùng mô hình đối tượng tài liệu –
Document Object Model (DOM). Khi ra định nghĩa một style sheet ta có
thể khai báo kiểu như:

"text/CSS" - Trong trường hợp này nó tìm cú pháp CSS.

"text/JavaScript" - Trong trường hợp này nó tìm cú pháp JavaScript style sheet.

Khi dùng cú pháp JavaScript trong phần tử <STYLE>, ta phải xác định thuộc tính các thẻ của đối tượng tài liệu.

Trong mô hình đối tượng tài liệu, các phần tử HTML được đối xử như
các đối tượng. Một đối tượng có các thuộc tính và có thể được truy nhập
để định nghĩa diện mạo và style của phần tử. Một thuộc tính trả về có
thể hoạt động như một đối tượng với một tập các thuộc tính. Ví dụ, một
trang Web được đối xử như một đối tượng tài liệu. Đối tượng tài liệu có
một thuộc tính các thẻ. Thuộc tính các thẻ có một đối tượng H2. Đối
tượng H2 có một thuộc tính gọi là color mà có thể được truy nhập và thay
đổi khi được yêu cầu.




Ví dụ:




Tất cả các phần tử khác đều thừa kế từ phần tử <BODY>. Nếu ta
muốn cung cấp một style mặc định cho tất cả các phần tử trong một tài
liệu, ta có thể đặt style yêu cầu trong phần tử <BODY>. Đoạn mã
sau chạy trên trình duyệt netscape:

Ví dụ:







Hình 43 Hình VII.3. Hỗ trợ một style bình thường.

Ví dụ:




Nếu ta phải đặt nhiều thuộc tính cho một phần tử, ta có thể dùng cú pháp để rút ngắn lại mã:




Hết phần 3



Nguồn: Sưu tầm Internet