Bảng kiểu CSS
Khái niệm DHTML
- Giớ thiệu CSS
- Cách hoạt ñộng của các CSS
- Syntax- qui tắc tạo CSS
- Phân loại CSS và cách sử dụng
Tóm tắt nội dung Bảng kiểu CSS, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
ChCh ươươ ng 4: B ng ki u CSSng 4: B ng ki u CSS
Khái ni m DHTML
Gi thi u CSS
Cách ho t ñ ng c a các CSS
Syntax qui t c t o CSS
Phân lo i CSS và cách s d ng
15/08/2008 Khoa CNTT 1
Khái ni m DHTMLKhái ni m DHTML
DHTML (Dinamic HyperText Markup Language)
DHTML = HTML + CSS + Script Language
CSS Cascading Style Sheets
CSS how to display HTML elements ?
Script language – JavaScript, VBScript, PHP, ASP.NET,…Cho
phép ñưa d li u lên trang web ñ ng:
User Webpage
15/08/2008 Khoa CNTT 2
Gi i thi u CSSGi i thi u CSS
CSS Cascading Style Sheets
– Dùng ñ mô t cách hi n th các thành ph n trên trang WEB
– S d ng tương t như d ng TEMPLATE
– Có th s d ng l i cho các trang web khác
– Có th thay ñ i thu c tính t ng trang ho c c site nhanh chóng
(cascading)
B ng ki u xác ñ nh cách b trí, trình bày, màu s c,…
cho các tags c a HTML
VD: cho tag body màu h ng, cho tag p màu ñ , lo i font Times New
Roman, lo i ch nghiêng,…
CSS ñ c l u trong:
B ng ki u nhúng trong file HTML
B ng ki u ngo i trú trong File b ng ki u riêng có ñuôi *.css
15/08/2008 Khoa CNTT 3
ƯƯu, khuy t ñi m c a CSSu, khuy t ñi m c a CSS
Ưu ñi m:
Ki m soát b c c trang, k thu t thi t k phông và d ng ch t t
hơn
D duy trì ho t ñ ng c a site hơn
Thông tin ki u ñư c tách ra kh i c u trúc site
Khuy t ñi m :
Không ñư c h tr r ng rãi, ho c h tr không h t
15/08/2008 Khoa CNTT 4
Cách ho t ñ ng c a các CSSCách ho t ñ ng c a các CSS
B ng ki u nhúng trong file HTML
– Ph n ñ nh d ng ki u thư ng ñ t trong tag
– Các ki u trong dòng: ñ t trong m t tag
D ng ki u nào ñư c dùng cho tag khi có nhi u ki u
ñư c ñ nh nghĩa cho nó?
– Browser default
– External style sheet
ð ưu tiên tăng
– Internal style sheet (inside the tag)
– Inline style (inside an HTML element)
15/08/2008 Khoa CNTT 5
SyntaxSyntax qui t c t o CSSqui t c t o CSS
The CSS syntax is made up of three parts: a
selector, a property and a value:
selector {property : value }
p
body {color: black} {
p {font family: "sans serif "} text align: center ;
color: black;
p {text align:center;color:red} font family: arial
}
15/08/2008 Khoa CNTT 6
Các giá tr kích thư c phông ch fontCác giá tr kích thư c phông ch font
sizesize
– Các giá tr ñ l n:
• Px Pixel
• Pt Point
• Pc pica
• In inch
• Mm milimet
• Cm centimet
– Ph n trăm %
– Tương ñ i:
• Larger
• Smaller
– Kích thư c tuy t ñ i: xx small,x small,small,medium, large, x
large, xx large
15/08/2008 Khoa CNTT 7
Phân lo i CSS và cách s d ngPhân lo i CSS và cách s d ng
G m 3 lo i CSS
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
15/08/2008 Khoa CNTT 8
Inline Style SheetInline Style Sheet
ð nh nghĩa style trong thu c tính style c a t ng tag
HTML
Syntax (ki u 1):
<TagName style=“property1:value1;
property2:value2;
……..
propertyN:valueN;”> D li u c a tag
Ví d :
This is a
paragraph
15/08/2008 Khoa CNTT 9
Embedding Style SheetEmbedding Style Sheet
Nhúng trong tag c a trang HTML
Syntax (ki u 2):
<!
SelectorName
{
property1:value1;
property2:value2;
………
propertyN:valueN;
}
….
>
15/08/2008 Khoa CNTT 10
VD Embedding Style SheetVD Embedding Style Sheet
p
{
color:blue;
font size:14pt;
font family:Verdana;
text align:center
}
p.left{text align:left}
Dinh dang trong P mau blue font co 14
Trong class left
15/08/2008 Khoa CNTT 11
External Style SheetExternal Style Sheet
M i style ñ u lưu trong file có ph n m r ng là *.css*.css
Syntax gi ng như trong embedding SS
ð dùng b ng ki u c n t o liên k t ñ n file CSS
b ng 2 cách:
1. Liên k t b ng tag link. Cú pháp:
2. Liên k t b ng tag style dùng @import url.
@import url (URL );
15/08/2008 Khoa CNTT 12
VD External Style SheetVD External Style Sheet
Dùng file CSS riêng:
Trong file “ex1.css”:
body {background color: yellow}
h1 {font size: 36pt}
h2 {color: blue}
p {margin left: 50px}
Chú ý: không
tách r i
Cách khác: This header is 36 pt
This header is blue
@import url(ex1.css) This paragraph has a left margin of 50 pixels
15/08/2008 Khoa CNTT 13
So sánh, ñánh giá 3 lo i CSSSo sánh, ñánh giá 3 lo i CSS
15/08/2008 Khoa CNTT 14
Qui t c t o SelectorQui t c t o Selector
Qui t c ñơn gi n:
p
{
text align: center ;
color: black;
font family: arial
}
Grouping
h1,h2,hr
h1{color: green} Nhóm các b
{
h2{color: green} ch n cách
nhau b i d u color: green
hr{color:green} ph y }
15/08/2008 Khoa CNTT 15
D ng ña ki u (Multiple style sheets)D ng ña ki u (Multiple style sheets)
extenal style:
h3 Internal style:
{ h3
color: red; {
text align: left; text align: right;
font size: 8pt font size: 20pt
} }
color: red;
text align: right;
font size: 20pt
15/08/2008 Khoa CNTT 16
Qui t c t o Selector (tt)Qui t c t o Selector (tt)
B ch n thu c tính B ch n thu c tính classclass
The class Selector
p.right {text align: right}
p.center {text align: center}
This paragraph will be right aligned.
This paragraph will be center aligned.
.center {text align: center}
This heading will be center aligned
This paragraph will also be center aligned.
15/08/2008 Khoa CNTT 17
Qui t c t o Selector (tt)Qui t c t o Selector (tt)
B ch n thu c tính class
– Trong trư ng h p có hơn m t class cho m t ph n t ki u?
dl.center
{
Do NOT start a class name
text align: center; with a number! It will not work
color: blue in Mozilla/Firefox.
}
dl.bold {font weight: bold}
….
Trong phan DL co center va bold
p.right{text align:right}
p.left{text align:left}
Trong class left
Trong class right
Trong class right va left ???
15/08/2008 Khoa CNTT 18
Qui t c t o Selector (tt)Qui t c t o Selector (tt)
B ch n thu c tính B ch n thu c tính ID ID (The id Selector)(The id Selector)
#green {color: green}
p#para1
{
text align: center;
color: red
}
VD:
Tin t c th trư ng
Th trư ng ch ng khoán
Do NOT start an ID name with a number! It will not work in
Mozilla/Firefox.
15/08/2008 Khoa CNTT 19
CSS CommentsCSS Comments
Gi ng trong C++
/* This is a comment */
p
{
text align: center;
/* This is another comment */
color: black;
font family: arial
}
15/08/2008 Khoa CNTT 20
Th Th divdiv và và spanspan (( Contextual Selection)
Ph n t trang theo ý, không có thu c tính ch dùng
class
– div : ñ nh d ng cho m t vùng văn b n
– span : ñ nh d ng cho m t dòng văn b n
.mauxanh{color:blue}
M t ngư i
có văn hóa ph i x rác ñúng nơi qui
ñ nh
To Huu
Ba trăm năm n a ai bi t ñâu
Thiên h hà nhân khóc T Như
15/08/2008 Khoa CNTT 21
VD Th VD Th divdiv và và spanspan
.mauxanh {color:blue}
.mauhatde {color:maroon}
To Huu
Ba trăm năm n a ai bi t ñâu
Thiên h hà nhân khóc T Như
M t ngư i có văn hóa ph i x rác ñúng nơi
qui ñ nh
15/08/2008 Khoa CNTT 22
B ch n gi B ch n gi Pseudo Class
B ch n gi : ñư c xác ñ nh b i d u hai ch m
p:first line { font size: larger}
p:first letter { font size:24px;color:orange}
ð nh d ng d a vào tr ng thái c a liên k t, s ki n chu t.
Có th k t h p v i Selector khác.Thư ng ñư c dùng
v i các link VD:
– a:link a:link {color:blue;text
– a:visited decoration:none}
a:hover {color:red;font
– a:hover weight:bold}
– a:active a:visited{color:purple;}
a:active{color:yellow;}
Link to
LHU
15/08/2008 Khoa CNTT Link 23
to MOET
Link
Pseudo Element
ð nh d ng d a vào v trí ñ u tiên c a ký t , c a dòng
văn b n
:first letter, :first line
Có th k t h p v i Selector khác.
VD:
div:first line{font size:24px; font variant:small caps}
div:first letter{font size:44px;}
The first line must be a line with font size 24px, the first
letter with font size 44 px and what happens with the second?
15/08/2008 Khoa CNTT 24
Các thu c tính th ơng dùngCác thu c tính th ơng dùng
Ki u văn b n:
– font style: normal | italic | oblique
– font weight: normal | bold | bolder | lighter | 100 |...
– text decoration: none | underline | overline
– text align: left | right | center | justify
– color
– font family
– line height
– margin: top right left bottom
15/08/2008 Khoa CNTT 25
Các thu c tính th ơng dùngCác thu c tính th ơng dùng
– background attachment: fixed |scoll
– background color: white / Hex: #ffffff ho c transparent
– background image:
– background position:
– background repeat: repeat | repeat x | repeat y | no repeat
body
{ body
background image: url(images/bg.gif); {
background position: 50% 50%; SCROLLBAR ARROW COLOR: red;
background repeat: no repeat; SCROLLBAR BASE COLOR: white;
background color: black; }
}
15/08/2008 Khoa CNTT 26
Bài t p 1Bài t p 1
Dùng CSS ñ vi t trang web như sau v i các màu c a
t ng tiêu ñ khác nhau:
15/08/2008 Khoa CNTT 27
Bài t p 2Bài t p 2
Dùng file CSS bên ngoài ñ vi t trang nhu sau:
15/08/2008 Khoa CNTT 28
Bài t p 3Bài t p 3
Không dùng b ng, dùng danh sách UL, CSS ñ t o
trang web v i menu như hình sau.
– Màu n n: purple
– Màu khi di chu t vào: #FF3300
15/08/2008 Khoa CNTT 29
ul
{
float:left;
width:100%;
padding:0; Link one
margin:0; Link two
list style type:none; Link three
} Link four
li { display: inline }
a
{
float:left;
width:6em; Noi dung trong trang chu duoc trinh
text decoration:none; bay o day
color:white;
background color:purple;
padding:0.2em 0.6em;
border right:1px solid white;
}
a:hover {background color:#ff3300}
15/08/2008 Khoa CNTT 30
15/08/2008 Khoa CNTT 31File đính kèm:
Bảng kiểu CSS.pdf
