Giới thiệu CSS www.dohoavn... Style Sheet bên ngoài.
Trang 1Giới thiệu CSS www.dohoavn net | http://dohoavn.vn 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ể ạ ể ầ ộ ố ừ ữ ế ẽ ữ ả
Trang 2c 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.ố ớ ể ệ ủ ệ
Trang 3Đ gi i quy t v n đ này, W3C đã t o ra STYLES thêm vào HTML 4.0ể ả ế ấ ề ạ
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 thamchi 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ằ ể ể ấ ả ẽ ế ồ
Trang 4m 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ẻ ộ ị ặ
"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.ở ộ ấ ọ
Trang 5• 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 đữ ớ ữ ỏ
Trang 6đ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:ạ ả ử ụ ộ ớ ả ủ ạ
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":ả ầ ử ẽ ữ ậ ộ ọ
Trang 7B 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":ứ ớ ộ ầ ử ị
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>
Trang 8B 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:ữ ỏ ế
Trang 9M 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:
Trang 10background-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ư ộ ủ ẻ ẽ ể ị ể ả ộ ệ ể
Đ 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>
Trang 11Khi 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ế ậ ộ ọ ớ ị
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)ế ở ấ ư
Trang 12Cá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 baotrá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 baotrái trong m t khai báoộ
Trang 13T 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 đụ ả ộ ộ ể ế ậ ấ ả ộ ố ườ ngbao đá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ớ ệ
thi t l p thu c tính cho toànế ậ ộ
b c 4 độ ả ường bao trong m tộ khai báo
border-widthborder-styleborder-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-widthborder-style
border-color
6.0 4.0 CSS1
border-bottom-color Thi t l p màu s c c aế ậ ắ ủ
đường bao đáy
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
Trang 14đườ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-widthborder-styleborder-color
6.0 4.0 CSS1
border-left-color Thi t l p màu s c c aế ậ ắ ủ
đường bao trái
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-widthborder-styleborder-color
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-widthborder-style
6.0 4.0 CSS1
Trang 15đường bao đ nh trong m tỉ ộ khai báo.
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.ụ ỏ ế ậ ộ ậ ủ ữ ư ế
Trang 16T 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.ữ ộ ư ế
NN: Netscape, IE: Internet Explorer, W3C: Chu n Webẩ
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
captioniconmenumessage-boxsmall-captionstatus-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-smallx-small
smallmediumlargex-largexx-largesmallerlarger
length
%
4.0 3.0 CSS1
font-stretch Nh ng rút g n ho c mữ ọ ặ ở normal CSS2