Bai giang thiet ke website v2

Mục lục
Mc lc 1
 Tng quan v các dch v trong mng Internet 4
1.1. Mng máy tính và lch s phát trin 4
1.2. Mô hình WWW (world wide web) và các dch v liên quan 4
1.2.1. Mô hình Client-Server và ng dng 4
1.2.2. Mô hình WWW 5
1.2.3. Các dch v liên quan 5
1.3. Phân bing 6
1.3.1.  6
ng 6
ng phát trin ca web 6
1.5. Các công c và công ngh thit k web 7
 Ngôn ng kch bn HTML 8
2.1. Tng quan v ngôn ng HTML 8
2.2. Gii thiu v b cc ca trang Web 8
2.2.1. B cc chun ca mt trang tài liu HTML 8
2.2.2. Các thành phn trên trang Web 10
2.3. Mt s th n 11
2.3.1. Các th nm trong th Head 11
2.3.2. Các th nm trong body 11
o bng 14
u khin trên Form 16
2.6. HTML5 17
2.6.1. Gii thiu v HTML5 17
2.6.2. Các th mi trong HTML5 18
 S dng HTML và CSS trong thit k Website 22
3.1. Gii thiu CSS 22
 CSS 22
3.1.2. Vai trò ca CSS và ng dng 22
3.1.3. Cú pháp CSS 22

3.1.4. Th div và s k tha trong thit k web vi CSS 30
3.2. Các thuc tính trong CSS 34
3.2.1. Tìm hiu thuc tính CSS Font và Text 34
3.2.2. Thuc tính liên kt trong CSS 34
3.2.3. Thuc tính border và background trong CSS 35
3.2.4. Tìm hiu thuc tính padding và margin 36
3.2.5. Tìm hiu danh sách và thuc tính display trong css 37
3.2.6. Tìm hiu thuc tính float và clear 37
3.2.7. Tìm hiu thuc tính position 39
3.3. Thit k website vi HTML và CSS 41
3.3.1. Thit k b cc 41
3.3.2. Gii thiu k thut CSS Sprite 47
3.3.3. K thut tô màu trong layout 48
 kch bn JAVASCRIPT 50
4.1. Tng quan v ngôn ng kch bn JavaScript 50
4.1.1. Gii thiu ngôn ng JavaScript 50
4.1.2.  50
4.1.3. Bin và i ng 51
4.1.4. Các toán t 52
4.1.5. Hàm và gi hàm 53
4.1.6. Các hàm có sn 53
4.1.7. Các cu trúc lnh 53
4.1.8. n 55
4.2. Lp trình DOM và qun lý ca s s dng Javascript 69
4.2.1. Gii thiu mô hình DOM 69
4.2.2. DOM HTML 69
4.2.3. DOM CSS 72
4.2.4. DOM event 73
4.2.5. DOM notes 74
4.3. S dn JQuery trong web 74

4.3.1. Gii thiu v Jquery 74
4.3.2. n ca Jquery 76
4.3.3. Mt vài hàm API hay dùng 81

Chương 1. Tổng quan về các dịch vụ trong mạng Internet
1.1. Mạng máy tính và lịch sử phát triển
-               hông qua các


- 
 
 
 ng Internet
- 
1.2. Mô hình WWW (world wide web) và các dịch vụ liên quan
1.2.1. Mô hình Client-Server và ứng dụng
Mô hình client-server 



-



 / Server ng d    c gi là mô hình Web
Client/Server. Giao thc chuc s d giao tip gia Web Server và Web Client là
HTTP ( HyperTexl Transfer Protocol ).



ng dng Web 
1) Phía Client:



2) Phía Server:
 IIS,apache ) 
 



1.2.2. Mô hình WWW

          
nii dung Internet quan tâm nhiu nht hin nay Web là mt công c,hay
t dch v ca Internet. Web cha thông tin bao gn,


