Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 5 - ThS. Lương Trần Hy Hiến

Chia sẻ: Lavie Lavie | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

116
lượt xem 15
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 5 - Phát triển ứng dụng Web (COMP1027) CSS3 bao gồm những nội dung về giới thiệu chung CSS3; selector; create rounded corners; drop shadow; creat gradient buttons; multiple background images; multi-column layout; tranform; transition; animation.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 5 - ThS. Lương Trần Hy Hiến

Phát triển ứng dụng Web (COMP1027) CSS3 GV: Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM 1
Outline 1. Introduction 2. Selector 3. Create Rounded Corners 4. Drop Shadow 5. Create Gradient Buttons 6. Multiple background images 7. Multi-Column Layout 8. Tranform 9. Transition 10.Animation
HTML5/CSS3 Introduction CSS3 3
Cascading Style Sheets • Developed to enable the separation of document content from document presentation • Initial release in 1996 (CSS1) • CSS2 published as a recommendation in May 1998 • CSS2.1 goes to candidate recommendation status – July 19 2007 • CSS Level 3 under development since Dec 15, 2005 (W3C CSS3 Progress Report)
CSS3 FYI • CSS3 is still under development • Modules: A new approach to standardization • Each browser still implementing slightly different syntax for certain properties: – moz – ; //Firefox – webkit – ; //Chrome, Safari (webkit) Opera (in most cases) uses the default with no prefix but in some cases you will see – o – ;
HTML5/CSS3 CSS3 Selector 6
ELEMENT SELECTORS • * • A:link UL:nth-child(n) • UL • A:visited UL:nth-last-child(n) • UL LI • A:active UL:nth-of-type(n) • UL > LI UL:nth-last-of-type(n) • UL + LI • UL:empty UL:first-child • UL ~ LI • UL:hover UL:last-child • UL:focus UL:only-child • #id • UL:target • UL:enabled UL:first-of-type • UL[foo] • UL:disabled UL:last-of-type • UL[foo="bar"] • UL:checked UL:only-of-type • UL[foo^="bar"] • UL.warning • UL[foo$="bar"] • UL[foo*="bar"] • UL[foo~="bar"] UL::before • UL[foo|="en"] UL::after UL::first-line • UL:not(s) UL::first-letter
Các ký hiệu thường dùng • *: Áp dụng cho tất cả *{ margin: 0; padding: 0; } • #: Áp dụng cho đối tượng có ID • .name: Áp dụng cho đối tượng có class • X Y: áp dụng cho đối tượng Y nằm trong đối tượng X • X > Y: chỉ rõ con trực tiếp 8
new selectors :root :first-child :nth-child :last-child :nth-last-child :only-child :nth-of-type :first-of-type :nth-last-of-type :last-of-type ::first-line :empty ::first-letter :not
not • X:not(selector): áp dụng cho X, ngoại trừ selector div:not(#container) { color: blue; } *:not(p) { color: green; } 10
X::pseudoElement • Ví dụ: p::first-line { font-weight: bold; font-size: 1.2em; } • Áp dụng cho dòng đầu tiên • Tương tự cho ::first-letter 11
X:nth-child(n) • Ví dụ: li:nth-child(3) { color: red; } • Áp dụng cho con thẻ li thứ 3 trong danh sách. • Demo: Bảng có dòng chẵn lẻ CSS khác nhau 12
X:nth-last-child(n) • Ví dụ: li:nth-last-child(2) { color: red; } 13
X:nth-of-type(n) ul:nth-of-type(3) { border: 1px solid black; } • Áp dụng cho thẻ ul thứ 3 • Tương tự cho X:nth-last-of-type(n) 14
first-child, last-child • X:first-child ul li:first-child { border-top: none; } • X:last-child 15
X:only-child • Áp dụng cho đối tượng X có duy nhất 1 con • Ví dụ: div p:only-child { color: red; } 16
X:only-of-type • Ví dụ: li:only-of-type { font-weight: bold; } • Áp dụng cho đúng một đối tượng X duy nhất • Tương tự cho X:first-of-type 17
Vấn đề khác trong Form E[attr*=val]: áp dụng cho thẻ E thuộc tính attr bằng val form input[type="text"] { border: 1px solid #333; padding: 0.2em; width: 400px; } form .button { border: 1px solid #333; background-color: #eee; color: #000; padding: 0.1em; 18 }
HTML5/CSS3 CSS3 Rounded Corners 19
Create Rounded Corners border -*-*-radius: [x] [y]? x = horizontal radius [ | ] y = vertical radius [ | ] border-top-left radius: x y; border-top-right-radius: x y; border-bottom-left-radius: x y; border-bottom-right-radius: 0;