10/11/23
1
6 –CSS 1
CSS - Cascading Style Sheet
Phát triểnứng dụng web 1
GV: Phan Thị Kim Loan
Đại Học Sài Gòn – Khoa CNTT
1
6 –CSS 2
Nội dung buổi học trước
1. Khái niệmvà mụcđích Form
2. Các đốitượng Form Fields
3. Phương thứcGET/POST
4. Tag Marquee
2
10/11/23
2
6 –CSS 3
Nội dung
1. GiớithiệuCSS
2. Định nghĩaStyle và các đơnvịtính
3. Phân loạiCSS
4. Phạmvi áp dụng CSS (selector)
5. Mộtsốtag HTML dùng riêng CSS
6. Thựchành
3
6 –CSS 4
Giớithiệu CSS
§CSS =Cascading Style Sheet
§Dùng định dạng các thành phầntrong trang web
§Sửdụng tương tựnhưđịnh dạng template
§Thống nhấtcách thểhiệnvà tái sửdụng cho nhiều
webpage trong website.
§Có thểthay đổithuộc tính từng trang hoặccảsite
nhanh chóng àlinh hoạtthay đổicách thểhiện.
–……
4
10/11/23
3
6 –CSS 5
Định nghĩa Style
Kiểu1Kiểu2
<tag style=
“property1:value1;
property2:value2;
………
propertyN:valueN;”>…
</tag>
SelectorName
{
property1:value1;
property2:value2;
………
propertyN:valueN;
}
<tag class =
“SelectorName”>
………
</tag>
5
6 –CSS 6
Định nghĩa Style
Vd kiểu1Vd kiểu2
<h1 style=“
color : blue;
font-family : Arial;”>SGU
</h1>
.TieuDe1 {
color: red;
font-family: Verdana, sans-serif;
}
<h1 class=“TieuDe1”> SGU </h1>
Ghi chú Ví dụ
Giống
ghi chú trongC++
Sử
dung
/* Ghi chú */
6
10/11/23
4
6 –CSS 7
Measurement units
§Absolute length:inch, cm, point …
§Relative length:pixel, em, ex, ...
§pixel (px):relative to the screen resolution
•Ex:LCD 14’’2 (1024x768)thì DPI =96
•ècó 96 pixel trên 1inch
§Point: 1pt = 1/72 inch.
•ècó 1pixel = 0.75pt Font-size = 16pt
7
6 –CSS 8
Measurement Units
§Relative length:em, ex, ...
•em and ex -relative to the parent element
•Ex:em
•Ex:ex
•CSS:
8
10/11/23
5
6 –CSS 9
Phân loại CSS
§Gồm3 lạiCSS:
1. Inline Style Sheet
2. Embedding Style Sheet (Internal SS)
3. External Style Sheet
9
6 –CSS 10
Phân loại CSS
§Inline style sheet:dùng thuộc tính style cho
từng thẻHTML
§Embedded style sheet:định nghĩacác định
dạng trong thẻ<style> trong phần<head> của
webpage
§External style sheet:định nghĩacác định dạng
trong file .css và các webpage link tớifile .css
(trong phần<head>)
10