BÀI GIẢNG MÔN THIẾT KẾ WEB_5

Chia sẻ: Trần Ngọc Mai | Ngày: | Loại File: PDF | Số trang:8

Thêm vào BST

Báo xấu

44
lượt xem 5
download

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

Tham khảo tài liệu 'bài giảng môn thiết kế web_5', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

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 MÔN THIẾT KẾ WEB_5

Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS 2. Nh n d ng ph n t v i id: Cũng v i o n HTML như ví d v class. Nhưng yêu c u t ra là Hà N i s có màu s m, TP. H Chí Minh màu , à N ng màu tươi còn các t nh màu xanh da tr i. gi i quy t v n này chúng ta s s d ng thu c tính HTML là id nh n d ng m i thành ph và dùng class nhóm các t nh. o n HTML c a chúng ta bây gi s là : Danh Sách Các T nh, Thành Ph C a Vi t Nam Hà N i TP. H Chí Minh à N ng Th a Thiên Hu Khánh Hòa Quãng Ninh Ti n Giang Và o n CSS c n dùng s là : #hanoi { color:# 790000 } #hcmc { color:#FF0000 } #danang { color:#FF00FF } .tinh { color:#0000FF } 3. Nhóm ph n t v i th Th trong HTML là m t th trung hòa, nó không thêm hay b t b t c m t th gì vào m t tài li u HTML. Nhưng chính nh tính ch t trung hòa này mà nó l i là m t công c ánh d u tuy t v i qua ó chúng ta có th vi t CSS nh d ng cho các ph n t mong mu n. Ví d : Chúng ta có o n HTML sau trích d n câu nói c a ch t ch H Chí Minh Không có gì quý hơn c l p, t do. Yêu c u ây là chúng ta hãy dùng CSS tô m 2 t c l p, t do. gi i quy t v n này, chúng ta s thêm th vào o n HTML như sau: Không có gì quý hơn c l p, t do. Và bây gi chúng ta có th vi t CSS cho yêu c u trên: .nhanmanh { font-weight:bold } 4. Nhóm kh i ph n t v i th Cũng như , cũng là m t th trung hòa và ư c thêm vào tài li u HTML v i m c ính nhóm các ph n t l i cho m c ích nh d ng b ng CSS. Tuy nhiên, i m khác bi t là dùng nhóm m t kh i ph n t trong khi ó có th nhóm m t ho c nhi u kh i ph n t . Tr l i ví d v danh sách t nh, thành trong ph n class bài trư c chúng ta s gi i quy t vn b ng cách nhóm các ph n t v i như sau: Ví d This is trial version Biên s an: Dương Thành Ph t Trang 70 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS Danh Sách Các T nh, Thành Ph C a Vi t Nam Hà N i TP. H Chí Minh à N ng Th a Thiên Hu Khánh Hòa Quãng Ninh Ti n Giang Và o n CSS cho m c ích này s là: #tp { color:#FF0000 } #tinh { color:0000FF } V. BOX MODEL Trong CSS, box model (mô hình h p) mô t cách mà CSS nh d ng kh i không gian bao quanh m t thành ph n. Nó bao g m padding (vùng m), border (vi n) và margin (canh l ) và các tùy ch n. Hình bên dư i mô t c u trúc minh h a mô hình h p cho m t thành ph n web. Mô hình h p trên ch là m t mô hình lý thuy t lý tư ng. Bên dư i ây chúng ta s xét mô hình h p c a m t i tư ng web c th : Ví d : Chúng ta có m t o n HTML sau Trong CSS, box model (mô hình h p) mô t cách mà CSS nh d ng kh i không gian bao quanh m t thành ph n. Ph n CSS cho o n HTML trên: p{width:200px; margin:30px 20px; padding:20px 10px; border:1px solid #000; text-align:justify } V i ví d trên chúng ta s khái quát ư c mô hình h p như sau: This is trial version Biên s an: Dương Thành Ph t Trang 71 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS VI. MARGIN & PADDING 1. Thu c tính margin: Thu c tính margin trong CSS cũng ư c dùng canh l cho c trang web hay m t thành ph n web này v i các thành ph n web khác hay v i vi n trang. Ví d sau s ch cho chúng ta bi t cách canh l cho m t trang web. body { margin-top:80px; margin-bottom:40px; margin-left:50px; margin-right:30px; border:1px dotted #FF0000 } Ho c g n hơn chúng ta s vi t như sau: body { margin:80px 30px 40px 50px; border:1px dotted #FF0000 } Cú pháp như sau: margin: | | | Ho c: margin:|< value2> v i value 1 là giá tr margin-top và margin-bottom và value2 là giá tr margin-left và margin-right. K t qu c a ví d trên s ư c mô hình hóa như sau: Ví d k ti p s th hi n rõ hơn v vi c dùng margin canh l cho các i tư ng trong trang web. Các b n hãy quan sát các ư ng vi n và nh n xét. body { margin:80px 30px 40px 50px; border:1px solid #FF0000 } #box1 { margin:50px 30px 20px 40px; border:1px solid #00FF00 } #box2 { margin:50px 30px 20px 40px; border:1px solid #0000FF } 2. Thu c tính padding Padding có th hi u như là m t thu c tính m. Padding không nh hư ng t i kho ng các gi a các các i tư ng như margin mà nó ch quy nh kho ng cách gi a ph n n i dung và vi n c a m t i tư ng (xem l i nh minh h a v boxmodel). Cú pháp: Tương t margin. Padding: | | | This is trial version Th c hi n l i ví d nhưng thay margin b ng padding, và quan sát v trí ư ng vi n. Biên s an: Dương Thành Ph t Trang 72 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS VII. KHUNG VI N - BORDER Border là m t thành ph n quan tr ng trong m t trang web. Nó thư ng ư c dùng trong trang trí, óng khung cho m t i tư ng c n nh n m nh, phân cách các i tư ng giúp trang web trông d nhìn hơn,…. 1. Thu c tính border-width Border-width là m t thu c tính CSS quy nh r ng cho vi n c a m t i tư ng web. Thu c tính này có các giá tr : thin (m nh), medium (v a), thick (dày), hay là m t giá tr o c th như pixels. 2. Thu c tính border-color Border-color là thu c tính CSS quy nh màu vi n cho m t i tư ng web. Thu c tính này nh n t t c ơn v màu CSS h tr . 3. Thu c tính border-style Border-style là thu c tính CSS quy nh ki u vi n th hi n c a m t i tư ng web. CSS cung c p t t c 8 ki u vi n tương ng v i 8 giá tr : dotted, dashed, solid, double, groove, ridge, inset và outset. hi u rõ hơn, chúng ta hãy xem hình minh h a dư i ây. Ví d sau s nh vi n cho 3 thành ph n h1, h2, p như sau: h1 { border-width:thin; border-color:#FF0000; border-style:solid } h2 { border-width:thick; border-color:#CCC; border-style:dotted } p { border-width:5px; border-color:#FF00FF; border-style:double } Ngoài ra, chúng ta cũng có th dùng riêng các thu c tính border-top, border-right, border- bottom hay border-left ch nh vi n riêng cho các i tư ng. Ví d : h1 { border-top-width:thin; border-top-color:#FF0000; border-top-style:solid; border-right-width:thick; border-right-color:#AFAFAF; border-right-style:dotted; border-bottom-width:2px; border-bottom-color:blue; border-bottom-style:double; border-left-width:5px; border-left-color:violet; border-left-style:groove } Thu c tính border rút g n s d ng c u trúc rút g n c a CSS như sau: Border: | | VIII. HEIGHT & WIDTH 1. Thu c tính width: W idth là m t thu c tính CSS dùng quy nh chi u r ng cho m t thành ph n web. Ví d sau chúng ta s nh chi u r ng cho thành ph n p c a m t trang web. p { width:700px; } 2. Thu c tính max-width: Max-width là thu c tính CSS dùng quy nh chi u r ng t i a cho m t thành ph n web. 3. Thu c tính min-width: This is trial version Min-width là thu c tính CSS dùng quy nh chi u r ng t i thi u cho 1 thành ph n web. Biên s an: Dương Thành Ph t Trang 73 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS 4. Thu c tính height: Height là m t thu c tính CSS dùng quy nh chi u cao cho m t thành ph n web. Ví d sau chúng ta s nh chi u cao cho thành ph n p c a m t trang web. p { height:300px } 5. Thu c tính max-height: Max-height là thu c tính CSS dùng quy nh chi u cao t i a cho m t thành ph n web. 6. Thu c tính min-height: Min-height là thu c tính CSS dùng quy nh chi u cao t i thi u cho 1 thành ph n web. Lưu ý: Thông thư ng chi u cao m t thành ph n web do văn b n trong trang web ó quy t nh. Vi c nh chi u cao chính xác cho m t thành ph n s t o thanh cu n văn b n n u chi u cao văn b n l n hơn chi u cao ã nh. Các thu c tính max/min-width/height ư c s d ng trong nh ng trư ng h p b n không ch c giá tr chính xác cho width, height c m t thành ph n. Ví d , b n vùng ch a bài post c a m t forum có b ngang 500px, b n có th nh max- width:500px cho ph n hình nh trong ph n ó tránh nh ng nh l n b l ch ra ngoài. This is trial version Biên s an: Dương Thành Ph t Trang 74 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS Chương 03 CÁC THU C TÍNH KHÁC Float & Clear Position Layers Web Standard I. FLOAT & CLEAR 1. Thu c tính float: Float (theo như nghĩa ti ng Vi t là th trôi) là m t thu c tính CSS dùng c nh m t thành ph n web v bên trái hay bên ph i không gian bao quanh nó. ây là m t thu c tính r t c n thi t khi dàn trang (như t o các trang web 2 column layout hay 3 column layout), hi n th văn b n thành c t (gi ng như ki u Format > Columns trong MS Word v y), hay th c hi n vi c nh v trí nh và text (như m t s ki u text wrapping c a MS Word). rõ hơn chúng ta hãy xem hình minh h a sau v cơ ch ho t ng c a float: Thu c tính float có 3 giá tr : + Left: C nh ph n t v bên trái. + Right: C nh ph n t v bên ph i. + None: Bình thư ng. Nhìn vào hình minh h a trên chúng ta th y là ban u trong box l n có hai thành ph n là Box B và ph n Content. Lúc u Box B n m bên trên và Content n m bên dư i, nhưng khi chúng ta t thu c tính float cho Box B thì Box B b c nh v bên trái và ch a l i kho ng tr ng bên trái nó. Còn ph n Content thì v n n m bên dư i s t ng tràn lên l p y kho ng tr ng do Box B t o ra. ví d sau, chúng ta s th c hi n float nh logo sang trái ph n n i dung bên dư i tràn lên n m c nh logo. #logo { float:left; } M t ví d khác là chúng ta s th dùng float chia 2 c t văn b n. .column1, .column2 { width:45%; float:left; text-align:justify; padding:0 20px; } .column1 { border-right:1px solid #000 } 2. Thu c tính clear: Thu c tính clear là m t thu c tính thư ng ư c gán vào các ph n t liên quan t i ph n t ã ư c float quy t nh hư ng x s c a ph n t này. ví d trên, khi chúng ta float t m nh qua trái thì m c nhiên văn b n s ư c tràn lên l p vào ch tr ng. Nhưng khi chúng ta t vào văn b n thu c tính clear thì chúng ta có quy n quy t nh xem ph n văn b n ó có ư c tràn lên hay không. Thu c tính clear có t t c 4 thu c tính: left (tràn bên trái), right (tràn bên ph i), both (không tràn) và none. This is trial version Biên s an: Dương Thành Ph t Trang 75 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS II. POSITION 1. Nguyên lý ho t ng c a position Hãy tư ng tư ng c a s trình duy t c a b n gi ng như m t h t a và v i position b n có th t m t i tư ng web b t c v trí nào trên h t a này. Gi s chúng ta mu n nh v m t nh v trí 70px cách nh và 90px t bên trái tài li u, chúng ta s vi t CSS như sau: img { position:absolute; top:70px; left:90px } Như b n ã th y, s nh v b ng CSS là m t công ngh chính xác nh v m t thành ph n. Nó d dàng hơn so v i vi c dùng b ng. 2. Absolute position: nh v tuy t i là s nh v mà trong ó các thành ph n ư c nh v không l ib t c m t kho ng tr ng nào trong tài li u. M t thành ph n ư c nh v tuy t i s nh n giá tr position là absolute. Các i tư ng ã nh v tuy t i s dùng k t h p v i các thu c tính top, left, right, bottom xác nh t a . Ví d sau s ch cho chúng ta cách t b n nh b n góc tài li u b ng nh v tuy t i. #logo1 { position:absolute; top:50px; left:70px } #logo2 { position:absolute; top:0; right:0 } #logo3 { position:absolute; bottom:0; left:0 } #logo4 { position:absolute; bottom:70px; right:50px } 3. Relative position S nh v tương i cho m t thành ph n là s nh v ư c tính t v trí g c trong tài li u. Các thành ph n ã ư c nh v tương i s l i kho ng không trong tài li u. Các thành ph n ư c nh v tương i s nh n giá tr position là relative. Chúng ta hãy làm l i ví d trên nhưng thay absolute thành relative. Các b n ghi nh n l i v trí 4 nh logo lúc áp d ng thu c tính position là none, absolute và relative r i rút ra nh n xét. III. LAYERS Layer là thu c tính giúp ta t m t thành ph n này lên trên m t thành ph n khác. V i m c ích này, b n s gán cho m i ph n t m t con s . Theo ó, ph n t có s cao hơn s n m trên, ph n t có s th p hơn s n m dư i. Ví d sau chúng ta s t 5 b c nh logo 5 l p. This is trial version #logo1 { position:absolute; top:70px; left:50px; z-index:1 } Biên s an: Dương Thành Ph t Trang 76 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS #logo2 { position:absolute; top:140px; left:100px; z-index:2 } #logo3 { position:absolute; top:210px; left:150px; z-index:3 } #logo4 { position:absolute; top:280px; left:200px; z-index:4 } #logo5 { position:absolute; top:350px; left:250px; z-index:5 } V i trang html là: Ví D V Layers IV. WEB STANDARDS Trong công vi c thi t k web thì m t trong nh ng v n quan tr ng ó là làm sao m b o trang web c a b n có th hi n th t t trên h u h t các trình duy t. Hi u rõ v n này W3C (World Wide Web Consortium) – m t t ch c có nhi m v qu n lý và c ra các tiêu chu n web cùng v i các i tác khác như Microsof, Mozilla Foundation,… ã t ra các tiêu chu n v mã cho web. Nó cho phép nhà phát tri n web có th t tin hơn khi th c hi n d án cũng như m b o cho các trang web th a mãn tiêu chu n có th hi n th t t nhi u trình duy t. d dàng hơn. Trong CSS, W3C ã t o ra m t công c g i là CSS Validator c và th m nh tính h p chu n cho CSS c a b n. u tiên, các b n truy c p vào a ch sau: http://jigsaw.w3.org/css-validator/. t url file CSS c a b n ô url r i nh n nút “click to check stylesheet” chương trình c file CSS c a b n. Sau khi c xong, n u file CSS c a b n không phù h p tiêu chu n, chương trình s hi n th danh sách l i. N u file CSS c a b n h p chu n thì chương trình s hi n ra b c nh ch ng nh n. B n có th t b c nh ó trên trang web c a b n th hi n nó ã ư c xây d ng trên các mã chu n. This is trial version Biên s an: Dương Thành Ph t Trang 77 www.adultpdf.com