1 | P a g e

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC NÔNG NGHIỆP HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN



BÁO CÁO BÀI TẬP LỚN


Đề tài:
“Tìm hiểu về CSS3”

Môn:
Cơ sở, kĩ thuật và các ứng dụng của XML




Giáo viên hướng dẫn: Nguyễn Văn Hoàng

Sinh viên thực hiện: Nguyễn Minh Phương 543745
Nguyễn Thị Huê 543242

2 | P a g e




Mục lục:

I. Gii thiu:
i. Nhng mu thit k "cp" bng CSS3
ii. S hình thành và quá trình phát trin ca CSS:

II. Ni dung:
i. n ca CSS3

1. Mt S c V Cách Vit CSS
2.  CSS
3. V t CSS
4. Background
1. Màu nn
2. nh nn
3. Lp li hình nh nn
4. Khóa nh nn
5. Thuc tính background rút gn
5. Font Ch
1. Thuc tính Font-Family
2. Thuc tính Font-style
3. Thuc tính Font-variant
4. Thuc tính Font-size
5. Thuc tính text- transform
6. Text
1. Màu ch
2. Thuc tính text-indent
3. Thuc tính text-align

4. Thuc tính letter-spacing
5. Thuc tính text decoration
3 | P a g e

6. Thuc tính text transform
7. Pseudo-classes For Links
8. Class & ID
1. Nhóm các phn t Class
2. Nhóm các phn t ID
9. Span & Div
1. Nhóm phn t vi th <span>
2. Nhóm khi phn t vi th <div>
10. Box model
11. Margin & Padding
1. Thuc tính Margin
2. Thuc tính Padding
12. Border
1. Thuc tính Border-Width
2. Thuc tính Border-color
3. Thuc tính Border-style
4. Thuc tính Border rút gn
13. Height & Width
1. Thuc tính Width
2. Thuc tính max-width
3. Thuc tính min-width
4. Thuc tính height
5. Thuc tính max-height
6. Thuc tính max-height
14. Float & Clear
Thuc tính Float

Thuc tính Clear
15. Position
1. Abosolute position
2. Relative position
16. Layers
17. Web standard

ii. a CSS3 so vi CSS
1. Mô-
2. ng vin
1. ng vin có góc tròn
4 | P a g e

2. Gradients
3. Box shadow
4. Border images
3. Hiu n
1. Text Show
2. Word wrapping
3. Web font
4. Giao dii dùng
1. c
2. c Box
3. Out line
5. To multiple columns vi CSS3
6. Hình nn
1. c hình nn
2. S dng nhiu hình nn
7. Fonts
8. 


III. Ph lc  Tài liu tham kho:

5 | P a g e

I. Giới thiệu

I. Những mẫu thiết kế "cực đẹp" bằng CSS3

1. ng h CSS3 vi jQuery

2. ng h Analogue

3. Khi l dng các phím 
6 | P a g e


4. Nhiu khi l


5. p m
7 | P a g e



8 | P a g e





9 | P a g e





10 | P a g e





 Nhng hình nh rt thú v c làm bng CSS3. Vy gi chúng ta
s tìm hiu CSS3 là gì nhé?

II. Sự hình thành và quá trình phát triển của CSS:

Khi th gii web mng dùng các th 
dàn trang. Vim chia trang web thành các b
add text, add nh, kiu ch, màu s web ngày càng
phát trii ta nhn thy vic dàn trang bng các bng ngày càng tr
nên bt tin. Khng mã HTML ln cùng vim soát
các vùng ni dung trên trang web (theo tôi bit) là nhng lý do khin HTML
ngày càng tht th. Nu bn vào các website chuyên nghip cc ngoài
11 | P a g e

bn s vic dàn trang ca h hoàn toàn bng các th DIV ca CSS mà không
dùng các th HTML, nt ít.

Công ngh  cu tiên b

