›
›

Bài giảng Lập trình Web - Bài 4: Cascading style sheet-CSS

Download
12/30/2016  
CASCADING STYLE  
SHEET - CSS  
Nội dung  
Định nghĩa CSS  
Phân loại CSS  
Thẻ div với thuộc tính class và id  
Các CSS về background  
Các CSS border  
Các CSS link  
Các CSS về font  
Các CSS về text  
Các CSS về margin và padding  
Các CSS về position  
12/30/2016  
CASCADING STYLE SHEET  
2
1
12/30/2016  
Định nghĩa  
+
body {  
font-family: arial,  
san-serif;  
}
a, a:link  
{
color: #0000cc;  
}
12/30/2016  
CASCADING STYLE SHEET  
3
Định nghĩa  
Cascading Style Sheet (CSS) nhằm thoả mản nhu cầu  
thẩm mỹ, tính thống nhất cho trang HTML.  
Tiện ích:  
Tiết kiệm thời gian  
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.  
CSS tạo các hiệu ứng đặc biệt.  
Bất lợi: Không một trình duyệt nào chấp nhận hoàn  
toàn các thuộc tính CSS.  
12/30/2016  
CASCADING STYLE SHEET  
4
2
12/30/2016  
Định nghĩa  
Cách tạo:  
selector {  
property: value;  
property: value;  
...  
property: value;}  
Trong đó:  
Selector: là các thành phần trên trang HTML cần thiết lập  
CSS. Có 3 loại Selector cơ bản:  
- Tên thẻ HTML  
- Thuộc tính id  
-Thuộc tính class  
12/30/2016  
CASCADING STYLE SHEET  
5
Định nghĩa  
Tên các thẻ HTML:  
h1 {font-face: Verdana}  
Thuộc tính id:  
#element_id {color:#FF0000}  
Thuộc tính class (only for HTML):  
.class_name {border: 1px solid red}  
Selectors có thể kết hợp nhiều thành phần:  
h1, .link, #top-link {font-weight: bold}  
12/30/2016  
CASCADING STYLE SHEET  
6
3
12/30/2016  
Định nghĩa  
Áp dụng cho các thẻ a bên trong thẻ p  
p a {text-decoration: underline}  
* : dạng selector con bên trong p  
p * {color: black}  
+: tất cả thẻ img có cùng class name  
img + .link {float:right}  
12/30/2016  
CASCADING STYLE SHEET  
7
Định nghĩa  
Ví dụ:  
12/30/2016  
CASCADING STYLE SHEET  
8
4
12/30/2016  
Định nghĩa  
12/30/2016  
CASCADING STYLE SHEET  
9
Định nghĩa  
12/30/2016  
CASCADING STYLE SHEET  
10  
5
12/30/2016  
Định nghĩa  
S
12/30/2016  
CASCADING STYLE SHEET  
11  
Phân loại CSS  
Inline style(attribute style)  
Internal style (tag style)  
External style (link to a style  
sheet)  
12/30/2016  
CASCADING STYLE SHEET  
12  
6
12/30/2016  
12/30/2016  
CASCADING STYLE SHEET  
13  
Phân loại CSS  
Inline style:thuộc tính style bên trong thẻ.  
Cú pháp:  
12/30/2016  
CASCADING STYLE SHEET  
14  
7
12/30/2016  
Phân loại CSS  
Internal style:định dạng bảng mẫu chung trên  
phần head và được áp dụng cho trang HTML hiện hành.  
Cú pháp:  
12/30/2016  
CASCADING STYLE SHEET  
15  
Phân loại CSS  
12/30/2016  
CASCADING STYLE SHEET  
16  
8
12/30/2016  
Phân loại CSS  
External style:Là file chứa các định dạng CSS  
được lưu trữ thành một file độc lập và được liên kết  
với trang HTML.  
Bước 1:  
◦
◦
◦
Tạo một file văn bản mới.  
Thiết lập các định dạng CSS  
Lưu file với định dạng [.css]  
12/30/2016  
CASCADING STYLE SHEET  
17  
Phân loại CSS  
◦ Bước 2:  
◦ Áp dụng file CSS vào trang HTML:  
Ví dụ:  
12/30/2016  
CASCADING STYLE SHEET  
18  
9
12/30/2016  
Phân loại CSS  
Bước 1: Tạo file mystyle.css  
Bước 2: Liên kết mystyle.css vào trang  
12/30/2016  
CASCADING STYLE SHEET  
19  
Phân loại CSS  
Áp dụng .CSS cho  
nhiều trang HTML  
<head>  
<link rel="stylesheet" type="text/css" href="styles.css"/>  
</head>  
12/30/2016  
CASCADING STYLE SHEET  
20  
10  
12/30/2016  
Phân loại CSS  
Áp dụng nhiều .CSS  
cho 1 trang HTML  
<head>  
<link rel="stylesheet" type="text/css" href=“company.css" />  
<link rel="stylesheet" type="text/css" href=“department.css" />  
<link rel="stylesheet" type="text/css" href="section.css" />  
</head>  
12/30/2016  
CASCADING STYLE SHEET  
21  
Phân loại CSS  
Định dạng bằng cách nhóm các đối tượng bằng  
<div> và <span>  
◦ <div> được sử dụng trong 1 nhóm các thẻ cùng nhau,  
<div> là container.  
◦ <span> được sử dụng cho các tag chứa khối văn bản  
độc lập như <p>, <h1>, <table>, <body>  
Sử dụng thuộc tính id và class định danh cho <div>  
và <span>  
12/30/2016  
CASCADING STYLE SHEET  
22  
11  
12/30/2016  
CSS background  
background-color : [màu nền]  
background-image : url([ file hình nền])  
background-repeat : [lặp hình nền ]  
background-position:[tọa độ xuất hiện  
hình]  
12/30/2016  
CASCADING STYLE SHEET  
23  
CSS background  
12/30/2016  
CASCADING STYLE SHEET  
24  
12  
12/30/2016  
CSS background  
12/30/2016  
CASCADING STYLE SHEET  
25  
CSS background  
12/30/2016  
CASCADING STYLE SHEET  
26  
13  
12/30/2016  
CSS Border:  
border-width : [value]  
border-color : [color]  
Sử dụng mã màu, tên màu, …  
12/30/2016  
CASCADING STYLE SHEET  
27  
CSS Border:  
border-style :[kiểu đường viền]  
border :[width style color ]  
Border – left: thin solid grey;  
CASCADING STYLE SHEET  
12/30/2016  
28  
14  
12/30/2016  
CSS Border:  
border – right:  
border-top:  
border-bottom  
12/30/2016  
CASCADING STYLE SHEET  
29  
CSS Border  
12/30/2016  
CASCADING STYLE SHEET  
30  
15  
12/30/2016  
CSS Link:  
<a> các trạng thái  
a:link [Liên kết chưa được chọn]  
a:visited [Liên kết đã được chọn qua]  
a:active [Liên kết được kích hoạt]  
a:hover [Con trỏ đi qua liên kết ]  
12/30/2016  
CASCADING STYLE SHEET  
31  
CSS Link:  
Ví dụ 1: Tạo các CSS cho <a>  
liên kết (a:link) có màu xanh lá, kích cỡ font 14px;  
liên kết (a:hover) có màu đỏ tươi, kích cỡ font  
1.2em, hiệu ứng nhấp nháy;  
liên kết đã duyệt (a:visited) sẽ có màu xanh da  
trời, không có đường gạch chân;  
liên kết đang kích hoạt (a:active) có màu tím và font  
dạng small-caps.  
12/30/2016  
CASCADING STYLE SHEET  
32  
16  
12/30/2016  
CSS Link:  
12/30/2016  
CASCADING STYLE SHEET  
33  
CSS Link:  
Ví dụ 2: Tạo các hiệu ứng  
liên kết (a:link) có màu xanh lá, kích cỡ font  
14px, khung viền màu đen;  
liên kết (a:hover) có màu đỏ tươi, kích cỡ  
font 1.2em, hiệu ứng nhấp nháy, có nền  
light cyan;  
liên kết đã duyệt (a:visited) sẽ có màu xanh  
da trời, không có đường gạch chân;  
liên kết đang kích hoạt (a:active) có màu tím  
và font dạng small-caps, có nền light yellow.  
12/30/2016  
CASCADING STYLE SHEET  
34  
17  
12/30/2016  
CSS Fonts  
font-family :[ arial, verdana, sans-  
serif]; {tên font}  
font-style : [italic, normal, oblique ]  
font-variant : [normal, small-caps]  
font-weight : [normal, bold]  
font-size : [?pt, ?em,?%, ?px]  
12/30/2016  
CASCADING STYLE SHEET  
35  
CSS Text  
color : [màu cho chữ]  
text-indent:[khoảng cách lề trái text  
firstline(px)]  
text-align:  
[left,right,center,justify(canh lề)]  
text-valign:[top, middle, bottom,  
sub, super] canh lề dọc  
12/30/2016  
CASCADING STYLE SHEET  
36  
18  
12/30/2016  
CSS Text  
text-decoration:  
[underline,overline,line-through, none]  
letter-spacing :[px-khoảng cách ký tự]  
text-transform :[capitalize, uppercase,  
lowercase, none]  
line-height:[khoảng cách dòng]  
12/30/2016  
CASCADING STYLE SHEET  
37  
CSS Margin và Padding:  
12/30/2016  
CASCADING STYLE SHEET  
38  
19  
12/30/2016  
CSS Margin và Padding:  
12/30/2016  
CASCADING STYLE SHEET  
39  
CSS position của đối tượng:  
.position:[absolute,relative];  
.top: [value];  
.left: [value];  
.bottom: [value];  
.right: [value];  
12/30/2016  
CASCADING STYLE SHEET  
40  
20  
Tải về để xem bản đầy đủ
pdf 48 trang baolam 24461 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình Web - Bài 4: Cascading style sheet-CSS", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfbai_giang_lap_trinh_web_bai_4_cascading_style_sheet_css.pdf