L3 CSS

Bi 3.
Cascading Style Sheets
Vin CNTT&TT - HBKHN
Mc ch
Quan st s thay i hnh thc trang Web khi thay i template Template trong Joomla gm:
template_css th mc v JavaScript, Picture cc file css khc, file index.php,
Mc ch
Cung cp cho Sinh vin nhng kin thc v CSS
Thc hin vic chi phi hnh thc trang Web mc cao hn To ra s nht qut v thng nht trong b cc v trnh by trang Web
Ni dung
1. Gii thiu v Cascading Style Sheet (CSS) 2. L do s dng CSS 3. Phn loi Style 4. Cch chn mt Style 5. Cu trc mt Style 6. Cc style c bn v nng cao 7. Trc nghim
4
1.Gii thiu v Cascading Style Sheet (CSS)

Cascading Style Sheet hay cn gi tt l Style Mu quy nh cch thc th hin cc th HTML Ban u HMTL
Tp cc quy tc cho php NSD xem cc trang Web Khng h tr nh thit k c nhiu quyn chi phi thit k => Cc trnh duyt b sung thm cc th HTML ring, khng theo chun
W3C (World Wide Web Consortium) ra i CSS cho php h tr nh thit k

5
2. L do s dng CSS
Style tit kim thi gian CSS d thay i S nht qun Kh nng chi phi a dng To ra nh dng chung cho ton b Web Nhc im?
3. Phn loi CSS

C 4 loi Style
Browser default External Style Sheet Internal Style Sheet Inline Style
Tng dn
u tin?
4. Cch chn mt Style

Vi Inline style:
<tn_th style=tt1:gt1;tt2:gt2;>
V d <b style=color:blue>Vn bn ny in m v mu xanh</b> <b><font color=blue>Vn bn ny in m v mu xanh </font></b> Style c li ch khng?

8
4. Cch chn mt Style

Style thng c a vo trong th <div> hoc th <span> Th <div>: cha nh dng khi Th <span>: c dng bn trong khi
4. Cch chn mt Style

Vi Internal style:
<style type=text/css> <!-Ni dung nh ngha style
--> </style>
Thit lp cc Style trong hai th <head> v </head> Cp th  nhm che giu Style khi cc Browser khng h tr chng
10
4. Cch chn mt Style

Vi External style:
nh ngha style trong file ring (thng c ui .CSS) Nhng file CSS nh ngha vo trang web gia hai th <head> v </head>:
<link href=a_ch_file" rel="stylesheet" type="text/css">
11
4. Cch chn mt Style

Vai tr ca tng loi Inline Style: u
Phng php d dng nht b sung thuc tnh vo th. D dng qun l style theo tng tag C u tin cao nht Nhc Khai bo cho tng tag th cng, kh cp nht
12
4. Cch chn mt Style

Internal Style u
L tng cho vic p dng trong nhng ti liu ring l
Nhc
Cn phi khai bo li style cho ti liu khc trong mi ln s dng
13
4. Cch chn mt Style

External Style u
ng nht cho mi trang Web theo cng mt nh dng Thng tin style c trnh duyt lu vo cache Mi s thay i ca mu style ngoi, cc trang Web s cp nht thay i theo
Nhc
Tn thi gian ti file .css v bin dch trnh duyt cho ln u s dng. File .css hng s nh hng n ton b website
14
5. Cu trc mt Style
Ch : Style phn bit ch hoa, ch thng ghi ch trong style s dng:
/*
on ghi ch
*/
15
5. Cu trc mt Style
selector{ Property1:Value1; Propertyn:Valuen; } Trong
Selector: mt th gc HTML hay nh ngha ca Style Sau du : khng c khong trng Cc Property ngn cch bi du ;
16
5.1. Style p dng cho th c th

Trng hp 1 th: selector l tn_th
p { color: red; }
Khai bo ng thi nhiu th: Vit danh sch tn th phn cch bi du phy
h1,h2,h3,h4,h5,h6{
font-family:arial;
}
17
5.1. Style p dng cho th c th

D liu b tc ng bi cc th <P> v <H1> c cn nhng thuc tnh ca th gc? => Cc th HTML gi li (k tha) cc thuc tnh ban u ca mnh
iu g xy ra khi trong nh ngha loi b thuc tnh ca th gc?

18
5.2. Style p dng cho lp

Gn vi th c th: selector l tn_th.tn_lp
p.loai1{
color:red;
} p.loai2{
color:blue;
Khng gn vi th c th: b phn tn_th i, gi li du chm:

.loai3{
color:green;
19
5.2. Style p dng cho lp

t thuc tnh class ca th = tn_lp:
<tn_th class=tn_lp>
V d:
<p class=loai1>on ny mu </p> <h1 class=loai2>Style khng c hiu lc</h1> <h2 class=loai3>Tiu mu xanh</h2>
20
5.3. Style kiu nh danh (id)

Tng t nh class. Thay du chm (.) thnh du thng (#). Cho th c th: tn_th#nh_danh{} Tng qut: #nh_danh{}
21

V d:
p#id1{
color:red;
} #id2{
color:blue;
22

Mi id ch xut hin mt ln trn trang t thuc tnh id ca th = nh_danh
<tn_th id=nh_danh>
V d:
<p id=id1>on ny mu </p> <h1 id=id2>Tiu mu xanh</h1>
23
5.4. Style p dng cho lp con

V d
b i{background-color:yellow;} b,i{color:blue;}
ngha
Vi du khi c c 2 th (lp) thuc tnh mi c p dng Vi du , thuc tnh c p dng cho c 2 th (lp)
24
5.4. Style p dng cho lp con

V d <b>Doan nay mau blue</b> <b><i>Doan nay mau vang </i></b> <i>Doan nay mau blue</i>
25
Basic CSSs
1. 2. 3. 4. 5. 6. 7. CSS Background CSS Text CSS Font CSS Border CSS Margin CSS Padding CSS List
26
Advanced CSSs
1. 2. 3. 4. 5. 6. CSS Dimension CSS Classification CSS Positioning CSS Pseudo-class CSS Pseudo-element CSS Media Types
27
6.0. Mt s quy c v cch vit CSS

n v chiu di
n v % In cm mm pc px pt em Phn trm Inch (1 inch = 2.54 cm) Centimeter Millimeter Pica (1 pc = 12 pt) Pixels (im nh trn mn hnh my tnh) Point (1 pt = 1/72 inch) 1 em tng ng kch thc font hin hnh, nu font hin hnh c kch c 14px th 1 em = 14 px. y l mt n v rt hu ch
28
M t
6.0. Mt s quy c v cch vit CSS

n v mu sc
n v Color-name M t Tn mu. V d: black, white, red, green, blue, cyan, magenta,
RGB (r,g,b)
RGB(%r,%g,%b) Hexadecimal RGB
Mu RGB vi 3 gi tr R, G, B c tr t 0 255 kt hp vi nhau to ra v s mu.

Mu RGB vi 3 gi tr R, G, B c tr t 0 100% kt hp. M mu RGB dng h thp lc. V d: #FFFF: trng, #000: en,
29
6.1. CSS Background

Thuc tnh Background cho php thit lp mu nn, nh nn, lp nh
30
6.1. CSS Background
31
6.1. CSS Background
32
6.1. CSS Background

background-color Thng p dng cho th: body v cc th hin th d liu: DIV, P, H1 t mu nn C th c xc nh bng 3 cch
name : tn mu nh "red" RGB: gi tr RGB nh "rgb(255,0,0)" Hex: gi tr hexa ca mu nh "#ff0000
V d
body{background-color: red;} h1{background-color:#645eff;}
33
6.1. CSS Background
34
6.1. CSS Background

background-image Thc hin
Thng s dng chn mt nh nn BODY Cn nh, xc nh v tr nh v cho php lp nh hay khng
V d
body{background-image:url('tree.png'); background-repeat:no-repeat; background-position:top right; background-attachment:fixed; margin-right:300px; }
35
6.1. CSS Background
36
6.2. CSS Text
37
6.2. CSS Text
38
6.2. CSS Text

direction Cc hng
ltr: left to right. Ch hin th t bn tri sang phi rtl: right to left. Ch hin th t bn phi sang tri
V d
<style type="text/css"> div.ex1 {direction:rtl} </style>

39
6.2. CSS Text
40
6.2. CSS Text

letter-spacing Tng/gim khong cch gia cc k t so vi trng thi thng thng (normal)
Gi tr c th l s dng hoc m
V d
<style type="text/css"> h1 {letter-spacing:2px} h2 {letter-spacing:-3px} </style>
41
6.2. CSS Text
42
6.2. CSS Text

text-align Cn ni dung vn bn theo chiu ngang: left, center, right, justify V d <style type="text/css"> h1 {text-align:center} h2 {text-align:left} h3 {text-align:right} </style>
43
6.2. CSS Text
44
6.3. CSS Font
45
6.3. CSS Font
46
6.3. CSS Font
47
6.3. CSS Font
48
6.3. CSS Font

font-family Cc kiu font
Sans-serif: Arial, Verdana Serif: Times New Roman, Georgia

49
6.3. CSS Font

font-family
Lit k cc font s dng Ngn cch nhau bi du ;
V d <style type="text/css"> p{font-family:"Times New Roman",Georgia,Serif} </style>

50
6.3. CSS Font
51
6.3. CSS Font

font-size t kch thc cho vn bn. Mc nh kch thc thng thng l 16px V d h1 {font-size:40px} h2 {font-size:30px} p {font-size:14px}
52
6.3. CSS Font
53
Bi tp
Bn hy vit on m CSS trnh by style nh m t di y:
Mu nn cho c trang: #99CC66 Font ch: Arial Tiu ca bng: ch in nghing, mu ch l mu xanh, mu nn l #CCCCFF
54
M hnh hp
CSS lm vic trn m hnh nh dng trc quan cung cp trong cc c t CSS. M hnh ny tr gip nh ngh cch thc trnh duyt x l cy ti liu
M hnh trc quan cung cp ngha cho mi phn t

trong cy sinh ra mt hp. N cn c tham
chiu nh l m hnh hp.
55
M hnh hp (cont)
56
M hnh hp (cont)
57
6.4. CSS Border
58
6.4. CSS Border
59
60
6.4. CSS Border
61
6.4. CSS Border
62
63
6.4. CSS Border
64
6.4. CSS Border

Cho php xc nh mu v kiu (style) trong ng vin ca cc thnh phn border-style C th xc nh t 1 n 4 kiu V d border-style:dotted solid double dashed; border-style:dotted solid double; border-style:dotted solid; border-style:dotted;
65
6.4. CSS Border
66
6.4. CSS Border

border-color C th xc nh t 1 n 4 mu, ging style Phi i km vi border-style V d border-color:red green blue pink; border-color:red green blue; border-color:red green; border-color:red;
67
6.4. CSS Border
68
6.4. CSS Border

border-width C th xc nh t 1 n 4 gi tr, ging color Phi i km vi border-style V d border-width:thin medium thick 10px; border-width:thin medium thick; border-width:thin medium; border-width:thin;
69
6.4. CSS Border
70
6.5. CSS Margin
71
6.5. CSS Margin

margin C th xc nh t 1 n 4 gi tr, ging vi CSS border V d margin:25px 50px 75px 100px; margin:25px 50px 75px; margin:25px 50px; margin:25px;
72
6.5. CSS Margin
73
6.6. CSS khc

CSS Padding: thit lp khong cch gia ni dung v ng vin CSS List: thit lp v tr, kiu, nh ca mi thnh phn trong danh sch CSS Table: thit lp cch hin th bng nh khong cch gia cc , ch thch
74
7. Trc nghim
Ngun: w3schools.com File ..\Quiz.doc
75
Bi tp
Sa li CSS cho ph hp
Bi tp
Hon thin CSS
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>CT 310 Final, Question 2 - Style 1</title> <link href="./final09q2style1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contents"> <div id="John"> John </div> <div id="Paul"> Paul </div> <div id="George"> George </div> <div id="Ringo"> Ringo </div> </div> </body> </html>
Bi tp
Bi tp: Xy dng cc layout sau

1
79
Bi tp: Xy dng cc layout sau

3 4
80
Cu hi
81

L3 CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

L3 CSS

Uploaded by

Copyright:

Available Formats

Bi 3.

Cascading Style Sheets

Vin CNTT&TT - HBKHN

1.Gii thiu v Cascading Style Sheet (CSS)

W3C (World Wide Web Consortium) ra i CSS cho php h tr nh thit k

3. Phn loi CSS

4. Cch chn mt Style

V d <b style=color:blue>Vn bn ny in m v mu xanh</b> <b><font color=blue>Vn bn ny in m v mu xanh </font></b> Style c li ch khng?

4. Cch chn mt Style

4. Cch chn mt Style

4. Cch chn mt Style

4. Cch chn mt Style

4. Cch chn mt Style

4. Cch chn mt Style

5.1. Style p dng cho th c th

5.1. Style p dng cho th c th

iu g xy ra khi trong nh ngha loi b thuc tnh ca th gc?

5.2. Style p dng cho lp

Khng gn vi th c th: b phn tn_th i, gi li du chm:

5.2. Style p dng cho lp

5.3. Style kiu nh danh (id)

5.3. Style kiu nh danh (id)

5.3. Style kiu nh danh (id)

5.4. Style p dng cho lp con

5.4. Style p dng cho lp con

6.0. Mt s quy c v cch vit CSS

6.0. Mt s quy c v cch vit CSS

Mu RGB vi 3 gi tr R, G, B c tr t 0 255 kt hp vi nhau to ra v s mu.

6.1. CSS Background

6.1. CSS Background

6.1. CSS Background

6.1. CSS Background

6.1. CSS Background

6.1. CSS Background

6.1. CSS Background

6.2. CSS Text

6.2. CSS Text

6.2. CSS Text

<style type="text/css"> div.ex1 {direction:rtl} </style>

6.2. CSS Text

6.2. CSS Text

6.2. CSS Text

6.2. CSS Text

6.2. CSS Text

6.3. CSS Font

6.3. CSS Font

6.3. CSS Font

6.3. CSS Font

6.3. CSS Font

Sans-serif: Arial, Verdana Serif: Times New Roman, Georgia

6.3. CSS Font

V d <style type="text/css"> p{font-family:"Times New Roman",Georgia,Serif} </style>

6.3. CSS Font

6.3. CSS Font

6.3. CSS Font

M hnh trc quan cung cp ngha cho mi phn t

chiu nh l m hnh hp.

6.4. CSS Border

6.4. CSS Border

6.4. CSS Border

6.4. CSS Border

6.4. CSS Border

6.4. CSS Border