Thông tin tài liệu
Chương Chương 3. M 3. M Ộ Ộ T S T S Ố Ố CÔNG CÔNG C C Ụ Ụ THI THI Ế Ế T K T K Ế Ế WEBSITE WEBSITE Chương Chương 3. M 3. M Ộ Ộ T S T S Ố Ố CÔNG CÔNG C C Ụ Ụ THI THI Ế Ế T K T K Ế Ế WEBSITE WEBSITE Bộ môn CNTT – Khoa Tin họcthương mại –Trường ĐH Thương Mại Email: cntt@vcu.edu.vn 9/3/2009 Công cụ thiết kế Web - CSS 2 N N ộ ộ i i dung dung • • Ngôn Ngôn ng ng ữ ữ đ đ á á nh nh d d ấ ấ u u HTML HTML • • PHP, PHP, Javascript Javascript • • M M ộ ộ t t s s ố ố công công c c ụ ụ h h ỗ ỗ tr tr ợ ợ thi thi ế ế t t k k ế ế website website 9/3/2009 Công cụ thiết kế Web - CSS 3 3.1. 3.1. Ngôn Ngôn ng ng ữ ữ đ đ á á nh nh d d ấ ấ u u HTML HTML 3.1.1. 3.1.1. T T ổ ổ ng ng quan quan v v ề ề HTML HTML 3.1.2. 3.1.2. C C á á c c th th ẻ ẻ c c ủ ủ a a HTML HTML 3.1.3. 3.1.3. S S ử ử d d ụ ụ ng ng Frontpage Frontpage thi thi ế ế t t k k ế ế web web t t ĩ ĩ nh nh 3.1.4. 3.1.4. Đ Đ ị ị nh nh d d ạ ạ ng ng website website v v ớ ớ i i CSS CSS 9/3/2009 Công cụ thiết kế Web - CSS 4 CSS CSS • • CSS=Cascading Style Sheet: CSS=Cascading Style Sheet: M M ẫ ẫ u u quy quy đ đ ị ị nh nh c c á á ch ch th th ứ ứ c c th th ể ể hi hi ệ ệ n n c c á á c c th th ẻ ẻ HTML HTML • • Style Style đư đư ợ ợ c c đưa đưa v v à à o o HTML 4.0 HTML 4.0 đ đ ể ể gi gi ả ả i i quy quy ế ế t t m m ộ ộ t t s s ố ố v v ấ ấ n n đ đ ề ề . . • • Gi Gi ú ú p p ti ti ế ế t t ki ki ệ ệ m m đư đư ợ ợ c c r r ấ ấ t t nhi nhi ề ề u u th th ờ ờ i i gian gian v v à à công công s s ứ ứ c c cho cho vi vi ệ ệ c c thi thi ế ế t t k k ế ế web. web. • • C C ó ó th th ể ể đ đ ị ị nh nh ngh ngh ĩ ĩ a a nhi nhi ề ề u u style style v v à à o o m m ộ ộ t t th th ẻ ẻ HTML HTML (Cascading) (Cascading) 9/3/2009 Công cụ thiết kế Web - CSS 5 C C á á c c lo lo ạ ạ i i style style • • C C ó ó 4 4 lo lo ạ ạ i i style: style: – – Inline Style Inline Style (Style (Style đư đư ợ ợ c c qui qui đ đ ị ị nh nh trong trong 1 1 th th ẻ ẻ HTML HTML c c ụ ụ th th ể ể ) ) – – Internal Style Internal Style (Style (Style đư đư ợ ợ c c qui qui đ đ ị ị nh nh trong trong ph ph ầ ầ n n <HEAD> <HEAD> c c ủ ủ a a 1 1 trang trang HTML ) HTML ) – – External Style External Style (style (style đư đư ợ ợ c c qui qui đ đ ị ị nh nh trong trong file .CSS file .CSS ngo ngo à à i i ) ) – – Browser Default Browser Default ( ( thi thi ế ế t t l l ậ ậ p p m m ặ ặ c c đ đ ị ị nh nh c c ủ ủ a a tr tr ì ì nh nh duy duy ệ ệ t t ) ) • • Th Th ứ ứ t t ự ự ưu ưu tiên tiên : : M M ứ ứ c c ưu ưu tiên tiên gi gi ả ả m m d d ầ ầ n n t t ừ ừ trên trên xu xu ố ố ng ng 9/3/2009 Công cụ thiết kế Web - CSS 6 C C á á ch ch ch ch è è n n CSS CSS • • Đ Đ ặ ặ t t trong trong <head> <head> … … </head> </head> • • V V ớ ớ i i Internal style: Internal style: <style type= <style type= “ “ text/ text/ css css ” ” > > <! <! N N ộ ộ i i dung dung đ đ ị ị nh nh ngh ngh ĩ ĩ a a style style > > </style> </style> 9/3/2009 Công cụ thiết kế Web - CSS 7 C C á á ch ch ch ch è è n n CSS ( CSS ( tt tt ) ) • • V V ớ ớ i i External style: External style: – – Đ Đ ị ị nh nh ngh ngh ĩ ĩ a a style style trong trong file file riêng riêng ( ( thư thư ờ ờ ng ng c c ó ó đuôi đuôi .CSS) .CSS) – – Nh Nh ú ú ng ng file CSS file CSS đã đã đ đ ị ị nh nh ngh ngh ĩ ĩ a a v v à à o o trang trang web: web: <link <link href href = = “ “ đ đ ị ị a a ch ch ỉ ỉ file" file" rel rel =" =" stylesheet stylesheet " " type="text/ type="text/ css css "> "> • • V V ớ ớ i i Inline style: Inline style: < < tên_th tên_th ẻ ẻ style= style= “ “ tt1:gt1;tt2:gt2; tt1:gt1;tt2:gt2; …” …” > > Khai Khai b b á á o o v v à à s s ử ử d d ụ ụ ng ng style style 9/3/2009 Công cụ thiết kế Web - CSS 9 Ch Ch ú ú ý ý khi khi vi vi ế ế t t style style • • Style Style phân phân bi bi ệ ệ t t ch ch ữ ữ hoa hoa , , ch ch ữ ữ thư thư ờ ờ ng ng • • Đ Đ ể ể ghi ghi ch ch ú ú trong trong style style s s ử ử d d ụ ụ ng ng : : /* /* Đo Đo ạ ạ n n ghi ghi ch ch ú ú */ */ 9/3/2009 Công cụ thiết kế Web - CSS 10 Khai Khai b b á á o o style style selector { selector { Property1: Value1; Property1: Value1; Property2: Value2; Property2: Value2; } } [...]... 9/3/2009 Công cụ thiết kế Web - CSS 23 CSS và font (tt) 9/3/2009 Công cụ thiết kế Web - CSS 24 CSS và font (tt) 9/3/2009 Công cụ thiết kế Web - CSS 25 CSS và font (tt) 9/3/2009 Công cụ thiết kế Web - CSS 26 CSS và đường viền 9/3/2009 Công cụ thiết kế Web - CSS 27 9/3/2009 Công cụ thiết kế Web - CSS 28 9/3/2009 Công cụ thiết kế Web - CSS 29 9/3/2009 Công cụ thiết kế Web - CSS 30 9/3/2009 Công cụ thiết kế. .. 9/3/2009 Công cụ thiết kế Web - CSS 17 CSS Advanced 1 CSS Dimension 2 CSS Classification 3 CSS Positioning 4 CSS Pseudo-class 5 CSS Pseudo-element 6 CSS Media Types 9/3/2009 Công cụ thiết kế Web - CSS 18 CSS cho nền 9/3/2009 Công cụ thiết kế Web - CSS 19 CSS cho nền (tt) 9/3/2009 Công cụ thiết kế Web - CSS 20 CSS và cho bản 9/3/2009 Công cụ thiết kế Web - CSS 21 CSS và cho bản (tt) 9/3/2009 Công cụ thiết kế. .. Ví dụ: p#doan1{ color:red; } #loai2{ color:blue; } 9/3/2009 Công cụ thiết kế Web - CSS 14 Sử dụng định danh • Mỗi định danh là duy nhất trên trang • Đặt thuộc tính id của thẻ = định_danh • Ví dụ: Đoạn này màu đỏ Tiêu đề xanh 9/3/2009 Công cụ thiết kế Web - CSS 15 Một số trường hợp cụ thể CSS Basic 1 CSS Background 2 CSS Text 3 CSS Font 4... color:green; } 9/3/2009 Công cụ thiết kế Web - CSS 12 Sử dụng lớp • Đặt thuộc tính class của thẻ=“tên_lớp”: • Ví dụ: Đoạn này màu đỏ Style không có hiệu lực Tiêu đề màu xanh 9/3/2009 Công cụ thiết kế Web - CSS 13 Định danh • Tương tự như class Thay dấu chấm (.) thành dấu thăng (#) • Cho thẻ cụ thể: tên_thẻ#định_danh{…}... - CSS 27 9/3/2009 Công cụ thiết kế Web - CSS 28 9/3/2009 Công cụ thiết kế Web - CSS 29 9/3/2009 Công cụ thiết kế Web - CSS 30 9/3/2009 Công cụ thiết kế Web - CSS 31 9/3/2009 Công cụ thiết kế Web - CSS 32 9/3/2009 Công cụ thiết kế Web - CSS 33 Ví dụ A.bar1 { COLOR: #6fa37e; FONT-FAMILY: "verdana"; FONT-SIZE: 12pt; FONT-WEIGHT: bold; TEXT-DECORATION: none } A.bar1:hover { COLOR:... background-color:#FFFFFF; color:blue } colorbook { font-family: Arial; font-size: 16; font-style: normal; background-color:#000000; color:#ffffff } Công cụ thiết kế Web - CSS 34 §¨ng ký 9/3/2009 Công cụ thiết kế Web - CSS 35 ...Style áp dụng cho thẻ cụ thể • Trường hợp 1 thẻ: Đặt selector là tên_thẻ p { color: red; } • Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ phân cách bởi dấu phảy h1,h2,h3,h4,h5,h6{ font-family:arial; } 9/3/2009 Công cụ thiết kế Web - CSS 11 Tạo lớp • Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp p.loai1{ color:red; } p.loai2{ color:blue; } • Không gắn với thẻ cụ thể: bỏ phần tên_thẻ . Chương Chương 3. M 3. M Ộ Ộ T S T S Ố Ố CÔNG CÔNG C C Ụ Ụ THI THI Ế Ế T K T K Ế Ế WEBSITE WEBSITE Chương Chương 3. M 3. M Ộ Ộ T S T S Ố Ố CÔNG CÔNG C C Ụ Ụ THI THI Ế Ế T K T K Ế Ế WEBSITE WEBSITE Bộ. Javascript Javascript • • M M ộ ộ t t s s ố ố công công c c ụ ụ h h ỗ ỗ tr tr ợ ợ thi thi ế ế t t k k ế ế website website 9/3/2009 Công cụ thiết kế Web - CSS 3 3.1. 3.1. Ngôn Ngôn ng ng ữ ữ đ đ á á nh nh d d ấ ấ u u HTML HTML 3.1.1 Pseudo - - element element 6. 6. CSS Media Types CSS Media Types 9/3/2009 Công cụ thiết kế Web - CSS 19 CSS CSS cho cho n n ề ề n n 9/3/2009 Công cụ thiết kế Web - CSS 20 CSS CSS cho cho n n ề ề n n ( ( tt tt ) )
Ngày đăng: 05/07/2014, 03:20
Xem thêm: Chương 3: MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE docx, Chương 3: MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE docx
