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:

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


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


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.

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.

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,

</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

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
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;
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),

 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

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

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
}

Trích đoạn Hiệu ứng cho văn bản 1 Text Shadow Sử dụng nhiều hình nền (Multiple Backgrounds)

---