a W3C (Wide Web Consortium) CSS (t vit tt ca Cascading
Style Sheet tm dch là bng kiu xp chng) là mt ngôn ng i
thit k web có th add kiu vào tài liu font ch, màu sc,
khong cách vv ). Bn có th to ra kiu mt l dùng li
nhiu ln trong các tài liu web tip theo. Ví d  nu bn mun hin th
mt bc nh trong web vng vin bc nh là
ng k lin thì bn có th t kiu, gi d
n mun các khung 
kiy thì bn ch vic gi kiu mà b s
dng li ln na. C th  i ki



 CSS3 là thế hệ tiếp theo của CSS, CSS3 có đầy đủ đặc điểm của CSS và
ngoài ra có thêm đặc điểm ưu việt hơn CSS.



















12 | P a g e

II. Nội dung

 vc xây dng, chúng ta có trang trí ni thc
thm m - p, chúng ta có k thut make-c thit
k  là mnh ca
c t nh (smile). Còn CSS (Cascading Style
Sheets mà Pearl tm dch là t mu theo Style Sheets) là mt ngôn ng quy
nh cách trình bày cho các tài liu vit bng HTML, XHTML, XML, SVG, hay


 








CSS (Cascading Style Sheetsc hiu m
chúng ta thêm các kiu hin th (font chc, màu sc ) cho mt
tài liu Web.
Các đặc điểm cơ bản của CSS3
1. Một Số Quy Ước Về Cách Viết CSS
Cú pháp CSS:

n:
Selector { property:value; }
13 | P a g e


Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính
trình bày. Nó là các tag HTML, class hay id
Ví d
Trong CSS ngoài vit tên selector theo tên tag, class, id. Chúng ta còn có th
vit tên selector theo phân c ch các nh  trong #entry,
chúng ta vit selector là #entry img, như vậy thì các thuộc tính chỉ định
sẽ chỉ áp dụng riêng cho các ảnh nằm trong #entry.
Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ:
background-color, font-family, color, padding, margin,…
Mi thuc tính CSS phc gán mt giá tr. Nu có nhit thuc
tính cho mt selector thì chúng ta phi dùng mt du ; (chm ph
phân cách các thuc tính. Tt c các thuc tính trong mt selector s c
t trong mt cp ngoc nhn sau selector.
Ví d: body { background:#FFF; color:#FF0000; font-size:14pt }
Value: Giá trị của thuộc tính. Ví dụ: như ví dụ trên value chính là
#FFF dùng để định màu trắng cho nền trang.
i vi mt giá tr có khong trng, bt tt c trong mt du ngoc
kép. Ví d: font-family:”Times New Roman”.
i vi các giá tr  t mt khong cách gia s 
v ca nó. Ví d: width:100 px. Nó s làm CSS ca bn b vô
hiu trên Mozilla/Firefox hay Netscape.
Chú thích trong CSS:
u ngôn ng web khác. Trong CSS, chúng ta 
th vi d dàng tìm, sa cha trong
nhng ln cp nht sau.

c vii dung chú thích */
Ví dụ:
/* Màu ch cho trang web */
body {
color:red
}






14 | P a g e

2. Đơn vị CSS:
Trong CSS h tr các lo   
thng  âm thanh và màu sc. Tuy nhiên, s dng ph bin
nht v u dài và màu sng li
v chiu dài và màu sc dùng trong CSS.

Đơn vị chiều dài

Mô t
%
Ph
in
Inch (1 inch = 2.54 cm)
cm
Centimeter
mm

Millimeter
em
c font
hin hành, nu font hin hành có
kích c 
m rt hu ích trong vic
hin th trang web.
ex
1 ex bng chiu cao ca ch x in
ng ca font hi
 này không nhng ph
thuc trên kích c font ch mà
còn ph thuc loi font ch vì
cùng 1 c u cao
ch x ca font Times và font
Tohama là khác nhau.
pt
Point (1 pt = 1/72 inch)
pc
Pica (1 pc = 12 pt)

m nh trên màn hình
máy tính)

Đơn vị màu sắc
Đơn vị
Mô tả
Color-name
Tên màu ting Anh. Ví d: black,
white, red, green, blue, cyan,


RGB (r,g,b)
Màu RGB vi 3 giá tr R, G, B có tr t 0
 255 kt hp vi nhau to ra vô s
15 | P a g e

màu.
RGB (%r,%g,%b)
Màu RGB vi 3 giá tr R, G, B có tr t 0
 100% kt hp.
Hexadecimal RGB
Mã màu RGB dng h thp lc. Ví
d: #FFFFFF: tr
#FF00F 
3. Vị trí đặt CSS:
 nhúng CSS vào trong mt tài liu
HTML
Cách 1: Ni tuyn (kiu thuc tính)
y nh nhúng CSS vào mt
tài liu HTML bng cách nhúng vào tng th HTML mun áp dng.
ng hp này chúng ta s không cn selector trong
cú pháp.
 ví d sau chúng ta s tinh nn màu trng cho trang và màu
ch 
<html>
<head>
<title>Ví d</title>
</head>
-


</body>
</html>

Cách 2: Bên trong (th style)
Tht ra nu nhìn k  là m
cách thay th cách th nht bng cách rút tt c các thuc tính CSS vào
trong th  tin cho công tác bo trì, sa cha y mà).
 làm trang web có màu nn trn ch xanh lá,
chúng ta s th hi
<html>
<head>
<title>Ví d</title>

body { background-color:#FFF }
p { color:#00FF00 }
16 | P a g e

</style>
</head>
<body>

</body>
</html>

Cách 3: Bên ngoài (liên kt vi mt file CSS bên ngoài)
  t tt c các mã CSS trong
th style chúng ta s t file CSS (có phn m
rng .css) bên ngoài và liên kt nó vào trang web bng thuc tính href
trong th link.
c khuyc bit hu ích cho ving b

hay bo trì mt website ln s dng cùng mt kiu mu. Các ví d trong
c trình bày theo kiu này.
u tiên chúng ta s to ra mt file vidu.html có n
<html>
<head>
<title>Ví d</title>
<
</head>
<body>

</body>
</html>
o mt file style.css vi ni dung:
body {
background-color:#FFF
}
p {
color:#00FF00
}
t 2 file này vào cùng mc, m file vidu.html trong
trình duyt ca bn và xem thành qu.
 n
Save as type là All Files. Có th chn Encoding là UTF-8, nu bn
chú thích CSS bng ting Vit.
17 | P a g e

4. Background
Trong phc gii thiu v nh màu nn/nh nn cho
m thunh vu chnh nh nn.
4.1 Màu nền (Thuộc tính background-color)

Thuc tính background-nh màu nn cho mt
thành phn trên trang web. Các giá tr mã màu ca background-
 
to nn trong sut.
Ví d  ch cho chúng ta bit cách s dng thuc tính
background- nh màu nn cho c trang web, các thành
phn h1, h2 l và cam.
body {
background-color:cyan
}

h1 {
background-color:red
}
h2 {
background-color:orange
}
4.2 Ảnh nền (thuộc tính background-image)
Vic s dng nh nng và
bt m chèn nh nn vào mt thành phn trên
trang web chúng ta s dng thuc tính background-image.
Bây gi chúng ta s cùng làm mt ví d minh ha  xem thuc
tính background-image s hong u tiên hãy tìm mt
tm nh mà bn thích,   ly tm nh logo ca blog
Pearl
 vi t logo này làm
nh n
18 | P a g e



body {
background-image:url(logo.png)
}
h1 {
background-color:red
}
h2 {
background-color:orange
}
p {
background-color: FDC689
}
y chúng ta s phi ch ng dn ca nh
trong cp ngoc 
4.3 Lặp lại ảnh nền(Thuộc tính background-repeat)
Nu s dng mt c quá nh  làm nn cho
mng lnh trình duyt s lp li
nh n ph kín không gian còn tha. Thuc tính
background-repeat cung cu khin giúp
kim soát trình trng lp li ca nh nn. Thuc tính này có 4 giá
tr:
repeat-x: Ch lp li 
19 | P a g e

repeat-y: Ch lp li c.
repeat: Lp li nh theo c  mc
nh.
no-repeat: Không lp li nh.
Ví d:
body {

background-image:url(logo.png);
background-repeat:no-repeat;
}
4.4 Khóa ảnh nền( thuộc tính Background-attachment)
Background-attachment là mt thuc tính cho phép bn
nh tính c nh ca nh nn so vi vi ni dung trang web.
Thuc tính này có 2 giá tr:
scroll: nh nn s cun cùng n
tr mnh.
fixed: C nh nh nn so vi ni dung trang web. Khi áp
dng giá tr này, nh nn s ng yên khi bn
trang web.
4.5 Định vị ảnh nền (thuộc tính background-position)
Theo mnh nh nc chèn s nm  góc trên, bên
trái màn hình.
Tuy nhiên vi thuc tính background-position bn s có
th t nh nn  bt c v trí nào (trong không gian ca thành
phn mà nó làm nn).
Background-position s dùng mt cp 2 giá tr  biu din ta
 t nh nn. Có khá nhiu kiu giá tr cho thuc tính
 
 c các v t bit

 Thuộc tính background rút gọn:
background:transparent url(logo.png) no-repeat fixed right bottom;







20 | P a g e

5. Font Chữ
5.1 Thuộc tính font-family
Để định màu chữ cho một thành phần nào đó trên trang
web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính
này là các giá trị màu CSS hỗ trợ.
Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một
trang web là đen, cho tiêu đề h1 màu xanh da trời, cho tiêu đề
h2 màu xanh lá chúng ta sẽ làm như:
body {
color:#000
}
h1 {
color:#0000FF
}
h2 {
color:#00FF00
}
5.2 Thuộc tính font-style
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng
thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị
thuộc tính này là các đơn vị đo cơ bản dùng trong CSS.
Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một
khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn
bản đối với các thành phần <p>:
p {
text-indent:30px
}

5.3 Thuộc tính font-variant
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn
bản cho các thành phần trong trang web.
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong
các trình soạn thảo văn bản thông dụng như MS Word, thuộc
tính này có tất cả 4 giá trị : left (canh trái – mặc định), right
(canh phải), center (canh giữa) và justify (canh đều).
Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành
phần h1, h2 và canh đều đối với thành phần <p>
h1, h2 {
text-align:right
}
21 | P a g e

p {
text-align:justify
}
5.4 Thuộc tính font-weight
Thuộc tính letter-spacing được dùng để định khoảng cách
giữa các ký tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành
phần h1, h2 là 7px và thành phần <p> là 5px chúng ta sẽ viết
CSS sau:
h1, h2 {
letter-spacing:7px
}
p { letter-spacing:5px }
5.5 Thuộc tính font-size
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch
chân (underline), gạch xiên (line-through), gạch đầu (overline),

và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink).
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành
phần h1, gạch đầu thành phần h2
h1 {
text-decoration:underline
}
h2 {
text-decoration:overline
}
5.6 Thuộc tính Text-transform
Text-transform là thuộc tính qui định chế độ in hoa hay in
thường của văn bản mà không phụ thuộc vào văn bản gốc trên
HTML.
Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa),
lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên
trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định).
Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1
là in hoa, h2 là in hoa đầu mỗi ký tự.
h1 {
text-transform:uppercase
}
h2 {
text-transform:capitalize
22 | P a g e

}

