1. Style Sheets (Bang kiêu)
̉ ̉
Session 5

2. Muc tiêu bai hoc
̣ ̀ ̣
 Mô tả Dynamic HTML
 Dùng Bảng kiểu (Style Sheet)
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 2 of 20

3. DHTML là gi?(1)
̀
 “HTML động” có thể được định nghĩa như là một phần
mềm được sử dụng cho việc mô tả sự kết hợp giữa
HTML, các bảng kiểu (stylesheet) và ngôn ngữ script
làm cho tài liệu trở nên sinh động.
 Khả năng viết được kịch bản (script) cho phép đưa
thêm các tính năng sinh động cho trang Web.
 Microsoft và Netscape có những cách tiếp cận khác
nhau để thực thi DHTML. Microsoft tập trung vào việc
sử dụng kiểu mẫu tầng (Cascading Style Sheets hay
CSS). Các đoạn code kịch bản được sử dụng để tương
tác các nguyên tố của CSS.
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 3 of 20

4. DHTML là gi?(2)
̀
 Netscape cũng sử dụng Bảng kiểu. Nhưng chủ yếu
DHTML được thực hiện thông qua các lớp (layer).
Thẻ gán LAYER được sử dụng để cung cấp phần
lớn các tính năng của DHTML.
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 4 of 20

5. Những tinh năng cua HTML Đông
́ ̉ ̣
(DHTML)
 Những kiểu động(Dynamic Styles)
 Nội dung động(Dynamic Content)
 Định vị động(Positioning)
 Liên kết dữ liệu(Data binding )
 Font có thể tải được(Downloadable Fonts)
 Thực hiện Scripting
 Cấu trúc của đối tượng(Object Structure)
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 5 of 20

6. Giới thiêu về Bang kiêu (Style Sheets)
̣ ̉ ̉
 Bảng kiểu là nơi mà chúng ta có thể quản lý
và điều khiển các kiểu “style”
 Style sheet mô tả sự xuất hiện và trình diễn
của một tài liệu HTML như khi nó được biểu
diễn trên màn hình, thậm chí là khi in.
 Bạn cũng có thể chỉ chính xác vị trí và sự xuất
hiện của các phần tử trên trang và tạo các
hiệu ứng đặc biệt
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 6 of 20

7. Những cach thức thay đôi kiêu cua
́ ̉ ̉ ̉
trang web
 Kiểu nội tuyến(Inline style )
 Thông tin về kiểu được sử dụng nội tuyến(inline).
 Bạn có thể nhúng vào trong thẻ của một phần tử HTML.
 Thuộc tính STYLE áp dụng style sheet tới từng phần tử riêng lẻ.
 Sử dụng thuộc tính Style, bạn có thể bỏ qua Style Element và đưa
phần khai báo vào các thẻ bắt đầu.
<H2 style="color: green; font-family: Arial"> </H2>
 Viết Script
 Dùng kiểu đối tượng (Uses Style Object)
 Kiểu đối tượng hỗ trợ cho mọi đặt tính của CSS( pStyle Object
supports every property of CSS)
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 7 of 20

8. Lợi ich cua bang kiêu “Style sheet”
́ ̉ ̉ ̉
 Nạp chồng trình duyệt(Override the browser )
 Bố trí trang(Page layout )
 Bảng kiểu có thể sử dụng lại (Style sheets
can be re-used )
 Chỉ cần một lần thật tốt(One time effort )
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 8 of 20

9. Thuât ngữ bang kiêu
̣ ̉ ̉
 Qui tắc Kiểu(Style Rule)
 Bảng kiểu(Style Sheet )
 Tập hợp các qui tắc(Rules )
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 9 of 20

10. Cac bộ chon (Selectors)
́ ̣
 Bộ chọn(selector) là một chuỗi ký tự để nhận ra phần
tử mà quy tắc áp dụng cho. Có hai kiểu selector cơ
bản:
 Bộ chọn đơn(Simple selectors)
 Bộ chọn phần tử HTML (HTML element
selectors)
 Bộ chọn Class (Class selectors)
 Bộ chọnID (ID selectors)
 Bộ chọn ngữ cảnh (Contextual selector)
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 10 of 20

11. Bộ chon đơn
̣
 Một selector đơn giản mô tả một phần tử bất
kể vị trí của nó trong cấu trúc tài liệu. Từ
định danh cho tựa đề H1 là một selector đơn
giản
H1 { color: blue }
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 11 of 20

12. Bộ chon HTML
̣
 Selector loại này sử dụng tên của các phần tử
HTML.
 Sự khác biệt duy nhất là bạn loại bỏ dấu
ngoặc nhọn. Vì vậy thẻ HTML <P> trở thành
P.
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 12 of 20

13. Bộ chon Class
̣
 Những selector này sử dụng thuộc tính CLASS của các phần tử
HTML.
 Chúng ta có thể gán bộ nhận dạng lớp cho nhiều phần tử
của một kiểu đơn khi ta muốn hiển thị các trạng thái
khác nhau so với dạng chuẩn.
 Bộ chọn CLASS có dấu chấm (.) đứng trước gọi là ký tự
cờ, theo sau là tên lớp do chúng ta chọn
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 13 of 20

14. Bộ chon ID
̣
 Bộ chọn ID sử dụng thuộc tính ID của phần
tử HTML.
 Bộ chọn ID được dùng để áp dụng một kiểu
vào riêng một phần tử nào đó trên trang Web
 Bộ chọn ID được bắt đầu bằng dấu thăng
(#).
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 14 of 20

15. Bộ chon ngữ canh
̣ ̉
 Bộ chọn theo ngữ cảnh chỉ đến ngữ cảnh của
phần tử.
 Điều này dựa trên khái niệm kế thừa, phần tử
con kế thừa kiểu được gán cho thẻ cha.
 Một ví dụ điển hình là phần tử <BODY>. Khi
thêm một phần tử vào thẻ <BODY>, thì mỗi
phần tử bên trong sẽ kế thừa các kiểu của
<BODY>.
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 15 of 20

16. Cac cach kêt hợp bang kiêu vao trong
́ ́ ́ ̉ ̉ ̀
HTML
 Phần tử STYLE (STYLE element )
 Thuộc tính Style(Style Attribute )
 Phần tử Link(Link element )
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 16 of 20

17. Cac phân STYLE
́ ̀
 Bạn có thể nhúng thông tin kiểu cần thiết bên
trong tài liệu HTML..
 Sử dụng phần tử STYLE để nhúng thông tin.
 Phần tử STYLE được chèn vào trong phần tử
<HEAD> của một tài liệu cùng với tất cả các
quy tắc, được đặt giữa thẻ mở và thẻ đóng.
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 17 of 20

18. Thuôc tinh Style
̣ ́
 Thuộc tính STYLE được dùng cho những bảng
kiểu riêng lẽ của những phần tử.
 Việc dùng thuộc tính Style chúng ta có thể bỏ
qua kiểu phần tử và đặt khai báo trực tiếp
bên trong cá nhân của thẻ đó
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 18 of 20

19. Liên kêt cac bang kiêu
́ ́ ̉ ̉
 Bảng kiểu “Style sheet” được tạo ra như các tài liệu
và được liên kết đến tài liệu được yêu cầu.
 Phần tử liên kết được dùng để bao gồm một tham
chiếu đến một bảng kiểu “style sheet” được yêu cầu.
<LINK REL = stylesheet
HREF = “stylesmine.css"
Type = "text/css">
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 19 of 20

20. Cac thuôc tinh trong bang kiêu
́ ̣ ́ ̉ ̉
Attribute CSS name
Font properties font
font-size
font-style
Text properties text-align
text-indent
vertical-align
Box properties border
border-width
border-bottom
border-color
Positioning properties clip
height
left
top
z-index
Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 20 of 20