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

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.
Nội dung trích xuất từ tài liệu:
Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 5 - ThS. Lương Trần Hy HiếnPhát triển ứng dụng Web (COMP1027)CSS3GV: Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM 1Outline1. Introduction2. Selector3. Create Rounded Corners4. Drop Shadow5. Create Gradient Buttons6. Multiple background images7. Multi-Column Layout8. Tranform9. Transition10.AnimationHTML5/CSS3Introduction CSS3 3Cascading 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/CSS3CSS3 Selector 6ELEMENT 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-letterCá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 8new 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 :notnot• X:not(selector): áp dụng cho X, ngoại trừ selector div:not(#container) { color: blue; } *:not(p) { color: green; } 10X::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 11X: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 12X:nth-last-child(n)• Ví dụ: li:nth-last-child(2) { color: red; } 13X: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) 14first-child, last-child• X:first-child ul li:first-child { border-top: none; }• X:last-child 15X:only-child• Áp dụng cho đối tượng X có duy nhất 1 con• Ví dụ: div p:only-child { color: red; } 16X: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 17Vấn đề khác trong FormE[attr*=val]: áp dụng cho thẻ E thuộc tính attr bằng valform 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/CSS3CSS3 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; ...