nh,âm thanh và thm chí c c kt hp vi nhau.Web cho phép chúng ta
chui vào mi ngóc ngách trên Internet.Nh có Web nên dù không phi là chuyên gia
mi có th s dng Internet mt cách d dàng.Phn m xem Web gi là
trình duyt (Browser).Mt s trình duyt ph bin hin nay là Internet Explorer ca
Microsoft tia Netcape

1.2.3. Các dịch vụ liên quan
- HTTP(Hyper Text Transfer Protocol), Email, Chat, FTP(File Transfer Protocol),


- n t (E-mail): Dch v E-mail có th  i thông tin gia các cá
nhân vi nhau,các cá nhân vi t chc và gia các t chc vi nhau.Dch v 


cho phép t ng gi ni dung thông tin ti ta ch hoc t ng gn tt c
a ch cn g a ch c (gọi là mailing list).Ni dung
thông tin gn t gm nhiu dng thông tin có th là d
bn,

   ng thông tin này có th hoà trn,kt hp vi nhau
thành mt tài liu phc tp.Li ích chính dch v n t là thông tin g
và r.
- Dch v truyn File (FTP-File Transfer Protocol):là dch v  i các tp
tin t máy ch xung máy trc li.
- Telnet: dch v này cho phép truy cp tt TelnetSite
tìm ki

 thy mt dch v 

m thông tin trong
. Telnet c bit quan trng trong vic kt ni thông
tin t các máy tính xung trung tâm.
1.3. Phân biệt trang web tĩnh, trang web động
1.3.1. Trang web tĩnh
Là  


web.
     


+ Ưu điểm của website tĩnh
- 
- 
- 
- 
+ Nhược điểm của website tĩnh
-  


1.3.2. Trang web động
               


+ Ưu điểm của website động
- 
- 

- 
+ Nhược điểm của website động

1.4. Xu hướng phát triển của web
- 

-  

- 


 


          

               
quan.
- 
 
 
 
 
1.5. Các công cụ và công nghệ thiết kế web
- :
 HTML (Hypertext Markup Language)
 Javascript
 Vbscript
 ASP (Active Server Pages), ASP.NET
 PHP
 
- :
 Notepad++
 Macromedia Dreamweaver
 PHPdesigner
 Eclipse
