1
BẢNG KIỂU- CSS
Cascading Style Sheets
8/3/2012
ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa
CNTH
2
GIỚI THIỆU
Bảng kiểu (Cascading style sheet) là
một ngôn ngữ quy định cách trình bày cho
các tài liệu web viết bằng HTML, XHTML,
XML, UML …
– Sử dụng CSS nhằm thỏa mãn:
–Thẩm mỹ
–Giữ tính thống nhất cho trang HTML.
–Định dạng một số tính chất thông
thƣờng cùng một lúc cho tất cả các đối
tƣợng trên trang
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
3
GIỚI THIỆU
Tiện ích của CSS :
Tiết kiệm thời gian thiết kế cấu trúc chung của website
Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang
khác sẽ tự động cập nhật sự thay đổi đó
Có thể dùng các CSS cùng với JavaScript để tạo các hiệu
ứng đặc biệt
Tất cả các trình duyệt mới nhất đều hỗ trợ CSS.
Nhược điểm của CSS :
Giao diện của trang web có thể bị xô lệch, di chuyển khi
Selector: đối tƣợng sẽ áp dụng các thuộc tính trình
bày (các thẻ HTML, class, id )
Properties: các thuộc tính quy định cách trình bày
Value: giá trị của thuộc tính.
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
7
ĐƠN VỊ TRONG CSS
Đơn vị Mô tả
% Phần trăm
in Inch (1inch=2.54cm)
cm Centimeter
mm Millimeter
ex 1ex=chiều cao chữ x in thường của font chữ hiện hành
pt Point (1pt=1/72 inch)
pc Pica (1pc=12pt)
px Pixel
em 1em=kích thước của font hiện hành.
Đơnvị đo chiều dài:
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
8
Đơn vị đo màu sắc
Đơn vị Mô tả
Color-name Tên màu tiếng anh. Ví dụ: black, white,
red
RGB(r,g,b) Màu RGB với 3 giá trị r,g,b có giá trị từ
0-255 kết hợp với nhau để tạo ra màu
khác nhau.
RGB(%r,%g,%b) Màu RGB với 3 giá trị r,g,b có giá trị từ
0-100% kết hợp với nhau để tạo ra màu
khác nhau.
<BODY>
<P style = “color:aqua ; font-Style:italic; text-
Align:center”>
This paragraph has an inline style applied to it
<P> This paragraph is displayed in the default
style.
<P> Can you see the <SPAN style =
color:red> difference </SPAN> in this line
</BODY>
INLINE STYLE
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
12
Internal style (embedded style) : Là
bảng kiểu thích hợp cho trang riêng lẻ với
nhiều văn bản.
Cú pháp:
<Head>
<Style TYPE=”text/css”>
selector{property1:value1;property2:value 2 …}
(lặp lại cho mỗi tag có thuộc tính cần định dạng)
</Style>
</Head>
INTERNAL STYLE (EMBEDDED STYLE)
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
13
Ví dụ:
<HTML>
<HEAD>
Là một bảng kiểu đƣợc lƣu trữ thành một file bên ngoài và
đƣợc liên kết với trang HTML.
Bảng kiểu này sẽ đƣợc áp dụng và ảnh hƣởng cho tất cả
các trang của một website.
Cách tạo:
– Tạo một tập tin văn bản mới
– Nhập tên các thẻ muốn định dạng thuộc tính theo mẫu:
TagName{property1: value1; property2:value2;…}
– Lƣu tập tin với định dạng Text Only và có phần mở
rộng .css
– Có thể chọn Encoding là UTF-8 nếu có chú thích bằng
tiếng việt
EXTERNAL STYLE /LINKED STYLES
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
16
Ví dụ:
Tạo tập tin Sheet1.css
H2 {color:blue; font-style:italic}
P{text-align:justify; text-indent:8pt;
font:10pt/15pt “Myriad Roman”,”Verdana”}
EXTERNAL STYLE
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
17
Cách dùng External style:
Cú pháp:
<Head>
<Link Rel=StyleSheet
Type=”text/css” Href=”tên tập
tin.css”>
<TagName Class=”ClassName”>Nội dung
</TagName>
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
20
Ví dụ:
<HTML>
<HEAD>
<STYLE type=“text/css”>
p.water{color:blue}
.danger{color:red}
</STYLE>
</HEAD>
<BODY>
<P class=“water”>test water</p>
<h1 class=“danger”>test danger<h/1>
<h2 class=“danger”> test danger</h2>
<P class=“water”> Test water </p>
<p class=“danger”> Test p danger</p>
<h1 class=“water”> Test p water </h1>
<p> djshdsj</p>
</BODY>
</HTML>
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
21
ĐỊNH CÁC TAG RIÊNG BIỆT
Dùng áp dụng cho một phần tử riêng biệt
trên trang Web
Cú pháp:
<style>
TagName#IDName{property1: value1;
Có 2 loại thẻ chung có thể kết nối Class hay các
ID để tạo các thẻ tuỳ ý: DIV và SPAN.
Cần phân biệt đối tƣợng cấp khối và cấp hàng
Đối tƣợng cấp khối nhƣ một đoạn văn, thƣờng bắt
đầu một dòng mới và có thể chứa các đối tƣợng cấp
khối khác gồm các thẻ: P, H1, Body, table
Đối tƣợng cấp hàng không tạo dòng mới, thƣờng chứa
văn bản và các yếu tố trong hàng khác gồm các tag:
B, Font…
DIV phù hợp với các đối tƣợng cấp khối, SPAN
phù hợp với các đối tƣợng cấp hàng
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
24
Thẻ DIV:
Thẻ div là một layer(lớp), có thể chứa mọi
thành phần html khác. Nó đơn thuần giống
nhƣ một tag body nhƣng linh động hơn vì thẻ
div xác định vị trí mà nó xuất hiện trên màn
hình bất chấp nó ở đâu trên tài liệu.
Thuộc tính cơ bản của thẻ div: id, width,
height, style
Với:
Id: định danh của thẻ div
Width, height: độ rộng, độ cao của thẻ div
Style: thuộc tính định kiểu của thẻ div
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
25
Ví dụ về thẻ DIV
<div style="position: absolute; width: 100%; height:
100px; z-index: 1; left: 77px; top: 60px"
Copyright: Tài liệu đại học ©