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 thng ��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 thng 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 thng 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 nhng 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 {

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.

Lu ý 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 ngi 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 bng


-------------------------------

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 thng

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




Màu Font: #006699


--------------------------------------

Table Footer

Màu n�n: #FFFFFF

Màu Font: #003366



Màu Font: #003366




Màu Font: #666666




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 tho 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



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



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

Technology