Hapat e para per te mesuar CSS - Cascading Style Sheets

**Al Capone** · 26-02-2012, 01:17 PM

Cascading Style Sheets, ose shkurt CSS eshte nje file stili i cili i jep forma, dimesion, ngjyra kodit HTML. Jane disa versione te CSS, dhe me i fundit eshte ai CSS3 me me shume atribute, por kujdes, pasi CSS3 suportohet vetem nga shfletueset e fundit. Firefox, Chrome, Opera dhe disa atirubute ne IE9.

Hapi i Pare - Vendosja e Kodit CSS ne File HTML.

Jane disa menyra siç jane shpejguar me pare, si te vendosim CSS ne HTML

Do ju rekomandoja te perdornit formen:

Ne tag HEAD shkruani:

Kodi HTML:

<link href="stili.css" rel="stylesheet" type="text/css">

dhe te evitoni ate inline - 3

REZULTATI FINAL I SHEMULLIT:

Krijoni nje file prova.html dhe nje file stili.css me notepad ose shkarkoni filet e bashkangjitur.

CSS eshte aplikuar direkt mbi tag kryesore te filet HTML- ne kete menyre mund ta kuptoni me lehte, por eshte me mire ta perdorni ne klasa apo ID, qe do flasim nje mesim tjeter.

Kodi HTML i Shembullit:

Kodi HTML:

<html>
<head>
<title>Lirenti.com Mesime CSS</title>
<link href="stili.css" rel="stylesheet" type="text/css">
</head>
<body>

<h1>File Provë për Lirenti.com!</h1>
<p>Hello! Mësime CSS në Shqip. Shkarko këtë <a href="http://www.lirenti.com/threads/15481-Hapat-e-para-per-te-mesuar-CSS-Cascading-Style-Sheets">Tutorial Falas.</a></p> 

</body>
</html>

Shpjegimi i CSS:
çdo atribut CSS duhet te permbaj vleren mdis dypikave dhe pikepresjes atribut:vlera;

background-color:ngjyra; - specifikon ngjyren e sfondit. si ngjyre sfondi mund te vini dhe kodet hesadecimal te shoqeruar me nje hash#

Kodi HTML:

body{
    background-color:#e0f6ff;
}

Eshte aplikuar mbi body

color:njyra; -specifkon ngjyren te tekstit. si ngjyre teksti mund te vini kodet hesadecimal te shoqeruar me nje hash#
font-size:numri; - specifikon madhesine e teksti i shprehur ne em (njesi matese) ose px (per pixel)
text-shadow - vetem ne CSS3 . IE9 nuk e lexon. Mundeson nje hije mbi tekstin e aplikuar

Kodi HTML:

h1{
    color:#006f9c;
    font-size:3em;
    text-shadow:0 2px 1px #fff;
}

Aplikuar mbi H1

Kodi HTML:

p a{
    color:#9c2c00;
}

Ngjyra e likut

Kodi HTML:

p a:hover{
    color:#d55726;
}

Ngjyra e linkut kur kemi mousin siper.

Shkarkoni File e bashkangjitur ku permban te gjithe kodin me shembujt e mesiperm.

**TraHaNa** · 26-02-2012, 02:51 PM

nice Al Capone

pres tut te tjera

ps. je 1-sh po perkthen keto ne shqip (w3schools.com)

**Al Capone** · 26-02-2012, 07:36 PM

Kuptove gje te pakten?

**TraHaNa** · 26-02-2012, 07:47 PM

Al Capone mesuesja me thoshte " ore djale, kupton apo s'kupton? pse ngele duke kopjuar "

dhe kur u rrita me ngeli psikologjike

nejse, ne krijim mbase s'jame i mire por ne modifikime/kopjime te kepus

**Al Capone** · 29-02-2012, 01:24 AM

ID dhe Klasat ne CSS

Ne CSS, kujt i ka rene rasti ta perdori, do te kete vene re se ka dy lloje selektoresh, ID dhe Class! Ne hapat e para dhe mua me kane ngaterruar paksa, por do mundohem ta shpjegoj sa me qart!

ID ne CSS
Sipas W3C, e cili eshte nje grup qe merret me standartet WEB, ID ne CSS duhet perdor mbi elemente qe jane unik (unique identifier). Nje element unik eshte nje elemen qe nuk perseritet ne pjes te ndryshme te faqes. Si pershembull Logo e faqes eshte nje element unik.
ID mund ta dallojme nga shenja thurje # ne file CSS dhe nga sigla ID= ne kodin HTML.

Shembulli kodit ne HTML duke pedor ID:

Kodi HTML:

<div id="my_logo">
<h1>Emri faqes</h1>
<span id="top_pershkrimi">Pershkrimi Faqes</span>
</div>

Shembulli kodit ne CSS duke perdor ID:

Kodi HTML:

#my_logo{
color:#789;
text-decoration:none;
}
#my_logo h1{
font-size:2.5em;
}
#top_pershkrimi{
color:#123;
font-size:1.3em;}

Ne kete shembull kemi te bejme me nje tekst H1 qe perdoret si identifikues Unik e emrit te faqes, dhe nje tekst pershkrim, ku te dy keto ID kane disa parametra, si ngjyra dhe madhesia.

Class ne CSS

Ne rastin e class ne CSS, W3C keshillon qe ta perdorim mbi elemente qe perseriten. Pra nese kemi te bejme nje liste, me elemente qe do te shfaqen disa here ne faqe web, ,class eshte zgjidhja e duhur.
Ne fillim mund tju ngaterroje se çfare te perdorni class apo ID, por avash avash me shembuj mund tja merrni doren!
Nese keni elemente <ul>, <li /> <li /> <li /> duhet te perdorni class, nese keni disa paragrafe, <p /> <p /> <p /> perseri duhet te perdorni class.
Klasa dallohet pasi ne kodin html shkruajme class= kurse ne file css eshte e paraprire nga pika ( . ) emri i klases.

Shembulli kodit ne HTML duke pedor ID:

Kodi HTML:

<ul class="lista_al">
<li> Lista 1</li> 
<li> Lita 2</li> 
<li> Al Capone</li> 
</ul>

Shembulli kodit ne CSS duke perdor CLASS:

Kodi HTML:

.lista_al{
list-style-type: circle;
margin:0;
padding:3px;}
.lista_al a{
color:#456;
text-decoration:none;}

Ne kete rast, kemi nje liste me 3 elemente dhe ku kemi aplikuar disa atribute me vlera, si lloji listes duhet te kete nje rreth, 3px padding (qe do e shpjegoj ne guidat ne vazhdim) dhe nese lista eshte link, do te kete nje ngjyre #456 pa dekorim.

Nese keni ndonje pyetje apo diçka qe nuk e keni kuptuar, ju ftoj ta diskutojme se bashku!

Al Capone

Hapat e para per te mesuar CSS - Cascading Style Sheets

Mundësitë në Temë

Hapat e para per te mesuar CSS - Cascading Style Sheets

Tema të ngjashme

Kam mësuar...

Nje faqe per te mesuar Frengjisht

Hapat baze te stretching

Në dietën “Step” hahet më pak dhe numërohen hapat e ecur

SHBA, hidhen hapat për transplantimin e mitrës

Etiketat për këtë Temë