Chương 2. Ngôn ngữ kịch bản HTML
2.1. Tổng quan về ngôn ngữ HTML
HTML (ting Anh, vit tt cho HyperText Markup Language, tc là "Ngôn ng 
dn") là mt ngôn ng c thit k  t
là các mc trình bày trên World Wide Web.

Hình 2.1. Giới thiệu HTML
HTML không phi là mt ngôn ng lp trình, do chúng ch có cu trúc mã l

không có cu khin.
Tuy HTML không phi là ngôn ng l lt quan trng
trong các ngôn ng vit web (PHP, ASP, JSP). Vì nhng gì chúng ta nhìn thy (hình nh, kích
c, kiu ch, màu sc) và nhng gì chúng ta   u biu, khung tho u
c xây dng t HTML.
Các phiên bi

2.2. Giới thiệu về bố cục của trang Web
2.2.1. Bố cục chuẩn của một trang tài liệu HTML
<!DOCTYPE html>
<html>
<head>
<title> Demo Website </title>
</head>
<body>

</body>
</html>
- <!Doctype>: Phn khai báo chun ca html hay xhtml.
o Ví d:
 HTML5
 <!DOCTYPE html>
 HTML 4.01
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "
 XHTML 1.0
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " />transitional.dtd">
- <head></head>: Phu, khai báo v meta, title, css, javascri
 i lu v trang web, nó có th

 trang web, mô t v trang web, v tác gi trang web, v thi gian refresh
trang, v b gõ ting vit ca trang Nhng ni dung trên s c hin th
trên tình duyt ( ngoài ph - s c hin th phía trên ca ch
trang web).
- <body></body>: Phn cha ni dung cn th ni dung. Phn
thân ca trang web có th c b cc thành 3 ph
o Header: Là phu ca ni dung trang web (khác vi phu ca trang
web trong th    t logo web, tên web
site
o Body_main: Là phn thân ni dung trang web, nó là pht Menu chính,
menu ph ca trang web, các bài vit ca trang web, các liên kt khác
o Footer: Là phn chân ca n ghi
bn quyn trang web, tác gi trang web, thông tin liên h
Mt s u cn thn bng HTML:
- Nhiu du cách li có tác dng nht du cách. Phi s dng th 
th hin nhiu du giãn cách lin nhau.
-  xut d xung hàng thì phi s dng
th ng
- Có th vit tên th không phân bit ch ng và in hoa.
- Bng mã và tên gi trong HTML ca mt s ký t c bit

2.2.2. Các thành phần trên trang Web
- Th:
+ Cú pháp: <tên_th> Giá tr </tên_th>
 1 cp th gm th m và th 
 Th m và th  c
+ Th rng : <tên_th />
 Ch có th m mà không có th 
- Thuc tính: là cp giá tr t trong th m hoc th rng
+ Cú pháp: <tên_th tên_thu</tên_th>

- Chú ý:
+ Có nhi   xây dng trang Web tuy nhiên nên thit k theo chun.
W3.org là 1 chun, nu thit k theo chun thì s d dàng SEO trang Web lên
v trí Top.
 Ví d:
 <br> <br />
 <font color=red>  
Mc dù vn hin th kt qu tuy nhiên sai chun  Thit k Web theo chun
+ t tên th:
 Th trong HTML không phân bit ch hoa ch ng, tuy nhiên khi
ving nht hoc ch hoa hoc ch ng, không nên vit ln
 sai chun.
 Nhiu th HTML thì gây Web chm, tuy nhiên HTML làm cho Web

Chú thích: <! Dòng chú thích >
2.3. Một số thẻ HTML cơ bản
2.3.1. Các thẻ nằm trong thẻ Head
a. Th <Title>
+ Cu trúc <title> </title>
+ Ni dung bên trong th <title> s hin tr trên tab ca trình duyt và trong kt qu tìm kim.
M hay, sng có th kích thích s tò mò ci duyt web nhp chut vào
liên kn trang web
+ Chú ý khi s dng th <title>
- t t khóa vào phm bo c n
- T khóa càng quan trng càng phi nm  nhng v u tiên.
- C gng vit ni dung ca th 
- Ni dung th Title phn ni dung ca trang web.
- Không nhi nhét, s dng nhiu ln t khóa vào ni dung th Title.
- Không dùng nhiu ký t HOA và ký t c bit trong ni dung th Title.
- m b .

b. Th 
/>
+ Chú ý:
 Ni dung ca th META Description s c hu ht các công c tìm kim hin th bên
 trang web.
 Ni dung không nên quá dài (khong 25  30 t, khong 160 ký t)
 T khóa nên xut hin trong ni dung th không lp li quá nhiu ln.
 Gi Title, th c tùy bin cho mi trang và ph thuc
vào n khóa c
 Hãy làm cho ni dung này thc s cu i tìm kim góp phn làm
 l click vào trang (click-through rate)
c. Th <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
2.3.2. Các thẻ nằm trong body
HTML có rt nhiu thlà mt s th n:
- Th m Bold : <b>Hello HTML</b>
- Th in nghiêng Italic: <i>Hello HTML</i>
- Th gch chânUnderline: <u>Hello HTML</u>
- Th xung dòng: B gãy dòng hin ti, ni. Break: <br />
- Xem nn. <p> Ni dung </p> (1 th ng 2 th Br)
- h1, h2, h3, h4nh dng kiu ch. Ch c xunh d,
n
- Th nh dng màu sc, kiu chc và mt s thu<font

- Th hình 
+ Ví d:
 <i tu.edu.vn  
/>
 
- Th liên kt : <a href 
+ Ví d:

 www.ictu.edu.vn
 
- Danh sách trong html (html list)
Danh sách c chia làm 2 loi chính: theo trình t sp xp và không
theo trình t sp xp.


Danh sách không theo trình tự sắp xếp s dng th c trình bày trong ví
d minh ha sau:

Ngoài ra còn có mt s d
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
2.3.2.1. Disc bullets list:
 Apples
 Bananas
 Lemons
 Oranges
</ul>

<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>

</ul>
2.3.2.2. Circle bullets list:
o Apples
o Bananas
o Lemons
o Oranges

<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
2.3.2.3. Square bullets list:
 Apples
 Bananas
 Lemons
 Oranges


Danh sách theo trình tự sắp xếp s dng th <ol>, <li>

Ngoài ra, còn có mt vài dng khác ca danh sách theo trình t sp x
sau:
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>

<li>Oranges</li>
</ol>
2.3.2.4. Letters list:
A. Apples
B. Bananas
C. Lemons
D. Oranges

<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
2.3.2.5. Lowercase letters list:
a. Apples
b. Bananas
c. Lemons
d. Oranges

<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
2.3.2.6. Roman numbers list:
I. Apples

II. Bananas
III. Lemons
IV. Oranges

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
2.3.2.7. Lowercase Roman numbers list:
i. Apples
ii. Bananas
iii. Lemons
iv. Oranges


Danh sách định nghĩa (Definition Lists) là danh sách các items, mi 1 item s có 1 mô
t cho riêng nó.
Th nh danh sách, th nh danh sách các item trong list, và th
<dd> mô t 



Sinh viên nghiên cu, tìm hiu thêm các th nh dng, th list trên trang web

2.4. Phương pháp tạo bảng
- To vùng cha bng: <table> </table>
- To hàng <tr> </tr>

- To ct <td></td>
- T <th> </th>
- Ví d 1: S dng các th to bng hãy to bng sau
A
B
C
D
Code:

<tr>
<td> A </td>
<td> B </td>
</tr>
<tr>
<td> C </td>
<td> D</td>
</tr>
</table>
- Ví d 2: S dng các th to bng hãy to bng sau:
STT
H và Tên
Lp
1
A
1
2
B
2

- To bng khuyt c

- Ví d 3:
A
B
C
<html>
<head><title>Demo Table</title></head>
<body>
<table border='1' width='200'>
<tr>
<td colspan='2'>A</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
- To bng khuy
- Ví d 4:


<html>
<head><title>Demo Table</title></head>
A
B
C
<body>
<table border='1' width='200'>
<tr>

<td rowspan='2'>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
</body>
</html>
u thêm các th table theo link

2.5. Form và các điều khiển trên Form
- To form: Cú pháp:  </form>
+ ng sau khi n nút x lý, d liu s c gi ti trang theo hai
c POST/GET
 POST: gi d liu
 GET: nhn d liu
- Các loi input
+ 
 Txtname là tên ca textbox
+ 
+ GT Nam
+ GT2 N
 Chú ý: tên ca radio phi ging nhau
+ 
+ 
+ 
- 
+ Khung d lic tính theo hàng và theo ct là chiu rng,
hàng là chiu dài.

- To 1 list danh sách ta cn có nhiu s la chn 


</select>
2.6. HTML5
2.6.1. Giới thiệu về HTML5
HTML 5 là mt phiên bn mi cc bit tp trung
vào nhng mong mun và nhu cu ca các nhà phát trin ng dng web. Nó cho phép các nhà
phát trin thc hin nhii trong nhu mà h to ra, ví d có rt nhiu
chc  mi, các yu t kt cu mc ci thin nhm h tr cho âm
thanh và video.
       c phát trin bi World Wide Web
Consortium. Rt nhiu nhà phát trit vng vi nhng ci tin trong ngôn ng HTML
 xut, nhiu ý kin cho thy h t liên kt vi các nhu cu ca web hin
i và phát trin ng dng. Mt nhóm mi có tên WHATWG (Web Hypertext Application
Technology Working Group) nm quyn phát trin ngôn ng t tên nó là các chi
tit k thut ca HTML 5.
HTML5 to ra s tri nghii dùng hp dc thit k bng
HTML5 có th cung cp mt tri nghim gii các ng dng c bàn.
p phát trin nhiu nn tng nâng cao bng cách kt hp kh a
các API vi s có mt  khp ma trình duyt. Khi s dng HTML5, các nhà phát
trin có th cung cp mt tri nghim ng dng hii, trôi chy qua các nn tng.
Khi nói t dng phép tc ký cho s i mi liên tc. Các
th mc mi, và mt framework phát trin chung da trên s ng ln
nhau ci tác ca nó, CSS3 và JavaScript. Đây là cốt lõi của hiện tượng xử
lý ứng dụng lấy máy khách làm trung tâm.
Ngoài các vic trin khai các k thuc ca công ngh HTML5 cho
 bàn, có th trin khai thc hin HTML5 trong nhiu trình duyn thoi di
 mt th ng kin s ph
bin ca các h n thoi chy Palm.

HTML5 cung cp:
- Các th mô t chính xác nhc thit k.
- ng kh n thông trên mng.
- Ci thin kh  chung.
- Các trình làm vic trên n chy các quá trình nn.
- Giao di thit lp kt ni liên tc gia các ng d
ch.
- Truy vn d li t
- Ci thin t n
- H tr  qun lý giao di h
có th ng ni dung.
- Ci thin x lý biu mu trình duyt.
- M d liu da trên- cc b, phía máy khách
-   ha và video mà không ct các plug-in ca bên
th ba.
- c t nh v toàn cu), s dng kh nh v ca máy
n tho kt hp các dch v và các ng dng.
- Các biu mu ci tin làm gim nhu cu phi ti v mã JavaScript, cho phép truyn
thông hiu qu a các thit b ng và các máy ch 
2.6.2. Các thẻ mới trong HTML5
2.6.2.1. Thẻ canvas
- Th  hin th  ha, vic v  ha do javascript thc hin.
- Cú pháp: <canvas id="tên canvas" width=" chiu rng" height=" chiu cao"
ng vin;"> </canvas>
- Ví d:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
</canvas>
- o các ví d v canvas trên trang web

- m:
o Có th nh d .jpg
o Rt thích hp xây d ha
2.6.2.2. Thẻ Drag and Drop
Tìm hiu trên trang web
2.6.2.3. Thẻ Video
- Th video nh mt video, chng hn phim hoc mng video.
- Cú pháp: <video src="" controls="controls">Dòng thông báo</video>
o n text nm bên trong <video> và </video> s hin th khi trình duyt
không h tr tag <video>
o ng dùng kèm v hin th c nhiu n
- Ví d:
 ng dn ti file video" controls="controls">Trình duy  
không h tr tag video.</video>
Hin th nhiu ni dung vi tag <source>
<video controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Do trình duyt h tr nh dng file video khác nhau, nên cách dùng trên có th
chy video cho nhiu trình duyt và h u hành khác nhau.
- Các thuc tính:

2.6.2.4. Thẻ audio
- Th ng audio khác.
- Cú pháp:  ng dn ti file audio" controls="controls">Dòng thông
báo</audio>
- ng dùng kèm v hin th c nhiu n
- Ví d:
<audio src="nhac.mp3" controls="controls">Trình duyt s dng không h tr tag

audio.</audio>
Hin th nhiu ni dung vi tag <source>
<audio controls="controls">
<source src="nhac.mp3" type="audio/mp3">
<source src="nhac.ogg" type="audio/ogg">
</audio>
Do các trình duyt h tr nh dng file audio khác nhau, nên cách dùng trên có th
chy video cho nhiu trình duyt và h u hành khác nhau.
- Các thuc tính:

2.6.2.5. Thẻ input mới trong HTML5
- Input Type: color
o Ví d: <form action="demo_form.asp">
Select your favorite color: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
- Input Type: date
o Ví d: Birthday: <input type="date" name="bday">
- Input Type: datetime
o Ví d: Birthday (date and time): <input type="datetime" name="bdaytime">
- Input Type: datetime-local
o Ví d: Birthday (date and time): <input type="datetime-local"
name="bdaytime">
- Input Type: email
o Ví d: E-mail: <input type="email" name="email">
- Input Type: month
o Ví d: Birthday (month and year): <input type="month" name="bdaymonth">
- Input Type: number
o Ví d: Quantity (between 1 and 5): <input type="number" name="quantity"
min="1" max="5">

- Input Type: range
o Ví d: <input type="range" name="points" min="1" max="10">
- Input Type: search
o Ví d: Search Google: <input type="search" name="googlesearch">
- Input Type: tel
o Ví d: Telephone: <input type="tel" name="usrtel">
- Input Type: time
o Ví d: Select a time: <input type="time" name="usr_time">
- Input Type: url
o Ví d: Add your homepage: <input type="url" name="homepage">
- Input Type: week
o Ví d: Select a week: <input type="week" name="week_year">
2.6.2.6. Phần tử mới của Form trong HTML5
- Th t danh sách tùy chn, c s dng cùng vi các thành
phn <input /> nhnh giá tr các thành phn <input /> có th  
<select> - <option>).
o S dng thu cho bit thành phn <input /> nào
n <datalist>.
o Ví d:
<form action="# " method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

