Can ban ve css

434 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
434
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Can ban ve css

  1. 1. Can Ban Ve CSSCSS là t vi t t t c a Cascading Style Sheets : công d ng dùng trang trí trang web c ab 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 ctrang 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 tbu 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 ngví 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êngví 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, pixelví 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 chví d : P {letter-spacing: 10px}i. color: dùng hi n th màu cho ki u chví 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à shi n th ra mã s và b n ch n mã s ó.
  2. 2. 2.Chúng ta tìm hi u v Margin/Background: khi b n dùng thì nó s nh h ng ntoàn b trang web c a b n.a. margin-left: o n canh l bên tráib. margin-right: o n canh l bên ph ic. margin-top: o nh canh l n trên cùngví d chúng ta có th dùng nh sauBODY {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 sauP {margin: 3in 4cm 12px}e. line-height: là kho ng cách gi a các dòng chví d : TEXT {line-height: 10px}f. background-color: là dùng hi n th màu n n c a trang webví 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 webb nví 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!cn"ng sau hidden, visible, scroll<IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP:
  3. 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à xanha: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 ya: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 ivà 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.htmlvà 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 webmà 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"ngc 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. 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 sauCURSOR: url(tencontro.ani);Ti p theo sau chúng ta tìm hi u v scroll bar trong CSSví 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 ngd iscrollbar-arrow-color: green; là hi n th màu xanh, cho 2 cái m&i tên lên và xu ngscrollbar-DarkShadow-Color: blue; là hi n th bóng màu xanh c a thanh scrollscrollbar-base-color: là hình hi n th toàn b màu c a thanh scrollscrollbar-Face-Color: là hi n th màu trên b m$t c a thanh scrollscrollbar-Highlight-Color: là hi n thì màu hightlight c a thanh scrollBà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 askin 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 CSST 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 centerTrong ó tên "anhnen_text_box.gif" là tên nh mà b n mu n chèn $t t i th m cimages/misc/Th thuiLàm vi n cho nútTa t i ph n Nút (Button)Thay vào giá tr màu n n là: #E4E7F5Thê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 cimages/misc/Th thuiLàm vi n cho nút
  5. 5. Ta t i ph n Nút (Button)Thay vào giá tr màu n n là: #E4E7F5Thê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 dottedChè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 th u íchT i ph n Trang n n (Background page) ngay bên d i ph n Body ó ta nh p thu ctí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 dottedChè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 th u íchT i ph n Trang n n (Background page) ngay bên d i ph n Body ó ta nh p thu ctí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 StripsCategory Strips c dùng v i hai m c ích. Nó c dùng ch ra m t Chuyên m cdi(n àn, và nó c&ng c s d ng nh m t ki u giao di n cho n i dung thanh tiêuc 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àun 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 iph 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( cMà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. 6. tính s d ng 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 chMà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 tbàiCá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êmm 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 giaodi 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 igiao di n. Còn bây gi ây là ph n giao di n c a tôi:BodyGi 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 ngGi nguyên thi t l p g c-------------------------------Category StripsMàu n n: #FFFFFF url(images/misc/tm.gif) no-repeat centerMàu Font: #003366Liên k t CSS bình th ngMàu n n: transparentMàu Font: #003366Text decoration: NoneLiên k t CSS ã vào:Màu n n: transparentMàu Font: #666666Text decoration: NoneLiên k t CSS HoverMàu n n: transparentMàu Font: #006699Text decoration: underline-----------------------------------------Table HeaderMàu n n: #FFFFFF url(images/misc/table_header_bg.gif) repeat-x top leftMàu Font: #003366Liên k t CSS bình th ngMàu n n: transparentMàu Font: #003366
  7. 7. Text decoration: NoneLiên k t CSS ã vào:Màu n n: transparentMàu Font: #666666Text decoration: NoneLiên k t CSS HoverMàu n n: transparentMàu Font: #006699Text decoration: underline--------------------------------------Table FooterMàu n n: #FFFFFFMàu Font: #003366Liên k t CSS bình th ngMàu n n: transparentMàu Font: #003366Text decoration: NoneLiên k t CSS ã vào:Màu n n: transparentMàu Font: #666666Text decoration: NoneLiên k t CSS HoverMàu n n: transparentMàu Font: #006699Text decoration: underline----------------------------------Màu u tiên Màu th haiMàu n n: #FFFFFFMàu Font: #003366Thu c tính CSS $c bi t:border: 1px solid #E5E5E5;----------------------------------So n th o WYSIWYGMàu n n: #F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat centerMàu Font: #003366Thu 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 uThu 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. 8. 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;------------------------------------MenuSmall FontTime Color c gi nguyên thi t l p g c-------------------------------------Navbar TextMàu n n: #FFFFFFMàu Font: #003366-------------------------------------Highlighted FontMàu n n: #FFFFFFMàu Font: #FF0000------------------------------------Panel SurroundMàu n n: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top leftMàu font: #000000---------------------------------Panel (Forms)Màu n n: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top leftMàu font: #000000--------------------------------<legend>Gi nguyên-------------------------------- i u khi n menu PopupMàu n n: #FFFFFFMàu Font: #003366Thu c tính CSS $c bi t:padding: 3px 6px 3px 6px;white-space: nowrap;Liên k t CSS bình th ngMàu n n: #FFFFFFMàu Font: #003366Text decoration: NoneLiên k t CSS ã vào:Màu n n: #FFFFFFMàu Font: #666666Text decoration: NoneLiên k t CSS HoverMàu n n: #FFFFFFMàu Font: #006699Text decoration: underline
  9. 9. -------------------------------Popup Menu BodyGi nguyên-------------------------------Tùy ch n dòng cho Menu PopupMàu n n: #FFFFFFMàu Font: #000000Thu c tính CSS $c bi twhite-space: nowrap;cursor: pointer;Liên k t CSS bình th ngMàu n n: #FFFFFFMàu Font: #22229CText decoration: NoneLiên k t CSS ã vào:Màu n n: #FFFFFFMàu Font: #22229CText decoration: NoneLiên k t CSS HoverMàu n n: #FFFFFFMàu Font: #FFFFFFText decoration: None---------------------------------Menu chuy n nhanhItem selectedMàu n n:#FFFFFFMàu Font: #003366---------------------------------

×