Blloko paraqitjen e html css. Blloko paraqitjen e CSS

Brenda kësaj etikete mund të vendosni etiketa të tjera HTML që do t'ju nevojiten për të krijuar përmbajtjen e faqes tuaj (lidhje, tekst, imazhe, etj.). Të gjithë këta elementë më pas do të stilohen duke përdorur fletët e stilit të kaskadës CSS.

Tani, duke përdorur një redaktues grafik (Photoshop për shembull), le të vizatojmë blloqet e faqes sonë të internetit:

Kodi HTML për këtë faqe do të duket si më poshtë. Ky është një shembull i përdorimit të etiketës div:

Siç mund ta shihni, çdo etiketë div dhamë një të caktuar përzgjedhës ID . Kjo do të thotë, ne i dhamë secilit bllok individual të faqes sonë emrin e vet. Kjo është e nevojshme në mënyrë që më vonë, kur blloqet e stilimit në skedarin CSS, të mund të dallojmë një bllok nga tjetri.

Ka dy lloje përzgjedhësve . ID- përdoret për blloqe unike, ato që nuk përsëriten askund tjetër në faqe. Ndërsa përzgjedhësi KLASA- përdoret për të caktuar blloqe përsëritëse.

Gjithashtu, ne mbyllëm të gjitha blloqet brenda një blloku " enë Kjo është bërë që më vonë të vendosim të gjithë faqen tonë ashtu siç duam.

Hapi 2 - Bashkangjitja e fletës së stilit CSS

Siç është përmendur tashmë, fleta e stilit CSS përcakton dizajnin e elementeve të një faqe interneti. Mund ta vendosni ose brenda dokumentit tuaj html ose të bashkëngjitni një skedar të jashtëm. Në këtë tutorial ne do të përdorim opsionin e fundit.

Nëse e keni hapur tashmë faqen tuaj të internetit në shfletuesin tuaj, nuk do të gjeni asgjë atje. Kjo për shkak se ju nuk i keni mbushur blloqet tuaja me ndonjë përmbajtje, as nuk u keni dhënë ndonjë formë apo ngjyrë. Ju mund të shtoni përmbajtje për blloqe midis etiketave përkatëse. Por ne do të vendosim formën, vendndodhjen, ngjyrën dhe manifestimet e tjera të jashtme të blloqeve duke përdorur një skedar CSS.

Por së pari ju duhet ta krijoni atë. Le ta quajmë style.css dhe ta vendosim në të njëjtën dosje me dokumentin html. Pas kësaj, në skedarin html, midis etiketave duhet të shtoni rreshtin e mëposhtëm:

Në këtë mënyrë ne i lidhim këto dy skedarë së bashku. Tani, kur shfaq një faqe në internet, shfletuesi do të përdorë skedarin e stilit të duhur.

Hapi 3 - vendosni stilin

Sintaksa CSS përbëhet nga një përzgjedhës, një pronë dhe një vlerë. Një përzgjedhës është një etiketë për të cilën dëshironi të përcaktoni pamjen duke i dhënë një sërë veçorish. Një pronë specifikohet duke përdorur atribute të ndryshme, të cilat nga ana tjetër mund të marrin vlera të ndryshme.

Për të shkruar përzgjedhës të ndryshëm nga një etiketë trupi, përdoren shenjat " # "ose" . ". dalin përpara emrit të përzgjedhësit. I pari përdoret për të treguar përzgjedhës ID, e dyta, respektivisht më përzgjedhës KLASA. Një përzgjedhës mund të ketë çdo numër të vetive. Të cilat janë të mbyllura me mbajtëse kaçurrelë " {} ".

#zgjedhës (

prona:vlera;

prona:vlera;

prona:vlera;

}

.zgjedhës(

prona:vlera;

prona:vlera;

prona:vlera;

}

Kemi përzgjedhësit e mëposhtëm:

trupi
enë
kokë
navigacion
menu
përmbajtjen
fundi i faqes

Karakteristikat e CSS dhe vlerat e mundshme:

Sfondi (sfond) mund të specifikohet nga një imazh ose një ngjyrë, ose të dyja. Në mënyrë që imazhi të shfaqet, duhet të specifikoni rrugën drejt tij. Nëse sfondit i jepet një ngjyrë, atëherë përdoret sistemi heksadecimal (#ffffff për të bardhën, etj.).

Vetia e ngjyrës përdoret për të përcaktuar ngjyrën e tekstit.

font-familje
- kjo veti përcakton familjen e shkronjave në të cilën do të shfaqet teksti. Si rregull, tre lloje të shkronjave përcaktohen menjëherë. Prandaj, nëse shfletuesi nuk mund të shfaqte të parin, ai ka shumë për të zgjedhur (Trebuchet MS, Arial, Times New Roman).

përmasa e germave- madhësia e tekstit, e vendosur në sisteme të ndryshme matjeje, këtu do të përdorim piksele.

diferencë- përcakton vendndodhjen e bllokut. Pika e fillimit mund të jetë ose dritarja e shfletuesit ose kufijtë e elementeve të tjerë të faqes së internetit. Meqenëse duam ta vendosim faqen tonë në mes të dritares së shfletuesit, do të shkruajmë vlerat e mëposhtme për këtë pronë: 0px auto 0px auto. Hyrja mund të duket më e thjeshtë se 0px automatike. Kur vendosni këto vlera, numërimi mbrapsht vazhdon në drejtim të akrepave të orës: lart - djathtas - poshtë - majtas. Meqenëse lart dhe poshtë dhe djathtas dhe majtas janë të njëjta, nuk ka nevojë t'i kopjoni ato.

gjerësia- gjerësia e bllokut.

lartësia- lartësia.

noton- një veti që na lejon të pozicionojmë elementët zgjedhës, kryesisht majtas ose djathtas.

Tani le të shtojmë kodin në skedarin tonë style.css (në fund të fundit, ju e keni krijuar tashmë, apo jo?):

trup (
sfond: #f3f2f3;
ngjyra: #000000;
font-familja: Trebuchet MS, Arial, Times New Roman;
madhësia e shkronjave: 12 px;
}

#kontejner (
sfond: #FFFFFF;
diferenca: 30px automatike;
gjerësia: 900 px;
lartësia: 1000 px;
}

#header (
sfond: #838283;
lartësia: 200 px;
gjerësia: 900 px;
}

#navigacion (
sfond: #a2a2a2;
gjerësia: 900 px;
lartësia: 20 px;
}

#menu (
sfond: #333333;
noton: majtas;
gjerësia: 200 px;
lartësia: 600 px;
}

#përmbajtje (
sfond: #d2d0d2;
noton: djathtas;
gjerësia: 700 px;
lartësia: 600 px;
}

#footer (
sfond: #838283;
lartësia: 180 px;
gjerësia: 900 px;
}

shënim

Në kohën e shkrimit, jo të gjithë shfletuesit e shfaqën saktë faqen e krijuar në internet. Për të eliminuar këtë pengesë, mund të përdorni një bllok shtesë, i cili duhet të vendoset menjëherë pas bllokut përmbajtjen.

Këtu është kodi i tij HTML: