1
Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 6 Sat Nov 03, 2012 8:34 pm
Admin
Admin
Bài viết : 3191
Xu : 9210
Thanks : 8
Age : 34Đến từ : Thanh Hóa
Tài Sản:
.:
Ta phải tìm hiểu để chỉnh sửa style của một phần tử cụ thể. Có thể các
kế thừa khi ta muốn làm các thứ trên phạm vi toàn cục, cho tất cả các
trang trong web site. Ta có thể muốn chỉnh sửa một style định nghĩa bởi
một style sheet như một lớp hoặc style toàn cục. Khi ta làm điều này, sự
sửa đổi có một hiệu ứng gợn sóng.
Thay đổi các luật
Ta phải tìm hiểu để chỉnh sửa style của một phần tử cụ thể. Có thể
các kế thừa khi ta muốn làm các thứ trên phạm vi toàn cục, cho tất cả
các trang trong web site. Ta có thể muốn chỉnh sửa một style định nghĩa
bởi một style sheet như một lớp hoặc style toàn cục. Khi ta làm điều
này, sự sửa đổi có một hiệu ứng gợn sóng. Đó là, style của tất cả các
phần tử trên trang mà đưa ra style sheet đặc biệt được thay đổi.
Ví dụ, ta có một định nghĩa style sheet mà xác định hai style:
Một style toàn cục mà cung cấp toàn bộ phần tử <H2> (green, arial font, normal size).
Một lớp style chung gọi là cảnh báo (red, bold, italic) mà sẽ cung cấp bất kỳ một phần tử nào mà sử dụng lớp đó.
Hai ví dụ sau đây miêu tả việc dùng style sheet gọi là sheet1.css mà được liên kết với 1.htm đầu tiên và sau đó là 2.htm
Ví dụ:
Copy đoạn code này và ghi với tên "sheet1.css"
Sau đó trong file f1.htm ta sử dụng nó như sau:
Hình 76 Hình VII.12. Sử dụng một style sheet thông thường.
Trong file f2.htm ta cũng sử dụng:
2.5 Các chú thích trong Style Sheet
Các chú thích (comments) là một đặc tính mà hầu hết các ngôn ngữ phát
triển đều hỗ trợ. Ta cũng có thể thêm các chú thích vào một style sheet
để giúp lưu giữ vết của các style mà được hỗ trợ thông qua trang. Các
chú thích được bao quanh bởi các dấu /*. Không được đặt lồng vào nhau.
Với cascading style sheet, cú pháp là:
Với JavaScript style sheet, cú pháp là:
2.6 Lợi ích của các Style Sheet
Nếu ta muốn sử dụng điều khiển lớn hơn với các trang Web ta nên sử dụng style. Ta có thể sử dụng style sheet cho:
a. Ghi đè các ngầm định trình duyệt
Mỗi trình duyệt có cách thể hiện các trang Web riêng của nó. Ngày
nay, các chuyên viên phát triển không có quyền với trang được thể hiện
trong một trình duyệt. Ta không biết được trình duyệt nào trên toàn cầu
được sử dụng. Với các style sheet ta có thể ghi đè các mặc định truyền
thống của trình duyệt và gán nó thành của riêng ta. Ví dụ, ta có thể xác
định style trong phần tử <H1> như sau:
b. Bố trí trang
Các style sheet có thể được dùng để hiển thị font, thay đổi màu sắc,…
mà không thay đổi cấu trúc của trang web. Nghĩa là một người thiết kế
có thể tách rời các yêu cầu thiết kế trực quan từ cấu trúc logic của
trang Web và đánh địa chỉ khác nhau.
Việc dùng các độ đo tương đối trong style sheet của ta, ta có thể
biểu diễn tài liệu để trông đẹp hơn trên màn hình tại bất kỳ độ phân
giải nào.
c. Các Style Sheet có thể được tái sử dụng
Sau khi ta định nghĩa thông tin style, ta có thể nhúng style sheet
vào trong tài liệu HTML. Ta cũng có thể liên kết toàn bộ các trang trên
web site tới style sheet. Điều này đảm bảo rằng các trang web của ta có
một diện mạo đồng bộ khi chúng được hiển thị. Như vậy ta có thể có một
nền thông thường, logo công ty và một số thông tin chuẩn trong một style
sheet. Điều này sẽ đảm bảo rằng một cái nhìn thông thường và cảm giác
trên Web site. Hãy tưởng tượng nếu có hàng trăm trang và ta phải định
nghĩa style của mỗi trang riêng biệt.
d. Tạo một lần
Ta có thể tạo một style sheet và liên kết nhiều tài liệu tới nó. Tất
cả các tài liệu sẽ có một diện mạo. Dù sao quan trọng nhất là khi ta tạo
một thay đổi tới style sheet tất cả các tài liệu liên kết tới style
sheet sẽ mang lại sự thay đổi.
2.7 Kết hợp Style Sheet với HTML
Có nhiều cách để kết hợp style sheet với HTML :
- Phần tử STYLE.
- Thuộc tính Style.
- Phần tử liên kết.
Phần tử STYLE (STYLE element)
Phần tử STYLE được chèn vào trong phần tử <HEAD> của một tài
liệu với toàn bộ luật đặt giữa các thẻ mở và đóng. Khi các trang được
hiển thị, chỉ tài liệu mà có STYLE được nhúng vào mới bị tác động. Thẻ
<STYLE> có một tham số -- TYPE. Tham số này xác định kiểu Internet
Media như "text/css".
Ví dụ:
Hình 82 Hình VII.13. Sử dụng phần tử STYLE.
Hình 84 Hình VII.14. Sử dụng phần tử STYLE.
Thuộc tính STYLE
Thuộc tính STYLE được dùng để cung cấp style sheet cho các phần tử
riêng lẻ. Một Style Sheet có thể nhỏ bằng một luật. Sử dụng thuộc tính
Style ta có thể bỏ qua phần tử Style và đặt các khai báo trực tiếp vào
trong các thẻ bắt đầu riêng lẻ.
Thông thường, ta có thể chỉ dùng thuộc tính này nếu ta đang thay đổi
style của một phần tử đặc biệt. Nếu ta có ý định cung cấp cùng một style
trên toàn bộ tài liệu, khi đó đây không thật sự là cách hay để đạt được
điều này.
Ví dụ:
Hình 87 Hình VII.15. Sử dụng thuộc tính STYLE.
Phần tử liên kết (Link Element)
Nếu ta muốn dùng phần tử liên kết, khi đó Style Sheet phải được tách
khỏi tài liệu. Khi đó địa chỉ Web với style sheet có thể được thêm vào.
Phải có cả thuộc tính "rel=stylesheet" hoặc trình duyệt sẽ không tải style sheet.
Ví dụ:
2.8 Thứ tự ưu tiên của các style (Cascading)
Khi ta đang dùng nhiều kỹ thuật để cung cấp các style (liên kết và
nhúng) vào trang Web, có một cách để trình duyệt quyết định chọn style
nào. Trình duyệt xếp qua tất cả các luật được xác định và chọn một luật
quan trọng nhất. Style sheet cục bộ có độ ưu tiên cao nhất. Tiếp theo là
style sheet toàn cục với style sheet liên kết tại phía trên.
Ví dụ, nếu một dòng trên trang Web định nghĩa
là màu đỏ qua một style sheet liên kết, tất cả các đoạn văn sẽ là màu đỏ trừ
ở trên, mà sẽ là màu xanh dương.
Hình 91 Hình VII.16. Cascading style.
Hết
Nguồn: Sưu tầm Internet
kế thừa khi ta muốn làm các thứ trên phạm vi toàn cục, cho tất cả các
trang trong web site. Ta có thể muốn chỉnh sửa một style định nghĩa bởi
một style sheet như một lớp hoặc style toàn cục. Khi ta làm điều này, sự
sửa đổi có một hiệu ứng gợn sóng.
Thay đổi các luật
Ta phải tìm hiểu để chỉnh sửa style của một phần tử cụ thể. Có thể
các kế thừa khi ta muốn làm các thứ trên phạm vi toàn cục, cho tất cả
các trang trong web site. Ta có thể muốn chỉnh sửa một style định nghĩa
bởi một style sheet như một lớp hoặc style toàn cục. Khi ta làm điều
này, sự sửa đổi có một hiệu ứng gợn sóng. Đó là, style của tất cả các
phần tử trên trang mà đưa ra style sheet đặc biệt được thay đổi.
Ví dụ, ta có một định nghĩa style sheet mà xác định hai style:
Một style toàn cục mà cung cấp toàn bộ phần tử <H2> (green, arial font, normal size).
Một lớp style chung gọi là cảnh báo (red, bold, italic) mà sẽ cung cấp bất kỳ một phần tử nào mà sử dụng lớp đó.
Hai ví dụ sau đây miêu tả việc dùng style sheet gọi là sheet1.css mà được liên kết với 1.htm đầu tiên và sau đó là 2.htm
Ví dụ:
Copy đoạn code này và ghi với tên "sheet1.css"
Sau đó trong file f1.htm ta sử dụng nó như sau:
Hình 76 Hình VII.12. Sử dụng một style sheet thông thường.
Trong file f2.htm ta cũng sử dụng:
2.5 Các chú thích trong Style Sheet
Các chú thích (comments) là một đặc tính mà hầu hết các ngôn ngữ phát
triển đều hỗ trợ. Ta cũng có thể thêm các chú thích vào một style sheet
để giúp lưu giữ vết của các style mà được hỗ trợ thông qua trang. Các
chú thích được bao quanh bởi các dấu /*. Không được đặt lồng vào nhau.
Với cascading style sheet, cú pháp là:
Với JavaScript style sheet, cú pháp là:
2.6 Lợi ích của các Style Sheet
Nếu ta muốn sử dụng điều khiển lớn hơn với các trang Web ta nên sử dụng style. Ta có thể sử dụng style sheet cho:
a. Ghi đè các ngầm định trình duyệt
Mỗi trình duyệt có cách thể hiện các trang Web riêng của nó. Ngày
nay, các chuyên viên phát triển không có quyền với trang được thể hiện
trong một trình duyệt. Ta không biết được trình duyệt nào trên toàn cầu
được sử dụng. Với các style sheet ta có thể ghi đè các mặc định truyền
thống của trình duyệt và gán nó thành của riêng ta. Ví dụ, ta có thể xác
định style trong phần tử <H1> như sau:
b. Bố trí trang
Các style sheet có thể được dùng để hiển thị font, thay đổi màu sắc,…
mà không thay đổi cấu trúc của trang web. Nghĩa là một người thiết kế
có thể tách rời các yêu cầu thiết kế trực quan từ cấu trúc logic của
trang Web và đánh địa chỉ khác nhau.
Việc dùng các độ đo tương đối trong style sheet của ta, ta có thể
biểu diễn tài liệu để trông đẹp hơn trên màn hình tại bất kỳ độ phân
giải nào.
c. Các Style Sheet có thể được tái sử dụng
Sau khi ta định nghĩa thông tin style, ta có thể nhúng style sheet
vào trong tài liệu HTML. Ta cũng có thể liên kết toàn bộ các trang trên
web site tới style sheet. Điều này đảm bảo rằng các trang web của ta có
một diện mạo đồng bộ khi chúng được hiển thị. Như vậy ta có thể có một
nền thông thường, logo công ty và một số thông tin chuẩn trong một style
sheet. Điều này sẽ đảm bảo rằng một cái nhìn thông thường và cảm giác
trên Web site. Hãy tưởng tượng nếu có hàng trăm trang và ta phải định
nghĩa style của mỗi trang riêng biệt.
d. Tạo một lần
Ta có thể tạo một style sheet và liên kết nhiều tài liệu tới nó. Tất
cả các tài liệu sẽ có một diện mạo. Dù sao quan trọng nhất là khi ta tạo
một thay đổi tới style sheet tất cả các tài liệu liên kết tới style
sheet sẽ mang lại sự thay đổi.
2.7 Kết hợp Style Sheet với HTML
Có nhiều cách để kết hợp style sheet với HTML :
- Phần tử STYLE.
- Thuộc tính Style.
- Phần tử liên kết.
Phần tử STYLE (STYLE element)
Phần tử STYLE được chèn vào trong phần tử <HEAD> của một tài
liệu với toàn bộ luật đặt giữa các thẻ mở và đóng. Khi các trang được
hiển thị, chỉ tài liệu mà có STYLE được nhúng vào mới bị tác động. Thẻ
<STYLE> có một tham số -- TYPE. Tham số này xác định kiểu Internet
Media như "text/css".
Ví dụ:
Hình 82 Hình VII.13. Sử dụng phần tử STYLE.
Hình 84 Hình VII.14. Sử dụng phần tử STYLE.
Thuộc tính STYLE
Thuộc tính STYLE được dùng để cung cấp style sheet cho các phần tử
riêng lẻ. Một Style Sheet có thể nhỏ bằng một luật. Sử dụng thuộc tính
Style ta có thể bỏ qua phần tử Style và đặt các khai báo trực tiếp vào
trong các thẻ bắt đầu riêng lẻ.
Thông thường, ta có thể chỉ dùng thuộc tính này nếu ta đang thay đổi
style của một phần tử đặc biệt. Nếu ta có ý định cung cấp cùng một style
trên toàn bộ tài liệu, khi đó đây không thật sự là cách hay để đạt được
điều này.
Ví dụ:
Hình 87 Hình VII.15. Sử dụng thuộc tính STYLE.
Phần tử liên kết (Link Element)
Nếu ta muốn dùng phần tử liên kết, khi đó Style Sheet phải được tách
khỏi tài liệu. Khi đó địa chỉ Web với style sheet có thể được thêm vào.
Phải có cả thuộc tính "rel=stylesheet" hoặc trình duyệt sẽ không tải style sheet.
Ví dụ:
2.8 Thứ tự ưu tiên của các style (Cascading)
Khi ta đang dùng nhiều kỹ thuật để cung cấp các style (liên kết và
nhúng) vào trang Web, có một cách để trình duyệt quyết định chọn style
nào. Trình duyệt xếp qua tất cả các luật được xác định và chọn một luật
quan trọng nhất. Style sheet cục bộ có độ ưu tiên cao nhất. Tiếp theo là
style sheet toàn cục với style sheet liên kết tại phía trên.
Ví dụ, nếu một dòng trên trang Web định nghĩa
là màu đỏ qua một style sheet liên kết, tất cả các đoạn văn sẽ là màu đỏ trừ
ở trên, mà sẽ là màu xanh dương.
Hình 91 Hình VII.16. Cascading style.
Hết
Nguồn: Sưu tầm Internet
