• Increase font size
  • Default font size
  • Decrease font size
  • default style
  • blue style
  • red style
Thứ năm 03 Tháng 9 2015
You are here: Home Joomla

B?t C? Khi No B?n C?n Hy G?i: 0906.800.529

Chỉ mục bài viết
C? B?n CSS
Cc v?n ?? v? v?n b?n v cch ??nh d?ng v?n b?n
Cc thu?c tnh c?a font ch? v ??nh ngh?a font ch? cho v?n b?n
Cch vi?t gi?n l??c trong CSS
Tất cả các trang

VI. Cc thu?c tnh c?a font ch? v ??nh ngh?a font ch? cho v?n b?n

Cc thu?c tnh v? font ch? s? cho php b?n thay ??i h? font (font family), ?? ??m (boldness), kch th??c (size) v ki?u font (style).

01. ??t font cho ?o?n v?n b?n

?? ??t m?t lo?i font ch? no ? cho ?o?n v?n b?n th chng ta s? s? d?ng thu?c tnh font-faily:
p {
font-family: Arial, Tahoma, Verdana, sans-serif;
}
Thng th??ng b?n c?n ph?i khai bo h? c?a font ? cu?i (trong v d? trn th sans-serif l ch? t?i 1 h? font) ?? trong tr??ng h?p my c?a ng??i duy?t Web khng c cc font nh? mnh ? ??t th n s? l?y font m?c ??nh c?a h? font trn.

02. ??t ?o?n v?n b?n s? d?ng font nhn caption.

p.caption {
font: caption;
}

03. ??t kch th??c font cho ?o?n v?n b?n.

Khi chng ta mu?n nh?ng ?o?n v?n b?n ho?c tiu ?? c kch th??c c?a ch? khc nhau, chng ta c th? s? d?ng thu?c tnh font-size:
h1 {
font-size: 20px;
}

h3 {
font-size: 12px;
}

04. ??nh l?i kch th??c font b?ng thu?c tnh font-size-ajust:

p {
font-size-ajust: 0.60;
}

05. ??t ki?u font cho ?o?n v?n b?n.

Ch? ??m, ch? nghing,... ???c ??t v?i thu?c tnh font-style:
p {
font-style: italic; /* normal | italic | oblique */
}

06

Mu?n hi?n th? font ? d?ng small-caps ho?c ? d?ng normal th chng ta s? s? d?ng thu?c tnh font-variant. Thu?c tnh ny c hai gi tr? normal v small-caps
p {
font-variant: normal; /* normal | small-caps */
}

07. ??t ?? ??m nh?t c?a font.

Khi chng ta mu?n thay ??i ?? ??m nh?t c?a v?n b?n chng ta s? dng thu?c tnh font-weight:. Chng ta c th? ??t gi 3 lo?i gi tr? cho thu?c tnh ny 1. normal(bnh th??ng), 2. bold(??m), 3. 300(??t d?ng s?)
h3 {
font-weight: bold;
}

08. Khai bo cc thu?c tnh font ? d?ng shorthand.
p {
font: italic small-caps 900 12px arial;
}

???ng vi?n v cc thu?c tnh c?a ???ng vi?n

Cc thu?c tnh c?a ???ng vi?n (border) s? cho php ??t cc gi tr? ??c bi?t cho ???n vi?n nh? ki?u ???ng vi?n, kch th??c, mu s?c. Thu?c tnh ny s? ???c p d?ng cho cc th? HTML nh? <div>, <li>, <table>,...

Trong thu?c tnh ???ng vi?n (border) chng ta c 3 gi tr? c? b?n ? l:

1. border-color:
2. border-width:
3. border-style:

01. Thu?c tnh mu c?a ???ng vi?n

?? ??t mu cho ???ng vi?n chng ta s? ??t thng s? mu cho thu?c tnh border-color:
div.color {
border-color: #CC0000;
}

02. ??t chi?u r?ng cho ???ng vi?n (border)

N?u mu?n ??t chi?u r?ng c?a ???ng vi?n chng ta s? ??t gi tr? cho thu?c tnh border-width:
div.borerwidth {
border-width: 2px;
}
STT Gi tr?
1. thin
2. medium
3. thick
4. length

03. Ch?n ki?u c?a ???ng vi?n

B?n c th? s? d?ng thu?c tnh border-style ?? ??t ki?u cho ???ng vi?n. Chng ta c th? gn cho thu?c tnh ny 9 gi tr? khc nhau t??ng ?ng v?i 9 ki?u ???ng vi?n khc nhau.

div.borderstyle {
border-style: solid;
}
STT border-style
1 none
2 hidden
3 dotted
4 dashed
5 solid
6 double
7 groove
8 ridge
9 inset
10 outset

V?i 4 pha c?a ??i t??ng ta c 4 thu?c tnh border t??ng ?ng:

1. border-top:
2. border-right:
3. border-bottom:
4. border-left:

?ng v?i ???ng vi?n c?a m?i pha chng ta ??u c 3 gi tr? (color, width, style)

