HTML5 XP session 06 định dạng với style sheet t3
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 (1.52 MB, 66 trang )
Bài 06:
Định dạng với Style Sheet
NexTGen Web
Aptech Ltd.
Mục tiêu
!"#$!%
Color
text-align
text-decoration
text-indent
text-transform
word-spacing
line-height
&'()*+(,!-./01/2
34!".01,1,1015!2
text–indent
padding
margin
)6#!,,
"1!4!
!71-,!4!
Aptech Ltd.
8
Font cho văn bản 1-2
9 )6"#:44 /;<<!"#,!(),1=#%
>?@/A3B14C( /D!"#E"!F(!71G;E"!"#E#+</A
3 )6:%
Thuộc tính
Mô tả
color
Nó được sử dụng để xác định màu sắc của văn bản.
text-align
Nó được sử dụng trong việc xác định căn lề ngang của văn bản trong một phần tử.
text-decoration
Nó được sử dụng để xác định decoration của các văn bản trong một phần tử.
text-indent
Nó được sử dụng để xác định thụt đầu dòng của dòng đầu tiên của văn bản trong một phần
tử trong chiều dài hoặc %.
text-transform
Nó được sử dụng để xác định sự chuyển đổi hình thức của văn bản trong một phần tử.
word-spacing
Nó được sử dụng để tăng hoặc giảm khoảng cách giữa các từ.
Aptech Ltd.
H
Font cho văn bản 2-2
9 )6font!0I0#J 40'7!"#14C )60'71 K1"#?
$!7E?E0!K1"#%
Thuộc tính Mô tả
font-family
Nó được sử dụng để xác định phông chữ và có thể chỉ định một tập font hoặc một tên font cụ thể như "Serif" hoặc
"Times New Roman".
font-size
Nó được sử dụng để xác định kích thước của các font chữ và có thể có một giá trị tuyệt đối hay tương đối.
font-style
Nó được sử dụng để xác định kiểu của phông chữ.
font-variant
Nó được sử dụng để xác định liệu các văn bản sẽ được hiển thị nhỏ.
&)/L,K1 )6text-align
Giá trị Mô tả
left
Văn bản căn trái.
right
Văn bản căn phải.
center
Văn bản căn giữa.
justify
Văn bản căn đều.
Aptech Ltd.
M
Web fonts
98< 6"N#$!/E!0I00,=#O,1P05$!*GK1(Q4
!=!1*,1=#%
J R4?ST4$!4?S/A3!,1=#E?'B/U,V(
?@*%
9W00X
@font-face {
font-family: 'My font';
src: url('myfont.ttf') format('truetype');
}
Aptech Ltd.
Kiểu cho văn bản 1-6
Giá trị Mô tả
length Chỉ ra đơn vị bằng độ dài, mặc định là 0.
% Chỉ ra đơn vị bằng phần trăm.
Giá trị Mô tả
none Không thay đổi.
capitalize Chuyển ký tự đầu tiên của mỗi từ thành ký tự hoa
Uppercase Chuyển toàn bộ văn bản thành chữ hoa.
Lowercase Chuyển toàn bộ văn bản thành chữ thường.
,K1 )6text-indent
9,K1 )6text-transform
Aptech Ltd.
Y
Kiểu kiểu văn bản 2-6
Z3%
Aptech Ltd.
[
Kiểu kiểu văn bản 3-6
Mã CSS
9!0\A]^Z
%
_RJ
%
Aptech Ltd.
`
Kiểu kiểu văn bản 4-6
Giá trị Mô tả
normal Không định dạng.
length Chỉ ra giá trị là độ dài khoảng cách giữa các từ
Giá trị Mô tả
none Không định dạng.
underline Gạch dưới.
overline Gạch qua văn bản
line-through Gạch qua văn bản
blink Văn bản nhấp nháy
9,K1 )6text-decoration%
9,K1 )6word-spacing%
Aptech Ltd.
a
Kiểu kiểu văn bản 5-6
Z3
Aptech Ltd.
aa
Kiểu kiểu văn bản 6-6
9!0\A#!b8
_RJ
Aptech Ltd.
a
Chiều cao của dòng
c,!9E )6line-height4?S/A34d-,!()4!%
c )6e()0\K1 )6f$!gRD%
>BB030\A(hLE'K1#E034K1#.1#105!2E%%%
Giá trị Mô tả
normal ]-B 1!#Q?@%i,(F4%
number i()/L/jk?$!<4:4 1!K1-%
length 9 1!L4K1-4?S6#+0:E0E(El
% 9 1!K1-6!m</!?K1$!<
inherit 9O,1,K1 )6n4?So1Ro0\A1%
Aptech Ltd.
a8
Phần tử Span 1-2
cpq/01rB(0\A,V()-%
Z3%
<p>My mother has <span style=”color: lightblue”>light blue
</span> eyes.
</p>
Or
<span class=”eyesonly”>light blue</span>
c!/!p
q/01r,!!/:,1%
.eyesonly {font-color: lightblue}
9p/01B )61 EBs,S )6/;<t11,0e%
Aptech Ltd.
aH
Phần tử Span 2-2
/1 <V )61 ,/A3,!pq/01r%
Thuộc tính Giá trị Mô tả
class
classname Xác định tên class sử dụng cho phần tử.
dir
rtl
ltr
Sử dụng xác định hướng văn bản.
id
id Xác định tên id sử dụng cho phần tử.
lang
language_code Xác định mã ngôn ngữ sử dụng cho phần tử.
style
style_definition Xác định kiểu sử dụng cho phần tử
title
text Chỉ ra thông tin mở rộng cho phần tử
xml:lang
language_code Xác định mã ngôn ngữ sử dụng cho phần tử trong các tài liệu
XHTML.
Aptech Ltd.
aM
Thụt lề cho đoạn văn bản 1-6
c3\ -J ,QRP0,1"#o,#Q?@K1BE!F/1,!F#V0%
c,!4!EB#1!34\ -X
Thụt dòng đầu tiên
A3 )6:u%
Z3%
Style nội tuyến
<p style=”text-indent: 50px”>
bên trong (Internal css)
p {text-indent: 50px}
Aptech Ltd.
a
Thụt lề cho đoạn văn bản 2-6
Z
3/A3 )6text–indent,!<0bc&i%
<!DOCTYPE HTML>
<html>
<head>
<title>Font Gallery</title>
<style>
p {text-indent: 150px}
</style>
</head>
<body>
<p>
c$!//0,!0,5/1!=! !/0$$!$!,:%c1!=
! !1v,$!1w,# /!$:/ 1/$!E/xE1/
!$:%c#,!=/,( // 00!,$!/0y#$!0,!0,5/%
z,=/E=/01$1 $!E=/0!#,!=/,%
</p>
</body>
</html>
Aptech Ltd.
aY
Thụt lề cho đoạn văn bản 3-6
_RJ
Padding
c )6padding4?S/A34V(()'1,L#1!J 1) K1()0\A4!
!71) 4?@#V0\A4B%
Z3!%
Inline style
<p style=”padding: 20px”>
Internal CSS
p {padding: 20px}
Aptech Ltd.
a[
Thụt lề cho đoạn văn bản 4-6
Z
3!,1%
<!DOCTYPE HTML>
<html>
<head>
<title>Font Gallery</title>
<style>
p {padding: 20px }
</style>
</head>
<body>
<p>
c$!//0,!0,5/1!=! !/0$$!$!,:%c1!=!
!1v,$!1w,# /!$:/ 1/$!E/xE1/!$
:%c#,!=/,( // 00!,$!/0y#$!0,!0,5/%
z,=/E=/01$1 $!E=/0!#,!=/,%
</p>
</body>
</html>
Aptech Ltd.
a`
Thụt lề cho đoạn văn bản 5-6
Lề (Margin)
c )6(1,4?S/A34V(()!,D#1!-J 10\A
bQ!TRJ K14!"/A3 )6padding.
Aptech Ltd.
Thụt lề cho đoạn văn bản 6-6
_RJ
!(d({1# ) R!pq0r(d9#V,!.,192!
)601%
Inline style
<p style=”margin: 20px”>
Internal CSS
p {margin: 20px}
Aptech Ltd.
a
Kiểu viền (Border Style) 1-7
Border là các đường viền chữ nhật bao quanh một phần tử.
Border xuất hiện quanh một văn bản và hình ảnh nhằm để nhấn mạnh nội dung bên trong hộp văn bản.
Các thuộc tính border của CSS chỉ ra kiểu nét, màu sắc và kích cỡ(độ đậm) của nét cho đường viền.
Bảng dưới đây liệt kê các thuộc tính border-style:
Thuộc nh Mô tả
#!,,n|n/ 9O,1 IK1#V#V,%
#!,,n,n/ 9O,1 IK1#V#V0%
#!,,n!0n/ 9O,1 IK1#V#V,V%
#!,,n#!w!(n/ 9O,1 IK1#V#V?%
Aptech Ltd.
Kiểu viền (Border Style) 2-7
Bảng liệt kê các giá trị cho thuộc tính border-style.
Giá trị Mô tả
dashed
Chỉ ra kiểu nét đường biên là nét đứt.
dotted
Chỉ ra kiểu nét đường biên là nét chấm.
double
Chỉ ra kiểu nét đường biên là nét đôi.
groove
Chỉ ra kiểu nét đường biên là nét 3D grooved.
inset
Chỉ ra kiểu nét đường biên là nét 3D inset.
outset
Chỉ ra kiểu nét đường biên là nét 3D outset.
ridge
Chỉ ra kiểu nét đường biên là nét ridged.
solid
Chỉ ra kiểu nét đường biên là nét liền.
Aptech Ltd.
8
Kiểu viền (Border Style) 3-7
&d
bc&i%
&d9
Aptech Ltd.
H
Kiểu viền (Border Style) 4-7
_R
J
Aptech Ltd.
M
Kiểu viền (Border Style) 5-7
Thuộc tính viết tắt (Shorthand property)
(d9D{}E9 T0 )6RD4(4)K1(d%
c )6RD*!<RP0 IK14?@#!,,n/%
bQ/1 4k(dbc&i3%
