Session 05 Final

Style Sheets (Bang kiêu)

Session 5

Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 2 of 20

Muc tiêu bai hoc

Mô ta Dynamic HTML

Dung Bang kiêu (Style Sheet)


DHTML la gi?(1) “HTML động” có thê được định nghĩa như la một

phần mềm được sử dung cho việc mô ta sự kết hợp giữa HTML, các bang kiêu (stylesheet) va ngôn ngữ script lam cho tai liệu trở nên sinh động.

Kha năng viết được kịch ban (script) cho phép đưa thêm các tính năng sinh động cho trang Web.

Microsoft va Netscape có những cách tiếp cận khác nhau đê thực thi DHTML. Microsoft tập trung vao việc sử dung kiêu mẫu tầng (Cascading Style Sheets hay CSS). Các đoạn code kịch ban được sử dung đê tương tác các nguyên tố của CSS.


DHTML la gi?(2) Netscape cũng sử dụng Bang 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.


Những tính năng của 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ê tai được(Downloadable Fonts) Thực hiện Scripting Câu truc của đối tượng(Object Structure)


Giơi thiệu về Bang kiêu (Style Sheets)

Bang kiêu la nơi ma chung ta có thê quan ly va điều khiên các kiêu “style”

Style sheet mô ta sự xuât hiện va trinh diễn của một tai liệu HTML như khi nó được biêu diễn trên man hinh, thậm chí la khi in.

Bạn cũng có thê chỉ chính xác vị trí va sự xuât hiện của các phần tử trên trang va tạo các hiệu ứng đặc biệt


Những cách thức thay đôi kiêu của trang web

Kiêu nội tuyến(Inline style ) Thông tin về kiêu được sử dung nội tuyến(inline). Bạn có thê nhung vao trong thẻ của một phần tử HTML. Thuộc tính STYLE áp dung style sheet tơi từng phần tử

riêng lẻ. Sử dung thuộc tính Style, bạn có thê bỏ qua Style Element

va đưa phần khai báo vao các thẻ bắt đầu.

<H2 style="color: green; font-family: Arial"> </H2>

Viết Script

Dung kiêu đối tượng (Uses Style Object)

Kiêu đối tượng hô trợ cho moi đặt tính của CSS( pStyle

Object supports every property of CSS)


Lợi ích của bang kiêu “Style sheet” Nạp chông trinh duyệt(Override the

browser ) Bố trí trang(Page layout ) Bang kiêu có thê sử dung lại (Style

sheets can be re-used ) Chỉ cần một lần thật tốt(One time

effort )


Thuật ngữ bang kiêu

Qui tắc Kiêu(Style Rule) Bang kiêu(Style Sheet ) Tập hợp các qui tắc(Rules )


Các bộ chon (Selectors) Bộ chon(selector) la một chuôi ky tự đê nhận

ra phần tử ma quy tắc áp dung cho. Có hai

kiêu selector cơ ban: Bộ chon đơn(Simple selectors)

Bộ chon phần tử HTML (HTML element

selectors) Bộ chon Class (Class selectors) Bộ chonID (ID selectors)

Bộ chon ngữ canh (Contextual selector)


Bộ chon đơn

Một selector đơn gian mô ta một phần

tử bât kê vị trí của nó trong câu truc tai

liệu. Từ định danh cho tựa đề H1 la một

selector đơn gian

H1 { color: blue }


Bộ chon HTML

Selector loại nay sử dung tên của các

phần tử HTML.

Sự khác biệt duy nhât la bạn loại bỏ dâu

ngoặc nhon. Vi vậy thẻ HTML <P> trở

thanh P.


Bộ chon Class Những selector nay sử dung thuộc tính CLASS của các

phần tử HTML.

Chung ta có thể gán bộ nhận dạng lớp cho nhiều

phần tử cua 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 chung ta chọn


Bộ chon ID

Bộ chon ID sử dung thuộc tính ID của phần

tử HTML.

Bộ chon ID được dung đê áp dung một kiêu

vao riêng một phần tử nao đó trên trang

Web

Bộ chon ID được bắt đầu bằng dâu thăng

(#).


Bộ chon ngữ canh Bộ chon theo ngữ canh chỉ đến ngữ

canh của phần tử. Điều nay 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í du điên hinh la phần tử <BODY>. Khi thêm một phần tử vao thẻ <BODY>, thi môi phần tử bên trong sẽ kế thừa các kiêu của <BODY>.


Các cách 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 )


Các phần STYLE Bạn có thê nhung thông tin kiêu cần thiết

bên trong tai liệu HTML..

Sử dung phần tử STYLE đê nhung thông tin.

Phần tử STYLE được chèn vao trong phần

tử <HEAD> của một tai liệu cung vơi tât ca

các quy tắc, được đặt giữa thẻ mở va thẻ

đóng.


Thuộc tính Style

Thuộc tính STYLE được dung cho những

bang kiêu riêng lẽ của những phần tử.

Việc dung thuộc tính Style chung ta có

thê bỏ qua kiêu phần tử va đặt khai báo

trực tiếp bên trong cá nhân của thẻ đó


Liên kết các bang kiêu Bang kiêu “Style sheet” được tạo ra như các

tai liệu va được liên kết đến tai liệu được yêu cầu.

Phần tử liên kết được dung đê bao gôm một tham chiếu đến một bang kiêu “style sheet” được yêu cầu.

<LINK REL = stylesheet

HREF = “stylesmine.css"

Type = "text/css">


Các thuộc tính 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

Session 05 Final

Technology

Transcript of Session 05 Final