Chương 4 Bảng kiểu CSS (Thiết kế web)

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 (254.38 KB, 31 trang )

15/08/2008 Khoa CNTT 1
Ch
Ch
ươ
ươ
ng 4: Bảng kiểu CSS
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
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
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)

 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 4
Ư
Ư
u, khuyết ñiểm của CSS
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
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 <head>
– 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 <head> tag)

– Inline style (inside an HTML element)
ðộ ưu tiên tăng
15/08/2008 Khoa CNTT 6
Syntax
Syntax
-
-
qui tắc tạo CSS
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
Các giá trị kích thước phông chữ font
-
-
size
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
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
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
</TagName>

 Ví dụ:
<p
style="color: sienna; margin-left: 20px; font-size:48px;"> This is a
paragraph
</p>
15/08/2008 Khoa CNTT 10
Embedding Style Sheet
Embedding Style Sheet
 Nhúng trong tag <style> của trang HTML
 Syntax (kiểu 2):
<head>
<style type=“text/css” >
<!
SelectorName
{
property1:value1;
property2:value2;
………
propertyN:valueN;
}
….
>
</style>
</head>
15/08/2008 Khoa CNTT 11
VD Embedding Style Sheet
VD Embedding Style Sheet
<head>
<style type="text/css" title=“bangkieu1">
p

{
color:blue;
font-size:14pt;
font-family:Verdana;
text-align:center
}
p.left{text-align:left}
</style>
</head>
<body>
<p> Dinh dang trong P mau blue font co 14</p>
<p class=left> Trong class left</p>
</body>
15/08/2008 Khoa CNTT 12
External Style Sheet
External 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:
<head>
<link rel=“stylesheet” href=“URL” type="text/css">
</head>
2. Liên kết bằng tag style dùng @import url.
<head>
<style type=“text/css”>
@import url(URL);

</style>
</head>
15/08/2008 Khoa CNTT 13
VD External Style Sheet
VD External Style Sheet
 Dùng file CSS riêng:
<html>
<head>
<
link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body> <h1>This header is 36 pt</h1>
<
h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
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:
<style …>
@import url(ex1.css)
</style>
15/08/2008 Khoa CNTT 14
So sánh, ñánh giá 3 loại CSS

So sánh, ñánh giá 3 loại CSS
15/08/2008 Khoa CNTT 15
Qui tắc tạo Selector
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)
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)
Qui tắc tạo Selector (tt)
The class Selector
p.right {text-align: right}
p.center {text-align: center}
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned. </p>


Bộ chọn thuộc tính
Bộ chọn thuộc tính
class
class

.center {text-align: center}
<h1 class="center"> This heading will be center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>
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 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}
….
<dl class="center bold"> Trong phan DL co center va bold</dl>
p.right{text-align:right}
p.left{text-align:left}
<p class=left> Trong class left</p>
<p class=right> Trong class right</p>
<p class="right left"> Trong class right va left</p> ???
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)
Qui tắc tạo Selector (tt)
#green {color: green}
p#para1
{

text-align: center;
color: red
}


Bộ chọn thuộc tính
Bộ chọn thuộc tính
ID
ID
(The id Selector)
(The id Selector)
VD:
<p id=green> Tin tức thị trường</p>
<p
id=para1> Thị trường chứng khoán</p>
Do NOT start an ID name with a number! It will not work in
Mozilla/Firefox.
15/08/2008 Khoa CNTT 20
CSS Comments
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ẻ
Thẻ
div
div
và
và
span (
span (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
<style type="text/css" title="dangkieu01">
.mauxanh{color:blue}
</style>
</head>
<body>
<div class="mauxanh">
<h1>To Huu </h1>
<p>Ba trăm năm nữa ai biết ñâu <br>
Thiên hạ hà nhân khóc Tố Như </p>
</div>
</body>
<span class=mauxanh> Một người
có văn hóa phải xả rác ñúng nơi qui
ñịnh </span>
15/08/2008 Khoa CNTT 22
VD Thẻ
VD Thẻ
div

div
và
và
span
span
<head>
<style type="text/css" title="dangkieu01">
.mauxanh{color:blue}
.mauhatde{color:maroon}
</style>
</head>
<body>
<
div class="mauxanh">
<h1>To Huu </h1>
<p>Ba trăm năm nữa ai biết ñâu <br>
Thiên hạ hà nhân khóc Tố Như </p>
<
span class=hatde> Một người có văn hóa phải xả rác ñúng nơi
qui ñịnh </span>
</div>
</body>
15/08/2008 Khoa CNTT 23
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
– a:link
– a:visited
– a:hover
– a:active
VD:
<style type="text/css">
a:link {color:blue;text-
decoration:none}
a:hover {color:red;font-
weight:bold}
a:visited{color:purple;}
a:active{color:yellow;}
</style>
<body>
<a href="www.lhu.edu.vn"> Link to
LHU</a> <br/>
<a href="www.moet.edu.vn"> Link
to MOET</a><br/>
<a href="www.moet.edu.vn"> 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:
<style type="text/css">
div:first-line{font-size:24px; font-variant:small-caps}
div:first-letter{font-size:44px;}

Chương 4 Bảng kiểu CSS (Thiết kế web)

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về