Bảng kiểu

Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 3 of 20 DHTML la 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

Trang 1

Style Sheets (Bang kiêu) ̉ ̉

Session 5

Trang 2

Web Page Programming with HTML,DHTML &

JavaScript/Session 5/ 2 of 20

Muc tiêu ba i hoc ̣ ̀ ̣

 Mô tả Dynamic HTML

 Dùng Bảng kiểu (Style Sheet)

Trang 3

DHTML la 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 tác các nguyên tố của CSS

Trang 4

DHTML la gi ?(2) ̀ ̀

 Netscape cũng sử dụng Bả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.

Trang 5

(DHTML)

 Những kiểu động(Dynamic Styles)

 Nội dung động(Dynamic Content)

 Định vị động(Positioning)

 Liên kết dữ liệu(Data binding )

 Font có thể tải được(Downloadable Fonts)

 Thực hiện Scripting

 Cấu trúc của đối tượng(Object Structure)

Trang 6

Sheets)

 Bảng kiểu là nơi mà chúng ta có thể quản lý và điều khiển các kiểu “style”

 Style sheet mô tả sự xuất hiện và trì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

Trang 7

 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

 Dùng kiểu đối tượng (Uses Style Object)

 Kiểu đối tượng hỗ trợ cho mọi đặt tính của CSS( pStyle Object

supports every property of CSS)

Trang 8

 Nạp chồng trình duyệt(Override the browser )

 Bố trí trang(Page layout )

 Bảng kiểu có thể sử dụng lại (Style sheets

can be re-used )

 Chỉ cần một lần thật tốt(One time effort )

Trang 9

Thuât ng bang kiêu ̣ ư ̃ ̉ ̉

 Qui tắc Kiểu(Style Rule)

 Bảng kiểu(Style Sheet )

 Tập hợp các qui tắc(Rules )

Trang 10

Ca c bô chon (Selectors) ́ ̣ ̣

 Bộ chọ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ộ chọn đơn(Simple selectors)

 Bộ chọn phần tử HTML (HTML element selectors)

 Bộ chọn Class (Class selectors)

 Bộ chọnID (ID selectors)

 Bộ chọn ngữ cảnh (Contextual selector)

Trang 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 }

Trang 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.

Trang 13

Bô chon Class ̣ ̣

HTML.

củ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.

cờ, theo sau là tên lớp do chúng ta chọn

Trang 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 (#)

Trang 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>.

Trang 16

trong HTML

 Phần tử STYLE (STYLE element )

 Thuộc tính Style(Style Attribute )

 Phần tử Link(Link element )

Trang 17

Ca c 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.

Trang 18

Thuôc ti nh Style ̣ ́

 Thuộc tính STYLE được dùng cho những bảng kiểu riêng lẽ của những phần tử

 Việc dùng thuộc tính Style chúng ta có thể bỏ qua kiểu phần tử và đặt khai báo trực tiếp bên trong cá nhân của thẻ đó

Trang 19

Liên kê t ca c bang kiêu ́ ́ ̉ ̉

 Bảng kiểu “Style sheet” được tạo ra như các tài liệu và được liên kết đến tài liệu được yêu cầu

 Phần tử liên kết được dùng để bao gồm một tham chiếu đến một bảng kiểu “style sheet” được yêu cầu

<LINK REL = stylesheet

HREF = “stylesmine.css"

Type = "text/css">

Trang 20

Ca c thuôc ti 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

Tiêu đề	Bảng kiểu
Thể loại	Bài giảng

Định dạng
Số trang	20
Dung lượng	153 KB