- Th    nh mt c ng khóa chính s dng cho <form>. Khi
 ti client, và các khóa
c gn máy ch.
o Ví d:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
o Thuc tính:

- Th  i din cho kt qu ca phép tính (gi  c thc hin bi
script). c s dng kèm v nhp giá tr.
- Ví d:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
Chương 3. Sử dụng HTML và CSS trong thiết kế Website
3.1. Giới thiệu CSS
3.1.1. Định nghĩa về CSS
nh) cách các thành phn html s c hin th trên các trình
duyt. Style cho các thành ph to ra file .css mt ln ri
s dng nhiu ln trong các tài liu web khác.
3.1.2. Vai trò của CSS và ứng dụng
i quyc mt v ln, khi các th  <font> và các thuc
u ny sinh v cho các nhà phát trin web.
Khi phát trin m rng các website các th <font> và thuc thêm vào trong
mu n tin trình x  gii quyt

v o ra CSS. Bu t HTML 4.0 tt c
nh dng có th c tách ra kht file .CSS riêng bit. Ngày nay
tt c các trình duyu h tr css.
Ví d:



-  4 ct n thì phi làm th nào?
- Nu 100 c thì s ng 100 th font. Web càng nhiu th HTML thì trang Web
càng chm vì phi biên dch quá nhiu th HTML. Vì lí do này mà bt buc chúng ta
phi s d can thip.
Công vic và vai trò ca CSS
- CSS tnh dng mà i thit k mong mun trên 1 trang WEB
- Ví d td chia ct trong bng, thêm d li ta ch cn vit
+ Td {color:red} mà không phi vi font na
3.1.3. Cú pháp CSS
Cú pháp CSS:

