GD CD: STGT TQ về thiết kế Website

Style Sheets
Session 6
Mục tiêu
Mô tả Dynamic HTML
Sử dụng Style Sheet

DHTML là gì?
DHTML (Dynamic HTML) là trang HTML có chứa các đoạn mã JavaScript tạo các hiệu ứng, thay đổi các phần tử trong trang HTML.
DHTML kết hợp giữa HTML, Javascript và Cascading Style Sheets(CSS).
CSS là sự kết hợp giữa các tags HTML và style. Style có thể chứa nhiều thuộc tính.
Giới thiệu Style Sheets
A style sheet là nơi chúng ta quản lý và điều khiển style.
The style sheet mô tả sự xuất hiện và trình bày của một tài liệu HTML khi được trình bày trên màn hình, hoặc thậm chí trong in ấn.
Chúng ta cũng có thể xác định chính xác vị trí và xuất hiện của các yếu tố trên một trang và tạo hiệu ứng đặc biệt.
Phương pháp thay đổi Style của Web Page
Inline style
Style information can be used inline.
Chúng ta có thể gắn vào bên trong thẻ HTML.
Thuộc tính STYLE thường được dùng để áp dụng style sheets vào một thẻ nào đó.

Writing Script
Sử dụng đối tượng Style
Đối tượng Style hỗ trợ các thuộc tính CSS
Ưu điểm khi dùng style sheet
Tiết kiệm băng thông
Có thể “đặt” các đối tượng ở bất cứ vị trí nào trên webpage
Giúp các webpage có sự đồng bộ tuyệt đối, dễ dàng nâng cấp giao diện
CSS tương thích với hầu hết các trình duyệt
Hỗ trợ các công cụ tìm kiếm
Selectors
A selector là một chuỗi để nhận biết thẻ nào được áp dụng các luật. Có 2 loại selector cơ bản:
Simple selectors
HTML element selectors
Class selectors
ID selectors
Contextual selector
Style Sheet kết hợp với HTML
Dùng thẻ STYLE
Dùng thuộc tính Style
Dùng thẻ Link
Properties in Style Sheet