Tài liệu học CSS docx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (380.54 KB, 25 trang )
Giới thiệu CSS
www.dohoavn. net |
Tài li u do killer s u t mệ ư ầ
Ph n các bài h c này s mang t i cho b n m t s ki n th c khác đ t o cho Website có thêmầ ọ ẽ ớ ạ ộ ố ế ứ ể ạ
m t phong cách hay m t ki u cách th ng nh t mà b n không ph i m t nhi u th i gian và côngộ ộ ể ố ấ ạ ả ấ ề ờ
s c đ ch nh s a trên nhi u trang Web c a b n.ứ ể ỉ ử ề ủ ạ
Kiến thức tiên quyết
Tr c khi t p trung nghiên c u v CSS b n c n n m v ng các ki n th c v :ướ ậ ứ ề ạ ầ ắ ữ ế ứ ề
WWW, HTML và các khái ni m c b n v xây d ng Website.ệ ơ ả ề ự
Thỏa thuận với người đọc
Đ cho b n không hi u l m m t s t ng chuyên môn, vì th chúng tôi s gi nguyên b n cácể ạ ể ầ ộ ố ừ ữ ế ẽ ữ ả
c m t thu t ng ti ng Anh(ụ ừ ậ ữ ế Ví d :ụ HTML, Style Sheet, Head, p, ) nh ng c m t này s cóữ ụ ừ ẽ
gi i thích ý nghĩa ngay khi b n đ c chúng l n đ u tiên trong tài li u này.ả ạ ọ ầ ầ ệ
CSS là gì?
• CSS thay th cho m t c m t ti ng Anh là "Cascading Style Sheet"ế ộ ụ ừ ế
• Styles đ nh nghĩa cách các thành ph n HTML hi n th nh th nào.ị ầ ể ị ư ế
• Các Styles thông th ng đ c l u tr trong m t Style Sheetsườ ượ ư ữ ộ
• Các Style đã đ c đã đ c thêm vào t công b HTML b n 4.0ượ ượ ừ ố ả
• Có ba cách chèn Style: 1.External Style Sheets 2.Internal Style Sheets và 3.Inline Style
nh ng gi i thích v các lo i này d i.ữ ả ề ạ ở ướ
• External Style Sheets có th ti t ki m đ c nhi u th i gian cho công vi c c a b n.ể ế ệ ượ ề ờ ệ ủ ạ
• External Style Sheets đ c l u trong nh ng t p có ph n m r ng là CSS.ượ ư ữ ệ ầ ở ộ
• Nhi u đ nh nghĩa Style trong m t t p thì đ c g i là Cascade(x p l p) Style Sheet.ề ị ộ ệ ượ ọ ế ớ
Mô phỏng CSS
V i CSS, văn b n HTML c a b n có th đ c hi n th v i r t nhi u ki u dáng khác nhau.ớ ả ủ ạ ể ượ ể ị ớ ấ ề ể
M i b n xem bài Các bài mô ph ng CSS.ờ ạ ỏ
Style giải quyết những vấn đề chung
Th HTML kh i đ u đ c thi t k đ đ nh nghĩa n i dung c a m t văn b n. Chúng đ c h trẻ ở ầ ượ ế ế ể ị ộ ủ ộ ả ượ ỗ ợ
đ mô t cho trinh duy t hi u và th hi n ý nghĩa nh "Đây là m t Dòng đ u trang", "Đây là m tể ả ệ ể ể ệ ư ộ ầ ộ
đo n", "Đây là m t b ng", b ng cách s d ng nh ng th nh <h1>, <p>,<table> v.v Vi cạ ộ ả ằ ử ụ ữ ẻ ư ệ
phác th o văn b n đ c h tr b i trình duy t mà không có b t c m t th đ nh d ng nào.ả ả ượ ỗ ợ ở ệ ấ ứ ộ ẻ ị ạ
V i hai trình duy t chính là Netscape và Internet Explorer ti p đ a thêm nh ng th HTML m i vàớ ệ ế ư ữ ẻ ớ
nh ng thu c tính(gi ng nh th <font> và các thu c tính gi ng nh màu s c) cho ch đ nh HTMLữ ộ ố ư ẻ ộ ố ư ắ ỉ ị
ban đ u thì vi c t o ra các Website càng khó khăn h n, n i mà n i dung c a văn b n HTMLầ ệ ạ ơ ơ ộ ủ ả
ngày càng phân chia đ i v i th hi n c a giao di n trang.ố ớ ể ệ ủ ệ
Đ gi i quy t v n đ này, W3C đã t o ra STYLES thêm vào HTML 4.0ể ả ế ấ ề ạ
C hai trình duy t Netscape 4.0 và IE 4.0 đ u h tr các CSS.ả ệ ề ỗ ợ
Style Sheet có thể tiết kiệm rất nhiều công sức làm việc của bạn
Các Style trong HTML 4.0 đ nh nghĩa các thành ph n HTML hi n th nh th nào, gi ng nhị ầ ể ị ư ế ố ư
thu c tính c a th font và color trong HTML 3.2. Các Style thông th ng đ c l u trong nh ngộ ủ ẻ ườ ượ ư ữ
file bên ngoài c a văn b n HTML. "External style sheets" hay Style Sheet Ngoài cho phép b nủ ả ạ
thay đ i dáng v bên ngoài c a các trang Web ch v i vi c so n th o m t t p CSS đ n l . N uổ ẻ ủ ỉ ớ ệ ạ ả ộ ệ ơ ẻ ế
nh b n th thay đ i phông ch và màu s c cho các dòng tiêu đ cho m t văn b n dài trongư ạ ử ổ ữ ắ ề ộ ả
trang Web c a b n, b n s hi u CSS có th ti t ki m công s c c a b n nh th nào. ủ ạ ạ ẽ ể ể ế ệ ứ ủ ạ ư ế
CSS là m t s i ch xuyên su t trong thi t k Web b i vì nó cho phép ng i phát tri n ki m soátộ ợ ỉ ố ế ế ở ườ ể ể
ki u cách và s s p đ t c a nhi u trang m t l n. Đ t o ra s thay đ i mang tính t ng th , đ nể ự ắ ặ ủ ề ộ ầ ể ạ ự ổ ổ ể ơ
gi n là b n ch c n thay đ i Style và t t c các thành ph n khác(mà nh n Style này) s t đ ngả ạ ỉ ầ ổ ấ ả ầ ậ ẽ ự ộ
c p nh t theo.ậ ậ
Nhiều Style có thể xếp lớp trong một
Style Sheet cho phép thông tin đ c xác đ nh theo r t nhi u cách. Các Style có th đ c xácượ ị ấ ề ể ượ
đ nh bên trong m t thành ph n HTML đ n, bên trong thành ph n <head> c a m t trang HTML,ị ộ ầ ơ ầ ủ ộ
ho c trong m t file CSS bên ngoài. Th m chí nhi u Style Sheet bên ngoài có th đ c thamặ ộ ậ ề ể ượ
chi u trong m t tài li u HTML đ n.ế ộ ệ ơ
Thứ tự xếp lớp
Style nào s đ c s d ng khi có h n m t style đ c ch đ nh cho m t thành ph n HTML? ẽ ượ ử ụ ơ ộ ượ ỉ ị ộ ầ
What style will be used when there is more than one style specified for an HTML element?
Thông th ng nói r ng chúng ta có th phát bi u là t t c các style s "x p ch ng" vào trongườ ằ ể ể ấ ả ẽ ế ồ
m t Style Sheet " o" m i b ng nh ng lu t sau, n i mà Style v trí th t có quy n u tiên caoộ ả ớ ẳ ữ ậ ơ ở ị ứ ư ề ư
nh t:ấ
1. Theo m c đ nh c a trình duy t.ặ ị ủ ệ
2. Style Sheet bên ngoài.
3. Style Sheet bên trong.(bên trong c p th <head>)ặ ẻ
4. Style n i tuy n.(bên trong các thành ph n HTML)ộ ế ầ
Vì th , m t Style n i tuy n có quy n u tiên là cao nh t, đi u đó có nghĩa là nó s trùm lên t tế ộ ộ ế ề ư ấ ề ẽ ấ
c các style đ c khai báo bên trong th <head>, trong m t Style Sheet bên ngoài và giá tr m cả ượ ẻ ộ ị ặ
đ nh c a Browser.ị ủ
Cú pháp CSS
Cú pháp
Cú pháp c a m t CSS đ c t o n n t ba ph n: m t "b ch n - selector", m t "thu c tính -ủ ộ ượ ạ ề ừ ầ ộ ộ ọ ộ ộ
property" và m t "giá tr - value":ộ ị
b tr n{thu c tính:giá tr }ộ ọ ộ ị
"b ch n" thông th ng là các ph n t /th HTML mà b n mu n ch đ nh, thu c tính là các tínhộ ọ ườ ầ ử ẻ ạ ố ỉ ị ộ
ch t mà b n mu n thay đ i, và m i thu c tính có th mang đ c m t giá tr . Thu c tính và giá trấ ạ ố ổ ỗ ộ ể ượ ộ ị ộ ị
đ c phân cách b i m t d u ":" và đ c bao b i m t d u móc nh n.ượ ở ộ ấ ượ ở ộ ấ ọ
Ví d :ụ
body{color:black}
thì:
• body: là "B ch n".ộ ọ
• color: là "thu c tính".ộ
• black: là "value"
N u giá tr có m t chu i các t liên ti p đ ch ra m t tên nào đó, ta ph i đ t chúng trong d uế ị ộ ỗ ừ ế ể ỉ ộ ả ặ ấ
nháy kép nh th này " ", ư ế Ví d :ụ
p {font-family: "sans serif " }
vì phông ch có tên là "sans serif" v b n ch t là có kho ng tr ng gi a t "sans" và "serif" vì thữ ề ả ấ ả ố ữ ừ ế
ph i đ c đ t trong nháy kép.ả ượ ặ
L u ýư : N u b n mu n ch đ nh nhi u h n m t thu c tính, b n ph i phân cách m i m t thu cế ạ ố ỉ ị ề ơ ộ ộ ạ ả ỗ ộ ộ
tính b ng m t d u ch m ph y. Ví d d i đây ch ra cách làm th nào đ đ nh nghĩa m t phânằ ộ ấ ấ ẩ ụ ướ ỉ ế ể ị ộ
đo n đ c căn gi a v i dòng ch có màu đạ ượ ữ ớ ữ ỏ
p {text-align:center;color:red}
Đ t o ra nh ng đ nh nghĩa v style d đ c h n, b n có th mô t m i thu c tính trên m t dòngể ạ ữ ị ề ễ ọ ơ ạ ể ả ỗ ộ ộ
gi ng nh sau:ố ư
p
{
text-align: center;
color: black;
font-family: arial
}
Nhóm các phần tử với nhau(Grouping)
B n có th nhóm các b ch n. Phân cách m i b ch n b ng m t d u ch m ph y. Trong ví dạ ể ộ ọ ỗ ộ ọ ằ ộ ấ ấ ẩ ụ
d i đây chúng ta nhóm t t c các thành ph n "Header". M i m t thành ph n header s có màuướ ấ ả ầ ỗ ộ ầ ẽ
xanh lá cây:
h1,h2,h3,h4,h5,h6
{
color: green
}
Bộ chọn Lớp(The class Selector)
V i m t "b ch n l p" b n có th đ nh nghĩa các style khác nhau cho cùng m t ki u thành ph nớ ộ ộ ọ ớ ạ ể ị ộ ể ầ
HTML. Đi u này nói nên r ng n u nh b n mu n có hai ki u c a phân đo n trong văn b n: m tề ằ ế ư ạ ố ể ủ ạ ả ộ
đo n căn ph i, m t đo n căn gi a. Đây là nh ng gì b n có th làm v i nh ng ki u đó:ạ ả ộ ạ ữ ữ ạ ể ớ ữ ể
p.right {text-align: right}
p.center {text-align: center}
B n ph i s d ng "thu c tính l p" trong văn b n HTML c a b n:ạ ả ử ụ ộ ớ ả ủ ạ
<p class="right">
Phan doan nay se can ben phai.
</p>
<p class="center">
Phân đo n này s căn gi a.ạ ẽ ữ
</p>
L u ýư : Ch m t thu c tính l p có th đ c ch đ nh trên m t thành ph n HTML! Ví d d iỉ ộ ộ ớ ể ượ ỉ ị ộ ầ ụ ướ
đây là sai(vì có 2 l p trên m t ph n t "p")ớ ộ ầ ử
<p class="right" class="center">
This is a paragraph.
</p>
B n có th cũng có th b qua tên th trong b tr n đ đ nh nghĩa m t style cái mà s đ c sạ ể ể ỏ ẻ ộ ọ ể ị ộ ẽ ượ ử
d ng b i t t c các thành ph n trong HTML mà có m t trong m t l p nào đó. Trong ví d phíaụ ở ấ ả ầ ặ ộ ớ ụ
d i, t t c các thành ph n HTML v i class="center" s đ c căn gi a:ướ ấ ả ầ ớ ẽ ượ ữ
.center {text-align: center}
Trong đo n mã phía d i thì thành ph n "h1" và thành ph n "p" có class="center". Đi u này cóạ ướ ầ ầ ề
nghĩa là c hai ph n t s tuân theo nh ng lu t trong b ch n ".center":ả ầ ử ẽ ữ ậ ộ ọ
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
Bộ chọn Mã(The id Selector)
B ch n mã thì khác v i b ch n l p. Trong khi m t b ch n l p có th ng d ng cho m t vàiộ ọ ớ ộ ọ ớ ộ ộ ọ ớ ể ứ ụ ộ
ph n t trong m t trang, thì m t b tr n mã luôn luôn áp d ng cho ch m t ph n tầ ử ộ ộ ộ ọ ụ ỉ ộ ầ ử
M t thu c tính ID(mã s ) ph i là duy nh t bên trong m t văn b nộ ộ ố ả ấ ộ ả
Lu t v style phía d i s t ng ng v i m t ph n t "p" mà có giá tr id là "para1":ậ ề ướ ẽ ươ ứ ớ ộ ầ ử ị
p#para1
{
text-align: center;
color: red
}
Lu t v style phía d i s t ng ng v i ph n t đ u tiên mà có giá tr id là "wer345":ậ ề ướ ẽ ươ ứ ớ ầ ử ầ ị
*#wer345 {color: green}
Lu t trên s t ng ng v i thành ph n h1 này:ậ ở ẽ ươ ứ ớ ầ
<h1 id="wer345">Some text</h1>
Lu t d i đây s t ng ng v i m t thành ph n p mà có giá tr id là "wer345":ậ ướ ẽ ươ ứ ớ ộ ầ ị
p#wer345 {color: green}
Lu t trên đây s không đáp ng v i thành ph n h2:ậ ẽ ứ ớ ầ
<h2 id="wer345">Some text</h2>
Lời chú thích trong CSS
B n có th chèn m t đo n chú thích đ gi i thích m c đích đo n mã c a b n, nó có th giúp g iạ ể ộ ạ ể ả ụ ạ ủ ạ ể ợ
nh l i cho b n sau nhi u ngày làm vi c. M t l i chú thích s không đ c trình duy t hi n th .ớ ạ ạ ề ệ ộ ờ ẽ ượ ệ ể ị
M t l i chú thích c a CSS b t đ u b ng d u "/*" và k t thúc b ng d u "*/", gi ng nh nh ngộ ờ ủ ắ ầ ằ ấ ế ằ ấ ố ư ữ
dòng ch màu đ th này:ữ ỏ ế
/* Đây là dòng chú thích */
p
{
text-align: center;
/* Đây là dòng chú thích khác */
color: black;
font-family: arial
}
CSS làm thế nào
Làm thế nào để chèn một Style Sheet
Khi m t trình duy t đ c m t style sheet, nó s đ nh d ng văn b n theo các quy đ nh có trongộ ệ ọ ộ ẽ ị ạ ả ị
Style Sheet đó. Có ba cách đ chèn m t Style Sheet:ể ộ
Style Sheet Ngoài
M t Style Sheet ngoài là lý t ng khi style đó đ c ng d ng cho nhi u trang. V i m t Styleộ ưở ượ ứ ụ ề ớ ộ
Sheet ngoài, b n có th thay đ i cách nhìn c a toàn b m t Website ch c n v i m t file thayạ ể ổ ủ ộ ộ ỉ ầ ớ ộ
đ i. M i trang mu n liên k t v i Style Sheet c n ph i s d ng th <link>. Th <link> đ ng bênổ ỗ ố ế ớ ầ ả ử ụ ẻ ẻ ứ
trong đo n <head> </head>:ạ
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Trình duy t s đ c ch đ nh v style t file "mystyle.css", và đ nh d ng văn b n theo file này.ệ ẽ ọ ỉ ị ề ừ ị ạ ả
M t Style Sheet Ngoài có th đ c vi t trong m t b so n th o văn b n nào đó. T p đó khôngộ ể ượ ế ộ ộ ạ ả ả ệ
đ c ch a các th html. Style Sheet c a b n nên đ c l u l i v i ph n m r ng làượ ứ ẻ ủ ạ ượ ư ạ ớ ầ ở ộ
"tên_file.css". M t ví d v m t t p Style Sheet đ c bi u di n phía d i:ộ ụ ề ộ ệ ượ ể ễ ướ
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
L u ýư : Đ ng đ kho ng tr ng gi a giá tr c a thu c tính và đ n v ! N u b n s d ng câuừ ể ả ố ữ ị ủ ộ ơ ị ế ạ ử ụ
l nh:ệ
"margin-left:10 px" thay vì "margin-left: 10px"
thì nó s ch làm vi c m t cách h p l trong trình duy t Internet Explorer 6 nh ng nó s khôngẽ ỉ ệ ộ ợ ệ ệ ư ẽ
làm vi c trong hai trình duy t Mozilla ho c Netscape. ệ ệ ặ
Style Sheet Trong
M t Style Sheet Trong c n ph i đ c s d ng khi m t văn b n đ n có m t style duy nh t. B nộ ầ ả ượ ử ụ ộ ả ơ ộ ấ ạ
đ nh nghĩa các Style Trong bên trong ph n đ u b ng cách s d ng th <style> gi ng nh thị ầ ầ ằ ử ụ ẻ ố ư ế
này:
<head>
<style type="text/css">
hr
{
color: sienna
}
p
{
margin-left: 20px
}
body {
background-image: url("images/back40.gif")
}
</style>
</head>
Trình duy t lúc này s đ c các ch đ nh style, và đ nh d ng văn b n theo các ch đ nh trong đó.ệ ẽ ọ ỉ ị ị ạ ả ỉ ị
L u ýư : M t trình duy t thông th ng thì s b qua nh ng th mà nó không hi u. Đi u này cóộ ệ ườ ẽ ỏ ữ ẻ ể ề
nghĩa là m t trình duy t phiên b n cũ mà không h tr các Style, s b qua các th <style>,ộ ệ ả ỗ ợ ẽ ỏ ẻ
nh ng n i dung c a th <style> s hi n th trên trang. Có th ngăn c n m t trình duy t cũ hi nư ộ ủ ẻ ẽ ể ị ể ả ộ ệ ể
th n i dung b ng cách n nó trong thành ph n gi i thích c a HTML.ị ộ ằ ẩ ầ ả ủ
<head>
<style type="text/css">
<!
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
>
</style>
</head>
Style Nội tuyến(Inline Styles)
M t Style n i tuy n m t r t nhi u u đi m c a các Style Sheet bình th ng b i vi c tr n l n n iộ ộ ế ấ ấ ề ư ể ủ ườ ở ệ ộ ẫ ộ
dung v i vi c th hi n. S d ng ph ng pháp ti t ki m này, gi ng nh khi m t style đ c ápớ ệ ể ệ ử ụ ươ ế ệ ố ư ộ ượ
d ng cho m t s ki n riêng l c a m t thành ph n.ụ ộ ự ệ ẻ ủ ộ ầ
Đ s d ng các Style n i tuy n b n s d ng thu c tính style trong th có liên quan. Thu c tínhể ử ụ ộ ế ạ ử ụ ộ ẻ ộ
th có th bao g m b t c m u CSS nào. Ví d d i đây s đ a ra cách làm th nào đ thayẻ ể ồ ấ ứ ẫ ụ ướ ẽ ư ế ể
đ i màu và vi c căn trái cho m t đo n:ổ ệ ộ ạ
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Khi m t trang ch u nhi u hi u ng Style Sheets(Multiple Style Sheets)ộ ị ề ệ ứ
N u m t vài thu c tính cùng đ c thi t l p cho cùng b ch n v i style sheets khác nhau, giá trế ộ ộ ượ ế ậ ộ ọ ớ ị
s đ c k th a nhi u h n t các ch đ nh đó.ẽ ượ ế ừ ề ơ ừ ỉ ị
Ví dụ, m t Style sheet Ngoài có nh ng thu c tính cho b ch n h3 nh sau:ộ ữ ộ ộ ọ ư
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Và m t Style Sheet Trong cũng có các các thu c tính cho b ch n h3 nh sau:ộ ộ ộ ọ ư
h3
{
text-align: right;
font-size: 20pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
N u trang Web đã đ c thi t l p Style Sheet Trong mà đ ng th i cũng g i Style Sheet Ngoài thìế ượ ế ậ ồ ờ ọ
thu c tính chung cho h3 s là:ộ ẽ
color: red;
text-align: right;
font-size: 20pt
Màu cho h3 s k th a t Style Sheet Ngoài và các thu c tính text-alignment và font-size s thayẽ ế ừ ừ ộ ẽ
th b i Style Sheet Trong(đúng theo tính ch t u tiên)ế ở ấ ư
Các thuộc tính Border trong CSS
Các thu c tính Border trong CSS đ nh nghĩa đ ng bao( biên) xung quanh m t thànhộ ị ườ ộ
ph n.ầ
Các ví dụ:
Thi t l p ki u cách c a b n đ ng baoế ậ ể ủ ố ườ
Ví d này mô ph ng làm th nào đ thi t l p ki u cách c a b n đ ng baoụ ỏ ế ể ế ậ ể ủ ố ườ
Thi t l p các đ ng bao khác nhau trên m i c nhế ậ ườ ỗ ạ
Ví d này mô t làm th nào đ thi t l p các đ ng bao khác nhau trên m i c nh c a ph n tụ ả ế ể ế ậ ườ ỗ ạ ủ ầ ử
Thi t l p màu c a b n đ ng baoế ậ ủ ố ườ
Ví d này mô t làm th nào đ thi t l p màu c a b n đ ng bao. Nó có th thi t l p t c nhụ ả ế ể ế ậ ủ ố ườ ể ế ậ ừ ạ
th nh t đ n c nh th b n.ứ ấ ế ạ ứ ố
Thi t l p đ r ng c a đ ng bao đáyế ậ ộ ộ ủ ườ
Ví d này mô t làm th nào đ thi t l p đ r ng c a đ ng bao đáyụ ả ế ể ế ậ ộ ộ ủ ườ
Thi t l p đ r ng c a đ ng bao tráiế ậ ộ ộ ủ ườ
Ví d này mô t làm th nào đ thi t l p đ r ng c a đ ng bao bên tráiụ ả ế ể ế ậ ộ ộ ủ ườ
Thi t l p đ r ng c a đ ng bao ph iế ậ ộ ộ ủ ườ ả
Ví d này mô t làm th nào đ thi t l p đ r ng c a đ ng bao bên ph i. T ng t nh thu cụ ả ế ể ế ậ ộ ộ ủ ườ ả ươ ự ư ộ
tính border_left_width. Xem cách dùng b ng thu c tính phía d i.ở ả ộ ướ
Thi t l p đ r ng c a đ ng bao đ nhế ậ ộ ộ ủ ườ ỉ
Ví d này mô t làm th nào đ thi t l p đ r ng c a đ ng bao đ nhụ ả ế ể ế ậ ộ ộ ủ ườ ỉ
T t c các thu c tính đ ng bao đáy trong m t khai báoấ ả ộ ườ ộ
Ví d này mô t m t thu c tính nhanh chóng đ thi t l p t t c các thu c tính cho đ ng baoụ ả ộ ộ ể ế ậ ấ ả ộ ườ
đáy trong m t khai báo.ộ
T t c các thu c tính đ ng bao trái trong m t khai báoấ ả ộ ườ ộ
Ví d này mô t m t thu c tính nhanh chóng đ thi t l p t t c các thu c tính cho đ ng baoụ ả ộ ộ ể ế ậ ấ ả ộ ườ
trái trong m t khai báoộ
T t c các thu c tính đ ng bao ph i trong m t khai báoấ ả ộ ườ ả ộ
Ví d này mô t m t thu c tính nhanh chóng đ thi t l p t t c các thu c tính cho đ ng baoụ ả ộ ộ ể ế ậ ấ ả ộ ườ
trái trong m t khai báoộ
T t c các thu c tính đ ng bao đ nh trong m t khai báoấ ả ộ ườ ỉ ộ
Ví d này mô t m t thu c tính nhanh chóng đ thi t l p t t c các thu c tính cho đ ng baoụ ả ộ ộ ể ế ậ ấ ả ộ ườ
đ nh trong m t khai báoỉ ộ
T t c các thu c tính v đ r ng c a đ ng bao trong m t khai báoấ ả ộ ề ộ ộ ủ ườ ộ
Ví d này mô t m t thu c tính nhanh chóng đ thi t l p t t c các thu c tính cho đ r ngụ ả ộ ộ ể ế ậ ấ ả ộ ộ ộ
đ ng bao trong m t khai báo, có th thi t l p cho t m t đ n b n đ ng bao.ườ ộ ể ế ậ ừ ộ ế ố ườ
T t c các thu c tính đ ng bao trong m t khai báoấ ả ộ ườ ộ
Ví d này mô t m t thu c tính nhanh chóng đ thi t l p t t c các thu c tính cho b n đ ngụ ả ộ ộ ể ế ậ ấ ả ộ ố ườ
bao đáy trong m t khai báo, có th thi t l p cho t m t đ n b n đ ng bao.ộ ể ế ậ ừ ộ ế ố ườ
Các đường bao trong CSS
Thu c tính Border cho phép b n ch đ nh ki u cách, màu s c và đ r ng c a đ ng bao c aộ ạ ỉ ị ể ắ ộ ộ ủ ườ ủ
m t thành ph n. Trong HTML chúng ta s d ng b ng đ t o ra các đ ng bao xung quanh m tộ ầ ử ụ ả ể ạ ườ ộ
văn b n, nh ng v i các thu c tính Border trong CSS chúng ta có th t o các đ ng bao v i hi uả ư ớ ộ ể ạ ườ ớ ệ
ng đ p và nó có th ng d ng cho ph n t b t kỳ.ứ ẹ ể ứ ụ ầ ử ấ
Thuộc tính Border:
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Thu c tínhộ Mô tả Ví dụ NN IE W3C
border M t thu c tính t c hành độ ộ ố ể
thi t l p thu c tính cho toànế ậ ộ
b c 4 đ ng bao trong m tộ ả ườ ộ
khai báo.
border-width
border-style
border-color
4.0 4.0 CSS1
border-bottom M t thu c tính t c hành độ ộ ố ể
thi t l p thu c tính choế ậ ộ
đ ng bao đáy trong m tườ ộ
khai báo.
border-bottom-width
border-style
border-color
6.0 4.0 CSS1
border-bottom-color Thi t l p màu s c c aế ậ ắ ủ
đ ng bao đáyườ
border-color 6.0 4.0 CSS2
border-bottom-style Thi t l p ki u cách c aế ậ ể ủ
đ ng bao đáy.ườ
border-style 6.0 4.0 CSS2
border-bottom-width Thi t l p đ r ng c a đ ngế ậ ộ ộ ủ ườ
bao đáy
thin
medium
thick
length
4.0 4.0 CSS1
border-color Thi t l p màu s c c a b nế ậ ắ ủ ố color 6.0 4.0 CSS1
đ ng bao, có th đ t màuườ ể ạ
t m t đ n b n.ừ ộ ế ố
border-left M t thu c tính t c hành độ ộ ố ể
thi t l p thu c tính choế ậ ộ
đ ng bao trái trong m tườ ộ
khai báo.
border-left-width
border-style
border-color
6.0 4.0 CSS1
border-left-color Thi t l p màu s c c aế ậ ắ ủ
đ ng bao trái.ườ
border-color 6.0 4.0 CSS2
border-left-style Thi t l p ki u cách c aế ậ ể ủ
đ ng bao trái.ườ
border-style 6.0 4.0 CSS2
border-left-width Thi t l p đ r ng c a đ ngế ậ ộ ộ ủ ườ
bao trái.
thin
medium
thick
length
4.0 4.0 CSS1
border-right M t thu c tính t c hành độ ộ ố ể
thi t l p thu c tính choế ậ ộ
đ ng bao ph i trong m tườ ả ộ
khai báo.
border-right-width
border-style
border-color
6.0 4.0 CSS1
border-right-color Thi t l p màu s c c aế ậ ắ ủ
đ ng bao ph i.ườ ả
border-color 6.0 4.0 CSS2
border-right-style Thi t l p ki u cách c aế ậ ể ủ
đ ng bao ph i.ườ ả
border-style 6.0 4.0 CSS2
border-right-width Thi t l p đ r ng c a đ ngế ậ ộ ộ ủ ườ
bao ph i.ả
thin
medium
thick
length
4.0 4.0 CSS1
border-style Thi t l p ki u cách c a cế ậ ể ủ ả
b n đ ng bao, có th đ tố ườ ể ạ
đ c ki u t m t đ n b n.ượ ể ừ ộ ế ố
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
6.0 4.0 CSS1
border-top M t thu c tính t c hành độ ộ ố ể
thi t l p thu c tính choế ậ ộ
border-top-width
border-style
6.0 4.0 CSS1
đ ng bao đ nh trong m tườ ỉ ộ
khai báo.
border-color
border-top-color Thi t l p màu s c c aế ậ ắ ủ
đ ng bao đ nh.ườ ỉ
border-color 6.0 4.0 CSS2
border-top-style Thi t l p ki u cách c aế ậ ể ủ
đ ng bao đ nh.ườ ỉ
border-style 6.0 4.0 CSS2
border-top-width Thi t l p đ r ng c a đ ngế ậ ộ ộ ủ ườ
bao đ nhỉ
thin
medium
thick
length
4.0 4.0 CSS1
border-width M t thu c tính t c hành độ ộ ố ể
thi t l p đ r ng c a ế ậ ộ ộ ủ
b n đ ng bao trong m tố ườ ộ
khai báo, có th có t m tể ừ ộ
đ n b n giá tr .ế ố ị
thin
medium
thick
length
4.0 4.0 CSS1
Thuộc tính Font trong CSS
Thu c tính phông trong CSS xác đ nh phông ch trong văn b nộ ị ữ ả
Ví dụ
Thi t l p phông ch trong m t văn b nế ậ ữ ộ ả
Ví d này mô ph ng m t phông ch đ c thi t l p nh th nào.ụ ỏ ộ ữ ượ ế ậ ư ế
Thi t l p kích c cho phông chế ậ ỡ ữ
Ví d này mô ph ng thi t l p kích c phông ch nh th nào.ụ ỏ ế ậ ỡ ữ ư ế
Thi t l p ki u cách c a phông chế ậ ể ủ ữ
Ví d này mô ph ng thi t l p ki u cách phông ch nh th nào.ụ ỏ ế ậ ể ữ ư ế
Thi t l p bi n th c a phôngế ậ ế ể ủ
Ví d này mô ph ng cách thi t l p các bi n th c a phông ch nh th nào.ụ ỏ ế ậ ế ể ủ ữ ư ế
Thi t l p đ ng bao c a phông chế ậ ườ ủ ữ
Ví d này mô ph ng thi t l p đ đ m c a phông ch nh th nào.ụ ỏ ế ậ ộ ậ ủ ữ ư ế
T t c thu c tính trong m t khai báo.ấ ả ộ ộ
Ví d này mô ph ng s d ng thu c tính t c hành đ thi t l p thu c tính cho t t c các phôngụ ỏ ử ụ ộ ố ể ế ậ ộ ấ ả
ch trong m t khai báo nh th nào.ữ ộ ư ế
Các phông trong CSS
Thu c tính Font cho phép b n thay đ i h phông, đ đ m, kích c và ki u cách phông ch c aộ ạ ổ ọ ộ ậ ỡ ể ữ ủ
văn b n.ả
Các Lưu ý - Mẹo hữu ích
Các Phông ch thì đ c xác đ nh b i tên c a chúng trong CSS1. L u ý r ng n u m t trình duy tữ ượ ị ở ủ ư ằ ế ộ ệ
không h tr thu c tính phông đ c ch đ nh thì nó s s d ng phông m c đ nh.ỗ ợ ộ ượ ỉ ị ẽ ử ụ ặ ị
Thuộc tính Font:
NN: Netscape, IE: Internet Explorer, W3C: Chu n Webẩ
Thu c tínhộ Mô t ả Giá trị NN IE W3C
font M t thu c tính nh đ thi tộ ộ ỏ ể ế
l p t t c thu c tính choậ ấ ả ộ
m t phông trong m t khaiộ ộ
báo.
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
4.0 4.0 CSS1
font-family M t danh sách u tiên c aộ ư ủ
các h phông cho m tọ ộ
thành ph n. ầ
family-name
generic-family
4.0 3.0 CSS1
font-size Thi t l p kích c cho m tế ậ ỡ ộ
phông ch .ữ
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
4.0 3.0 CSS1
font-stretch Nh ng rút g n ho c mữ ọ ặ ở normal
CSS2
r ng c a phông.ộ ủ wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Thi t l p ki u cách c aế ậ ể ủ
phông.
normal
italic
oblique
4.0 4.0 CSS1
font-variant Hi n th văn b n trong m tể ị ả ộ
phông ch HOA NH ho cữ Ỏ ặ
m t phông ch th ng.ộ ữ ườ
normal
small-caps
6.0 4.0 CSS1
font-weight Thi t l p tr ng l ng c aế ậ ọ ượ ủ
phông.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4.0 4.0 CSS1
Thuộc tính List trong CSS
Thu c tính List cho phép b n thay đ i gi a các đi m_đánh_d u_m c_danh_sách khácộ ạ ổ ữ ể ấ ụ
nhau, thi t l p m t nh nh m t đi m_đánh_d u_m c_danh_sách và thi t l p n i đế ậ ộ ả ư ộ ể ấ ụ ế ậ ơ ể
đ t đi m_đánh_d u_m c_danh_sách.ặ ể ấ ụ
Ví dụ
Các đi m_đánh_d u m c khác nhau trong m t danh sách không có th tể ấ ụ ộ ứ ự
Ví d này mô t các đi m_đánh_d u_m c_danh_sách khác nhau trong CSSụ ả ể ấ ụ
Các đi m_đánh_d u m c khác nhau trong m t danh sách có th tể ấ ụ ộ ứ ự
Ví d này mô t các đi m_đánh_d u_m c_danh_sách khác nhau trong CSSụ ả ể ấ ụ
Thi t l p m t nh nh đi m_đánh_d u_m c_danh_sáchế ậ ộ ả ư ể ấ ụ
Ví d này mô ph ng cách thi t l p m t nh nh m t đi m_đánh_d u_m c_danh_sáchụ ỏ ế ậ ộ ả ư ộ ể ấ ụ
Đ t m t đi m_đánh_d u_m c_danh_sáchặ ộ ể ấ ụ
Ví d này mô ph ng n i đ đ t ch cho đi m đánh d u m c danh sáchụ ỏ ơ ể ặ ỗ ể ấ ụ
T t c các thu c tính danh sách trong m t khai báoấ ả ộ ộ
Ví d này mô t m t cách nhanh chóng đ thi t l p cho toàn b các thu c tính cho m t danhụ ả ộ ể ế ậ ộ ộ ộ
sách trong m t khai báo.ộ
Thuộc tính của Danh sách
NN: Netscape, IE: Internet Explorer, W3C: Chu n Webẩ
Thu c tínhộ Mô tả Giá trị NN IE W3C
list-style A shorthand property for setting all
of the properties for a list in one
declaration
M t thu c tính ng n g n đ thi tộ ộ ắ ọ ể ế
l p cho toàn b thu c tính c aậ ộ ộ ủ
danh sách trong m t khai báoộ
list-style-type
list-style-position
list-style-image
6.0 4.0 CSS1
list-style-image Sets an image as the list-item
marker
Thi t l p m t nh nh m tế ậ ộ ả ư ộ
đi m_đánh_d u_m c_danh_sáchể ấ ụ
.
none
url
6.0 4.0 CSS1
list-style-position Places the list-item marker in the
list
Đ t m tặ ộ
đi m_đánh_d u_m c_danh_sáchể ấ ụ
trong danh sách.
inside
outside
6.0 4.0 CSS1
list-style-type Sets the type of the list-item
marker
Thi t l p ki u c aế ậ ể ủ
đi m_đánh_d u_m c_danh_sáchể ấ ụ
.
none
disc
circle
square
decimal
decimal-leading-
zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
4.0 4.0 CSS1
katakana-iroha
marker-offset
auto
length
CSS2
Thuộc tính Text trong CSS
Thu c tính Text trong CSS xác đ nh di n m o c a văn b n.ộ ị ệ ạ ủ ả
Ví dụ
Thi t l p màu c a văn b nế ậ ủ ả
Ví d này mô t làm th nào đ thi t l p màu c a văn b nụ ả ế ể ế ậ ủ ả
Thi t l p màu n n c a văn b nế ậ ề ủ ả
Ví d này mô t làm th nào đ thi t l p màu n n c a m t ph n c a văn b nụ ả ế ể ế ậ ề ủ ộ ầ ủ ả
Ch đ nh kho ng cách gi a các ký tỉ ị ả ữ ự
Ví d này mô t làm th nào đ tăng ho c gi m kho ng tr ng gi a các ký tụ ả ế ể ặ ả ả ố ữ ự
Căn văn b nả
Ví d này mô t làm th nào đ căn ch nh văn b nụ ả ế ể ỉ ả
Trang trí cho văn b nả
Ví d này mô t làm th nào đ thêm trang trí cho văn b n.ụ ả ế ể ả
Th t đ u dòng văn b nụ ầ ả
Ví d này mô t làm th nào đ th t đ u dòng đ u tiên c a m t đo nụ ả ế ể ụ ầ ầ ủ ộ ạ
Ki m soát ch trong văn b nể ữ ả
Ví d này mô t làm th nào đ ki m soát ch trong m t văn b nụ ả ế ể ể ữ ộ ả
Text trong CSS
Thu c tính Text cho phép b n ki m soát di n m o c a văn b n. Nó cũng có th thay đ i màuộ ạ ể ệ ạ ủ ả ể ổ
c a văn b n, tăng ho c gi m kho ng cách gi a các ký t trong m t văn b n, căn ch nh m t vănủ ả ặ ả ả ữ ự ộ ả ỉ ộ
b n, trang trí cho văn b n, th t dòng đ u tiên và nhi u hi u ng khác.ả ả ụ ầ ề ệ ứ
Thuộc tính Text
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Thuộc tính Mô tả Giá trị khả dĩ NN IE W3C
color Thi t l p màu cho chế ậ ữ color 4.0 3.0 CSS1
direction Thi t l p h ng cho chế ậ ướ ữ
ltr
rtl
CSS2
letter-spacing
Tăng ho c gi m kho ng tr ng gi aặ ả ả ố ữ
các ký tự
normal
length
6.0 4.0 CSS1
text-align
Căn ch nh văn b n trong m t thànhỉ ả ộ
ph nầ
left
right
center
justify
4.0 4.0 CSS1
text-decoration Thêm trang trí cho văn b nả
none
underline
overline
line-through
blink
4.0 4.0 CSS1
text-indent
Th t dòng đ u văn b n trong m tụ ầ ả ộ
thành ph nầ
length
%
4.0 4.0 CSS1
text-shadow
none
color
length
text-transform Ki m soát ký t trong m t thành ph nể ự ộ ầ
none
capitalize
uppercase
lowercase
4.0 4.0 CSS1
white-space
Thi t l p bao nhiêu kho ng tr ngế ậ ả ắ
trong m t thành ph n ộ ầ
normal
pre
nowrap
4.0 5.5 CSS1
word-spacing
Tăng ho c gi m kho ng tr ng gi aặ ả ả ố ữ
các từ
normal
length
6.0 6.0 CSS1
Thuộc tính Padding
Thu c tính Padding c a CSS xác đ nh kho ng tr ng gi a thành ph n đ ng bao và n iộ ủ ị ả ố ữ ầ ườ ộ
dung.
Ví dụ:
Thi t l p left paddingế ậ
Thu c tính này mô ph ng làm th nào đ thi t l p kho ng đ m phía bên trái c a m t ô c a b ngộ ỏ ế ể ế ậ ả ệ ủ ộ ủ ả
Thi t l p right paddingế ậ
Thu c tính này mô ph ng làm th nào đ thi t l p kho ng đ m phía bên ph i c a m t ô c a b ng ộ ỏ ế ể ế ậ ả ệ ả ủ ộ ủ ả
Thi t l p top paddingế ậ
Thu c tính này mô ph ng làm th nào đ thi t l p kho ng đ m v i đ nh c a m t ô c a b ng ộ ỏ ế ể ế ậ ả ệ ớ ỉ ủ ộ ủ ả
Thi t l p bottom paddingế ậ
Thu c tính này mô ph ng làm th nào đ thi t l p kho ng đ m v i đáy c a m t ô c a b ngộ ỏ ế ể ế ậ ả ệ ớ ủ ộ ủ ả
T t c các thu c tính padding trong m t khai báoấ ả ộ ộ
Ví d này mô ph ng m t thu c tính ng n đ thi t l p t t c các thu c tính padding trong m t khaiụ ỏ ộ ộ ắ ể ế ậ ấ ả ộ ộ
báo, có th nh n t m t t i b n giá tr .ể ậ ừ ộ ớ ố ị
Padding trong CSS
Thu c tính Padding xác đ nh kho ng tr ng gi a ph n t đ ng bao và n i dung. Không cho phépộ ị ả ố ữ ầ ử ườ ộ
các giá tr âm. Kho ng tr ng đ m c a đ nh, ph i, d i và trái có th đ c thay đ i m t cách đ cị ả ố ệ ủ ỉ ả ướ ể ượ ổ ộ ộ
l p s d ng các thu c tính riêng bi t. M t thu c tính kho ng đ m ng n g n thì cũng đ c t o raậ ử ụ ộ ệ ộ ộ ả ệ ắ ọ ượ ạ
đ ki m soát nhi u c nh cùng lúc.ể ể ề ạ
Các thuộc tính của Padding
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Thu c tínhộ Mô tả Giá trị NN IE W3C
padding
M t thu c tính ng n g n đ thi tộ ộ ắ ọ ể ế
l p t t c các kho ng đ m ch v iậ ấ ả ả ệ ỉ ớ
m t l n khai báo.ộ ầ
padding-top
padding-right
padding-bottom
padding-left
4.0 4.0 CSS1
padding-bottom
Thi t l p kho ng đ m t i đáy c aế ậ ả ệ ạ ủ
m t ph n tộ ầ ử
length
%
4.0 4.0 CSS1
padding-left
Thi t l p kho ng đ m phía tráiế ậ ả ệ
c a m t ph n t .ủ ộ ầ ử
length
%
4.0 4.0 CSS1
padding-right
Thi t l p kho ng đ m phía ph iế ậ ả ệ ả
c a m t ph n t .ủ ộ ầ ử
length
%
4.0 4.0 CSS1
padding-top
Thi t l p kho ng đ m trên đ nhế ậ ả ệ ỉ
c a m t ph n t .ủ ộ ầ ử
length
%
4.0 4.0 CSS1
Các thuộc tính Background trong CSS
Các thu c tính Background trong CSS đ nh nghĩa các hi u ng c a m t thành ph nộ ị ệ ứ ủ ộ ầ
Ví dụ:
Thi t l p màu n nế ậ ề
Ví d này mô ph ng cách làm th nào đ thi t l p màu n n cho m t thành ph nụ ỏ ế ể ế ậ ề ộ ầ
Thi t l p m t nh nh m t n nế ậ ộ ả ư ộ ề
Ví d này mô ph ng cách làm th nào đ thi t l p m t nh nh m t n n.ụ ỏ ế ể ế ậ ộ ả ư ộ ề
Làm th nào đ l p m t nh n nế ể ặ ộ ả ề
Ví d này mô ph ng cách làm th nào đ l p m t nh n n ch theo chi u d cụ ỏ ế ể ặ ộ ả ề ỉ ề ọ
Làm th nào đ đ t m t nh n nế ể ặ ộ ả ề
Ví d này mô ph ng cách làm th nào đ đ t m t nh trên m t trangụ ỏ ế ể ặ ộ ả ộ
Làm th nào đ thi t l p m t nh n n c đ nhế ể ế ậ ộ ả ề ố ị
Ví d này mô ph ng cách làm th nào đ thi t l p m t nh n n c đ nh. nh đó s không cu nụ ỏ ế ể ế ậ ộ ả ề ố ị Ả ẽ ộ
theo ph n còn l i c a văn b n.ầ ạ ủ ả
T t c các thu c tính n n trong m t khai báoấ ả ộ ề ộ
Ví d này mô ph ng cách làm th nào đ s d ng m t thu c tính ng n g n đ thi t l p t t c cácụ ỏ ế ể ử ụ ộ ộ ắ ọ ể ế ậ ấ ả
thu c tính n n trong m t khai báo.ộ ề ộ
Thuộc tính Background trong CSS
Thu c tính n n cho phép b n ki m soát màu n n c a m t thành ph n, thi t l p m t nh nh n nộ ề ạ ể ề ủ ộ ầ ế ậ ộ ả ư ề
trong văn b n, l p l i m t nh n n theo chi u d c ho c chi u ngang và v trí c a m t nh trên m tả ặ ạ ộ ả ề ề ọ ặ ề ị ủ ộ ả ộ
trang.
Các thuộc tính Background
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Thuộc tính Mô tả Giá trị NN IE W3C
background
M t thu c tính ng n g n độ ộ ắ ọ ể
thi t l p t t c các thu cế ậ ấ ả ộ
tính n n trong m t khai báo.ề ộ
background-color
background-image
background-repeat
background-
attachment
background-position
6.0 4.0 CSS1
background-attachment
Thi t l p li u m t nh cóế ậ ệ ộ ả
đ ng c đ nh m t ch hayứ ố ị ộ ỗ
cu n theo ph n văn b n cònộ ầ ả
l i c a trang.ạ ủ
scroll
fixed
6.0 4.0 CSS1
background-color
Thi t l p màu n n c a m tế ậ ề ủ ộ
ph n tầ ử
color-rgb
color-hex
color-name
4.0 4.0 CSS1
transparent
background-image
Thi t l p m t nh nh n nế ậ ộ ả ư ề
c a trang.ủ
url
none
4.0 4.0 CSS1
background-position
Thi t l p đi m xu t phátế ậ ể ấ
c a m t nh n nủ ộ ả ề
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
6.0 4.0 CSS1
background-repeat
Thi t l p cách m t nh sế ậ ộ ả ẽ
đ c l p l i nh th nào.ượ ặ ạ ư ế
repeat
repeat-x
repeat-y
no-repeat
4.0 4.0 CSS1
Thu c tính Margin trong CSSộ
Thu c tính Margin trong CSS xác đ nh kho ng tr ng xung quanh ph n t .ộ ị ả ố ầ ử
Ví d :ụ
Thi t l p l đáy c a m t văn b nế ậ ề ủ ộ ả
Ví d này mô ph ng làm th nào đ thi t l p l đáy c a m t văn b n.ụ ỏ ế ể ế ậ ề ủ ộ ả
T t c các thu c tính l trong m t khai báoấ ả ộ ề ộ
thi t l p m t tính ch t nhanh chóng đ thi t l p t t c các thu c tính l trong m t khaiế ậ ộ ấ ể ế ậ ấ ả ộ ề ộ
báo.
Các l trong CSSề
Thu c tính căn l xác đ nh kho ng tr ng xung quanh các ph n t . Nó có th s d ng cộ ề ị ả ố ầ ử ể ử ụ ả
giá tr âm g i lên n i dung. Các thu c tính căn l đ nh, ph i, đáy và trái có th đ c thayị ố ộ ộ ề ỉ ả ể ượ
đ i m t cách đ c l p s d ng các thu c tính riêng r . M t thu c tính căn l nhanh có thổ ộ ộ ậ ử ụ ộ ẽ ộ ộ ề ể
đ c dùng đ thay đ i t t c các l m t l n.ượ ể ổ ấ ả ề ộ ầ
L u ý v trình duy t: Netscape và IE thi t l p m c đ nh l cho th body là 8px. Trình duy tư ề ệ ế ậ ặ ị ề ẻ ệ
Opera không thi t l p! Đ thay th , Opera áp d ng m t kho ng đ m là 8px, vì th n u m tế ậ ể ế ụ ộ ả ệ ế ế ộ
ng i mu n căn ch nh l cho toàn b m t trang và hi n th m t cách đúng đ n trongườ ố ỉ ề ộ ộ ể ị ộ ắ
Opera, thì kho ng đ m cho body cũng ph i đ c thi t l p.ả ệ ả ượ ế ậ
Các thu c tính c a Margin:ộ ủ
NN: Netscape, IE: Internet Explorer, W3C: chu n v Webẩ ề
Thu c tínhộ Mô tả Giá trị NN IE W3C
margin
M t thu c tính nhanh đ thi t l p thu cộ ộ ể ế ậ ộ
tính cho l trong m t khai báo.ề ộ
margin-top
margin-right
margin-bottom
margin-left
4.0 4.0 CSS1
margin-bottom Thi t l p l đáy c a m t ph n t .ế ậ ề ủ ộ ầ ử
auto
length
%
4.0 4.0 CSS1
margin-left Thi t l p l trái c a m t ph n t .ế ậ ề ủ ộ ầ ử
auto
length
%
4.0 3.0 CSS1
margin-right Thi t l p l ph i c a m t ph n t .ế ậ ề ả ủ ộ ầ ử
auto
length
%
4.0 3.0 CSS1
margin-top Thi t l p l đ nh c a m t ph n t .ế ậ ề ỉ ủ ộ ầ ử
auto
length
%
4.0 3.0 CSS1