Selector { property:value; }

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: body, h2, p, img, #title, #content, .username,
+ Property: Chính là các thunh cách trình bày. Ví d: background-color, font-

A
B
C
D
Chú ý: 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ì 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 t trong mt cp ngoc nhn sau selector.
Chú thích trong CSS:
u ngôn ng  vit chú thích
 d dàng tìm, sa cha trong nhng ln cp nht sau. Chú thích trong
c vii dung chú thích */
Ví d:
/* Màu ch cho trang web */
body {
color:red
}
3.1.3.1. Các cách nhúng CSS vào tài liệu HTML
- Nhúng CSS vào thẻ HTML (Inline style sheet)
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. Tng hp này chúng ta s không cn
selector trong cú pháp.
u mun áp dng nhiu thuc tính cho nhiu th HTML khác nhau thì không
nên dùng cách này.
Ví d: Thit lp nn màu trng cho trang web và ch màu 
<html>
<head>
<title>Ví d</title>
</head>
-
^ Xin chào^_^</p>
</body>
</html>
- Nhúng CSS vào trang web (Embedding style sheet)
ây ch là m 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).
Ví d: Thit lp nn màu trng cho trang web và ch  :

<html>
<head>
<title>Ví d</title>

body { background-color:#FFF }
p { color:#00FF00 }
</style>
</head>
<body>
<p>^_^ Xin chào ^_^</p>
</body>
</html>
- Liên kết CSS với trang web (External style sheet)
 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 bài ging c trình bày theo
cách này.
Abc.css
/>
3.1.3.2. Các dạng bộ chọn trong CSS
- B chn là tên phn t HTML
+ B{font-style:italic;}
+ body {
background:#FFF;
bolor:#FF0000;
font-size:14pt
}
+ h1, h2, h3 {

color:#0000FF;
text-transform:uppercase;
}
- B chn class
+ Class
.ten{
Color:red;
}

- B chn ID
#ten{
Color:blue;
}

Chú ý:
+  ng có cùng thuc tính, do tính ch
c s dng nhiu ln.
-  nhn dng mt.
t tên class và id vi ký t u là ch s, nó s không làm vic
cho Firefox
- Các b chn kt hp
[tag cha] [tag con] [tag cháu] { thuc tính: giá tr; }
Cu trúc này không bt buc, tuy nhiên cu trúc này s thun tin trong viu chnh các
thành ph nh th t 
ul li { display: inline; }
Bộ chọn
Ví dụ
Mô tả
*
*

Chọn tất cả các thành phần html.
tag
p
Chọn tất cả các thành phần cùng loại.
tag01 tag02
div p
Chọn tất cả thành phần <tag02> bên trong thành phần
<tag01>.
tag01,tag02
div,p
Chọn tất cả thành phần <tag01> và <tag02>.
tag01+tag02
div+p
Chọn tất cả thành phần <tag02> được đặt kế và sau thành
phần <tag01>.
tag01>tag02
div>p
Chọn tất cả thành phần <tag02> có thành phần cha là
<tag01>.
.class
.className
Chọn tất cả các thành phần có cùng tên class.
#id
#idName
Chọn tất cả các thành phần có cùng tên id.
:active
a:active
Chọn các liên kết được kích hoạt.
:after
p:after

Thêm nội dung ngay phía sau thành phần.
:before
p:before
Thêm nội dung ngay phía trước thành phần.
:first-child
p:first-child
Chọn thành phần đầu tiên của thành phần cha chứa nó.
:first-letter
p:first-letter
Chọn ký tự đầu tiên của một thành phần.
:first-line
p:first-line
Chọn dòng đầu tiên của một thành phần.
:focus
input:focus
Thành phần sẽ focus khi được chọn.
:hover
a:hover
Chọn các liên kết được hover (di chuyển chuột lên thành
phần).
:lang(mã ngôn
ngữ)
p:lang(vi)
Chọn thành phần với thuộc tính ngôn ngữ có giá trị bắt đầu với
"mã ngôn ngữ".
:link
a:link
Định dạng cho tất cả liên kết khi chưa được click.
:visited
a:visited

Định dạng cho các thành phần đã được click.
[Thuộc tính]
[target]
Chọn tất cả các thành phần có cùng thuộc tính (attribute).
[Thuộc
tính|=ngôn
ngữ]
[lang|=vi]
Được sử dụng để chọn tất cả các thành phần với thuộc tính có
giá trị = "ngôn ngữ".
[Thuộc
tính~=giá trị]
[title~=myWeb]
Chọn tất cả các thành phần với thuộc tính chứa một giá trị.