ࡱ > Y [ X [ bjbj 4: ΐ ΐ < D L .' L & & & & & & & 2) + : & - & & u& u& u& 8 & u& & u& u& u& u1z % @ u& & & 0 .' u& , /& F , u& , u& 0 u& & & u& .' , ( : 3-mavzu. PSD selektorlari va ulardan foydalanish. Silka selektorlari.
SS natijalarini brouzerda korish mumkin boladi, yana bir narsa, CSSga tegishli barcha darslar misollari Firefox Mozilla brouzeri orqali tekshiriladi, agar sizda boshqa brouzer bolsa, misol natijalari sal farq qilishi mumkin.
CSS stillar quyidagicha yoziladi:
H1{color: blue; font-size:14 px}
1.Selektor nomi yozilgan stilni qaysi tegda foydalanish(misoldaH1).
2.Qavs stillar boshlanganini bildiradi.
3.Stil xususiyati( !2>9AB2>) q a y s i s t i l x u s u s i y a t i d a n f o y d a l a n i s h n i o r n a t i s h ( m i s o l d a c o l o r , f o n t - s i z e ) .
4 . Q i y m a t t a n l a n g a n s t i l x u s u s i y a t q i y m a t i ( m i s o l d a b l u e , 1 4 p x ) .
A g a r b i r n e c h a s t i l x u s u s i y a t l a r i d a n f o y d a l a n i l a d i g a n b o l s a k , u l a r q o s h t i r n o q ( ; ) o r q a l i a j r a t i l a d i , oxirida qoshtirnoq qoyish shart emas. Stil xususiyatlari yigindisi shaklli qavs ichiga olinishi shart({ }) va har bir stil xususiyatidan song, uning qiymatini berishdan oldin ikki nuqta(:) qoyilishi kerak.
Sintaksisi bilan tanishib chiqdik, endi HTML kodga ulashni korsatib otaman. Bir necha xil usulda ulash mumkin:
1.CSS stillarini alohida faylga yozib, bu faylni HTML kodida chaqirib ishlatish mumkin. Misol uchun, style.css nomli fayl yaratib ichiga quyidagi stil xususiyat va qiymatlarini kiritamiz.
1h1{color:blue;font-size:14px}Undan song, index.html fayl yaratib, bu faylni yuqorida yaratgan style.css nomli fayl bilan bitta papkaga joylashtiramiz, song bu faylga quyidagi HTML teglarni kiritamiz(HYPERLINK "http://afsus.uz/"HTML teglar bilan tanishish).
1
2
3
4
5
6
7
8
9
CSS bilan ishlash
Hello World CSS!
HTML kodni ishga tushiramiz va quyidagi natijani olamiz,
HYPERLINK "http://afsus.uz/maqola/CSS/style/46_1.gif"
Korib turganingizdek Hello World CSS! yozuvi, style.css faylida korsatgan stilimizni oldi, yani kok rang va 14 piksel olcham.
2.HTML hujjat ichida, stil xususiyatlarini aniqlashtirib qoyish mumkin.
1
2
3
4
5
6
7
8
9
10
11
CSS bilan ishlash
h1{color:blue;font-size:14px}
Hello World CSS!
Natija, yuqoridagi bilan bir xil, bunda bitta tegga bitta stil berildi, agar ozgarishlar qilinmasa, shu teg qayerda ishlatilsa, hamma yerda shu stil dan foydalaniladi.
3.Identifikator orqali boglash. Ozgarmas nomga ega bitta stillar xususiyati yoziladi va u faqat bitta element uchun ishlatiladi. Ishlatishda ID kalit sozidan foydalaniladi, identifikator esa # belgisi bilan elon qilinadi.
1
2
3
4
5
6
7
8
9
10
11
CSS bilan ishlash
#akm{color:blue;font-size:14px}
Hello World CSS!
4.Klass orqali boglash. Bitta klass ichida bir necha stil xususiyatlari aniqlashtirib olinadi, song, class kalit sozi orqali chaqirilib foydalaniladi, nuqta(.) orqali elon qilinadi. Identifikatordan farqli ravishda, bir yoki bir necha element orqali ishlatish mumkin.
1
2
3
4
5
6
7
8
9
10
11
12
13
CSS bilan ishlash
.akm{ color:red;font-size:14px}
Hello World CSS!
Hello World CSS!
Hello World CSS!
HYPERLINK "http://afsus.uz/maqola/CSS/style/46_2.gif"
5.HTML kodi ichida(bodytegi orasida) boglanish, istalgan HTML kodi ichida, tegning style attributi orqali stil yaratish mumkin, bu stil faqat shu elementga xos bolib, boshqa element uchun ishlatib bolmaydi.
1
2
3
4
5
6
7
8
9
10
11
CSS bilan ishlash
.akm{ color:red;font-size:14px}
Hello World CSS!
Natija quyidagicha boladi
HYPERLINK "http://afsus.uz/maqola/CSS/style/46_3.gif"
Boglanishni, qoyilgan masala asosida, yuqoridagi biror turidan foydalanib amalga oshirishingiz mumkin boladi.
F G , - O p r s
§ttgZgtgZtgZgtgZQZgtgZtg hPf hZ 0J hPf hZ 0J mH sH hPf hZ 0J mH sH hPf hZ mH sH $hPf hZ CJ OJ QJ aJ mH sH (hPf hZ 0J CJ OJ QJ aJ mH sH 5hPf hZ CJ OJ QJ aJ fH mH q
sH 0hPf hZ B*CJ OJ QJ \aJ mH ph sH 'hPf hZ 5CJ OJ QJ aJ mH sH hPf hZ 5CJ aJ mH sH F G - O p
6 E
$ $S$If `Sa$gd[ $S \$ `Sa$gdZ $S`Sa$gdZ $`a$gdZ $
h a$gdZ
" $ & 0 E
G
H
# $ % 3 = j s $ * + 1 2 R S X Y i j ̷葙̷oo (hPf hZ 0J CJ OJ QJ aJ mH sH hPf hZ 0J mH sH j hZ UhiY hZ mH sH $hPf hZ CJ OJ QJ aJ mH sH (hPf hZ 0J CJ OJ QJ aJ mH sH hPf hZ CJ OJ QJ aJ hPf hZ 0J mH sH hPf hZ mH sH hPf hZ 0J mH sH +$ % " $ + 2 S $S$If `Sa$gd[ $S \$ `Sa$gdZ U kd $$If 0 x B B
t 6 3 4 B a yt[ j y z 8 9 : ; S ò~m j h hZ UmH nH u hZ j hZ U hiY hZ hPf hZ mH sH hPf hZ hPf hZ CJ OJ QJ aJ hPf hZ 0J CJ OJ QJ aJ $hPf hZ CJ OJ QJ aJ mH sH (hPf hZ 0J CJ OJ QJ aJ mH sH (hPf hZ 0J CJ OJ QJ aJ mH sH ' <
$S \$ `Sa$gdZ U kdn $$If 0 x B B
t 6 3 4 B a yt[ $S$If `Sa$gd[ S c n w
% + , 2 3 S T Z [ k l v x y < = ðððÛðððððð؊}pe}e} hPf hZ mH sH hPf hZ 0J mH sH hPf hZ 0J mH sH hPf hZ 0J CJ OJ QJ aJ (hPf hZ 0J CJ OJ QJ aJ mH sH $hPf hZ CJ OJ QJ aJ mH sH (hPf hZ 0J CJ OJ QJ aJ mH sH hPf hZ CJ OJ QJ aJ hPf hZ 0J hPf hZ hPf hZ 0J ' " % , 3 T l U kd
$$If 0 B B
t 6 3 4 B a yt[ $S$If `Sa$gd[ v ] _ a c e g i k m o r u | ' $S$If `Sa$gd[ $S \$ `Sa$gdZ = ] u { | & ' ( * + ; Y _ ` f g ѾѾѾѩѾѾѾѾѾѩѾ摈ѾѾѾѩѾѾѾhPf hZ 0J hPf hZ 0J hPf hZ hPf hZ 0J CJ OJ QJ aJ (hPf hZ 0J CJ OJ QJ aJ mH sH $hPf hZ CJ OJ QJ aJ mH sH (hPf hZ 0J CJ OJ QJ aJ mH sH hPf hZ CJ OJ QJ aJ hPf hZ mH sH 2' ( ; = ? A C E G I K M P S V Y ` $S$If `Sa$gd[ $S \$ `Sa$gdZ U kdn
$$If 0 B B
t 6 3 4 B a yt[ ` g > F N O a c $S \$ `Sa$gdZ U kd
$$If 0 B B
t 6 3 4 B a yt[ $S$If `Sa$gd[ = > E F M N O P a y زvmvmv hPf hZ 0J hPf hZ 0J jJ h hZ UmH nH u hZ j4 hZ U hPf hZ hPf hZ CJ OJ QJ aJ hPf hZ 0J CJ OJ QJ aJ (hPf hZ 0J CJ OJ QJ aJ mH sH $hPf hZ CJ OJ QJ aJ mH sH (hPf hZ 0J CJ OJ QJ aJ mH sH *c e g i k m o q s v y ; C K $S$If `Sa$gd[ : ; B C J K g h زt_T hZ hL mH sH )hPf hZ B*OJ QJ ^J mH phUUU sH hPf hZ mH sH jb h hZ UmH nH u hZ jx hZ U hPf hZ hPf hZ CJ OJ QJ aJ hPf hZ 0J CJ OJ QJ aJ (hPf hZ 0J CJ OJ QJ aJ mH sH $hPf hZ CJ OJ QJ aJ mH sH (hPf hZ 0J CJ OJ QJ aJ mH sH K L g $S \$ `Sa$gdZ U kd $$If 0 B B
t 6 3 4 B a yt[ 2 1h:pL . A!"R#n$n% l $$If !v h5 x 5Q #v x #vQ :V
t 6, 5 3 4
B yt[ l $$If !v h5 x 5 #v x #v :V
t 6, 5 3 4
B yt[ $ D d
V \O Ha A
? T Ø
4 6 _ 1 8AC=>: 2 0 7 h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 1 . g i f y K y K l h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 1 . g i f yX; H,]ą'c " b F :G%9
`# " n :G%9
`#PNG
IHDR C t2 gIFxXMP DataXMP?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> ~}|{zyxwvutsrqponmlkjihgfedcba`_^]\[ZYXWVUTSRQPONMLKJIHGFEDCBA@?>=<;:9876543210/.-,+*)('&%$#"!
T PLTEWkK\; bKGD H cmPPJCmp0712 Om {IDATX핽o0ρ[yYPxPj@FjA ZЂa ?>= Iڇ
TYSRF$k'Dhf4&V{d\h+d3&`0pö8mKbc@n}]5Y46TyNN&DsLvO⻋jq?WUcOa_kH؏y7x54jnD7:~GtSrt Ny]5Dϲaz+ Rc=܉w?jNc {.PAν "2!4/R'Xm|&9z|6!aߘס'q"^Uږ;z u6$Jc>vWw)N0Z\mLCkUwTJz5>N2Ѭ5Vv5{ZSMo.{/5$(m37lq|&WȠ Z x~v?1629>9G ksX,ȰG˘%+PֹنN˹_ _цМ<\)RN X9ؒrz]y͆ɢ-iZUluT3P0x/sϬ]KOe
}PԉQ IENDB`l $$If !v h5 5 #v #v :V
t 6, 5 3 4
B yt[ l $$If !v h5 5
#v #v
:V
t 6, 5 3 4
B yt[ l $$If !v h5 5%#v #v%:V
t 6, 5 3 4
B yt[
D d I~
V Q # A
? T Ø
4 6 _ 2 8AC=>: 2 0 6 h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 2 . g i f y K y K l h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 2 . g i f yX; H,]ą'c " b S Rd3hg n S Rd3hgPNG
IHDR 9~R gIFxXMP DataXMP?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> ~}|{zyxwvutsrqponmlkjihgfedcba`_^]\[ZYXWVUTSRQPONMLKJIHGFEDCBA@?>=<;:9876543210/.-,+*)('&%$#"!
¡ PLTE
OOi.Y bKGD H cmPPJCmp0712 Om IDAThZM8My-Jh=[jr˔]u CE(ReAy *Ǡ>,a& s2^]Lv]NG>[+' *&D' /igBs+ ^U +1crg|Wn:&] V& cYA"<
Df@%19T~q]Tڤ-,. s
?'[U}<( T ɵwP-@o o.9\TB*HAE7\{TӦ ⺶j
rv˓ b?A+͕;q
ʵDVfe[q/a![9q[Xl3UػBuݷ$7\j@T]b,(.poFV:R}ás-@IpPZqjNOYf"$ (]`i-&ٍ@ \nG4v j^*>y 0 t[YvI70y[WXH<RJ
Yz- E +0p(Yp Uz W;$ t`PNoD HyG_0N:NP>~K~gj.xsH>\ߡj5zg~ d9fkzFx@+emR US ɛ_*pzP e}
5]|
NW |J_j*W{RØ"tjë 8
|P U5_U|㛨 |3yZ/kU4%gtCV ue6y9J~ϵk/@%C \+`:NW0A>(Z_~M}֞#*L_@3X r eZ)uٷ__n+uY#j j =@'r qMk1༎UVK⫄IW
W Pm+*I:9(p\kcRmuR^{ @FWCh:Br QP uHuлx {J{?yEXY
sl%~PKUmԯ cLjD+!-nCBA,3(V-+8+ouY.WJy+ts*xMp6d9 W Ѕ
wiPb5WOCZG+ՊuU{1T~V<\Cx`f :N:NA%ߖ#QȒ3jgB=#rvvDކ6B2,Gv{FS{ڎyFHeVeR
m-*:&̛kfCtT{{LC
;6UC9yU"p
4$ׇVJZG?7x2O`BP' >6>`> N IENDB`l $$If !v h5 5#v #v:V
t 6, 5 3 4
B yt[ 1 D d |
V 2 M A
? T Ø
4 6 _ 3 8AC=>: 2 0 5 h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 3 . g i f y K y K l h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 3 . g i f yX; H,]ą'c " b S
#@Z8k4 /
n '
#@Z8k4PNG
IHDR M Q gIFxXMP DataXMP?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> ~}|{zyxwvutsrqponmlkjihgfedcba`_^]\[ZYXWVUTSRQPONMLKJIHGFEDCBA@?>=<;:9876543210/.-,+*)('&%$#"!
Y PLTE # )ΣT
bKGD H cmPPJCmp0712 Om IDAThN8I
n_ p
f`(,Z=KiWJI>O{7r_
!Bίqŀ˷觜s+0j_: ^3O@sc\8<΅ ?kN|q>s2.p{ç)%:? D79q?gB1_ϧ-3FOabux',2!vf8UUN,8Cx1ƛ$r *+E P)crĔT.iup$ƑT-_@l
mH]1+b6?jw i$6W6|t5KH(N A:8!vgxh w~ʩѝ8O^'w\d~5w)3=;U@%^[yQ?8鳧S "Nok#;M
8u`>Rez#V_֤_@8g3;;Jѧ\fd=ټ CaIii8--q? wX{̷#8ij !qrA6 yhdNzlH1|isg߹ٳޗ4e>.u
DLB,ιN/cNgN Ɯ:rN\I)n<0gAƺ1,%1QiF @)EVpxOX3rn<=g8Vg8n ^o75dN$SqnW8
mϞrzpBΙ%|VxSS)pol6%꜓gSm. *п:Kkzj.ȜmX/w%
Nx,ᮾ/ɠkYО8IĊȟ b~h9%Ze*VGLʢ6 ;jxEOn !$<ϳQX(`#g.?BwxoCh1 _əfj%J90YAz8Ss\CʫVRgu2NإrRޮvi&0dD:Z[_w_qmνYٌi Fu퓭ED[E#4rYkqՌU /{5:+¹py, ¹py, ¹py, 眇rN/ѿ9s93=_89
Gc" IENDB` j 6 6 6 6 6 6 6 6 6 v v v v v v v v v 6 6 6 6 6 6 > 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 h H 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 2 0 @ P ` p 2 ( 0 @ P ` p 0 @ P ` p 0 @ P ` p 0 @ P ` p 0 @ P ` p 0 @ P ` p 8 X V ~ OJ PJ QJ _HmHnHsHtH R ` R Z 1KG=K9 ( CJ OJ PJ QJ ^J _HaJ mHsHtH B A` B
A=>2=>9 H@8DB 0170F0 X i@ X 0 1KG=0O B01;8F0 4
l 4 a . k .
0
5B A?8A:0 )
!5B:0 B01;8FK M :V 0 d V / V ) 0 !B8;L1 :V d OJ QJ p ^` p Z 0 1KG=K9 ( 251) , 1KG=K9 ( W e b ) d d [$\$ CJ OJ QJ aJ : U`!: Z 0 8?5@AAK;:0 >*B*ph , W`1, Z ` !B@>389 5\B oAB Z a p p l e - c o n v e r t e d - s p a c e < b`Q< Z 0 >4 H T M L CJ OJ QJ ^J aJ J bJ
Z 0
"5:AB 2K=>A:8 CJ OJ QJ ^J aJ X / qX Z 0 "5:AB 2K=>A:8 =0: CJ OJ PJ QJ ^J aJ tHPK ! [Content_Types].xmlj0Eжr(Iw},-j4 wP-t#bΙ{UTU^hd}㨫)*1P' ^W0)T9<l#$yi} ;~@(Hu* Dנz/0ǰ $ X3aZ,D0j~3߶b~i>3\`?/[G\!-Rk.sԻ..a濭? PK ! ֧ 6 _rels/.relsj0 }Q%v/C/} (h"O
= C?hv=Ʌ%[xp{۵_Pѣ<1H0ORBdJE4b$q_ 6LR7`0̞O,En7Lib/Se е PK ! ky theme/theme/themeManager.xml M
@}w7c(Ebˮ CAǠҟ7՛K
Y,
e.|,H ,lxɴIsQ}#Ր ֵ+!,^$j=GW)E+&
8 PK ! Ƶ theme/theme/theme1.xmlYnE#;8U
i-q N3'JH DA \8 R>CW]{'ސ{g?x݈]"$q+_,y>8{7 K
}xLވHe 2{Rܜaˋ? ? <ߟdžSr$L] .<İT̟72S"ѵ_JwL&BJ05kZVy Vy |xC OO|x>+< >@(:??/>5{yxFDdm 3^q5'=q6nib-$RB}}Y Gq=xK@;)^qbha 79g
.
pUʹ;bbmc[$c'a}5KKfH 5HL!ݦ&|mK{N6M6hq v|y 58+zH
* ~
HHy\K*t@G> {sA}"))y
sGfۡqǾ'w E1
[8>ܤ4Aбt~ls14_>,Ȭ7TT GqME=w -i>mo[oiBs zb P:j5if F
9Pɉ* k \ A
;!N`.{I SցD p3˅5 veU}AbvyA/g 氚 Z N+lR~aeԩj9&&CLgMʼn7a A0ƀHEA3~{q q1vƨl効9)>൜fN1N FIrdq8Y^:_73.|3 f%Jش?MOY s 3;} Rc0`d[ 鯠$ÿ
- έhǴ"P
6T{TUٴ+9E28Y*M Ot0O9Bݍqg7Ŕ9O)z?7#]u rBIHAאTpl>՟,Sp T4@~BA%}'0+{eRF&rĪ#uu\{BHuM6`pG}N+!'_oN콶3a3dXZzCyCUɪ嶂ZZZ۱f,fAg-@`g v6V?Dhf6t=M&ʺ6 ײ'݉#֚>d8s9xN=ڮ jAv11;u 2%M2oN1u o%տ PK !
ѐ ' theme/theme/_rels/themeManager.xml.relsM
0wooӺ&݈Э5
6?$Q
,.aic21h:qm@RN;d`o7gK(M&$R(.1r'JЊT8V"AȻHu}|$b{ P8g/ ]QAsم(#L[ PK- ! [Content_Types].xmlPK- ! ֧ 6 + _rels/.relsPK- ! ky theme/theme/themeManager.xmlPK- ! Ƶ theme/theme/theme1.xmlPK- !
ѐ ' theme/theme/_rels/themeManager.xml.relsPK ]
:
j S =
$ ' ` c K . 0 E
}
] XXXX 8 @ 0 (
B
S ?
$ % 0 2 7 8 D J V W ` a h i o p w y } ~ $ % + 1 8 9 D E M l n s { |
( ) 2 3 : Q W Z c d h i r s z {
# $ 1 2 < = D E I J P Q Y Z _ e g h k l o p t u ! " % & , - 2 3 9 B L M T U [ \ a c e f l r x y ! & 5 9 : A C E F L M U V ^ k p q u v { | 3 8 9 @ O R T ^ k n p t 1 2 8 9 G I N O T [ a d m o v w 4 9 : A \ _ & ( + , / 0 7 8 B D I J O P S T X Y \ ] j o | }
,
-
0
5
<
=
B
C
H
I
Q
! & ' - . 6 8 = > C D J K N O T U Y Z g h u v }
( ) / h m n u E
]
1 E
]
1 E
W o 1 ]
6u [ L Z ) `'
@( @
@ U n k n o w n G * T i m e s N e w R o m a n 5 S y m b o l 3. * A r i a l 5. * a T a h o m a 7. { @ C a l i b r i ] B a l t i c a T A D T i m e s N e w R o m a n ?= * C o u r i e r N e w A B C a m b r i a M a t h " 1 h \\ d
d
n 0 XE 2Q HP $P Z 2 ! x x U s e r U s e r Oh +'0 h
$ 0
< H P X ` User Normal User 1 Microsoft Office Word @ F# @ G1z@ k1z d
՜. +,D ՜. +,H h p
Reanimator Extreme Edition 8 @ _PID_HLINKS A * , * h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 3 . g i f , * h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 2 . g i f , * h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 1 . g i f N h t t p : / / a f s u s . u z / , 9 * h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 1 . g i f , * h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 2 . g i f , * h t t p : / / a f s u s . u z / m a q o l a / C S S / s t y l e / 4 6 _ 3 . g i f
! " # $ % & ' ( ) * + , - . / 0 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G I J K L M N O Q R S T U V W Z R o o t E n t r y F \u1z\ D a t a
% 1 T a b l e 1 , W o r d D o c u m e n t 4: S u m m a r y I n f o r m a t i o n ( H D o c u m e n t S u m m a r y I n f o r m a t i o n 8 P C o m p O b j y
F' Microsoft Office Word 97-2003
MSWordDoc Word.Document.8 9q