Tìm hiểu về css
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 (142.67 KB, 18 trang )
Giáo viên: Lê Nguyên Sinh.
Sinh viên: Trần Thị Thanh Loan.
Lớp: K56a_CNTT_ĐHSP Hà Nơi.
BÁO CÁO TÌM HIỂU VỀ CSS
I. Định nghĩa CSS:
- CSS là viết tắt của Cascading Style Sheet là mẫu quy định cách thức thể
hiện các thể HTML.
- CSS được đưa vào thẻ HTML 4.0 để giải quyết một số vấn đề về trình bày
dữ liệu, rút tiết kiệm được thời gian và công sức cho việc thiết kế web.
- Có thể định nghĩa nhiều style vào cùng một thể HTML (cascading style
sheet).
- Các loại style: Có 4 loại style:
Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)
Internal Style (Style được qui định trong phần <HEAD> của 1 trang
HTML )
External Style (style được qui định trong file .CSS ngoài)
Browser Default (thiết lập mặc định của trình duyệt).
II. Thuộc tính của CSS:
1. CSS how to:
- Khi đọc một trình duyệt một kiểu style sheet, nó sẽ xố hết tài liệu gộp đến
nó. Có 3 cách chèn một style sheet:
External style sheet
Internal style sheet
Inline style
2. Css background:
- Cho phép bạn điều khiển mầu nền của một phần tử, thiết lập hình ảnh nền,
lập lại nền thẳng đứng hoặc phương ngang, đối diện với một trang.
Property
Description
Values
1
IE
F
N
W3
C
background
là một thuộc tính tốc
background_attachment. 4
kí để đặt tất cả các
background _image.
thuộc tính nền trong
background _position.
một tuyên bố
background _color.
đặt một hình ảnh nền
background _repeat
- sự cuộn cố định.
background
trang
- đặt một hình ảnh
_image
background
nền
- Tập hợp những
_position
hình ảnh bắt đầu định right, botom left, botom
background
1
6
1
4
1
6
1
- url(URL)
4
1
4
1
-none
top left, top center, top
4
1
6
1
4
1
4
1
4
1
4
1
_attachment cố định hoặc cuộn
với phần còn lại của
vị.
center, botom right x%
background
- đặt mầu nền của
y%, xpos ypos
color_rgb.
_color
một phần tử.
color_hex.
color_name.
transparent
repeat, repeat_x, repeat
background
- những tập hợp
_repeat
nếu/làm sao một hình - y, no - repeat.
ảnh nền sẽ được lặp
lại
Ví dụ: về background_image
<html>
<head>
<style type="text/css">
body
{
background-image:
url('file:///D:/Anhnghethuat/normal_T215.jpg')
}
</style>
</head>
2
<body>
</body>
3. Thuộc tinh CSS_text:
- Thuộc tính css text cho phép bạn điều khiển sự xuất hiện của văn bản. Nó
có thể thay đổi mầu nền của một văn bản, tăng thêm hoặc giảm bớt khơng gian giữa
những đặc tính trong một văn bản, sắp xếp thẳng hàng văn bản, trang trí một văn
bản, làm thụt vào đầu dịng xuống hàng đầu tiên của văn bản, và còn nhiều ứng
dụng khác nữa.
poperty
color
description
- Đặt mầu của văn
direction
bản
- Đặt phương
line_height
hướng cho văn bản rtl
- Đặt khoảng cách normal
giữa các hàng
values
color
IE F
3
1
N
4
W3C
1
ltr
6
1
6
2
4
1
4
1
4
1
6
1
4
1
4
1
4
1
4
1
4
1
4
1
number
lenght
letter_spacing
- Tăng thêm hoặc
%
normal
giảm bớt khơng
lenght
gian giữa những
text_align
đặc tính
- Xếp thẳng hàng
left
văn bản cho một
light
phần tử.
center
text_decoration - Thêm trang trí
vào văn bản
justify
none
underline
overlineline_through
text_indent
- Làm thụt vào đâu
blink
lenght
dòng văn bản đầu
%
tiên của một phần
tử.
3
text_transform
- Điều khiển thư
none
trong một phần tử.
capitalize
4
1
4
1
uppercase
lowercase
unicode_bidi
nomal
5
2
embed
white_space
word_spacing
- Thiết lập không
bidi_override
normal
gian trắng bên
pre
trong một phần tử
nowrap
như thế nào.
- Tăng thêm hoặc
normal
giảm bớt khoảng
lenght
cách giữa các từ.
Ví dụ: một số thuộc tính của text
<head>
<style type="text/css">
h1 {color: #00ff00}/*color*/
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
h3.highlight
{
background-color:yellow
}
h4 {letter-spacing: 5px}
h5 {letter-spacing: 1.5cm}
</style>
</head>
<body>
tran thi thanh loan
vu thi nham
mac thi mai
4
5
1
4
1
6
1
6
1
<span class="highlight"> day la doan thu chuong trinh cua toi </span> day
la doan thu. <span class="highlight">cua toi.</span>
nham thich an com ca
nguyen loan rat teen
</body>
</html>
4. CSS font:
- Những thuộc tính của css font cho phép bạn thay dổi font family, kích
thước và kiểu một văn bản.
poperty
font
description
- Một thuộc tính
values
font_style
tốc kí để đặt tất cả
font_variant
các thuộc tính cho
font_weight
một font trong
font_size/line_height
một tuyên bố.
font_family
IE F
4
1
N
4
W3C
1
3
1
4
1
3
1
4
1
caption
icon
menu
message_box
small_caption
font_family
- Một danh sách
status_bar
family_name
ưu tiên liệt kê font genegic_family
tên và những họ
tên chung cho một
font_size
phần tử.
-Thiết lập kích
xx-small, x-small,
thước của font
small, medium,
large, xx-large, xlarge, smaller, larger
lenght
%
5
font_size_adjust - Chỉ rõ một giá
trị khía cạnh cho
none
-
-
-
2
-
-
-
2
4
1
4
1
4
1
6
1
4
1
4
1
number
một phần tử mà sẽ
rành riêng x chiều cao đầu tiên
font_stretch
- font lựa chọn
- Đặc lại hoặc mở
normal, wider,
rộng font_family
narrower
hiện thời
ultra-condensend
extra-condensend
condensend
semi-condensend
semi-expanded
expanded
extra-expanded
font_style
font_variant
-Thiết lập kiểu
ultra-expanded
normal
của font
italic
text màn hình bên
oblique
normal
trong nhỏ- những
small-caps
font mục hoặc
font_weight
font bình thường
thiết lập chiều
normal
rộng của font
bold
bolder
lighter
100
200
300
400
500
600
700
6
800
900
Ví dụ:
<html>
<head>
<style type="text/css">
p
{
white-space: nowrap
}
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
</style>
</head>
<body>
nho nha qua, nho nha qua.
nham kho tinh
nham rat hay buc minh
day la mot vi du moi
chung ta phai co gang lam mot vai vi du nua
day la vi du 1
day la vi du 2
day la vi du 3
</body>
</html>
5. CSS table:
7
- Thuộc tính css table cho phép bạn thiế lập cách trình bày một bảng.
poperty
border-
description
- Thiết lập những
values
collapse
collapse
đường viền bảng
separater
IE
5
F
1
N
7
W3C
2
sặp vào trong một
viền đơn hoặc
được tách trong
tiêu chuẩn HTML
border_spacing - Thiết lập khoảng
lenght lenght
5M 1
6
2
mơ hình
- Thiết lập vị trí
top
5M 1
6
2
đầu đề bảng
botom
5M 1
6
2
5
6
2
cách những viền ô
chia cắt (chỉ cho
chia ra những miền
caption_side
left
empty_cells
- Đặt có hoặc
right
show
khơng hiện ra làm
hide
trống những ô
table_layout
trong 1 bảng
- Thiết lập những
auto
giải thuật được sử
fixed
dụng để trình bày
những ơ bảng,
chèn, và những cột
Ví dụ:
<html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
8
1
table.two
{
table-layout: fixed
}
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td width="20%">ho ten </td>
<td width="40%">ngay sinh</td>
<td width="40%">que</td>
</tr>
</table>
<table class="two" border="1" width="100%">
<tr>
<td width="20%">ho ten</td>
<td width="40%"> ngay sinh</td>
<td width="40%">que</td>
</tr>
<table border="1">
<tr>
<td>loan</td>
<td>mai</td>
</tr>
<tr>
9
<td>hang</td>
<td></td>
</tr>
</table>
</body>
</html>
6. CSS list:
- Thuộc tính css list cho phép bạn đặt danh sách - nhãn dấu, thay đổi giữa
danh sách khác - nhãn dấu khác, hoặc đặt một ảnh cho danh sách - nhãn dấu.
poperty
list_style
description
- Một thuộc tính
values
//list_style_image
tốc kí để đặt tất
//list_style_position
cả các thuộc
//list_style_type
IE F N
4
1 6
W3C
4
4
1
6
1
4
1
6
1
4
1
4
1
tính cho một
danh sách trong
list_style_image
1 tuyên bố
- Đặt một hình
none
ảnh trên một
url
danh sách nhãn dánh dấu
list_style_position - Đặt ở đây một
danh sách -
inside
outside
nhãn đánh dấu
là địa điểm
list_style_type
trong danh sách
- Thiết lập kiểu
none
của danh sách -
disc
nhãn vạch dấu
circle
square
decimal
decimal_leading_zero
lower_roman
upper_roman
lower_alpha
10
upper_alpha
lower-greek
lower-lati
upper-lati
hebrew
armanian
georgian
cjk-idecgraphics
hirogana
hirogana-iroha
marker-offset
katakana-iroha
auto
lenght
Ví dụ:
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>ruou</li>
<li>bia</li>
<li>nuoc ngot</li>
</ul>
<ul class="circle">
<li>ruou</li>
<li>bia</li>
<li>nuoc ngot</li>
11
1
7
2
</ul>
<ul class="square">
<li>ruou</li>
<li>bia</li>
<li>nuoc ngot</li>
</ul>
<ul class="none">
<li>ruou </li>
<li>bia</li>
<li>nuoc ngot</li>
</ul>
</body>
</html>
7. CSS border:
- CSS border cho phép bạn chỉ rõ kiểu và mầu của một phần tử border. Trong
HTML chúng ta có thể tạo border xung quanh text. Nhưng với thuộc tính css border
chúng ta cần tạo ra borders hiệu quả tốt hơn, và nó có thể cập nhật mỗi phần tử.
poperty
border
description
Một thuộc tính
values
border_width
tốc kỳ để đặt tất
border_style
cả các thuộc
border_color
IE F N W3C
4 1 4 1
tính cho 4
border trong
border_botom
một tun bố
Một thuộc tính
border_botom_width 4
tốc kì để đặt tất
border_style
cả các thuộc
border_color
1
6
1
1
6
2
tính botom
border trong 1
boder_botom_color
tuyên bố
Thiết lập màu
border_color
của botom
12
4
boder_botom_style
border
Thiết lập kiểu
border_style
4
1
6
2
thin
4
1
4
1
của botom
border
boder_botom_width Thiết lập chiều
border_color
rộng của
medium
botom_borderr
thick
Thiết lập màu
length
color
4
1
6
1
màu
Một thuộc tính
border_left_width
4
1
6
1
tốc kì cho cài
border_style
đặt tất cả thuộc
border_color
của 4 border có
thể có từ 1 đến 4
border_left
tính cho border
trái trong 1
border_left_color
tun bố
Thiết lập màu
border_color
4
1
6
2
border_left_style
của left border
thiết lập kiểu
border_style
4
1
6
2
border_left_ width
của left border
Thiết lập chiều
thin
4
1
4
1
rộng của left
medium
border
thick
một thuộc tính
length
border_right_width
4
1
6
1
tốc kì để đặt tất
border_style
cả các thuộc
border_color
border_right
tính cho right
border trong 1
border_right_color
tuyên bố
thiết lập màu
border_color
4
1
6
2
border_right_style
cho right border
thiết lập kiểu
border_style
4
1
6
2
13
border_right_width
cho right border
Thiết lập chiều
thin
rộng cho right
medium
border
thick
Thiết lập kiểu
length
none
cho 4 border, có
hidden
4
1
4
1
4
1
6
1
4
1
6
1
border_top_color
trong 1 tuyên bố
thiết lập màu
border_color
4
1
6
2
border_top_style
cho top border
Thiết lập kiểu
border_style
4
1
6
2
border_top_width
cho top border
Thiết lập chiều
thin
4
1
4
1
rộng cho top
medium
border
thick
Một thuộc tính
length
thin
4
1
4
1
tốc kí để đặt tất
medium
cả chiều rộng
thick
của 4 border
length
border_style
thể có từ 1 đến 4 dotted
kiểu
dasched
solid
double
groove
ridge
inset
border_top
một thuộc tính
outset
border_top_width
tốc kí để đặt tất
border_style
cả các thuộc
border_color
tính top border
border_width
trong 1 tun
bố, có thể có từ
14
1 đến 4 giá trị
8. css outline:
- Những thuộc tính của outlines đặt outlines xung quanh các phần tử. Bạn có
thể chỉ dõ kiểu, màu, và chiều rộng của outline.
poperty
ountline
outline_color
outline_style
description
một thuộc tính tốc
values
outline_color
kí cho cài đặt tất cả
outline_style
thuộc tính outline
outline_width
trong 1 tuyên bố
thiết lập màu
color
outline xung quanh
invert
1 phần tử
Thiết lập kiểu của
none
outline xung quanh
dotted
1 phần tử
dasched
IE F
N
1.5 -
W3C
2
-
1.5 -
2
-
1.5 -
2
-
1.5 -
2
solid
double
groove
ridge
inside
outside
ountline_width thiết lập chiều rộng
thin
của outline xung
medium
quanh phần tử
thick
length
Ví dụ:
<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
15
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
</style>
</head>
<body>
A dotted outline
A dashed outline
A solid outline
A double outline
A groove outline
A ridge outline
An inset outline
An outset outline
</body>
</html>
9. CSS margin:
- Những thuộc tính css margin định nghĩa khơng gian xung quanh những
phần tử. Nó có thể sử dụng những giá trị phủ định để chồng lên nội dung. Như top,
bottom, right và left margin có thể thay đổi độc lập sử dụng những thuộc tính bản in
mới
Margin tốc kỳ có thể cho phép bạn tất cả margins.
poperty
Margin
description
thuộc tính tốc ký
values
Margin_top
cho thiết lập những
Margin_right
thuộc margin trong
Margin_bottom
1 tuyên bố
Margin_bottom thiết lập bottom
margin của 1 phần
Margin_left
Auto
length
16
IE F
4
1
N
4
W3C
1
4
4
1
1
Margin_left
tử
Thiêt lập left
3
1
4
1
phần tử
Thiết lập right
Auto
3
1
4
1
margin của 1 phần
Length
tử
%
thiết lập top margin
Auto
3
1
4
1
của 1 phần tử
length
margin của một
Margin_right
Margin_top
Ví dụ:
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
This is a paragraph with no specified margins
This is a paragraph with specified margins
This is a paragraph with no specified margins
This is a paragraph with no margin specified
This is a paragraph with a specified top margin
</body>
</html>
10. CSS padding:
- Những thuộc tính css padding được định nghĩa không gian giữa border của 1 phần
tử. Giá trị phủ định không trả được nợ. top, bottom, and left padding có thể thay đối
được độc lập với những thuộc tính bản in rời. 1 thuộc tính tốc ký được tạo ra để
điều khiển nhiều cạnh ngay lập tức.
poperty
Padding
description
thuộc tính tốc ký
values
Padding_top
cho thiết lập tất cả
Padding_rigth
17
IE F
4
1
N
4
W3C
1
thuộc tính padding
trong 1 tuyên bố
Padding_bottom thiết lập bottom
Padding_bottom
Padding_left
Length
4
1
4
1
padding của một
%
Padding_left
phần tử
thiết lập padding
Length
4
1
4
1
Padding_right
trái của 1 phần tử
thiết lập padding
%
Length
4
1
4
1
phải của 1 phần tử
%
thiết lập đỉnh
Length
4
1
4
1
padding của một
%
Padding_top
phần tử
Ví dụ:
<html>
<head>
<style type="text/css">
td {padding-top: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a top padding
</td>
</tr>
</table>
</body>
</html>
18
