CSS tutorials
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.92 MB, 251 trang )
Một số điều cần chú ý trong CSS
1.Selector.c tính animation
Bộ chọn CSS (selectors)
Ngoài những bộ chọn (selectors) của CSS1 và CSS2, ở CSS3 còn có thêm những bộ chọn
sau:
Bộ chọn Ví dụ Mô tả
tag01~tag02 ul~p Chọn tất cả thành phần 02 khi có thành phần 01 ở trước.
[attribute^=value] img[src^="bnr_"]
Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng
"value".
[attribute$=value] img[src$=".gif"]
Chọn tất cả thành phần với thuộc tính có giá trị kết thúc bằng
"value".
[attribute*=value] img[src*=""]
Chọn tất cả thành phần với thuộc tính có giá trị đặc biệt bằng
"value".
:first-of-type p:first-of-type
Chọn thành phần con đầu tiên hoặc duy nhất trong các thành
phần cha.
:last-of-type p:last-of-type
Chọn thành phần con cuối cùng hoặc duy nhất trong các
thành phần cha.
:only-of-type p:only-of-type Chọn thành phần con trong các thành phần cha, khi thành
phần cha có một thành phần con là chính nó.
Trong thành phần cha có thể chứa nhiều thành phần con, tuy
nhiên thành phần con được chọn phải là duy nhất, không
được có từ 2 trở lên.
:only-child p:only-child
Chọn thành phần con trong các thành phần cha, khi thành
phần cha có mỗi thành phần con là chính nó, không được
chứa thành phần con khác.
Chỉ chọn thành phần có thành phần cha, những thành phần
độc lập sẽ không được chọn.
:nth-child(n) p:nth-child(3)
Chọn thành phần thứ "n" trong thành phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần
độc lập sẽ không được chọn.
:nth-last-child(n) p:nth-last-child(3)
Chọn thành phần thứ "n" tính từ thành phần cuối trong thành
phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần
độc lập sẽ không được chọn.
:nth-of-type(n) p:nth-of-type(3) Chọn thành phần thứ "n".
:nth-last-of-type(n) p:nth-last-of-type(3)
Chọn thành phần thứ "n" từ thành phần cuối trong thành
phần cha.
:last-child p:last-child
Chọn thành phần cuối cùng trong thành phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần
độc lập sẽ không được chọn.
:root :root Chọn thành phần gốc của văn bản.
:empty p:empty Chọn thành phần không chứa thành phần khác.
:target #event:target Sử dụng trong liên kết anchor name (link neo).
:enabled input:enabled
Chọn thành phần được kích hoạt (enabled), thường sử dụng
cho các thành phần của form.
:disabled input:disabled
Chọn thành phần bị vô hiệu hóa (disabled), thường sử dụng
cho các thành phần của form.
:checked input:checked Chọn thành phần được check (checked), thường sử dụng
cho các thành phần của form.
:not(bộ chọn) :not(p) Chọn tất cả ngoại trừ bộ chọn trong ngoặc.
::selection ::selection Chọn phần tử được người dùng chọn.
CSS
Ví dụ về thuộc tính position
Thuộc tính position
Thuộc tính position : xác định loại của phương pháp định vị trí cho thành phần.
Thuộc tính position thường dùng kèm với các thuộc tính định vị
trí: left, right, bottom, top
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
}
</style>
</head>
<body>
<div>
<p>position</p>
</div>
</body>
</html>
Giả sử ta có 2 thành phần, với các thuộc tính định sẳn như trên, khi đó trình duyệt
hiển thị:
position: relative;
Thuộc tính position: relative; : Định vị trí tương đối cho thành phần.
Vị trí tương đối phụ thuộc vào thành phần bao ngoài.
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: relative;
}
</style>
Vị trí mặc định của position là vị trí của thành phần bao ngoài.
Khi ta thêm giá trị left thì lập tức thành phần sử dụng position: relative; sẽ định vị trí
dựa theo thành phần bao ngoài:
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: relative;
left: -20px;
}
</style>
position: absolute;
Thuộc tính position: absolute; : Định vị trí tuyệt đối cho thành phần, khi sử dụng giá
trị này thì vùng xử lý của thành phần sẽ phụ thuộc vào nội dung của thành phần.
Vị trí tuyệt đối phụ thuộc vào thành phần bao ngoài (thành phần định vị trí tương
đối position: relative) hoặc theo cửa sổ trình duyệt.
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: absolute;
}
</style>
Vị trí mặc định của position là vị trí của thành phần bao ngoài.
Khi ta thêm giá trị left thì lập tức thành phần sử dụng position: absolute; sẽ định vị trí
theo cửa sổ trình duyệt:
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: absolute;
left: -20px;
}
</style>
Nếu thành phần bao ngoài sử dụng thuộc tính position: relative; thì thành phần sử
dụng position: absolute; bên trong sẽ định vị trí theo thành phần bao ngoài:
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
left: -20px;
}
</style>
Ta có thể sử dụng các cặp giá trị sau đây để định vị trí cho thành phần:
left top
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
left: -20px;
top: 30px;
}
</style>
left bottom
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
left: -20px;
bottom: -10px;
}
</style>
right top
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
right: 50px;
top: 30px;
}
</style>
right bottom
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
right: 50px;
bottom: -10px;
}
</style>
Chú ý: sử dụng các cặp giá trị sau đây là vô nghĩa: left right hay top bottom
position: fixed;
Thuộc tính position: fixed; : Định vị trí tương đối cho thành phần theo cửa sổ trình
duyệt.
<html>
<head>
<style type="text/css">
p.fixed {
background: blue;
position: fixed;
right: 40px;
top: 50px;
}
</style>
</head>
<body>
<div>
<p class="fixed">position fixed</p>
<p>text text text </p>
</div>
</body>
</html>
Ví dụ về thuộc tính background
Thuộc tính background-attachment
Thuộc tính background-attachment : xác định thành phần nền được cố định hoặc cuộn
so với trang.
Được sử dụng kèm với giá trị background-image
Với url là đường dẫn tới hình được sử dụng làm hình nền.
<html>
<head>
<style type="text/css">
div {
background: url(bg_webstd.gif) no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br /></p>
</div>
</body>
</html>
Thuộc tính background-color
Thuộc tính background-color : xác định màu nền cho thành phần.
<html>
<head>
<style type="text/css">
div {
background-color: #ff0000;
}
</style>
</head>
<body>
<div>
<p>background-color<br />
background-color<br />
background-color<br />
background-color<br /></p>
</div>
</body>
</html>
Thuộc tính background-image
Thuộc tính background-image : xác định hình ảnh nền cho thành phần.
Với url là đường dẫn tới hình được sử dụng làm hình nền.
<html>
<head>
<style type="text/css">
div {
background-image: url(bg_webstd.gif);
}
</style>
</head>
<body>
<div>
<p>background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br /></p>
</div>
</body>
</html>
Thuộc tính background-position
Thuộc tính background-position : xác định vị trí hình ảnh nền cho thành phần.
Được sử dụng kèm với giá trị background-image và background-repeat.
<html>
<head>
<style type="text/css">
div {
background-image: url(bg_webstd.gif);
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<div>
<p>background-position<br />
background-position<br />
background-position<br />
background-position<br />
background-position<br />
background-position<br /></p>
</div>
</body>
</html>
background-position có các cặp giá trị như sau:
background-position: left top; Hình nằm bên trái - phía trên thành phần (đây là dạng
mặc định).
background-position: left bottom; Hình nằm bên trái - phía dưới thành phần
background-position: left center; Hình nằm bên trái - canh giữa thành phần
background-position: right top; Hình nằm bên phải - phía trên thành phần (đây là
dạng mặc định).
background-position: right bottom; Hình nằm bên phải - phía dưới thành phần
background-position: right center; Hình nằm bên phải - canh giữa thành phần
background-position: center top; Hình nằm giữa - phía trên thành phần (đây là dạng
mặc định).
background-position: center bottom; Hình nằm giữa - phía dưới thành phần
background-position: center center; Hình nằm giữa - canh giữa thành phần
background-position: đơnvị đơnvị; Hình nằm cách bên trái với khoảng cách bằng đơn
vị - cách phía trên với khoảng cách bằng đơn vị.
Ví dụ: background-position: 5px 15px;
<html>
<head>
<style type="text/css">
p {
background-image: url(ico_arrow.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 10px;
}
</style>
</head>
<body>
<p>background-position</p>
</body>
</html>
Thuộc tính background-repeat
Thuộc tính background-repeat : xác định hình ảnh nền được lặp như thế nào.
Được sử dụng kèm với giá trị background-image.
background-repeat: repeat-x;
<html>
<head>
<style type="text/css">
div {
background-image: url(bg_webstd.gif);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>
background-repeat: repeat-y;
<html>
<head>
<style type="text/css">
div {
background-image: url(bg_webstd.gif);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>
background-repeat: repeat;
<html>
<head>
<style type="text/css">
div {
background-image: url(bg_webstd.gif);
background-repeat: repeat;
}
</style>
</head>
<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>
background-repeat: no-repeat;
<html>
<head>
<style type="text/css">
div {
background-image: url(bg_webstd.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>
Thuộc tính background
Thuộc tính background : Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính background-
color, background-image, background-repeat, background-position, background-
attachment.
Cách viết như sau:
background: color image repeat position attachment;
Ví dụ: background: #990000 url(bg_webstd.gif) no-repeat left top fixed;
<html>
<head>
<style type="text/css">
div {
background: #990000 url(bg_webstd.gif) no-repeat left top;
}
</style>
</head>
<body>
<div>
<p>background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br /></p>
</div>
</body>
</html>
Ví dụ về thuộc tính border
Thuộc tính border-color
Thuộc tính border-color : xác định màu sắc của đường viền.
<html>
<head>
<style type="text/css">
p {
border: solid;
border-color: red;
}
</style>
</head>
<body>
<p>border-color</p>
</body>
</html>
Thuộc tính border-style
Thuộc tính border-style : xác định hình dạng của đường viền.
<html>
<head>
<style type="text/css">
p {
border-style: dotted;
}
</style>
</head>
<body>
<p>border-style</p>
</body>
</html>
Các loại hình dạng cho border:
Ví dụ Mô tả Hiển thị
!"
Đường viền hiển thị
# $ %&'
("
Đường viền hiển thị
)
!*+
*,-)."
Đường viền hiển thị
(
!/
(-(."
Đường viền hiển thị
!
01- ."
Đường viền hiển thị
+
!2
01-+."
Đường viền hiển thị
!
3-."
Đường viền hiển thị
!
- ."
Đường viền hiển thị
!
4- ."
Đường viền hiển thị
+
!
4 -+."
Đường viền hiển thị
5(6+785
(-( ."
Đường viền hiển thị
Thuộc tính border-width
Thuộc tính border-width : xác định bề dày của đường viền.
<html>
<head>
<style type="text/css">
p {
border: solid;
border-width: 5px;
}
</style>
</head>
<body>
<p>border-width</p>
</body>
</html>
Thuộc tính border-top
Thuộc tính border-top : xác định đường viền bên trên.
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-
width.
<html>
<head>
<style type="text/css">
p {
border-top: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border-top</p>
</body>
</html>
Thuộc tính border-right
Thuộc tính border-right : xác định đường viền bên phải.
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-
width.
<html>
<head>
<style type="text/css">
p {
border-right: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border-right</p>
</body>
</html>
Thuộc tính border-bottom
Thuộc tính border-bottom : xác định đường viền bên dưới.
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-
width.
<html>
<head>
<style type="text/css">
p {
border-bottom: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border-bottom</p>
</body>
</html>
Thuộc tính border-left
Thuộc tính border-left : xác định đường viền bên trái.
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-
width.
<html>
<head>
<style type="text/css">
p {
border-left: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border-left</p>
</body>
</html>
Thuộc tính border
Thuộc tính border : xác định đường viền các vị trí xung quanh (tổng hợp của border-
top, border-right, border-bottom, border-left).
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-
width.
<html>
<head>
<style type="text/css">
p {
border: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border</p>
</body>
</html>
Ví dụ về thuộc tính border-collapse
Thuộc tính border-collapse
Định nghĩa và sử dụng
Thuộc tính border-collapse xác định đường viền của table có tách biệt ra hay không.
Chú ý là thuộc tính border-collapse chỉ được sử dụng cho thành phần table.
Cấu trúc
table {
border-collapse: giá trị;
}
Với giá trị như sau:
Thuộc nh giá trị Ví dụ Mô tả
(
( ((
9:$ ;( !-.<((
/ =%>? !+*"
(( (((
9:$ ;( !-.<((
@ ;+4%A/,B<(("
(
5(6+785(
-( ."
Ví dụ
HTML viết:
<html border="1">
<head></head>
<body>
<table>
<tr>
<th>Thu hai</th>
<th>Thu ba</th>
</tr>
<tr>
<td>2000d</td>
<td>5000d</td>
</tr>
<tr>
<td>500d</td>
<td>4000d</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt khi chưa có CSS:
Thu hai Thu ba
2CCC DCCC
DCC ECCC
CSS viết:
table {
border-collapse: collapse;
}
Hiển thị trình duyệt khi có CSS:
Thu haiThu ba
2CCC DCCC
DCC ECCC
Ví dụ về thuộc tính border-spacing
Định nghĩa và sử dụng
Thuộc tính border-spacing xác định khoảng cách giữa các đường viền của table.
Chú ý là thuộc tính border-spacing chỉ được sử dụng cho thành phần table có các đường viền
tách biệt nhau (border-collapse: separate).
Cấu trúc
table {
border-spacing: giá trị;
}
Với giá trị như sau:
Thuộc nh giá trị Ví dụ Mô tả
(
77 ( FCG H77 ;( !-.<(("
(I ( FCG2CG
H77 ;( !-.<((J
(I"
(
5(6+785(
-( ."
Ví dụ
HTML viết:
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Thu hai</th>
<th>Thu ba</th>
</tr>
<tr>
<td>2000d</td>
<td>5000d</td>
</tr>
<tr>
<td>500d</td>
<td>4000d</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt khi chưa có CSS:
Thu hai Thu ba
2CCC DCCC
DCC ECCC
border-spacing với một giá trị, CSS viết:
table {
border-spacing: 10px;
}
border-spacing với 2 giá trị, CSS viết:
table {
border-spacing: 10px 30px;
}
Ví dụ về thuộc tính bottom
Định nghĩa và sử dụng
Thuộc tính bottom được dùng để định vị trí dưới (bottom) cho thành phần khi sử dụng thuộc
tính position, với khoảng cách được tính từ mép dưới cùng của thành phần bao ngoài.
Chú ý: thuộc tính bottom sẽ không có tác dụng khi position có giá trị là static
Cấu trúc
tag {
bottom: giá trị;
}
Với giá trị như sau:
Thuộc nh giá trị Ví dụ Mô tả
),
9: ),2CG
9:85,1J '<((
%KLG%,%M%"""
(+ ),(+
9:N7-O+P8:
(+.%A,B<(+78),"
),
5(6+785(-
( ."
Ví dụ
HTML viết:
<html>
<head></head>
<body>
<div>
<p>Đây là tag p có vị trí dưới (bottom)</p>
</div>
</body>
</html>
CSS viết:
Giả sử ta có một block có các giá trị position như bên dưới (Xem thêm thuộc tính position).
div {
border: 1px solid #ccc;
height: 100px;
position: relative;
}
div p {
position: absolute;
}
Hiển thị trình duyệt khi chưa sử dụng thuộc tính bottom:
Đây là tag p có vị trí dưới (bottom)
Thêm thuộc tính bottom vào CSS, ta có:
div {
border: 1px solid #ccc;
height: 100px;
position: relative;
}
div p {
position: absolute;
bottom: 10px;
}
Ví dụ về thuộc tính caption-side
Định nghĩa và sử dụng
Thuộc tính caption-side xác định vị trí một chú thích của table.
Cấu trúc
caption {
caption-side: giá trị;
}
Với giá trị như sau:
Thuộc nh giá trị Ví dụ Mô tả
(Q
(Q R(QS44("
), (Q ), R(QS4J ("
(Q
5(6+785(
-( ."
Ví dụ
