CSS – Casscading Style Sheets doc

Giới thiệu vê CSS Một số lợi ích khi sử dụng CSS - Độc lập thành phân nội dung với thành phân trình bày của một trang web = Viéc viét code cho trang web trở nên dễ dàng s Dễ dàng đ

Trang 1

Lập trình web Mil Chương 3

Style Sheets

Trang 3

Giới thiệu vê CSS

= CSS = Casscading Style Sheets

= Dung dé mé ta cach hién thi các thành phần trên trang

WEB

= Sử dụng tương tự như dạng TEMPLATE

= Co thé sử dung lai cho cac trang web khac

= Cé thé thay déi thudc tinh tleng trang hoac ca site

nhanh chong (cascading)

XẮ

Trang 4

a

THE GIỚI Thứ ba, 24/2/2009, 11:08 GIAT+; THE THAO Thur ba, 24/2/2009, 15:04 GMT

Triéu Tiên tuyên ba sap 1 Inter - MU, phep thử cho

liê shap Mourinhe

; hong vệ: tỉnh

21 1/92/2005

Quộc đầu với các nhà EIKVĐ châu Âu: tại vồng

1/8 hđớn nay là cœ hôi đê HLV người Bô Đào Nha “hứng tỏ ông đủ sức thực hiện sứ mạng

cao#©ä - xóa bỏ những ký ức đen tôi vé that bai

cud Inter tai Champions League nhiéu nam qua

Pw doan cua Lippi ve tran Inter - MU

ba tén lửa tự tao, trong khi giới qu

ra day có thê la vụ thử tên lửa tầm

> Tiêu Tiên doa chien tranh với

/

Arsenal - ait a, da bang niem tin

- Kigrai J H09 có :

Khéng’cé nhiéu lựa chon vì hiện Géu that thé tai giải quốc nồi,

a ASenaƒlẫn F\oma hiểu rằng Champions League có thế là cái

pháo cứựƒsinh duy nhất

Ap-£ẤÏ trước cuộc chiến ở lượt ổi vòng ague, au Inter tôi nay

Trang 5

Yahoo! Home My Yahoo! YI Vietnam b24 2009 Page Options ‘3

9 "Featured | Entertainment Sports Video 3 colo: OB i lì 3 s¿)

An | : = | Hi, Nguyen

Kộ Answers | Sad end to football career mãi Switch to narrow layout

“

ŒỒ Autos'”°2"2 | Northeasterr's Brian Mandeville was set 14 New | (®) 7

\ ' Want more ways to customize

@® Finance | to work out for NFL scouts before 2 Weather your home page?

recetving devastating news » story “<2 32°F OHẾ Try My Yahoo! »

¢ Véinners and Insers at the Combine

° Featured Entertainnert Sports Video i

đồ 360 ny go Hi, Nguyen

@ answers Sad end to football career a

@& Autos“ Northeaster's Brian Mandeville was set 14 New mm oor

J rs ant more ways % Qustomize

@ Finance to bas af for nl scouts before ĐA Weather our home page?

6a) Flickr receiving devastating news » Story ZED 32¢F Oh

Trang 6

- Ÿ tưởng của CSS: Tách rời phần nội dung khỏi phần

hiên thị của một trang web

Trang 7

Một số lợi ích khi sử dụng CSS

- Độc lập thành phân nội dung với thành phân trình bày

của một trang web

= Viéc viét code cho trang web trở nên dễ dàng

s Dễ dàng đề tạo nên sự thay đồi giao diện cho toàn bộ

cac trang web (site-wide changes)

= Viéc hién thi (download) trang web sé nhanh hon

= Dé dang cho phep người sử dụng customize thành

style mong muôn (style swichers)

\

Trang 9

Định nghĩa Style

Định nghĩa style - Kiểu 1

= Định nghĩa và sử dụng trực tiếp trong các thẻ HTML

Trong do: tag : the HTML

propertyl, property2, .: thudc tinh

value1, wa1ue2, ,.: giá trị của thuộc tính

\

Trang 10

color:blue;~ _”—

Đại học Khoa học Tự nhiên

Trang 11

phạm vi ảnh hưởng của style

— tê property1, y1, property property1 : thuoc | <tag/>

— value1, value2 : giá trị

\

Trang 12

Ble Et ow Hoy Bookmarks Tools Help cụ

