Tiparet e CSS
Style sheets
Style sheets janë një mekanizëm për te ndare formatimin e paraqitjes se përmbajtjes. Kjo realizohet duke i bashkangjitur atribute prezantimi ne çdo element HTML tag ose nënklase te saje.
Për shembull nëse ne duam qe te gjithë paragrafët te kenë një background me ngjyre te kuqe dhe tekst me ngjyre te verdhe, do te përdornim kodin e mëposhtëm:
<STYLE TYPE="text/css"> P {color: red; background:yellow;} </STYLE>
Nëse duam te percaktojme stilet qe do te perdoren ne nje faqe perdorim tag-un STYLE , ndersa tag-u LINK sherben per te treguar skedarin e jashten i cili mban stilet qe do te perdorim ne ne faqe.
Tag-u STYLE duhet te vendoset ne koken e faqes.
Parametri TYPE perdoret per te treguar sintaksen qe do te perdorim per te percaktuar stilet, ne rasin tone ne do te perdorim text/css.
Tag-u LINK perdoret si me poshte:
<LINK REL="stylesheet" HREF="miweb.css" TYPE="text/css">
2.1.1. Formati i Style sheet
Sic pame edhe me larte formati i nje style sheets eshte si me poshte:
<element>{<format>}
Per shembull:
P {color: red; background:yellow;}
Sintaksa e CSS eshte case sensitive.
Kjo sintaks na lejon qe te percaktojm formatin qe duam te kemi ne paragrafet e website-it tone. Ne HTML 4.0 eshte shtuar nje atribut CLASS i cili na mundeson krjimin e klasave elementesh tek te cilat do te zbatohet stili.
Per shembull per te percaktuar nje klas paragrafi te cilen e emertojm iformatuar do te shkruanim:
P. iformatuar {color: red; background:yellow;}
<P CLASS=" iformatuar ">Paragraf i formatuar.</P>
<P>Paragraf normal</P>
Ekziston edhe një metodë për caktimin e një stili te veçante paragrafëve të veçanta. Për ketë duhet te përcaktojmë stilin e elementeve te HTML me ane te CSS duke përdorur sintaksën e mëposhtme:
#paragraph1 {color: green; background:yellow;}
Këto identitete mund tja bashkëngjisim një elementi HTML duke perdorur atributin ID.
<p CLASS="destacado">Nje paragraf i theksuar</P>
<P>Paragraf normal</P>
<P CLASS="highlighted" ID="paragraph1">Paragraf i theksuar por duke perdorur atributin ID</P>
SPAN dhe DIV
Më parë, pamë se si të caktojmë stile elementeve të HTML (paragrafëve, etj), por ne ndonjëherë duam të caktojë stile në seksione të tekstit ose përmbajtje që
nuk janë pjesë e një blloku HTML.
Kjo realizohet me ane te tag-eve DIV dhe SPAN.
Nëse duam te etiketojmë një pjese te përmbajtjes ne mënyrë qe ti japim asaj stilin qe dëshirojmë, duhet qe ketë përmbajtje ta vendosim brenda një tag-u SPAN ose DIV. Ne ndryshim nga SPAN, DIV vendos një ndërprerje rreshti ne fillim dhe ne fund te çdo seksioni duke krijuar ne ketë mënyrë blloqe me tekst pa pasur nevoja qe ti vendosim ato ne tag-e te tjera si paragrafi.
Tipare te tjera te CSS
Disa nga veçorit qe sherbejn për te percaktuar pamjen e tekstit jane:
• font-family: lloje shkrimi sic mund te jene: serif, cursive, sans-serif, fantasy apo monospace. Ne mund ti caktojmë tekstit nje lloj shkrimi ose disa duke i ndare ato me presje nga njera tjetra. Duhet pasur kujdes qe fontet qe ne do te percaktojm te jene te instaluara ne kompjuter.
• font-size:madhesia e fontit. xx-small, x-small, small, medium, large, x-large, xx-large si dhe vlera numerike.
• font-style: stili i fontit. Mund te perdoret normal, italic, italic small
caps, oblique, oblique small caps dhe small caps.
Veçoritë e mëposhtme përdoren ne blloqet e teksteve sic mund te jene paragrafët.
•margin-top, margin-right, margin-bottom, margin-left: distanca minimale ndermjet një blloku dhe elementit ngjitur.
•padding-top, padding-right, padding-bottom, padding-left: mbush
në hapësirën në mes të kufirit dhe përmbajtjen e bllokut.
• border-top-width, border-right-width, border-bottom-width, border-left-width: gjerësia e konturit te bllokut ne vlera numerike.
• border-style: stili i konturit te bllokut. none, solid ose 3D.
• border-color:ngjyra e konturit.
Trashegimia
Eshte nje nder cilësitë me te fuqishme te CSS dhe ka domethënien se njehere qe kemi specifikuar nje property per nje element kjo property do te trasegohet dhe tek elementet te cilet jane femije te elementit te melartme qe ka te specifikuar cilesine ne fjale. Per shembull nqs kemi specifikuar propertine font-family per elementin <body> ath kete property do ta trashegojne te gjithe elementet qe permbahen tek body I faqes. Kjo cilesi eshte mjaft lehtesuese per kodin tuaj meqenese nuk ju duhet ta ripercaktoni ne cdo element te faqes porse vetem ne nje element “prind”.
Por duhet te beni kujdes! Nese nje property cilësohet ne mënyrë te veçante per nje element atëherë atributi i trashëguar prej elementit prind do te bëhen overwrite me propertine e cilesuar ne nivel te atij elementi. Ne shembullin tone te pare pame se tipi I fontit I percaktuar ne nivel elementi <body> ishte arial. Porse kishte disa qeliza te vecanta te tabeles qe perdornin tipin e fontit Courrier. Keto qeliza ishin qelizat te cilat kishin te shoqeruar rregullat e class-es code. Pra edhe pse keto qeliza duke qene “femije” te elementit <body> trashegojne cilesine e tipit te fontit Arial prej “prindit” te tyre; arrijne te mbishkruajme kete cilesi me cilesine e Courrier e cila percaktohet ne nivel elementi tek classa code. Kjo ndodh sepse selektuese duke qene specifikisht I percaktuar per td.class eshte ne gjendje te paraprij atributet e vendosura ne nivel me te larte hierarkie.
Ushtrime
Shkruani CV tuaj duke perdorur elementet header, list, paragraph si edhe elementet te tjere. Aplikoni ne dokument Inline CSS dhe Embedded CSS.
Krijoni nje web form me te pakten 4 textbox dhe labels, 1 bashkesi me 4 option button, nje bashkesi me 4 check box, 1 combo box, 1 submit buton dhe nje buton reset. Perdorni elementet paragraph dhe header. Aplikoni ne dokument Inline CSS dhe External CSS.