6. Text
nh dng và thêm vào các kinh dc bit cho phn ni
dung mt trang web là mt v quan trng cho bt c nhà thit k

 bài hc này chúng ta s c tìm hiu v các
thuc tính CSS v nh dn.
6.1 Màu chữ (thuộc tính color):
 nh màu ch cho mt thành ph
web chúng ta s dng thuc tính color. Giá tr ca thuc tính này
là các giá tr màu CSS h tr.
Ví d sau chúng ta s vi nh màu ch chung cho mt
 h1 màu xanh da tr h2
màu xanh lá chúng ta s 
body {
color:#000
}
h1 {
color:#0000FF
}
h2 {
color:#00FF00
}
6.2 Thuộc tính text-indent :
Thuc tính text-indent cung cp kh o ra khong
thn. Giá tr
thu n dùng trong CSS.
Trong ví d sau chúng ta s nh dng thu dòng mt khong
u tiên trong mi vi
các thành phn <p>
p {
text-indent:30px
}
6.3 Thuộc tính text-align :
Thuc tính text-align giúp bn thêm các canh ch

bn cho các thành phn trong trang web.
23 | P a g e

 a chn canh chn trong các
trình son thn thông dc tính này
có tt c 4 giá tr : left (canh trái  mnh), right (canh phi),
center (canh giu).
Trong ví d sau chúng ta s thc hin canh phi các thành phn
i vi thành phn <p>
h1, h2 {
text-align:right
}
p {
text-align:justify
}
6.4 Thuộc tính letter-spacing:
Thuc tính letter- nh khong cách gia
các ký t trong mn.
Munh khong cách gia các ký t trong thành phn h1,
h2 là 7px và thành phn <p> là 5px chúng ta s vit CSS sau:
h1, h2 {
letter-spacing:7px
}
p { letter-spacing:5px }
6.5 Thuộc tính text-decoration:
Thuc tính text-decoration giúp bn thêm các hiu ng gch
chân (underline), xiên (line-through), gu (overline), và mt
hiu c bin nháy (blink).
Ví d sau chúng ta s nh dng gch chân cho thành
phn h1, gu phn h2

