BÀI GIẢNG THIẾT KẾ WEB CỦA TRƯỜNG ITC

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

Thêm vào BST

Báo xấu

38
lượt xem 11
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 thiết kế web của trường itc', 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 THIẾT KẾ WEB CỦA TRƯỜNG ITC

Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS Chương 1: T NG QUAN V CSS Gi i thi u M t s quy ư c v cách vi t CSS I. GI I THI U 1. CSS là gì? Trong lĩnh v c xây d ng, chúng ta có trang trí n i th t, trong lĩnh v c th m m - làm p, chúng ta có k thu t make-up; còn trong lĩnh v c thi t k web chúng ta có CSS. CSS (Cascading Style Sheets) là m t ngôn ng quy nh cách trình bày cho các tài li u vi t b ng HTML, XHTML, XML, SVG, hay UML,… 2. T i sao CSS? Ngôn ng HTML cũng có s thu c tính nh d ng cơ b n cho text, picture, table, … nhưng nó không th t s phong phú và chính xác như nhau trên m i h th ng. CSS cung c p cho b n hàng trăm thu c tính trình bày dành cho các i tư ng v i s sáng t o trong k t h p các thu c tính giúp mang l i hi u qu cao. Ngoài ra, CSS ã ư c h tr b i t t c các trình duy t, nên b n hoàn toàn có th t tin trang web c a mình có th hi n th “như nhau” trên m i h i u hành. S d ng các mã nh d ng tr c ti p trong HTML t n hao nhi u th i gian thi t k cũng như dung lư ng lưu tr . Trong khi ó CSS ưa ra phương th c áp d ng m t khuôn m u chu n t m t file CSS ngoài. Có hi u qu ng b khi b n t o m t website có hàng trăm trang hay c khi b n mu n thay i m t thu c tính trình bày nào ó. CSS ư c c p nh t liên t c mang l i các trình bày ph c t p và tinh vi hơn. 3. H c CSS c n nh ng gì? - Có là m t ki n th c v HTML. - M t trình so n th o văn b n b n có th vi t mã CSS. Nên s d ng m t trình so n th o ơn gi n như Notepad trong Windows hay Pico trong Linux, Simple Text trong Mac. Hay t các chương trình như khi dùng DreamWeaver, FrontPage, Golive,… - M t trình duy t web. II. M T S QUY Ư C V CÁCH VI T CSS 1. Cú pháp CSS: tìm hi u cú pháp CSS chúng ta hãy th xem m t ví d sau. Ví d : nh màu n n cho m t trang web là xanh nh t (light cyan): + Trong HTML: + Trong CSS: body { background-color:#00BFF3; } Qua ví d trên ta th y ư c m i tương ng gi a các thu c tính trong HTML và CSS. Cú pháp CSS cơ b n: Selector { property:value; } Trong ó: + Selector: Các i tư ng mà chúng ta s áp d ng các thu c tính trình bày. + Property: Chính là các thu c tính quy nh cách trình bày. Như: background-color, font- family, color, padding, margin,… M i thu c tính CSS ph i ư c gán m t giá tr . N u có nhi u hơn m t thu c tính cho m t selector thì chúng ta ph i dùng m t d u ; (ch m ph y) phân cách các thu c tính. T t c các This is trial version thu c tính trong m t selector s ư c t trong m t c p ngo c nh n sau selector. Biên s an: Dương Thành Ph t Trang 60 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS Ví d : body { background:#FFF; color:#FF0000; font-size:14pt } d c hơn, b n nên vi t m i thu c tính CSS m t dòng. Tuy nhiên, nó s làm tăng dung lư ng lưu tr CSS c a b n. i v i m t trang web có nhi u thành ph n có cùng m t s thu c tính, chúng ta có th th c hi n gom g n l i như sau: h1 { color:#0000FF; text-transform:uppercase } h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-transform:uppercase; } h1, h2, h3 { color:#0000FF; text-transform:uppercase; } + Value: Giá tr c a thu c tính. Như ví d trên value chính là #FFF dùng nh màu tr ng cho n n trang. i v i m t giá tr có kho ng tr ng, b n nên t t t c trong m t d u ngo c kép. Ví d : font-family:”Times New Roman” i v i giá tr là ơn v o, không nên t m t kho ng cách gi a s o v i ơn v c a nó. Ví d : width:100 px. Nó s làm CSS b vô hi u trên Mozilla/Firefox hay Netscape. Chú thích trong CSS: Cũng như nhi u ngôn ng web khác. Trong CSS, chúng ta cũng có th vi t chú thích cho các o n code như sau /* N i dung chú thích */ Ví d : /* Màu ch cho trang web là màu */ body { color:red } 2. ơn v CSS: B ng li t kê các ơn v chi u dài và màu s c dùng trong CSS. ơn v chi u dài ơn v Mô t % Ph n trăm in Inch (1 inch = 2.54 cm) cm Centimeter mm Millimeter pc Pica (1 pc = 12 pt) px Pixels ( i m nh trên màn hình máy tính) pt Point (1 pt = 1/72 inch) em 1 em tương ương kích thư c font hi n hành, n u font hi n hành có kích c 14px thì 1 em = 14 px. ây là m t ơn v r t h u ích trong vi c hi n th trang web. ơn v màu s c ơn v Mô t Color-name Tên màu. Ví d : black, white, red, green, blue, cyan, magenta,… RGB (r,g,b) Màu RGB v i 3 giá tr R, G, B có tr t 0 – 255 k t h p v i nhau t o ra vô s màu. RGB (%r,%g,%b) Màu RGB v i 3 giá tr R, G, B có tr t 0 – 100% k t h p. Hexadecimal RGB Mã màu RGB d ng h th p l c. Ví d : #FFFF: tr ng, #000: en, 3. V trí t CSS: Chúng ta có ba cách khác nhau nhúng CSS vào trong m t tài li u HTML + Cách 1: N i tuy n (ki u thu c tính) ây là m t phương pháp nguyên th y nh t nhúng CSS vào m t tài li u HTML b ng cách nhúng vào t ng th HTML mu n áp d ng. This is trial version Biên s an: Dương Thành Ph t Trang 61 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS Lưu ý: N u b n mu n áp d ng nhi u thu c tính cho nhi u th HTML khác nhau thì không nên dùng cách này. Ví d nh n n màu en cho trang và màu ch tr ng cho o n văn b n như sau: Ví d ^_^ Welcome To MyWebsite ^_^ + Cách 2: Bên trong (th style) b ng cách rút t t c các thu c tính CSS vào trong th style ( ti n cho công tác b o trì, s a ch a v sau). Ví d nh n n màu tr ng cho trang và màu ch xanh lá cho o n văn b n như sau: Ví d body { background-color:#000 } p { color:white } ^_^ Welcome To MyWebsite ^_^ Lưu ý: Th style nên t trong th head. + Cách 3: Bên ngoài (liên k t v i m t file CSS bên ngoài) Thay vì t t t c các mã CSS trong th style chúng ta s ưa chúng vào trong m t file CSS (có ph n m r ng .css). ây là cách làm ư c khuy n cáo, c bi t h u ích cho vi c ng b hay b o trì m t website l n s d ng cùng m t ki u m u. Cú pháp chèn file css vào trang là: Ho c @import url("filename.css") + u tiên chúng ta s t o ra m t file html Ví d ^_^ Welcome To MyWebsite ^_^ This is trial version Biên s an: Dương Thành Ph t Trang 62 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS + Sau ó hãy t o m t file style.css lưu cùng thư m c v i file htm trên v i n i dung: body { background-color:#000 } p{ color:White } 4. S ưu tiên: Trư c khi th c thi CSS cho m t trang web. Trình duy t s c toàn b CSS mà trang web có th ư c áp d ng, bao g m: CSS m c nh c a trình duy t, file CSS bên ngoài liên k t vào trang web, CSS nhúng trong th và các CSS n i tuy n. Sau ó, trình duy t s t ng h p toàn b CSS này vào m t CSS o, và n u có các thu c tính CSS gi ng nhau thì thu c tính CSS nào n m sau s ư c ưu tiên s d ng. Theo nguyên t c ó trình duy t s ưu tiên theo trình t : Các CSS n i tuy n CSS bên trong CSS bên ngoài CSS m c nh c a trình duy t. This is trial version Biên s an: Dương Thành Ph t Trang 63 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 2 CÁC THU C TÍNH NH D NG nh d ng n n trang nh d ng ký t , nh d ng liên k t Nhóm các phân t Mô hình h p – Box Model Canh l & kho ng cách – Margin & Padding Khung vi n – Border, Chi u r ng và chi u cao I. NH D NG N N TRANG 1. Màu n n (thu c tính background-color) Giá tr mã màu c a background-color cũng gi ng như color. Ví d s d ng thu c tính background-color nh màu n n trang, các thành ph n h1, h2 l n lư t là xanh lơ, và cam. body { background-color:cyan } h1 { background-color:red } h2 { background-color:orange } 2. nh n n (thu c tính background-image) chèn nh n n cho m t thành ph n trên trang web chúng ta s d ng thu c tính background-image. Ví v file background.css body { background-image:url(logo.jpg) } h1 { background-color:red } h2 { background-color:orange } p { background-color: FDC689 } và file html Ví d ^_^ Welcome To MyWebsite ^_^ Chúc các b n vui v H nh phúc và thành t trong cu c s ng This is trial version Biên s an: Dương Thành Ph t Trang 64 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS 3. L p l i nh n n (thu c tính background-repeat): N u s d ng m t nh có kích thư c quá nh làm n n cho m t i tư ng thì theo m c nh trình duy t s l p l i nh n n ph kín không gian còn th a. Thu c tính background- repeat giúp i u khi n trình tr ng l p l i c a nh n n. Thu c tính này có 4 giá tr : + repeat-x: Ch l p l i nh theo phương ngang. + repeat-y: Ch l p l i nh theo phương d c. + repeat: L p l i nh theo c 2 phương, ây là giá tr m c nh. + no-repeat: Không l p l i nh. 4. Khóa nh n n (thu c tính background-attachment) Background-attachment là m t thu c tính cho phép b n xác nh tính c nh c a nh n n so v i v i n i dung trang web. Thu c tính này có 2 giá tr : + scroll: nh n n s cu n cùng n i dung trang web, ây là giá tr m c nh. + fixed: C nh nh n n so v i n i dung trang web, nh n n s ng yên khi b n ang cu n trang web (m b t ng). 5. nh v nh n n (thu c tính background-position) Theo m c nh nh n n khi ư c chèn s n m góc trên, bên trái màn hình. V i thu c tính background-position b n s có th t nh n n b t c v trí nào. Ví d : Giá tr Ý nghĩa Background-position:5cm 2cm nh ư c nh v 5cm t trái qua và 2cm t trên xu ng. Background-position:20% 30% nh ư c nh v 20% t trái qua và 30% t trên xu ng. Background-position:bottom left nh ư c nh v góc trái phía dư i Thu c tính background rút g n Khi s d ng quá nhi u thu c tính CSS s gây khó khăn cho ngư i c, công tác ch nh s a cũng như t n nhi u dung lư ng nên CSS ưa ra m t c u trúc rút g n cho các thu c tính cùng nhóm. Ví d : Chúng ta có th nhóm l i o n CSS sau background-color:transparent; background-image: url(logo.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; thành m t dòng ng n g n: background:transparent url(logo.jpg) no-repeat fixed right bottom; T ví d trên chúng ta có th khái quát c u trúc rút g n cho nhóm background: background: | | | | II. NH D NG KÝ T 1. nh d ng Font a. Thu c tính font-family: Thu c tính font-family có công d ng nh nghĩa m t danh sách ưu tiên các font s ưc dùng hi n th m t thành ph n trang web. This is trial version Có hai lo i tên font ư c dùng trong font-family: family-names và generic families. Biên s an: Dương Thành Ph t Trang 65 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS + Family-names: Tên c th c a m t font. Ví d : Arial, Verdana, Tohama,… + Generic families: Tên c a m t h g m nhi u font. Ví d : sans-serif, serif,… Ví d sau chúng ta s vi t CSS quy nh font ch dùng cho c trang web là Times New Roman, Tohama, sans-serif, và font ch dùng hi n th các tiêu h1, h2, h3 s là Arial, Verdana và các font h serif. body { font-family:”Times New Roman”,Tohama,sans-serif } h1, h2, h3 { font-family:arial,verdana,serif } Chú ý: i v i các font có kho ng tr ng trong tên như Times New Roman c n ư c t trong d u ngo c kép. b. Thu c tính font-style: Thu c tính font-style nh nghĩa vi c áp d ng các ki u in thư ng (normal), in nghiêng (italic) hay xiên (oblique) lên các thành ph n trang web. Ví d th c hi n áp d ng ki u in nghiêng cho thành ph n h1 và ki u xiên cho h2. h1 { font-style:italic; } h2 { font-style:oblique; } c. Thu c tính font-variant: Thu c tính font-variant ư c dùng ch n gi a ch bình thư ng và small-caps c a m t font ch . M t font small-caps là m t font s d ng ch in hoa có kích c nh hơn in hoa chu n thay th nh ng ch in thư ng. N u như font ch dùng hi n th không có s n font small-caps thì trình duy t s hi n ch in hoa thay th . Trong ví d sau chúng ta s s d ng ki u small-caps cho ph n h1 h1 { font-variant:small-caps } d. Thu c tính font-weight: Thu c tính font-weight mô t cách th c th hi n c a font ch là d ng bình thư ng (normal) hay in m (bold). Th in m ph n p: p { font-weight:bold } e. Thu c tính font-size: Kích thư c c a m t font ư c nh b i thu c tính font-size. Thu c tính này nh n các giá tr ơn v o h tr b i CSS bên c nh các giá tr xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Tùy theo m c ích s d ng c a website b n có th l a chon nh ng ơn v phù h p. ví d trang web có kích c font là 20px, h1 là 3 em = 3 x 20 = 60px, h2 là 2em = 40px. body { font-size:20px } h1 { font-size:3em } h2 { font-size:2em} Thu c tính font rút g n Tương t như các thu c tính background, chúng ta cũng có th rút g n các thu c tính font l i thành m t thu c tính ơn như ví d sau: h1 { font-style: italic; font-variant:small-caps; font-weight: bold; font-size: 35px; font-family: arial,verdana,sans-serif; } Thành: h1 { font: italic bold 35px arial,verdana,sans-serif; } C u trúc rút g n cho các thu c tính nhóm font: This is trial version Font : | < font-variant> | | |< font-family> Biên s an: Dương Thành Ph t Trang 66 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS 2. Màu ch (thu c tính color) nh màu ch cho m t thành ph n nào ó trên trang web chúng ta s d ng thu c tính color. Giá tr c a thu c tính này là các giá tr màu CSS h tr . Ví d sau chúng ta s vi t CSS nh màu ch chung cho m t trang web là en, cho tiêu h1 màu xanh da tr i, cho tiêu h2 màu xanh lá chúng ta s làm như body { color:#000 } h1 { color:#0000FF } h2 { color:#00FF00 } 3. Thu c tính text-indent : Thu c tính text-indent cung c p kh năng t o ra kho ng th t u dòng cho dòng u tiên trong o n văn b n. Giá tr thu c tính này là các ơn v o cơ b n dùng trong CSS. Trong ví d sau chúng ta s nh d ng th t u dòng m t kho ng 30px cho dòng văn b n u tiên trong m i o n văn b n i v i các thành ph n p { text-indent:30px } 4. Thu c tính text-align : Thu c tính text-align giúp canh ch nh văn b n cho các thành ph n trong trang web. Thu c tính này có t t c 4 giá tr : left (canh trái – m c nh), right (canh ph i), center (canh gi a) và justify (canh u). Trong ví d sau chúng ta s th c hi n canh ph i các thành ph n h1, h2 và canh u i v i thành ph n h1, h2 { text-align:right } p { text-align:justify } 5. Thu c tính letter-spacing: Thu c tính letter-spacing ư c dùng nh kho ng cách gi a các ký t trong m t o n văn b n. Mu n nh kho ng cách gi a các ký t trong thành ph n h1, h2 là 7px và thành ph n là 5px chúng ta s vi t CSS sau: h1, h2 { letter-spacing:7px } p { letter-spacing:5px } 6. Thu c tính text-decoration: Thu c tính text-decoration giúp b n thêm các hi u ng g ch chân (underline), g ch xiên (line-through), g ch u (overline), và m t hi u ng c bi t là văn b n nh p nháy (blink). Ví d sau chúng ta s nh d ng g ch chân cho thành ph n h1, g ch u thành ph n h2 h1 { text-decoration:underline } h2 { text-decoration:overline } 7. Thu c tính text-transform: Text-transform là thu c tính qui nh ch in hoa hay in thư ng c a văn b n mà không ph thu c vào văn b n g c trên HTML. Thu c tính này có t t c 4 giá tr : uppercase (in hoa), lowercase (in thư ng), capitalize (in hoa ký t u tiên trong m i t ) và none (không áp d ng hi u ng – m c nh). Trong ví d dư i ây chúng ta s nh d ng cho thành ph n h1 là in hoa, h2 là in hoa u m i ký t . h1 { text-transform:uppercase } h2 { text-transform:capitalize } III. NH D NG LIÊN K T- PSEUDO-CLASSES FOR LINKS M t thành ph n r t quan tr ng trong m i website chính là liên k t. Cũng như m t i tư ng văn b n thông thư ng, chúng ta hoàn toàn có th áp d ng các thu c tính nh d ng văn This is trial version Biên s an: Dương Thành Ph t Trang 67 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS b n thông thư ng cho m t liên k t. Hơn n a, CSS còn cung c p m t i u khi n c bi t ư c g i là pseudo-classes. Pseudo-classes cho phép b n xác nh các hi u ng nh d ng cho m t i tư ng liên k t m t tr ng thái xác nh như khi liên k t chưa ư c thăm (a:link), khi rê chu t lên liên k t (a:hover), khi liên k t ư c thăm (a:visited) hay khi liên k t ang ư c kích ho t – ang gi nh n chu t (a:active). V i i u khi n pseudo-classes cùng v i các thu c tính CSS ã h c ch c ch n s mang l i r t nhi u ý tư ng v trang trí liên k t cho trang web. Sau ây chúng ta s ti n hành m t s ví d tìm hi u thêm v các kh năng trang trí cho m t liên k t d a trên pseudo-classes. Ví d chúng ta s áp d ng 4 màu s c khác nhau cho t ng tr ng thái liên k t: các liên k t chưa thăm có màu xanh lá; các liên k t mouse over s có màu tươi; các liên k t ã thăm s có màu và các liên k t ang kích ho t có màu tím. a:link { color:#00FF00 } a:hover { color:#FF00FF } a:visited { color:#FF0000 } a:active { color:# 662D91 } Ví d T o các hi u ng tương ng v i trình tr ng liên k t: các liên chưa thăm có màu xanh lá, kích c font 14px; liên k t mouse over có màu tươi, kích c font 1.2em, hi u ng nh p nháy; liên k t ã thăm s có màu xanh da tr i, không có ư ng g ch chân; các liên k t ang kích ho t có màu tím và font d ng small-caps. a:link { color:#00FF00; font-size:14px } a:hover { color:#FF00FF; font-size:1.2em; text-decoration:blink } a:visited { color:#FF0000; text-decoration:none } a:active { color:# 662D91; font-variant:small-caps } Ví d cũng t o cho liên k t hi u ng màu s c gi ng ví d trên nhưng s có thêm 1 s hi u ng: các li n k t s có khung vi n màu en, kích c font 14px; liên k t mouse over có n n light cyan; các liên k t ã thăm có n n light yellow. a { border:1px solid #000; font-size:14px } a:link { color:#00FF00; } a:hover{background-color:#00BFF3;color:#FF00FF;font-size:1.2em;text-ecoration:blink } a:visited { background-color:#FFF568; color:#FF0000; text-decoration:none } a:active { color:#662D91; font-variant:small-caps } Áp d ng các ví d trên vào file html sau Ví d ^_^ Welcome To MyWebsite ^_^ This is trial version Biên s an: Dương Thành Ph t Trang 68 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS IV. NHÓM CÁC PH N T - CLASS & ID Chúng ta ã s d ng các thu c tính CSS v background, color, font,… Tuy nhiên, b n cũng nh n ra là khi áp d ng m t thu c tính CSS cho m t thành ph n nào ó ví d như h1, h2, p, a, img,… thì toàn b các thành ph n này trong trang web u nh n thu c tính này. V y có cách nào nhóm l i m t s thành ph n nào ó áp d ng m t thu c tính c bi t. Ví d như b n mu n các liên k t trên menu trang web s ư c in hoa, và có kích c l n hơn so v i liên k t trong n i dung ây chính là v n mà chúng ta s gi i quy t như sau: 1. Nhóm các ph n t v i class : Ví d chúng ta có m t o n mã HTML sau ây : 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 Yêu c u t ra là làm th nào tên các thành ph là màu và tên các t nh là màu xanh da tr i. gi i quy t v n này chúng ta s dùng m t thu c tính HTML g i là class to thành 2 nhóm là thành ph và tính. Ta s vi t l i o n HTML sau thành như th này: Ví d 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 i vi c dùng class nhóm các i tư ng như trên thì công vi c c a chúng ta s tr nên ơn gi n hơn nhi u, file class.css s là li.tp { color:FF0000 } li.tinh { color:0000FF } This is trial version Biên s an: Dương Thành Ph t Trang 69 www.adultpdf.com