nae ae x fy (L1 |file///D:/Docume Ÿÿ + ne G]-| Googie `

Trang 13

Định nghĩa Style

Định nghia Style — Ghi chu

= Gidng ghi chu trong C++

= Sw dung: /*Ghi chu */

= Ví dụ:

TieuDel

{

background-color: green; /*nén mau xanh */

color: yellow; /*cht mau vang */

\\ ay

SA Mio

Trang 15

Sử dụng và phân loại CSS

Sử dụng và Phân loại CSS — Phân loại

- Gồm 3 loại CSS

— lnline Style Sheet (Nhúng CSS vao tag HTML)

— Embedding Style Sheet (Nhung CSS vao trang web)

— External Style Sheet (Lién két CSS voi trang web)

Trang 16

Sử dụng và Phân loại CSS - Inline Style Sheet

= Định nghĩa style trong thuộc tính style của từng tag

Đại học Khoa học Tự nhiên

Trang 17

= Moi định nghĩa type nằm trong tag <style> của trang HTML

+ Định nghĩa style theo cú pháp kiểu 2

= Trang HTML co ndi dung như sau:

<head>

Style rules style rules

</style>

</head>

ở ƒ ` \

Trang 18

background-color:green; /*nén mau xanh */

</style>

</head>

<body>

<h1 class="TieuDel">Đại học Khoa học Tự nhiên </h1>

<hi class="TieuDe2">Dai học Khoa học Tự nhiên </h1>

Trang 19

Sử dụng và Phân loại CSS - External Style Sheet

= Moi style déu lưu trong file có phần mở rộng là *.CSS

s File CSS: lưu trữ nhiêu style theo cú pháp kiéu 2

= Trong file HTML: lién két bang tag link Cu pháp:

Trang 20

<htm]l>.L

<head>

@import url ("mystyle.css") ;+

Trang 21

- Dễ dàng quan ly Style theo

tung tag cua tai liệu web

- Dễ dàng quản ly Style theo

từng tài liệu web

- Không cần tải thêm các

trang thông tin khác cho style

« Có thể thiết lập Style cho nhiều tài liệu web

° Thông tin các Style được

trình duyệt cache lại

- Cần phải Khai báo lại

thông tin style trong từng tài

liệu Web và các tài liệu khác

một cách thủ công

° Khó cập nhật style * Can phải khai báo lại thông

tin style cho các tài liệu khác

trong mỗi lân sử dụng - Tến thời gian download file

“.css và làm chậm quá trình

biên dịch web ở trình duyệt

trong lần đầu sử dụng

Trang 22

<hi class="TieuDel" style="background-color:red;">1

Đại học Khoa học Tự nhiên | Màu nào đây 2

Trang 23

Trang 24

Sử dụng và Phân loại CSS — Độ ưu tiên

= Thu tu ưu tiên áp dung dinh dang khi su dung cac loại CSS (độ ưu tiên giảm dân) :

1 Inline Style Sheet

2 Embedding Style Sheet (Internal Style Sheet)

3 External Style Sheet

4 Browser Default

Trang 25

I:1 ap trinh ua Thiet ke web 1y thuyettanh Vu8

LẾ 1Lap trnh và Thiet k|x | Ý? XL (5oog:

14 </font> |

20 </font> | 36</font>

<div style="font-sizc:14px'"> Font Size =

Inline or Embedding ? </div>

Trang 27

Selector trong CSS và phạm vi ảnh hưởng

Trang 28

selector trong CSS - Element (1)

cả các thẻ tag_name

propertyl: valuel ; property2: value2 ;

— tag_name: tén cac the HTML

Trang 29

Selector trong CSS - Element

Trang 30

S6 (N6 la nh

— >_—,

oye I@ I1Lap trinh va Thiet kim “+ | A | Google

wW d# ‘(AM \Lap tinh va Thiet ke we = lì - E) - wee

Dai hoc Khoa hoc tu nhien

Khoa come nghe theme tin

Trang 31

} báo giá trị cho thuộc tinh id

— id: gia trị id của một thẻ muốn cua the

ap dung style — Gia tri cla id thuong duy nhat

background-color:green; -

Trang 32

selector trong CSS - ID rules

File Edit View History |Bookmdats Tools Help

This is a text inside h2 tag

Trang 33

try Gy * 'Ê tu tính v8 Thiet k=) #g | XX| |G-agle

we cay BxiLan trinh va Thiet ke we fp x : =) x

Truong Dai hoc Khoa hoe tu olen

=Ị Team |

= KHusa cong nghe hong bin

Chul

T St Cong nghe phan mem

He thong thong tin

F </style>

i </head> Bur ie 1 My Computer io, >

=] <hogy> „ ——

<> Rudo ln li ng Í.i81⁄ yf pie 5

L </hnny>

` + he 12]

Trang 34

Selector trong CSS - Class rules

.class name{ — Sflye sẽ được áp dụng trên

Trang 35

selector trong CSS — Class rules

a w @ ÍẤẾ Lao trh và Thiết ke ve tì r Bì -: m+ `

‘mong Dai hoc Khoa hoc ti shien

L] ty) Dae ie vy Congader % 100% +

<p ¿3="18001"> Truong Dai học Khoa hoc tu nhien </p>

ahi | = Se Merry tingitte 1 |, "[+EaerangT Bea fhits

<p (class= weryimportant >This is the first paragraph.</ p>

Trang 36

Trang 37

Selector trong CSS - Kết hợp Element và Class

tag name class name( — Style sé duoc ap dung cho

cac thé co tén la tag_name

propertyl: valuel; eee _

đông thời giá trị của thuộc

Trang 38

Selector trong CSS — Két hop Element va Class

Trang 39

- Style sé duoc ap dụng nêu

nội dung nam trong các thẻ lông nhau theo đúng thứ tự

Trang 40

hil| b| {background-color: yellow}

Trang 41

Trang 42

<h1>Text 1<p>Text 2<b>Text 3</b></p></h1>x+L

</body>

</html><

Trang 43

selector trong CSS - Contextual Selection - phức tạp

Trang 44

= Dinh dang dua vao trang thai cua liên kết, sự kiện chuột

s Có thê kết hợp với Selector khác

<html>

<head> J

a:link {CcÒlor: #EEUUU0I /* unvisited link */J Ee

; T File Edit View History Bookmarks

w3schools ® Mozilla Firefox i ¬id=b =

</a> File Edit View History Bookmarks

Trang 45

<head> + This is header;1

hi:hover {color: #FFOOFF} /* mouse over */

hi:active {color: #0000FF} /* selected_*/ 1

</style> bere Sot

Trang 46

selector trong CSS — Pseudo Element

- Định dạng cho ký tự đâu tiên, cho

dòng văn bản đâu tiên

fe} PriontvlS5_ 201) fe] 7 ect hi

Trang 47

| Te FIRST WORDS OF AN ARTICLE

Trang 48

Selector trong CSS — Pseudo Element

dim Pion SS eth a} Ted btn

Ì EEEEEEECECLCrttrrttEECƠ the Econormst

Ll _ NT ieee 1011151111111 ee ata hee ee eee neti 11111151 111111150215 511172

2 r ch ERMDANS E222 227712 222271122552 T123 nan nang nang ng

14 SHasaa ae peer A Ca 0 020010 13A A1 3221 1322041142222411772222420072

15 _ fegựw words of an article in the Economist —

1ứ XEĐŸ 022222111122 0011 2722 tron thư nh Hư tế nen

Trang 49

lồng trong một thẻ cha nào đó

Định dạng được áp dụng dựa vào trạng thái của các Element (Không xuất hiện

#test {color: green;}

/* ND của bắt kỳ tag có thuộc tính id=test đều bị

định dạng màu chữ=xanh lá */

-note {color: yellow;}

/* ND của bắt kỳ tag có thuộc tính class=note đều

bị định dạng màu chữ=vàng”/

h1.note {text-decoration: underline;}

/ ND của các thẻ <h1> có thuộc tính class=note đêu bị định dạng gạch chân */

h1,h2,h3 {background-color: orange;}

/* ND của các thẻ <h1> <h2> <h3> đều bị định

dạng màu nền = mau cam */

p strong {color: purple;}

/* ND của các thẻ <strong> nam trong thé <p> đều

bị định dạng màu chữ=màu tía */

Ve |

Trang 50

Firefox Add-ons: Web Developer

s Công cụ sử dụng đề xem các thông tin của một trang

Tiêu đề	CSS – Cascading Style Sheets
Tác giả	Lightmoon9
Trường học	Unknown University
Chuyên ngành	Web Programming
Thể loại	Lecture notes
Năm xuất bản	Unknown Year
Thành phố	Unknown City

Định dạng
Số trang	51
Dung lượng	7,73 MB