HTML5 XP session 06 một số thuộc tính khác của style sheet
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 (743.95 KB, 25 trang )
Bài 06:
Một số thuộc tính khác của Style Sheet
NexTGen Web
Thuộc tính CSS nâng cao
Aptech Ltd.
Building Dynamic Web
Sites / 2 of 25
Mc tiêu
!"#
$%&'()*
Aptech Ltd.
Building Dynamic Web
Sites / 3 of 25
Định vị (Positioning)
$+,-./+-+0
$%&01(2*134#1
5%
#/615%&00+,
7%8-1(2169:1(2
;<0/=>?$@A
Aptech Ltd.
Building Dynamic Web
Sites / 4 of 25
Định vị tương đối (Relative position)
(B1C%5 D1(21,E-E#5 9FG
,E-E#5 /CH1%131
I31%-E (B1C+ J<#0%&
0
Hai hình minh họa dùng thuộc tính top, left và
right, bottom để định vị.
Hình màu đỏ (phần tử con) lấy góc trên bên trái
hình màu đen (phần tử cha chứa phần tử màu
đỏ) làm gốc tọa độ để định vị.
left
top
right
bottom
Aptech Ltd.
Building Dynamic Web
Sites / 5 of 25
Định vị tương đối (Relative position)
#mauvang{
width:300px;
height: 100px;
border: 5px solid yellow;
}
#mauden{
width:300px;
height: 300px;
border: 10px solid black;
}
#hopmaudo{
position: relative;
top: 50px;
left: 50px;
width:100px;
height: 100px;
border: 1px solid red; background:red;
}
top: 50px
left: 50px
<div id="mauvang"> </div>
<div id="mauden">
<div id=“hopmaudo"> </div>
</div>
Aptech Ltd.
Building Dynamic Web
Sites / 6 of 25
Định vị tương đối (Relative position)
#mauvang{
width:300px;
height: 100px;
border: 30px solid yellow;
}
#mauden{
width:300px;
height: 300px;
border: 10px solid black;
}
#hopmaudo{
position: relative;
right: 80px;
bottom: 100px;
width:150px;
height: 150px;
border: 1px solid red; background:red;
}
<div id="mauvang"> </div>
<div id="mauden">
<div id=“hopmaudo"> </div>
</div>
bottom: 100px
right:80px
Aptech Ltd.
Định vị tuyệt đối (Absolute positioning)
IG'1CK 1/% ,EL1J 1(21F5,MJ
(ND>. +O /6-G1(2 PQ*G%OG'
I31%-E 1G'1C+J<#-%&0
G'1CG1R4F'%5 ROG' !S"T
right
right
top
bottom
top
bottom
left
left
Các góc của phần tử con định vị theo các góc phần tử cha.
Aptech Ltd.
Building Dynamic Web
Sites / 8 of 25
Định vị tuyệt đối (Absolute positioning)
P
#logo1 {
position:absolute;
top:50px;
left:70px;
}
#logo2 {
position:absolute;
top:0px;
right:0px;
}
#logo4 {
position:absolute;
bottom:70px;
right:50px;
}
#logo3 {
position:absolute;
bottom:0px;
left:0px;
}
<body>
<div id=“container” style=“width=300px; height=300px; boder:2px green solid;">
<div id="logo1"><img src="HINHANH/1.JPG"></div>
<div id="logo2"><img src="HINHANH/2.JPG"></div>
<div id="logo3"><img src="HINHANH/3.JPG"></div>
<div id="logo4"><img src="HINHANH/4.JPG"></div>
</div>
</body>
Aptech Ltd.
Building Dynamic Web
Sites / 9 of 25
Thuộc tính z-index
$%&UV4W ,316%5 G>EE%5
N#
$J<%&UV4/%CGE13;9:N4J>
#(B+4J>%
GEE N#
#X/+4J%
G( N#
Aptech Ltd.
Building Dynamic Web
Sites / 10 of 25
Thuộc tính z-index
P
#logo1 {
position:absolute;
top:70px;
left:50px;
z-index:1;
}
#logo2 {
position:absolute;
top:140px;
left:100px;
z-index:2;
}
#logo3 {
position:absolute;
top:210px;
left:150px;
z-index:3;
}
#logo4 {
position:absolute;
top:280px;
left:200px;
z-index:4;
}
Aptech Ltd.
Giả lớp (pseudo class)
1(2#P13.GN#-' N/%:N'1,4GP.'9YSN
()*1(Z%L#ENJ
W#N-#[
!'NE.#N#5/%
Trạng thái Mô tả
active
Định nghĩa một style khác cho phần tử đã được người dùng kích hoạt.
hover
Định nghĩa một style khác cho phần tử khi con trỏ chuột di qua nó.
link
Định nghĩa style cho liên kết chưa được viếng thăm.
visited
Định nghĩa style cho liên kết đã được viếng thăm.
Tên_bộ_chọn:trạng_thái {thuộc_tính:giá_trị; }
Aptech Ltd.
Tên bộ chọn Mô tả
:link Được sử dụng để lựa chọn tất cả các liên kết chưa kích.
:active Được sử dụng cho liên kết kích hoạt
:hover Được sử dụng cho liên kết khi di chuột vào
:visited Được sử dụng cho liên kết đã kích
:focus Được sử dụng khi con trỏ đang trên liên kết đó
:first-letter Được sử dụng cho ký tự đầu tiên của mọi phần tử <p>
:first-line Được sử dụng cho dòng đầu tiên của mọi phần tử <p>
:first-child Được sử dụng cho mọi phần tử <p> mà là con đầu tiên của cha nó.
:before Được sử dụng cho nội dung chèn trước mọi phần tử <p>
:after Được sử dụng cho nội dung chèn sau mọi phần tử <p>
12
?$@A\]'^_
Giả lớp(Pseudo class)
!(1XG'NE#E-%H/D5,[
Aptech Ltd.
`4#1N31(2#PE/% *G%.#5,
$_+/%-%H,3->/^V
#`ND.Qa
P
a:link {
color: white;
background-color: black;
border: 2px solid white;
}
a:visited {
color: white;
background-color: brown;
border: 2px solid white;
}
a:hover {
color: black;
background-color: white;
border: 2px solid black;
}
13
?$@A\]'^_
Giả lớp(Pseudo class)
Chỉ ra kiểu cho các link chưa kích
Chỉ ra kiểu cho các link chưa kích
Chỉ ra kiểu cho các link đã kích
Chỉ ra kiểu cho các link đã kích
Chỉ ra kiểu khi con chuột di vào link
Chỉ ra kiểu khi con chuột di vào link
Aptech Ltd.
14
?$@A\]'^_
Mc đích của các giả phần tử
b/4K/%N-/ 1JNJ/%c-#<d#<dLH
$N4#11^N'(<G+ ,3/FGF/.E/^#d#10E-e##P
N3N#
` F /%:.13#PN3/%P35%(d#10E6
f10E
` -JE//%C'916-'# ?$@A(gh+g-Gh+
W#[
Aptech Ltd.
Các phần tử giả :first-line and :first-letter cho phép bạn áp dụng phong cách để dòng đầu tiên và chữ cái đầu tiên tương ứng.
Các phần tử giả :first-line and :first-letter cho phép bạn áp dụng phong cách để dòng đầu tiên và chữ cái đầu tiên tương ứng.
Giả phần tử :first-line pseudo cho phép bạn áp dụng kiểu cho dòng đầu tiên.
Giả phần tử :first-line pseudo cho phép bạn áp dụng kiểu cho dòng đầu tiên.
15
?$@A\]'^_
Các giả phần tử
P
p:first-line
{
font-family: “Tahoma”;
font-weight: bolder;
background-color: #FFFFCC;
}
Xác định kiểu được áp dụng cho dòng đầu tiên
của nội dung đoạn
Xác định kiểu được áp dụng cho dòng đầu tiên
của nội dung đoạn
Aptech Ltd.
Giả phẩn tử :first-letter cho phép bạn áp dụng kiểu cho các ký tự đầu tiên của nội dung.
Giả phẩn tử :first-letter cho phép bạn áp dụng kiểu cho các ký tự đầu tiên của nội dung.
16
?$@A\]'^_
Các giả phần tử
P
p:first-letter
{
font-family: “fantasy”;
font-size: xx-large;
font-weight: bold;
}
Xác định kiểu được áp dụng cho các chữ cái đầu
tiên của nội dung đoạn
Xác định kiểu được áp dụng cho các chữ cái đầu
tiên của nội dung đoạn
Aptech Ltd.
CSS có thể được sử dụng để thay đổi sự xuất hiện và hành vi của các siêu liên kết.
CSS có thể được sử dụng để thay đổi sự xuất hiện và hành vi của các siêu liên kết.
Có hai cách khác để gán kiểu siêu liên kết cụ thể là, div cụ thể và link cụ thể.
Có hai cách khác để gán kiểu siêu liên kết cụ thể là, div cụ thể và link cụ thể.
Nêu các kiểu của hyperlink được gán cho một div cụ thể thì tất cả các hyperlink trong div đó đều tuân theo quy tắc đã định nghĩa.
Nêu các kiểu của hyperlink được gán cho một div cụ thể thì tất cả các hyperlink trong div đó đều tuân theo quy tắc đã định nghĩa.
Các hyperlink có cùng mục đích thường sử dụng các kiểu class thay vì id, một điểm chú ý là id chỉ sử dụng một lần trong trang, còn class
sử dụng nhiều lần theo yêu cầu.
Các hyperlink có cùng mục đích thường sử dụng các kiểu class thay vì id, một điểm chú ý là id chỉ sử dụng một lần trong trang, còn class
sử dụng nhiều lần theo yêu cầu.
17
?$@A\]'^_
Các kiểu cho Hyperlinks
Aptech Ltd.
BuildingDynamic Web
Sites / 18 of 25
Thuộc tính List
$%&K#P#GN##'NEF*GH13
,31.-i1/j/P'NE
Thuộc tính Mô tả
list-style-image
Chỉ ra một ảnh nhỏ làm bullet phần đầu mỗi mục liệt kê
list-style-position Chỉ ra vị trí của bullet
list-style-type Chỉ ra kiểu bullet
Aptech Ltd.
19
k0?$@A\]l
Thuộc tính Table
$%&-K 4#1FWO-G-FW5-->/^%&
(N#d#f#%+N#1()^m
Thuộc tính Mô tả Giá trị
table-layout Xác định cách hiển thị dòng, cột, ô của bảng. + auto
+ fixed
border-collapse Xác định đường biên của bảng là viền đơn hay
viền tách biệt như lúc mặc định ban đầu.
+ collapse: viền đơn
+ separate: viền tách biệt
Aptech Ltd.
Building Dynamic Web
Sites / 20 of 25
Thuộc tính Table
TABLE{
border:1px solid red;
background-color:#FFFFCC;
border-collapse:separate;
table-layout:fixed;
}
TD{
border:1px solid green;
padding-left:4px;
padding-right:4px;
}
TABLE{
border:1px solid red;
background-color:#FFFFCC;
border-collapse:collapse;
table-layout:fixed;
}
TD{
border:1px solid green;
padding-left:4px;
padding-right:4px;
}
Aptech Ltd.
Building Dynamic Web
Sites / 21 of 25
Thuộc tính giao diện người dùng (User Interface)
$%&-
$%&
$%&U/
Aptech Ltd.
Building Dynamic Web
Sites / 22 of 25
Thuộc tính Scrollbar
"*%&-5+ ,3*G-JO95%
$%&-ND,ln+(a1(2j2-iOG'ko4Q
E-\\i^G
Aptech Ltd.
Building Dynamic Web
Sites / 23 of 25
Thuộc tính Scrollbar
Body
{
scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f
}
Aptech Ltd.
Building Dynamic Web
Sites / 24 of 25
Thuộc tính cursor
$%&KG1RO9ZN%L%
!#%&
Giá trị Mô tả
crosshair
hand
help
text
move
wait
Giá trị Mô tả
ne-resize
nw-resize
s-resize
e-resize
Aptech Ltd.
Building Dynamic Web
Sites / 25 of 25
Thuộc tính zoom
$%&U/K,%N3Ec-