h1 {
text-decoration:underline
}
h2 {
text-decoration:overline
}
6.6 Thuộc tính text-transform:
Text-transform là thunh ch  in hoa hay in
ng cn mà không ph thun gc trên
HTML.
24 | P a g e

Thuc tính này có tt c 4 giá tr: uppercase (in hoa),
ng), capitalize (in hoa  ký t u tiên trong
mi t) và none (không áp dng hiu ng  mnh).
Trong ví d  nh dng cho thành phn h1
là u mi ký t.
h1 {
text-transform:uppercase
}
h2 {
text-transform:capitalize
}

7. Pseudo-classes For Links
Mt thành phn rt quan trng trong mi website chính là liên kt.
ng ng, chúng ta hoàn toàn có
th áp dng các thunh dc  nh font
ch, gch chân, màu cht liên ka, CSS còn cung cp
mu khic bic gi là pseudo- classes. Pseudo-classes cho

phép bnh các hiu nh dng cho mng liên kt 
mt tr
chut lên liên kt (a:hover), khi liên k
liên kc kích hot   nhn chut (a:active). Vu
khin pseudo-classes cùng vi các thuc chc chn
s mang li rt nhing v trang trí liên kt cho trang web.
 tin hành mt s ví d  tìm hiu thêm v các
kh rang trí cho mt liên kt da trên pseudo-classes.
Ví dụ 1: Ví d này chúng ta s áp dng 4 màu sc khác nhau cho tng
trng thái liên kt: các liên kt
mouse over s    và các
liên kt có màu tím.
a:link {
color:#00FF00
}
a:hover {
color:#FF00FF
}
a:visited {
25 | P a g e

color:#FF0000
}
a:active { color:# 662D91 }
Ví dụ 2: To các hiu ng vi trình trng liên kt: các liên
 font 14px; liên kt mouse over có
  font 1.2em, hiu ng nhp nháy; liên k
 có màu xanh da trng gch chân; các liên
kt có màu tím và font dng small-caps.
a:link {

color:#00FF00;
font-size:14px
}

a:hover {
color:#FF00FF;
font-size:1.2em;
text-decoration:blink
}

a:visited {
color:#FF0000;
text-decoration:none
}

a:active {
color:# 662D91;
font-variant:small-caps
}
Ví dụ 3: Ví d o cho liên kt hiu ng màu sc ging ví d 2
 có thêm 1 s hiu ng: các lin kt s có khung vi
kích c font 14px; liên kt mouse over có nn light cyan; các liên k
n light yellow.
a {
border:1px solid #000;
font-size:14px
}