Tutorial CSS 1 Uvod

Selektor služi za definisanje elemenata. Class selektor omogućava da istom elementu pridodate više stilova, za razliku od ID. Kraći primer Deo CSS koda:

p.centar {
text-align: center;
}
p.desno {
text-align: right;
}
Deo html koda:
<p class="centar">centriran paragraf</p>
<p class="desno">poravnat u desno</p>

Rezultat svega je centriran i poravnat uz desnu ivicu paragraf tekst.....sam align se može izvesti i pomoću html koda
<p align="center"> ili <p align="right"> tako da ovo nema potrebe da se koristi. Kada se uzme u obir i razlike u nasleđjivanju onda je jasno da je razlika izmedju class i id svedena na minimum. Sada ćemo definisati clasu naslov i id naslov. Klasa se definiše tako sto se stavi prvo tačka pa naziv, a id tako što se stavi prvo taraba (povisilica #) pa naziv.

Pored starog koda sada imamo .naslov i #naslov i u body delu paragraf sa određenom klasom i id. Uzeo sam identičan primer i jasno se vidi da je naslov određene boje, fonta, veličine i centrira. Dakle bilo bi dovoljno da definišem samo klasu ili id i da to koristim za svaki naslov na stranici ili bar naslove iste važnosti (u slučaju da sajt ima više vrsta naslova). Klasa i ID se često kombinuju sa td tagom (kada se pravi tabela) pa se onda u td tag ubaci željena klasa ili ID. <td class="naziv klase"> ili <td id="naziv id">. Dakle neki tekst unutar td taga će izgledati bez obzira na browser isto kako je definisana klasa... veličina, boja, font, boja pozadine, magine i tako dalje.

Ukoli sajt nema nikakvu tabelu (nema onda ni td tagova) i ne želimo da se mlatimo oko nasleđivanja definisanog paragrafa i da pisemo klase za paragraf prava stvar je div tag. Div tag poćinje i završava se <div></div> i unutar njega se piše tekst ubacuju slike i ostalo. U div tag se ubacuje class ili id (po želji). Ako nam je za td tag potrebna cela tabela, a mi je nemamo i nije nam potrebna ubacivanje napravljene klase se izvršava upravo u div tagu.
Ceo kod:

Kopiranje: kombinacija tastera CRTL+C

Klasa obojena sadrži boju pozadine (background-color: #000000;) širinu (width: 150px;) boju fonta (color: #FFFFFF;) veličinu fonta (font-size: 14px;) i novinu pomeraj sa leve strane od 5 px (padding-left: 5px;) 2px liniju crvene boje na vrhu (border-top: 2px solid #FF0000;) Ovo je samo primer, i može da sadrži pomeraj i od vrha padding-top, može i da ima crvenu liniju i sa desne strane border-right 2px solid #FF0000 i tako dalje.....

Linkovi:

U html link se zapisuje a tagom i to na sledeći način:
<a href="putanja do linka">naziv linka</a> Dakle ukoliko želimo da uredimo i definišemo igled linka moramo da definišemo a tag u CSS-u.
Ceo kod:

Kopiranje: kombinacija tastera CRTL+C

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ucenje CSS-a</title>
<style type="text/css">
body {
background-color: #cccccc;
color: yellow;
font-size: 26px;
}
p {
font-family: Tahoma;
color: #323232;
font-size: 14px;
}
.naslov {
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 18px;
color: #318256;
text-align: center;
}
#naslov {
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 18px;
color: #318256;
text-align: center;
}
.obojena {
background-color: #000000;
width: 150px;
color: #FFFFFF;
font-size: 14px;
padding-left: 5px;
border-top: 2px solid #FF0000;
}
a {
color: #FF0000;
padding-left: 15px;
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 12px;
text-decoration: none;
}
</style>
</head>
<body>
Neki tekst
<p>Ovo je paragraf, Tahoma font, heksadecimalna boja 323232 i veličine 14 piksela</p>
<p class="naslov">KLASA NASLOV</p>
<p id="naslov">ID NASLOV</p>
<div class="obojena">Evo klase u div tagu</div>
<a href="#">Neki link</a>
</body>
</html>

Interesantan kod u css-u za linkove je a {…… koji sadrži sledeće atribute. Boju (color: #FF0000;) Pomeraj od leve ivice za 15px (padding-left: 15px;) Familiju fontova (font-family: Tahoma, "Times New Roman", Times, serif;) Veličinu (font-size: 12px;) I novinu Dekoracija teksta (text-decoration: none;) koja upravo ukida onu podvučenu liniju od linka.
E sada bi želeli recimo da se nešto dogodi kada se pređe mišem preko tog linka.... Rešenje se nalazi u definisanju a:hover taga
Ceo html kod:

Kopiranje: kombinacija tastera CRTL+C

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ucenje CSS-a</title>
<style type="text/css">
body {
background-color: #cccccc;
color: yellow;
font-size: 26px;
}
p {
font-family: Tahoma;
color: #323232;
font-size: 14px;
}
.naslov {
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 18px;
color: #318256;
text-align: center;
}
#naslov {
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 18px;
color: #318256;
text-align: center;
}
.obojena {
background-color: #000000;
width: 150px;
color: #FFFFFF;
font-size: 14px;
padding-left: 5px;
border-top: 2px solid #FF0000;
}
a {
color: #FF0000;
padding-left: 15px;
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: #FF00FF;
padding-left: 15px;
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 18px;
text-decoration: none;
}
</style>
</head>
<body>
Neki tekst
<p>Ovo je paragraf, Tahoma font, heksadecimalna boja 323232 i veličine 14 piksela</p>
<p class="naslov">KLASA NASLOV</p>
<p id="naslov">ID NASLOV</p>
<div class="obojena">Evo klase u div tagu</div>
<a href="#">Neki link</a>
</body>
</html>

a:hover sadrži sledeće atribute.
Manje više odradi se copy paste i promeni se samo onaj deo koda koji želite da izmenite. Nije ni malo interesantno menjati sve živo u a:hover delu... pogotovo ne bi trebalo dirati font. U ovom slučaju promenjena je boja (preporučljivo) i veličina (nije preporučljivo) jer pomera i ostatak stranice kada se link povećava i smanjuje tokom prelaska mišem.
Za definisanje već posećenog linka možete definisati u css-u a:visited{} a ako želite i efekat hover onda treba da uradite i a:visited:hover {} kako bi bilo razlike između posećenog i prelaska.

Ako smo ovo savladali mogli bi da krenemo u izradu navigacije.
Tutorial CSS 3 Izrada navigacije

Vazno !
Ovim putem se izvinjavam za greške koje su možda slučajno promakle kao i za stopostotnu ispravnost teksta.
Pedja

Nazad na početak

Tutorial CSS Class i ID i link

Vazno !
Ovim putem se izvinjavam za greške koje su možda slučajno promakle kao i za stopostotnu ispravnost teksta.
Pedja

VIŠER Vesti

Tutorial CSS Class i ID i link

Vazno ! Ovim putem se izvinjavam za greške koje su možda slučajno promakle kao i za stopostotnu ispravnost teksta.Pedja

VIŠER Vesti

Vazno !
Ovim putem se izvinjavam za greške koje su možda slučajno promakle kao i za stopostotnu ispravnost teksta.
Pedja