Download to read offline
![[Japanese]2011 07 15_日本計画研究所](https://cdn.slidesharecdn.com/ss_thumbnails/japanese20110715-111123091122-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Can ban ve css
- 1. Can Ban VeCSS CSS là t vi t t t c a Cascading Style Sheets : công d ng dùng trang trí trang web c a b n, và thông th ng c g n v i các ngôn ng nh là HTML, PHP, dùng làm n i b c trang web và hình nh trang web c a b n. M i khi b n b t u m t Style Sheets, thì b t bu c m b ng <HEAD> và k t thúc b ng </HEAD> và ti p theo sau ó là khai báo <STYLE TYPE="text/css"> và k t thúc b ng </STYLE> và sau nh ng b c trên thì b n có th nhìn th y nguyên o n code nh sau <head> <style type="text.css"> và gi a này là n i b n thêm vào sau này </style> </head> Và sau ây là c u trúc c a CSS: Tag {definition1; definition2;.....; definition n} ví d sau ây v dòng l nh c a CSS: H2 {font-size: 16pt; font-style: italic; font-family: arial} Và sau ây chúng ta tìm hi u v nh ng cách hàm trong CSS: 1. Tìm hi u v cách trang trí c a font ch : a. font-family là dùng khai báo ki u lo i font nào b n s d ng ví d : H2 {font-family: arial} b. font-style: là dùng khai báo ki u ch b n dùng trong style, bình th ng hay nghiêng ví d H3 {font-style: normal} c. font-weight và font-variant: là dùng trang trí ki u font b n ang dùng nh là sáng (light), m (bold) ví d A:link {font-weight: demi-light} d. text-align: là v trí n m c a font trong trang web, có 3 ki u là n m sang trái (left), ph i (right) và gi a là (center) ví d : H1 {text-align: center} e. text-decoration: là dùng trang trí ki u font nh là italic, blink... ví d : A:visited {text-decoration: blink} f. text-indent: dùng size (kích c ) mà b n ang dùng, thông th ng dùng là <p> và </p> và khai báo n v là in, cm, pixel ví d : P {text-indent: 1in} g. word-spacing: dùng kho ng cách gi a các t . ví d : P {word-spacing: 10px} h: letter-spacing: dùng kho ng cách gi a các ch ví d : P {letter-spacing: 10px} i. color: dùng hi n th màu cho ki u ch ví d : H3 {color: #FFFFFF} hi n th o n màu b n mu n, thì b n nên vào photoshop và ch n màu b n thích và s hi n th ra mã s và b n ch n mã s ó.
- 2. 2.Chúng ta tìmhi u v Margin/Background: khi b n dùng thì nó s nh h ng n toàn b trang web c a b n. a. margin-left: o n canh l bên trái b. margin-right: o n canh l bên ph i c. margin-top: o nh canh l n trên cùng ví d chúng ta có th dùng nh sau BODY {margin-left: 2in} P {margin-right: 12cm} BODY {margin-top: 45px} d. margin: có th khai báo chúng m t lúc cho top, right và left nh sau P {margin: 3in 4cm 12px} e. line-height: là kho ng cách gi a các dòng ch ví d : TEXT {line-height: 10px} f. background-color: là dùng hi n th màu n n c a trang web ví d : BODY {background-color: #ffffff} g: background-image: b n có th dùng m t t m hình làm background cho trang web b n ví d : BODY {background-image: http://www.page.com/dog.jpg} h. background-repeat: là dùng l p l i hình n n theo tr c t a x và y. Ví d : BODY {background-repeat: repeat-y} i. background-attachment: là dùng gán hình, hình nh n n c a trang web b n, nó ko có th di chuy n. ví d : BODY{background-attachment: fixed} 3.Chúng ta tìm hi u v Position và Division: a. Position: là dùng nh v m t ví trí xác nh nào ó <IMG STYLE="position:absolute" src="joe.jpg"> b. left: là dùng hình nh n m v v trí bên trái bao nhiêu <IMG STYLE="position:absolute; LEFT: 20px;" src="joe.jpg"> c. right: là dùng hình nh n m v v trí bên ph i bao nhiêu <IMG STYLE="position:absolute; RIGHT: 20px;" src="joe.jpg"> d. Top: là dùng nh v trí trên top c a screen <IMG STYLE="position:absolute; LEFT: 20px; TOP: 200pt" src="joe.jpg"> e. Width: là dùng xác nh chi u ngang c a t m hình c a b n là bao nhiêu <IMG STYLE="position:absolute; WIDTH: 80px; LEFT: 20px; TOP: 200pt" src="joe.jpg"> f. height: là dùng xác nh chi u cao c a t m hình <IMG STYLE="position:absolute; HEIGHT: 55px WIDTH:80px; LEFT: 20px; TOP: 200pt" src="joe.jpg"> g. overflow: là khi t m hình c a b n quá kích c cho phép thì nó có th dùng nh ng ch!c n"ng sau hidden, visible, scroll <IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP:
- 3. 200pt" src="joe.jpg"> và sauây là o n code khi b n nhìn th y trong web: <!-- BODY {background: #FFFFFF} A:link {color: #80FF00} A:visited {color: #FF00FF} H1 {font-size: 24pt; font-family: arial} H2 {font-size: 18pt; font-family: braggadocio} H3 {font size:14pt; font-family: desdemona} --> </STYLE> Chúng ta s i tìm hi u t ng ph n, ph n th nh t chúng ta s tìm hi u v TEXT: ví d dòng ch sau <STYLE TYPE="text/css"> a:link { color: blue; text-decoration: none } a:active { color: red; text-decoration: none } a:visited { color: blue; text-decoration: none } a:hover { color: green; text-decoration: underline } </STYLE> a:link là hi n th khi b n nhìn th y màu ch là xanh a:ative là hi n th màu # khi b n click vào dòng ch ó a:visited là hi n th màu xanh khi b n nhìn th y a:hover là hi n thì màu xanh lá cây khi b n dùng con chu t $t lên dòng ch ó Text-decoration: là dùng trang trí dòng ch ví d underline là g ch d i và sau ây là nh ng code có tác d ng t ng t% nh trên nh ng thay i màu: a.tree:link { color: green; text-decoration: none } a.tree:active { color: yellow; text-decoration: none } a.tree:visited { color: red; text-decoration: none } a.tree:hover { color: orange; text-decoration: underline } a.dog:link { color: blue; text-decoration: none } a.dog:active { color: red; text-decoration: none } a.dog:visited { color: blue; text-decoration: none } a.dog:hover { color: green; text-decoration: underline } <a href="index.html" class="tree">Index</a> B n có th dùng o n text trên link n m t trang web nào khác nh là nhothuong.html và c u trúc luôn b t u b ng <a> và k t thúc </a> href=" là dùng link n trang web mà b n mu n t i." Còn class="tree" là dùng khai báo tên c a class ó. ây c&ng là o n code c&ng có tác d ng nh trên <a href="index2.html" class="dog">Index2</a> Và sau ây là nh ng o n code, b n có th trang trí thêm làm xung thêm ch!c n"ng c a nó. <STYLE TYPE="text/css"> a:link { color: green; text-decoration: none } a:active { color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none } a:hover { color: green; text-decoration: underline; background: #F9EDED } </STYLE> <STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-family : Verdana, Arial, Helvetica, sans- serif; } </STYLE> <STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-size:40pt } </STYLE> <STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited {
- 4. color: green; text-decoration:none } a.hover { color: orange; text-decoration: underline; font-weight: bold} </STYLE> <STYLE TYPE="text/css"> a.italic:link { color: green; text-decoration: none } a.italic:active { color: yellow; text-decoration: none } a:italic:visited { color: green; text-decoration: none } a.italic:hover { color: orange; text-decoration: underline; font-style: italic} </STYLE> B n mu n a con tr c a b n vào CSS ch c n dùng dòng sau CURSOR: url(tencontro.ani); Ti p theo sau chúng ta tìm hi u v scroll bar trong CSS ví d o n code sau: <STYLE TYPE="text/css"> BODY { scrollbar-base-color: orange; scrollbar-arrow-color: green; scrollbar-DarkShadow-Color: blue; } </STYLE> scrollbar-base-color: orange; là hi n th màu cam, cho nguyên thanh bar t trên xu ng d i scrollbar-arrow-color: green; là hi n th màu xanh, cho 2 cái m&i tên lên và xu ng scrollbar-DarkShadow-Color: blue; là hi n th bóng màu xanh c a thanh scroll scrollbar-base-color: là hình hi n th toàn b màu c a thanh scroll scrollbar-Face-Color: là hi n th màu trên b m$t c a thanh scroll scrollbar-Highlight-Color: là hi n thì màu hightlight c a thanh scroll Bài vi t v các tùy bi n trong giao di n ( r t t t cho b n nào mu n thay i màu s c c a skin forum ) Chèn nh n n vào ph n nh p n i dung bài vi t: Vào Style & Templates/ Manager Style/ Main CSS T i ph n So n th o WYSIWYG ta thay ph n màu n n background thành #F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center Trong ó tên "anhnen_text_box.gif" là tên nh mà b n mu n chèn $t t i th m c images/misc/ Th thui Làm vi n cho nút Ta t i ph n Nút (Button) Thay vào giá tr màu n n là: #E4E7F5 Thêm vào ô thu c tính CSS $c bi t (phía bên ph i c a ô màu n n y): BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER- BOTTOM: #5182c2 1px dotted; Trong ó tên "anhnen_text_box.gif" là tên nh mà b n mu n chèn $t t i th m c images/misc/ Th thui Làm vi n cho nút
- 5. Ta t iph n Nút (Button) Thay vào giá tr màu n n là: #E4E7F5 Thêm vào ô thu c tính CSS $c bi t (phía bên ph i c a ô màu n n y): BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER- BOTTOM: #5182c2 1px dotted; Sau ó b n có th thay các thu c tính nh : màu s c vi n (#5182c2) dày vi n : 1px dotted Chèn nh n n vào th Body c a trang ch . Cái này n u bi t cách s d ng thì s r t h u ích T i ph n Trang n n (Background page) ngay bên d i ph n Body ó ta nh p thu c tính vào ô màu n n nh sau: #FFFFFF url(images/misc/dot.gif) Sau ó b n có th thay các thu c tính nh : màu s c vi n (#5182c2) dày vi n : 1px dotted Chèn nh n n vào th Body c a trang ch . Cái này n u bi t cách s d ng thì s r t h u ích T i ph n Trang n n (Background page) ngay bên d i ph n Body ó ta nh p thu c tính vào ô màu n n nh sau: #FFFFFF url(images/misc/dot.gif) Trong ó tên nh là "dot.gif" $t trong th m c "images/misc/" Category Strips 'Category Strips' c dùng v i hai m c ích. Nó c dùng ch' ra m t 'Chuyên m c' di(n àn, và nó c&ng c s d ng nh m t ki u giao di n cho n i dung thanh tiêu c a h u h t các b ng. N u ta mu n chèn nh vào ph n thanh tiêu c a "Chuyên m c" thì ta nh p vào ô màu n n nh sau: #FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left Trong ó #FFFFFF (màu tr ng) là màu n n còn nh n n thì các b n c&ng ã hi u v i ph n trên. L u ý r ng các b n ph i chú tr ng c n màu nh n n và màu Font. cho 2 cái có t ng ph n cho d( c Màu u tiên (First color) và màu th hai (Second color) Mô t : H u h t các b ng trong di(n àn dùng màu u tiên ho$c th! hai cho màu n n. $t thu c
- 6. tính s dng 'Màu u tiên' t i ây. Màu u tiên là màu n n c a ph n n i dung bài vi t khi b n xem ch Màu th! hai là màu n n c a ph n có ch!a tên s d ng, Avatar, danh hi u... c a ng i vi t bài Các b n nên s a cho phù h p v i tông màu c a màu n n di(n àn m t cách hài hoà. Sau ây là thi t l p giao di n c a tôi ã th%c hi n. Tôi cho r ng giao di n này s a thêm m t vài chi ti t n a thì ch)ng kém giao di n c a anh Admin bên này. Chú ý r ng giao di n *p thì ph i i ôi v i b nút *p. Các b n nên s m cho mình m t b nút "n ý v i giao di n. Còn bây gi ây là ph n giao di n c a tôi: Body Gi nguyên thi t l p g c ---------- Trang n n (Background page) Màu n n: #FFFFFF url(images/misc/dot.gif) Màu Font: #000000 ------------------------------ <td>, <th>, <p>, <li> Gi nguyên thi t l p g c ------------------------- Vi n b ng Gi nguyên thi t l p g c ------------------------------- Category Strips Màu n n: #FFFFFF url(images/misc/tm.gif) no-repeat center Màu Font: #003366 Liên k t CSS bình th ng Màu n n: transparent Màu Font: #003366 Text decoration: None Liên k t CSS ã vào: Màu n n: transparent Màu Font: #666666 Text decoration: None Liên k t CSS Hover Màu n n: transparent Màu Font: #006699 Text decoration: underline ----------------------------------------- Table Header Màu n n: #FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left Màu Font: #003366 Liên k t CSS bình th ng Màu n n: transparent Màu Font: #003366
- 7. Text decoration: None Liênk t CSS ã vào: Màu n n: transparent Màu Font: #666666 Text decoration: None Liên k t CSS Hover Màu n n: transparent Màu Font: #006699 Text decoration: underline -------------------------------------- Table Footer Màu n n: #FFFFFF Màu Font: #003366 Liên k t CSS bình th ng Màu n n: transparent Màu Font: #003366 Text decoration: None Liên k t CSS ã vào: Màu n n: transparent Màu Font: #666666 Text decoration: None Liên k t CSS Hover Màu n n: transparent Màu Font: #006699 Text decoration: underline ---------------------------------- Màu u tiên Màu th hai Màu n n: #FFFFFF Màu Font: #003366 Thu c tính CSS $c bi t: border: 1px solid #E5E5E5; ---------------------------------- So n th o WYSIWYG Màu n n: #F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center Màu Font: #003366 Thu c tính CSS $c bi t: BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted; ------------------------- Ô nh p li u Thu c tính CSS $c bi t: BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted; ---------------------------------- Nút (Button) Màu n n: #E4E7F5
- 8. Thu c tínhCSS $c bi t: BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted; ------------------------------------ Menu Small Font Time Color c gi nguyên thi t l p g c ------------------------------------- Navbar Text Màu n n: #FFFFFF Màu Font: #003366 ------------------------------------- Highlighted Font Màu n n: #FFFFFF Màu Font: #FF0000 ------------------------------------ Panel Surround Màu n n: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top left Màu font: #000000 --------------------------------- Panel (Forms) Màu n n: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left Màu font: #000000 -------------------------------- <legend> Gi nguyên -------------------------------- i u khi n menu Popup Màu n n: #FFFFFF Màu Font: #003366 Thu c tính CSS $c bi t: padding: 3px 6px 3px 6px; white-space: nowrap; Liên k t CSS bình th ng Màu n n: #FFFFFF Màu Font: #003366 Text decoration: None Liên k t CSS ã vào: Màu n n: #FFFFFF Màu Font: #666666 Text decoration: None Liên k t CSS Hover Màu n n: #FFFFFF Màu Font: #006699 Text decoration: underline
- 9. ------------------------------- Popup Menu Body Ginguyên ------------------------------- Tùy ch n dòng cho Menu Popup Màu n n: #FFFFFF Màu Font: #000000 Thu c tính CSS $c bi t white-space: nowrap; cursor: pointer; Liên k t CSS bình th ng Màu n n: #FFFFFF Màu Font: #22229C Text decoration: None Liên k t CSS ã vào: Màu n n: #FFFFFF Màu Font: #22229C Text decoration: None Liên k t CSS Hover Màu n n: #FFFFFF Màu Font: #FFFFFF Text decoration: None --------------------------------- Menu chuy n nhanh Item selected Màu n n:#FFFFFF Màu Font: #003366 ---------------------------------