CSS cơ bản dành cho những người mới học 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 (684.71 KB, 41 trang )
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
hiển thị trong các trình duyệt khác nhau.
Reset các thuộc tính CSS.
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
4
GIỚI THIỆU
Học CSS cần những gì?
Kiến thức về HTML, XHTML
Javascript
Trình soạn thảo: Notepad, wordpad,
dreamweaver…
Phiên bản trình duyệt mới nhất.
Thực hành, thực hành và thực hành…
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
Học CSS xong làm đƣợc gì?
Định dạng văn bản các trang web theo
cùng style
Định dạng bảng biểu
Thiết kế đƣợc menu ngang hoặc popup
Tạo hiệu ứng động trên trang web…
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 5
6
QUY ƢỚC CÁCH VIẾT CSS
Cú pháp: selector {properties:value}
Ví dụ:
Trong HTML viết: <body bgcolor=“#808080”>
Trong CSS viết:
body{background-color:#808080; margin-left:0px}
Giải thích các thành phần:
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.
HexadecimalRGB Mã màu RGB dạng hệ thập lục phân.
Ví dụ: #FFFFFF: Trắng, #000000:đen
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
9
Dựa vào vị trí đặt CSS trong tài liệu
HTML ta có 3 loại CSS:
CSS Nội tuyến- Inline style
CSS bên trong thẻ style- Internal style
CSS bên ngoài- External style
Nếu không sử dụng CSS thì nội dung
trang web đƣợc định dạng theo style
mặc định của trình duyệt
Phân loại CSS
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
10
Inline style: Là kiểu đƣợc gán cho một
dòng hoặc một đoạn văn bản, bằng cách
sử dụng thuộc tính style bên trong tag
muốn định dạng
Cú pháp:
<TagName
Style=”property1:value1;property2:value2; …”>
Nội dung văn bản muốn định dạng
</TagName>
INLINE STYLE
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
11
Ví dụ :
<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>
<STYLE TYPE=”text/css”>
p{ color: red; font-family: Tahoma }
h1 { color: limegreen; font-family: Arial }
</STYLE>
</HEAD>
<BODY>
<H1>This is the H1 element</H1>
<P >This is the P element</p>
<H3>This is the H3 element with its default style as
displayed in the browser</H3>
</BODY>
</HTML>
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
14
Lƣu ý
Đối với các trình duyệt cũ sẽ không nhận ra thẻ
<style>. Lúc này nội dung trong cặp thẻ <style>
sẽ đƣợc hiển thị trong phần nội dung web.
Cách khắc phục: Thêm dấu <! ở trƣớc và >
vào sau khối lệnh CSS
Ví dụ:
<STYLE TYPE=”text/css”>
<! p{ color: red; font-family: Tahoma }
h1 { color: limegreen; font-family: Arial }
>
</STYLE>
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
15
External style (linked style):
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”>
</Head>
EXTERNAL STYLE
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
18
Ví dụ:
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css”
TYPE=”text/css”>
</HEAD>
<BODY>
<H2> Changing the rules is fun</H2>
<P> Changing the rules may not be such fun
<H2>The H2 element again</H2>
</BODY>
</HTML>
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
19
ĐỊNH BẢNG MẪU CHO LỚP (CLASS)
Có thể chia các yếu tố trong HTML thành các lớp để
áp dụng kiểu mẫu hiệu quả hơn
Cú pháp:
<STYLE>
.ClassName{property1: value1;
property2:value2;…}
TagName.ClassName{property1: value1;
property2:value2;…}
</STYLE>
Trong phần <Body>, đánh dấu phần nằm trong lớp
bằng cú pháp:
<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;
property2:value2;…}
#IDName{property1: value1; property2:value2;…}
</style>
Trong tag Body nhập cú pháp:
<TagName ID=IDName> Nội dung</TagName>
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
22
Ví dụ :
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE type=“text/css”>
p#control {color: red;font-weight:bold; text-indent:18pt}
#id_control{color: blue; text-indent:10pt;}
p{color: magenta;text-indent:0pt}
</STYLE>
</HEAD>
<BODY>
<p id=control>A hardware device that allows the user to make electronic
copies of graphics or text.
<h1 id=id_control>A hardware device that allows the user to make
electronic copies of graphics or text.</h1>
<p id=id_control>Short for picture element. A pixel refers to the small
dots that make up an image on the screen. </p>
<p>Short for picture element. A pixel refers to the small dots that make
up an image on the screen. </p>
</BODY>
</HTML>
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
23
TẠO CÁC THẺ TÙY Ý
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"
id="layer1">
dòng thứ nhất
</div>
<div style="position: absolute; width: 100%; height:
100px; z-index: 2; left: 126px; top: 38px"
id="layer2">
<font color="#FF0000">dòng thứ hai</font><p>
<font color="#FF0000">dòng thứ 3</font>
</div>
8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH
