1
Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 4 Sat Nov 03, 2012 8:33 pm
Admin
Admin
Bài viết : 3191
Xu : 9210
Thanks : 8
Age : 34Đến từ : Thanh Hóa
Tài Sản:
.:
Các selector này dùng thuộc tính CLASS của các phần tử HTML. Mọi phần
tử, mà thấy được, có một thuộc tính CLASS mà được dùng để gán một quy
định. Thay vì ta có thể gán một quy định lớp cho nhiều phần tử của một
kiểu đơn khi ta muốn hiển thị nhiều màu khác nhau.
2.4 Thuật ngữ Style Sheet
Một cascading style sheet định nghĩa các style mà có thể được cung cấp cho các trang hoặc các phần tử trang.
Luật style - Một cascading style sheet là một tập các luật.
Một luật định nghĩa định dạng của tài liệu. Ví dụ, ta có thể tạo một
luật style để quy định tất cả các
xuất hiện với màu xanh.
Style Sheet - là một danh sách các luật. Nó có thể được nhúng
vào trong tài liệu HTML. Trong trường hợp đó nó được gọi là một style
sheet nhúng. Một style sheet cũng có thể được tạo như một file bên ngoài
và liên kết với tài liệu HTML. Các luật style có thể được cung cấp để
lựa chọn các phần của một trang Web. Ví dụ, ta có thể quy định một đoạn
văn bản xuất hiện dạng chữ đậm và nghiêng. Việc này được gọi là khai báo
bên trong style (inline style declaration) nhờ đó các style được cung
cấp để chia các phần tử HTML trên một trang Web.
Các luật - Một style sheet có thể gồm một hoặc nhiều luật.
Phần đầu của luật được gọi là Selector. Mỗi selector có cá thuộc tính và
các giá trị kết hợp với nó.
Ví dụ:
Phần của luật kèm theo bên trong các ngoặc nhọn được gọi là Khai báo
(Declaration). Một khai báo có hai phần, phần trước dấu hai chấm là
thuộc tính (Property) và phần sau dấu hai chấm là giá trị (Value) của
thuộc tính đó.
Các khai báo phân chia ra bởi dấu chấm phẩy (
. Ta không cần đặt một dấu phẩy chấm sau khai báo cuối cùng.
Ví dụ:
H1 là Selector, color:blue là khai báo.
Bên trong khai báo:
Color là thuộc tính, blue là giá trị.
Ta có thể đặt mỗi luật tách rời bên trong các thẻ STYLE. Trong trường hợp đó các header của ta sẽ được liệt kê.
Ví dụ:
Ta cũng có thể nhóm các luật. Mỗi khai báo được phân chia bởi một dấu chấm phẩy.
Ví dụ:
Hình 50 Hình VII.4. Luật nhóm.
Các Selector :
Selector có thể được định nghĩa như, "một xâu mà quy định các luật nào hỗ trợ cho các phần tử nào.
Có hai kiểu cơ bản của các selector :
Các selector đơn giản (Simple selectors).
- HTML Selectors.
- Class selectors.
- ID Selectors.
Các selector ngữ cảnh (Contextual selectors).
a. Các selector đơn giản (Simple selectors)
Sử dụng dễ nhất. Nó mô tả một phần tử không kể vị trí của nó trong cấu trúc tài liệu. Quy định H1 là một selector đơn giản.
Ví dụ:
HTML Selector
Seletor này sử dụng các tên của các phần tử HTML. Chỉ khác là ta loại bỏ các móc nhọn. Như vậy, thẻ
HTML trở thành P. Trong ví dụ dưới đây, trong khi định nghĩa style, phần tử P không có các móc nhọn. Điều này bởi vì, phần tử
HTML được đối xử như một selector.
Ví dụ:
Ở đây các nội dung của
được xác định. Phần tử
được đối xử như một phần tử HTML.
Hình 54 Hình VII.5. Sử dụng một HTML selector.
Class Selector
Các selector này dùng thuộc tính CLASS của các phần tử HTML. Mọi phần
tử, mà thấy được, có một thuộc tính CLASS mà được dùng để gán một quy
định. Thay vì ta có thể gán một quy định lớp cho nhiều phần tử của một
kiểu đơn khi ta muốn hiển thị nhiều màu khác nhau. Trong trường hợp đó
ta sẽ dùng một quy định lớp cho
.
CLASS Selector được bắt đầu với một dấu chấm (.) gọi là ký tự cờ
(flag), theo sau bởi ’tên lớp’ của selector. Sẽ tốt hơn để chọn các tên
lớp theo mục đích hơn là một tên mà mô tả màu hoặc style của họ. Ví dụ,
ta có thể muốn đoạn A xuất hiện dạng chữ nghiêng, các đoạn khác xuất
hiện với style khác, trong trường hợp đó đoạn A có thể có một quy định
lớp.slant.
Ví dụ:
Hình VII.6. Sử dụng CLASS selector.
Ví dụ:
Khi dùng cú pháp JavaScript, ta không thể dùng gạch nối bên trong các
tên lớp. Bởi vì JavaScript đọc gạch nối như một dấu trừ (-) mà là một
toán tử JavaScript. Các tên lớp không thể gồm bất kỳ toán tử JavaScript
nào.
Khi định nghĩa một style class:
Ta có thể xác định các phần tử HTML nào có thể dùng style này.
Ta có thể dùng từ khóa tất cả để cho tất cả các phần tử có thể dùng nó.
Ví dụ:
Hình VII.7. Xác định các phần tử.
Ví dụ:
Hết phần 4
Nguồn: Sưu tầm Internet
tử, mà thấy được, có một thuộc tính CLASS mà được dùng để gán một quy
định. Thay vì ta có thể gán một quy định lớp cho nhiều phần tử của một
kiểu đơn khi ta muốn hiển thị nhiều màu khác nhau.
2.4 Thuật ngữ Style Sheet
Một cascading style sheet định nghĩa các style mà có thể được cung cấp cho các trang hoặc các phần tử trang.
Luật style - Một cascading style sheet là một tập các luật.
Một luật định nghĩa định dạng của tài liệu. Ví dụ, ta có thể tạo một
luật style để quy định tất cả các
xuất hiện với màu xanh.
Style Sheet - là một danh sách các luật. Nó có thể được nhúng
vào trong tài liệu HTML. Trong trường hợp đó nó được gọi là một style
sheet nhúng. Một style sheet cũng có thể được tạo như một file bên ngoài
và liên kết với tài liệu HTML. Các luật style có thể được cung cấp để
lựa chọn các phần của một trang Web. Ví dụ, ta có thể quy định một đoạn
văn bản xuất hiện dạng chữ đậm và nghiêng. Việc này được gọi là khai báo
bên trong style (inline style declaration) nhờ đó các style được cung
cấp để chia các phần tử HTML trên một trang Web.
Các luật - Một style sheet có thể gồm một hoặc nhiều luật.
Phần đầu của luật được gọi là Selector. Mỗi selector có cá thuộc tính và
các giá trị kết hợp với nó.
Ví dụ:
Phần của luật kèm theo bên trong các ngoặc nhọn được gọi là Khai báo
(Declaration). Một khai báo có hai phần, phần trước dấu hai chấm là
thuộc tính (Property) và phần sau dấu hai chấm là giá trị (Value) của
thuộc tính đó.
Các khai báo phân chia ra bởi dấu chấm phẩy (
. Ta không cần đặt một dấu phẩy chấm sau khai báo cuối cùng.Ví dụ:
H1 là Selector, color:blue là khai báo.
Bên trong khai báo:
Color là thuộc tính, blue là giá trị.
Ta có thể đặt mỗi luật tách rời bên trong các thẻ STYLE. Trong trường hợp đó các header của ta sẽ được liệt kê.
Ví dụ:
Ta cũng có thể nhóm các luật. Mỗi khai báo được phân chia bởi một dấu chấm phẩy.
Ví dụ:
Hình 50 Hình VII.4. Luật nhóm.
Các Selector :
Selector có thể được định nghĩa như, "một xâu mà quy định các luật nào hỗ trợ cho các phần tử nào.
Có hai kiểu cơ bản của các selector :
Các selector đơn giản (Simple selectors).- HTML Selectors.
- Class selectors.
- ID Selectors.
Các selector ngữ cảnh (Contextual selectors).a. Các selector đơn giản (Simple selectors)
Sử dụng dễ nhất. Nó mô tả một phần tử không kể vị trí của nó trong cấu trúc tài liệu. Quy định H1 là một selector đơn giản.
Ví dụ:
HTML Selector
Seletor này sử dụng các tên của các phần tử HTML. Chỉ khác là ta loại bỏ các móc nhọn. Như vậy, thẻ
HTML trở thành P. Trong ví dụ dưới đây, trong khi định nghĩa style, phần tử P không có các móc nhọn. Điều này bởi vì, phần tử
HTML được đối xử như một selector.
Ví dụ:
Ở đây các nội dung của
được xác định. Phần tử
được đối xử như một phần tử HTML.
Hình 54 Hình VII.5. Sử dụng một HTML selector.
Class Selector
Các selector này dùng thuộc tính CLASS của các phần tử HTML. Mọi phần
tử, mà thấy được, có một thuộc tính CLASS mà được dùng để gán một quy
định. Thay vì ta có thể gán một quy định lớp cho nhiều phần tử của một
kiểu đơn khi ta muốn hiển thị nhiều màu khác nhau. Trong trường hợp đó
ta sẽ dùng một quy định lớp cho
.
CLASS Selector được bắt đầu với một dấu chấm (.) gọi là ký tự cờ
(flag), theo sau bởi ’tên lớp’ của selector. Sẽ tốt hơn để chọn các tên
lớp theo mục đích hơn là một tên mà mô tả màu hoặc style của họ. Ví dụ,
ta có thể muốn đoạn A xuất hiện dạng chữ nghiêng, các đoạn khác xuất
hiện với style khác, trong trường hợp đó đoạn A có thể có một quy định
lớp.slant.
Ví dụ:
Hình VII.6. Sử dụng CLASS selector.
Ví dụ:
Khi dùng cú pháp JavaScript, ta không thể dùng gạch nối bên trong các
tên lớp. Bởi vì JavaScript đọc gạch nối như một dấu trừ (-) mà là một
toán tử JavaScript. Các tên lớp không thể gồm bất kỳ toán tử JavaScript
nào.
Khi định nghĩa một style class:
Ta có thể xác định các phần tử HTML nào có thể dùng style này.
Ta có thể dùng từ khóa tất cả để cho tất cả các phần tử có thể dùng nó.
Ví dụ:
Hình VII.7. Xác định các phần tử.
Ví dụ:
Hết phần 4
Nguồn: Sưu tầm Internet
