Phát triển ứng dụng web với 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 (2.84 MB, 31 trang )
1
CSS - Cascading Style SheetCSS - Cascading Style Sheet
Luong Tran Hy Hien, FIT of HCMUP, VietNam
2
Nội dungNội dung
1. Giới thiệu
2. Định nghĩa style
3. Phân loại và sử dụng
4. Selector trong CSS
1. Giới thiệu1. Giới thiệu
• Bảng kiểu (style sheet) nhằm thoả mãn nhu cầu
– Giữ tính thống nhất cho trang HTML.
– Định dạng một số tính chất thông thường cùng một
lúc cho tất cả các đối tượng trên trang.
• Lợi ích:
– Tiết kiệm thời gian
– Để thay đổi định dạng ==> cần thay đổi thuộc tính
CSS ==> sẽ tự động cập nhật sự thay đổi đó.
– Có thể dùng các CSS cùng với JavaScript để tạo các
hiệu ứng đặc biệt.
• Bất lợi:
– Không được hỗ trợ đầy đủ trên tất cả các trình duyệt.
4
2. Định nghĩa Style2. Định nghĩa Style
<tag style=
“property1 :value1;
property2 :value2;
………
propertyN :valueN;”
>
…
</tag>
.SelectorName {
property1 :value1;
property2 :value2;
………
propertyN :valueN;
}
<tag class=“SelectorName”>
…
</tag>
Cú pháp ghi chú: /* … */
/* Đây là ghi chú */
SelectorName{
property1: value1;/*Ghichu1*/
property2: value2;/*Ghichu2*/
}
5
2. Định nghĩa Style2. Định nghĩa Style
Ví dụ
6
3. Phân loại và sử dụng3. Phân loại và sử dụng
1. Inline Style Sheet
Style định nghĩa trong tag
2. Internal Style Sheet
Style định nghĩa trong tag <style>
3. External Style Sheet
Style định nghĩa trong file *.css
3.1 Inline Style Sheet3.1 Inline Style Sheet
• Sử dụng thuộc tính style bên trong tag muốn
định dạng
• Cú pháp:
<TagName style=”property1: value1; property2
:
value2; …”>
Nội dung văn bản muốn định dạng
</TagName>
7
3.1 Inline Style Sheet (tt) – Ví dụ3.1 Inline Style Sheet (tt) – Ví dụ
<BODY>
<P style="color:#0033CC; border:#FF0000">
This paragraph has an inline style applied to it</P>
<P> This paragraph is displayed in the default style.
<P> Can you see the <SPAN style = “color:red”>
difference </SPAN>in this line
</BODY>
8
3.2 Internal Style Sheet3.2 Internal Style Sheet
• Thích hợp cho trang riêng lẻ.
• Cách tạo: Tạo bảng mẫu chung trên phần đầu
trang trong cặp tag <head>
• Sử dụng: Trong phần body, nội dung nào muốn sử
dụng định dạng theo bảng mẫu trên thì đặt trong
tag được định nghĩa trong phần head
9
3.2 Internal Style Sheet (tt) – Ví dụ3.2 Internal Style Sheet (tt) – Ví dụ
10
3.3 External Style Sheet3.3 External Style Sheet
• Được lưu trữ thành một file (*.css) riêng bên ngoài
và được liên kết với trang HTML.
• Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho
tất cả các trang của mộtwebsite (nếu có liên kết).
• Cách tạo:
– Tạo một tập tin văn bản mới
– Nhập tên các tag muốn định dạng thuộc tính theo mẫu:
– Lưu tập tin với định dạng Text Only và có phần mở
rộng .css
3.3 External Style Sheet (tt) – Ví dụ3.3 External Style Sheet (tt) – Ví dụ
12
3.3 External Style Sheet (tt) – Cách dùng3.3 External Style Sheet (tt) – Cách dùng
13
14
3.3 External Style Sheet (tt)3.3 External Style Sheet (tt)
Cách 1:
Cách 2:
15
3. Phân loại và cách sử dụng3. Phân loại và cách sử dụng
16
3. Phân loại và cách sử dụng3. Phân loại và cách sử dụng
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
4. Browser Default
Độ
Ưu
Tiên
Giảm
Dần
17
4. Selector trong CSS4. Selector trong CSS
Các loại Selector
18
4. Selector trong CSS4. Selector trong CSS
Các loại Selector
a:active { color: green; }
body {
font-family: Tahoma, Arial, sans-serif;
color: black;
background: white;
margin: 8px;
}
Selector Declaration Block
Attribute Name
Value
CSS RuleCSS Rule
●
Predefined names:
white black red …
●
8-bit hexadecimal intensities for red, green, blue:
●
0-255 decimal intensities:
●
Percentage intensities:
CSS Color Specifiers
#ff0000
R G B
rgb(255,255,0)
R G B
rgb(80%,80%,100%)
R G B
CSS Distances
2px pixels
1mm millimeters
2cm centimeters
0.2in inches
3pt printer’s points
2em, 4ex other printer’s units
22
4.1. CSS - ELEMENT4.1. CSS - ELEMENT
23
4.2. CSS - ID4.2. CSS - ID
24
4.3. CSS - CLASS4.3. CSS - CLASS
25
4.3. CSS – ELEMENT_CLASS4.3. CSS – ELEMENT_CLASS
