Bài giảng Thiết kế Web - Chương 4: Bảng kiểu CSS

15/08/2008 Khoa CNTT 1
Chương 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 2
Khá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 3
Giớ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)

 Bng kiu xác ñnh cách b trí, trình bày, màu sc, 
cho các tags ca 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 4
Ưu, 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 5
Cá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 
– Internal style sheet (inside the tag) 
– Inline style (inside an HTML element) 
ðộ ưu tiên tăng
15/08/2008 Khoa CNTT 6
Syntax- qui tắc tạo CSS
The CSS syntax is made up of three parts: a 
selector, a property and a value:
selector {property: value}
body {color: black} 
p {font-family: "sans serif"} 
p {text-align:center;color:red} 
p 
{ 
text-align: center;
color: black; 
font-family: arial 
} 
15/08/2008 Khoa CNTT 7
Các giá trị kích thước phông chữ font-
size
– 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 8
Phâ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 9
Inline 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 10
Embedding 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 11
VD 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 12
External Style Sheet
 Mọi style ñều lưu trong file có phần mở rộng là *.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 13
VD External Style Sheet

 Dùng file CSS riêng:
 This header is 36 pt 
This header is blue
This paragraph has a left margin of 50 pixels
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:
@import url(ex1.css)
15/08/2008 Khoa CNTT 14
So sánh, ñánh giá 3 loại CSS
15/08/2008 Khoa CNTT 15
Qui tắc tạo Selector

Qui tắc ñơn giản:
p 
{ 
text-align: center;
color: black; 
font-family: arial 
} 
Grouping
h1{color: green}
h2{color: green}
hr{color:green}
h1,h2,hr 
{ 
color: green 
} 
Nhóm các bộ 
chọn cách 
nhau bởi dấu 
phảy
15/08/2008 Khoa CNTT 16
Dạng ña kiểu (Multiple style sheets)
extenal style:
h3 
{ 
color: red; 
text-align: left; 
font-size: 8pt 
} 
Internal style:
h3 
{ 
text-align: right; 
font-size: 20pt 
} 
color: red; 
text-align: right; 
font-size: 20pt 
15/08/2008 Khoa CNTT 17
Qui tắc tạo Selector (tt)
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. 

Bộ chọn thuộc tính class
.center {text-align: center} 
 This heading will be center-aligned 
 This paragraph will also be center-aligned. 
15/08/2008 Khoa CNTT 18
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
{
text-align: center;
color: blue
}
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 ???
Do NOT start a class name 
with a number! It will not work 
in Mozilla/Firefox. 
15/08/2008 Khoa CNTT 19
Qui tắc tạo Selector (tt)
#green {color: green} 
p#para1 
{ 
text-align: center; 
color: red 
} 

Bộ chọn thuộc tính ID (The id Selector)
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 20
CSS 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 21
Thẻ div và span (Contextual Selection)

 Ph4n t5 trang theo ý, không có thu9c tính ch: dùng 
class
– div : ñnh d=ng cho m9t vùng văn bn
– span: ñnh d=ng cho m9t dòng văn bn
.mauxanh{color:blue}
 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
VD Thẻ div và span
.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 23
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
– a:link
– a:visited
– a:hover
– a:active
VD:
a:link {color:blue;text-
decoration:none}
a:hover {color:red;font-
weight:bold}
a:visited{color:purple;}
a:active{color:yellow;}
 Link to 
LHU 
 Link 
to MOET
 Link 
15/08/2008 Khoa CNTT 24
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 25
Cá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 26
Cá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
{
background-image: url(images/bg.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: black;
} 
body
{ 
SCROLLBAR-ARROW-COLOR: red; 
SCROLLBAR-BASE-COLOR: white;
}
15/08/2008 Khoa CNTT 27
Bà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 28
Bài tập 2

 Dùng file CSS bên ngoài ñể viết trang nhu sau:
15/08/2008 Khoa CNTT 29
Bà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 30
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
li { display: inline }
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
Link one
Link two
Link three
Link four
Noi dung trong trang chu duoc trinh 
bay o day
15/08/2008 Khoa CNTT 31