![Page 1: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/1.jpg)
1
Cascading Style Sheets (CSS)
![Page 2: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/2.jpg)
2
CSS
� Dùng để trình bày các phần tử trong HTML trêntrình duyệt
� CSS có thể được đặt trong văn bản HTML hay ởmột file khác
� Cách dùng phổ biến là có một file CSS riêng để cóthể dùng cho nhiều văn bản HTML
� Nếu một văn bản dùng nhiều file CSS khác nhau, hệ thống sẽ dùng các định dạng trong các file nhưlà một file
� http://www.w3schools.com/css/default.asp
![Page 3: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/3.jpg)
3
Cú Pháp CSS (1)
� Cú pháp cơ bản của CSS gồm 3 phần
� Selector (phần tử được hiển thị)
� Property (thuộc tính)
� Value (giá trị)
� selector {property: value}
� Ví dụ:
� body {color: black}
� p {font-family: "sans serif"}
![Page 4: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/4.jpg)
4
Cú Pháp CSS (2)
� Có thể sử dụng một định dạng chung cho
một nhóm các phần tử� Ví dụ:
� h1,h2,h3,h4,h5,h6 { color: green }
� Định dạng một class� p.right {text-align: right}
� p.center {text-align: center}
![Page 5: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/5.jpg)
5
Cú Pháp CSS (3)
� Một class có thể được dùng cho nhiều tag
khác nhau
� .center {text-align: center}
![Page 6: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/6.jpg)
6
Cú Pháp CSS (4)
� Sử dụng id
� #green {color: green}
� Chú thích
![Page 7: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/7.jpg)
7
Đưa CSS vào HTML (1)
� Dùng một file CSS bên ngoài
� Dùng bên trong file HTML
![Page 8: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/8.jpg)
8
Đưa CSS vào HTML (2)
� Dùng CSS ngay tại tag trong file HTML (inline)
� Có một số trình duyệt không hổ trợ CSS, để tránh
trường hợp mã CSS bị hiển thị, dùng cách sau:
![Page 9: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/9.jpg)
9
Background (1)
![Page 10: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/10.jpg)
10
Background (2)
![Page 11: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/11.jpg)
11
Background: Ví dụ
![Page 12: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/12.jpg)
12
Text (1)
� Dùng để điều chỉnh sự hiển thị của text trong
HTML
![Page 13: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/13.jpg)
13
Text (2)
![Page 14: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/14.jpg)
14
Font (1)
![Page 15: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/15.jpg)
15
Font (2)
![Page 16: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/16.jpg)
16
Font (3)
![Page 17: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/17.jpg)
17
Font: Ví dụ
� Chọn font chữ
![Page 18: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/18.jpg)
18
Margin
![Page 19: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/19.jpg)
19
Dimension (1)
� Xác định các chiều dài và rộng của một phần
tử
� Ví dụ: chiều dài và rộng của một tấm ảnh,
chiều cao của một đoạn văn bản, v.v.
![Page 20: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/20.jpg)
20
Dimension (2)
![Page 21: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/21.jpg)
21
Position (1)
� Xác định vị trí của một phần tử
![Page 22: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/22.jpg)
22
Position (2)
� Xác định vị trí của một phần tử
![Page 23: Cascading Style Sheets (CSS)cse.hcmut.edu.vn/~ptvu/ip/lec6-2.pdf · Microsoft PowerPoint - Cascading Style Sheets (CSS).ppt Author: tranp Created Date: 4/23/2008 5:41:46 PM](https://reader035.vdocuments.net/reader035/viewer/2022071218/6051c034e4d1384f215b3fb1/html5/thumbnails/23.jpg)
23
Position: Ví dụ