CSS Cascading Style Sheets: là một phương pháp dùng để mô tả lại cách thức hiển thị của các thành phần trên trang WEB nhằm: Xây dựng một dạng TEMPLATE trong quá trình thiết kế T
Trang 1• GVHD: Dương Khai Phong
• Email: khaiphong@gmail.com
• Website: http://khaiphong.tk
• http://course.uit.edu.vn
Trang 21/ Giới thiệu tổng quan Web
2/ Ngôn ngữ HTML và JavaScript
3/ Ngôn ngữ PHP căn bản
4/ Các đối tượng trong PHP
5/ PHP và hướng đối tượng
6/ PHP và cơ sở dữ liệu MySQL
7/ PHP và AJAX
8/ PHP và các hệ thống mã nguồn mở 9/ Triển khai ứng dụng PHP
Trang 3PHẦN 2:
Trang 5a HTML và CSS?
CSS (Cascading Style Sheets): là một phương pháp dùng để
mô tả lại cách thức hiển thị của các thành phần trên trang WEB nhằm:
Xây dựng một dạng TEMPLATE trong quá trình thiết kế
Tái sử dụng cho các trang web khác
Thay đổi thuộc tính từng trang hoặc cả site nhanh chóng
(“cascading”)
CSS?
Trang 6b Ví dụ HTML và CSS:
Thiết kế một trang hiển thị Thời khóa biểu các môn học như hình sau:
Trang 7b Ví dụ HTML và CSS:
Thiết kế một trang hiển thị các layout như hình sau:
Trang 8b Ví dụ HTML và CSS:
Thiết kế một trang hiển thị các layout như hình sau:
Trang 9c HTML (table) và CSS (div):
HTML
CSS
Trang 10c HTML (table) và CSS (div):
Trang 11<table cellpadding="0" cellspacing="0" border="1" bordercolor="#FF0000" height="30px">
Trang 12c HTML (table) và CSS (div):
<div id="divTable1">
<div id="divTable2">Cot 1</div>
<div id="divTable2">Cot 2</div>
Trang 13a Cú pháp định nghĩa CSS cho một Selector
SelectorName: là tên các tag đã được định nghĩa trước
trong HTML (tag <p>, tag <table>, ) hoặc tên do người dùng định nghĩa mới
Property: tên các thuộc tính do CSS hỗ trợ
Value: giá trị ứng với các thuộc tính
Lưu ý: ghi chú trong CSS dùng /* … */
Trang 14<p> Cascading Style Sheets is a fairly old
technology as far as the Web is concerned The first ideas about CSS were presented as early as
1994, and three major versions of the technology have been developed since then Table 5-1 summarizes the version history of
CSS </p>
</body>
…
Trang 15<h1 style="font-size: 48px; font-family:Arial,
Helvetica, sans-serif;color: green;">
CSS Test
</h1>
</body>
</html>
Trang 16b Embedded Styles
Các thuộc tính style cho các thẻ (tag) được khai báo trước trong phần tag <Head> của trang trước khi sử dụng
Ví dụ:
…
<style type="text/css">
<!
p {font-size: 1.5em; font-family: Tahoma;
color: blue; background-color: yellow; }
em {font-size: 2em; color: green; }
Trang 17c Inported Styles
Các thuộc tính style cho các thẻ (tag) được nhúng
từ một tập tin *.css bên ngoài vào trang
Trang 18d Linked Styles
Các thuộc tính style cho các thẻ (tag) được nhúng
từ một tập tin *.css bên ngoài vào trang (tương tự như phương pháp Imported Styles)
Trang 19 Độ ưu tiên của các phương pháp
Trang 20 Ưu điểm và khuyết điểm của các phương pháp
ĐÁNH GIÁ INLINE
STYLES
EMBEDDED STYLES
IMPORTED STYLES
LINKED STYLES
p {color=red;}
</style>
<p>ĐHCNTT</p>
<style type="text/css">
@import url (“my.css");
</style>
<p>ĐHCNTT</p>
<link href=“my.css" rel="stylesheet" type="text/css" />
<p>ĐHCNTT</p>
- Định nghĩa nhanh
- Dễ quản lý cho từng tag trong một trang
- Định nghĩa nhanh
- Dễ quản lý cho từng trang
- Có thể áp dụng style đồng bộ cho một site
- Thông tin Style được trình
duyệt web ở những lần sau
- Khó áp dụng đồng bộ cho từng tag trong cùng một trang
- Khó áp dụng đồng bộ cho các trang
- Tối ưu tập tin *.css để cải thiện tốc độ duyệt cho lần đầu tiên truy cập site
Trang 21a Giới thiệu
CSS Selector là các phương pháp dùng để định
dạng các thuộc tính cho một hay nhiều thẻ (tag) HTML đã có hoặc xây dựng các lớp (class) định dạng dùng áp dụng chung cho các thẻ (tag)
Tùy theo phiên bản, CSS hỗ trợ tập các CSS Selector khá đa dạng (xem phần CSS Selector trong tài liệu HTML and CSS - The Complete
Reference 5th ed - T Powell (McGraw-Hill, 2010) BBS)
Trang 22b Bảng phân loại các CSS Selector thông dụng
cả các tag element có thuộc tính
ID trong tài liệu Web
h3#contact {color: red;}
/* Tất cả các tag <h3> có thuộc tính id=“contact” đều bị định dạng màu chữ là red*/
Trang 23b Bảng phân loại các CSS Selector thông dụng
Định dạng được áp dụng cho các liên kết trong tài liệu Web
a:link {font-weight: bold;}
a:active {color: red;}
Trang 26ĐH CÔNG NGHỆ THÔNG TIN http://sites.google.com/site/khaiphong
26
Trang 271 Phân biệt điểm giống nhau
và khác nhau giữa CSS Selector #ID và CSS
Selector class
2 CSS có tính chất kế thừa
hay không? Nếu có cho ví
dụ minh họa và giải thích
3 Minh họa một ví dụ tạo
bảng mà thẻ <table> làm được nhưng thẻ <div> không làm được và ngược
lại (nếu có)
Trang 28ĐH CÔNG NGHỆ THÔNG TIN http://sites.google.com/site/khaiphong
28
Trang 30Câu 1: CSS là viết tắt của cụm từ nào?
A Computer Style Sheets
B Creative Style Sheets
C Cascading Style Sheets
D Colorful Style Sheets
Trang 31Câu 2: Chọn câu lệnh đúng để tham chiếu đến tập tin CSS có tên là mystyle.css?
Trang 32Câu 3: Câu lệnh sau được khai báo trong phần nào của một trang HTML?
<link rel="stylesheet" type="text/css"
href="mystyle.css">
B Dòng đầu tiên trong trang HTML
C Dòng cuối cùng trong trang HTML
D Phần <head>
Trang 33Câu 4: Thẻ (tag) HTML nào dùng để khai báo
Trang 34Câu 5: Thuộc tính HTML nào dùng để khai báo một Inline Styles?
A <style>
B style
C class
D styles
Trang 35Câu 6: Câu lệnh nào sau đây là đúng cú pháp
Trang 36Câu 7: Câu lệnh ghi chcủa CSS?
A /* ghi chú */
B ' ghi chú
C // ghi chú //
D // ghi chú
Trang 37Câu 8: Thuộc tính dùng để thay đổi màu nền trong CSS?
A color:
B bgcolor:
C background-color:
D color-background:
Trang 38Câu 9: Câu lệnh nào sau đây dùng để định dạng màu nền cho tất cả các thẻ <h1> có trong trang HTML?
A h1 {background-color:red}
B h1 {background-color:#FFFFFF}
C h1.all {background-color:#FFFFFF}
Trang 39Câu 10: Câu lệnh nào sau đây dùng thay đổi màu chữ trong CSS?
A text-color:
B color:
C text-color:
D fgcolor:
Trang 40Câu 11: Câu lệnh nào sau đây dùng thay đổi kích thước chữ trong CSS?
A text-size:
B font-style:
C text-style:
D font-size:
Trang 41Câu 12: Câu lệnh nào sau đây dùng để định dạng chữ đậm cho tất cả các thẻ <p> có trong trang HTML?
A p {text-size:bold}
B <p style=“font-weight:bold">
C p {font-weight:bold}
D <p style="font-size:bold">
Trang 42Câu 13: Câu lệnh nào sau đây dùng để định dạng liên kết không có underline trong CSS?
Trang 43Câu 14: Thuộc tính và giá trị nào trong CSS
từ trong câu (Ví dụ: “Xin Chào Bạn")?
A text-transform:uppercase
B text-transform:capital
C text-transform:capitalize
D Không tồn tại
Trang 44Câu 15: Thuộc tính nào trong CSS dùng để định dạng kiểu chữ?
A font=
B font-family:
Trang 45Câu 16: Câu lệnh nào sau đây dùng để định dạng chữ đậm cho một thẻ <h1> có trong trang HTML?
A h1 {font-weight:bold}
B <h1 style="font-weight:bold“>
Trang 46Câu 17 Trong CSS, chọn câu đúng để định dạng độ rộng đường viền (border) của một bảng theo yêu cầu sau:
A border-width:5px 20px 10px 1px
B border-width:10px 20px 5px 1px
C border-width:10px 5px 20px 1px
D border-width:10px 1px 5px 20px
Trang 47Câu 18 Trong CSS, chọn phát biểu đúng cho
định dạng sau
padding: 10px 5px;
bottom = 10px và phần left và right = 5px
bottom = 5px và phần left và right = 10px
C Câu lệnh sai cú pháp
Trang 48Câu 19 Các phương pháp sử dụng CSS
A Inline, Embedded, Linked
B Inline, External, Imported, Linked
C Inline, Embedded, Internal, Linked
D Inline, Embedded, Imported, Linked
Trang 49Câu 20 Trong CSS, chọn câu lệnh đúng
A <font style="font-size:-50px">Hello</font>
B <font style="font-size:50px">Hello</font>