STT Pha Thu?c tnh
1 top border-top-color:
border-top-width:
border-top-style:
2 right border-right-color:
border-right-width:
border-right-style:
3 bottom border-bottom-color:
border-bottom-width:
border-bottom-style:
4 left border-left-color:
border-left-width:
border-left-style:
Chng ta c th? dng ph??ng php vi?t m gi?n l??c (shorthand) ?? vi?t cc thu?c tnh c?a ???ng vi?n g?n h?n. Gi? s? chng ta ??t thu?c tnh border c?a th? <div> v?i ?? r?ng b?ng 1, ki?u solid v mu l #CC0000
div.border {
border: 1px solid #CC0000;
}

Thu?c tnh ???ng bao ngoi (Outline)

Thu?c tnh Outline s? v? m?t ???ng bao ngoi ton b? m?t ph?n t? HTML, ??i v?i ph?n t? c ???ng vi?n (border) th ???ng bao ny s? bao tr?n ???ng vi?n c?a ph?n t? ?. C?ng t??ng t? nh? ???ng vi?n b?n c th? ??t cho n cc thu?c tnh v? mu s?c, ?? l?n v ki?u.
C m?t ?i?u c?n ch l cc thu?c tnh c?a ???ng bao ny c th? khng ???c h? tr? trn IE

01. ??t thu?c mu cho ???ng bao

N?u mu?n ??t mu cho ???ng bao chng ta c th? s? d?ng thu?c tnh outline-color:
p {
outline-color: #CC0000;
}

02. ??t ?? r?ng cho ???ng bao.

T??ng t? nh? ???ng vi?n, ?? ??t ?? r?ng cho ???ng bao chng ta ??t gi tr? ?? l?n cho thu?c tnh outline-width:
p {
outline-width: 2px;
}

03. Ch?n ki?u ???ng bao

?? ch?n ki?u cho ???ng bao chng ta s? ??t l?n l??t cc gi tr? cho thu?c tnh outline-style:
p {
outline-style: dotted;
}
STT outline-style
1 none
2 hidden
3 dotted
4 dashed
5 solid
6 double
7 groove
8 ridge
9 inset
10 outset

?? cho g?n chng ta c?ng c th? vi?t cc gi tr? c?a thu?c tnh Outline d??i d?ng shorthand nh? sau:
div.outline {
outline: 1px solid #000;
}

Cc thu?c tnh c?a margin

Thu?c tnh margin s? ??nh ngh?a kho?ng tr?ng bao quanh m?t ph?n t? HTML. N c th? dng gi tr? m ?? l?ng n?i dung vo v?i nhau. T??ng ?ng v?i 4 pha c?a m?t ph?n t? chng ta c 4 thu?c tnh t??ng ?ng. M?t khc ?? vi?t cho g?n chng ta c?ng c th? dng cch vi?t gi?n l??c ?? ??nh ngh?a cc gi tr? cho thu?c tnh margin.

??i v?i cc trnh duy?t Netcape v IE th gi tr? m?c ??nh c?a thu?c tnh margin l 8px. Nh?ng Opera th khng h? tr? nh? v?y. ?? cho th?ng nh?t chng ta c th? ??t margin m?c ??nh cho ton b? cc ph?n t?.
Cc gi tr? m thu?c tnh margin c th? nh?n ???c ? l: auto, length, %. Chng ta ??t gi tr? no l ty thch c?ng v?i vi?c t??ng ?ng t? l? v?i cc ph?n t? khc.
T??ng ?ng v?i 4 pha ta c 4 thu?c tnh:

1. margin-top:
2. margin-right:
3. margin-bottom:
4. margin-left:

?? cho g?n chng ta c?ng c th? vi?t thu?c tnh margin d??i d?ng shorthand
div.margin {
margin: 10px 4px 5px 9px; /* top | right | bottom | left*/
}

CSS padding

CSS padding s? ??nh ngh?a kho?ng tr?ng gi?a mp c?a cc ph?n t? t?i cc ph?n t? con ho?c n?i dung bn trong. Chng ta khng th? gn gi tr? m cho thu?c tnh ny. C?ng gi?ng nh? margin thu?c tnh padding c?ng t??ng ?ng v?i 4 pha c?a ph?n t?.
T??ng ?ng v?i 4 pha c?a ph?n t? chng ta c 4 thu?c tnh padding t??ng ?ng ? l:

1. padding-top:
2. padding-right:
3. padding-bottom:
4. padding-left:

Cc gi tr? c th? gn cho cc thu?c tnh ny l : % ho?c length
?? vi?t cho g?n chng ta c?ng c th? vi?t thu?c tnh padding d??i d?ng shorthand.
div.padding {
padding: 5px 3px 2px 8px;



Login Form



H? Tr? Tr?c Tuy?n


Hotline: 0906.800.529

Th?ng K Truy C?p

mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
mod_vvisit_counterHm Nay116
mod_vvisit_counterThng Ny505
mod_vvisit_counterT?t C?234231

Bnh Ch?n

B?n Hay S?a My Tnh ? ?u