Can ban ve css

Can Ban Ve CSS

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.Chúng ta tìm hi 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:

200pt" src="joe.jpg">
và sau ây là o n code khi b n nhìn th y trong web:
 </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>

color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-size:40pt } </STYLE>

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

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;

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

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 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>
-------------------------
Vi n b ng
-------------------------------
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 Font: #666666
Liên k t CSS Hover
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
Màu Font: #003366

Màu Font: #666666
Liên k t CSS Hover
Màu Font: #006699
--------------------------------------
Table Footer
Màu n n: #FFFFFF
Màu Font: #003366
Màu Font: #003366
Màu Font: #666666
Liên k t CSS Hover
Màu Font: #006699
----------------------------------
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
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted;
BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
-------------------------
Ô nh p li u
----------------------------------
Nút (Button)
Màu n n: #E4E7F5

------------------------------------
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
padding: 3px 6px 3px 6px;
white-space: nowrap;
Màu n n: #FFFFFF
Màu Font: #003366
Màu n n: #FFFFFF
Màu Font: #666666
Liên k t CSS Hover
Màu n n: #FFFFFF
Màu Font: #006699

-------------------------------
Popup Menu Body
Gi nguyê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;
Màu n n: #FFFFFF
Màu Font: #22229C
Màu n n: #FFFFFF
Màu Font: #22229C
Liên k t CSS Hover
Màu n n: #FFFFFF
Màu Font: #FFFFFF
---------------------------------
Menu chuy n nhanh
Item selected
Màu n n:#FFFFFF
Màu Font: #003366
---------------------------------

Can ban ve css

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (15)

Similar a Can ban ve css

Similar a Can ban ve css (20)

Más de hieusy

Más de hieusy (20)

Can ban ve css