Kur një shfletues lexon një fletë stili, ai e formaton dokumentin sipas tij.
Tre mënyra për të futur CSS
Ka tre mënyra për të futur një fletë stili:
- Fletë e jashtme e stilit
- Fletë stili e brendshme
- Stili inline
Fletë e jashtme e stilit
Një fletë stili e jashtme është ideale kur stilet duhet të aplikohen në shumë faqe. Me një fletë stili të jashtëm, mund të ndryshoni pamjen e një faqeje interneti të tërë duke redaktuar një skedar të vetëm. Çdo faqe duhet të lidhet me fletën e stilit duke përdorur etiketën . Etiketë është në seksionin e kokës:
Mos lini hapësira midis vlerës së pronës dhe njësive të saj! "margin-left:20 px" (në vend të "margin-left:20px") do të funksionojë në IE (Internet Explorer), por jo në Firefox ose Opera.
Fleta e brendshme e stilit
Një fletë stili e brendshme përdoret kur një dokument individual ka një stil unik. Ju përcaktoni stilet e brendshme në seksionin kokë të një faqe HTML duke përdorur etiketën
Këtu do të ndodhë si më poshtë: për të gjithë elementët brenda etiketës
do të bëhet si më poshtë: ngjyra e tyre do të jetë e kuqe dhe mbushja e sipërme do të jetë 100 pikselë.
Mënyra e tretë për të vendosur stil css- kjo stilet e importuara. Ato janë të njëjta si zbatuar janë vendosur në kokën e dokumentit, por tashmë nga dosja. Këtu është një shembull:
Këtu, stilet nga skedari " my.css".
Dhe pamja e fundit Stilet CSS janë stilet nga skedari. Kjo metodë është më e zakonshme dhe konsiston në lidhjen e skedarit të stilit përmes etiketës në kokën e dokumentit. Për shembull, në këtë mënyrë:
Kjo metodë është shumë e ngjashme me metodën e mëparshme, por etiketa nuk përdoret këtu. (mos u ngatërroni me atributin me të njëjtin emër) në të cilin ndodh përshkrimi i elementeve që na duhen.
Hidhini një sy shembullit, do të ketë komente më poshtë.
Gjithçka rreth elefantëve
Në këtë faqe do të gjeni çdo informacion rreth elefantëve.
Blej një elefant
Këtu mund të blini elefantët më të mirë me çmime konkuruese!!
Merr me qira një elefant
Vetëm këtu mund të marrësh me qira ndonjë elefant!!
Siç mund ta shihni nga shembulli, ne kemi arritur saktësisht të njëjtin rezultat si në rastin e parë, vetëm tani nuk përshkruajmë një stil për secilin element individualisht, por e vendosim atë në "kokën" e dokumentit, duke treguar kështu që të gjitha titujt ,
- do të jetë blu dhe paragrafët
- e kuqe. Imagjinoni sa më lehtë do të ishte për ne të punonim nëse do të kishte njëqind paragrafë të tillë dhe rreth pesëmbëdhjetë tituj në faqe, dhe vetë dokumenti do të fillonte të peshonte më pak duke "hequr" të gjitha përshkrimet e stilit të përsëritur për çdo element individual.
Tani komentet e premtuara:
Etiketë ekziston një deklaratë e drejtpërdrejtë e stileve të disa elementeve HTML sipas sintaksës së mëposhtme:
Nëse në bllokun e deklarimit të stilit janë specifikuar disa veti elementesh, atëherë ato ndahen me një pikëpresje.
CSS në një skedar të jashtëm të veçantë.
Sa e gjatë dhe e shkurtër, kemi ardhur në avantazhin kryesor, për mendimin tim, të CSS, përkatësisht aftësinë për të nxjerrë të gjitha informacionet në lidhje me hartimin e faqes në një skedar të jashtëm të veçantë.
Pra, hapni bllokun e shënimeve (ose një redaktues tjetër) dhe shkruani tekstin e mëposhtëm në të:
Trupi (ngjyra e sfondit: #c5ffa0)
a (ngjyra:#000060; pesha e shkronjave: bold;)
a:hover (ngjyra:#ff0000; pesha e shkronjave: bold; teksti-dekorimi: asnjë)
h1 (ngjyra: #0000ff; madhësia e shkronjave: 18 px)
h2 (ngjyra: #ff00ff; madhësia e shkronjave: 16 px)
p (ngjyra: #600000; madhësia e shkronjave: 14 px)
Do të përpiqem t'ju tregoj në detaje për atë që është kaq e çuditshme që kemi shkruar në kapitujt pasues të këtij tutoriali.
Gjithçka! skedar me përshkrim stili u krijua! Tani mbetet vetëm pak, domethënë të detyrojmë faqet e nevojshme të faqes sonë të nxjerrin informacion nga ky skedar.
Kjo bëhet duke përdorur etiketën (lidhje). Etiketë me shumë qëllime dhe shërben për të "lidhur" një dokument HTML me skedarë shtesë të jashtëm për të siguruar funksionimin e duhur të tij. Etiketë është një lloj lidhjeje, e destinuar vetëm jo për përdoruesit, por për programet e shfletuesit (shfletuesit). Sepse mbart vetëm informacionin e shërbimit; ai ndodhet në kokën e dokumentit HTML midis etiketave dhe nuk shfaqet nga shfletuesit.
Etiketë ka atribute:
href- Rruga për në skedar.rel- Përcakton lidhjen midis dokumentit aktual dhe skedarit të referuar.
- Ikona e shkurtores - Përcakton që skedari i përfshirë është një .
- fletë stili- Përcakton që skedari i përfshirë përmban një fletë stili.
- aplikacion/rss+xml - Një skedar XML për përshkrimin e burimit të lajmeve.
Meqenëse ne përfshijmë një fletë stili kaskadë si një skedar të jashtëm, lidhja jonë e shërbimit merr formën e mëposhtme:
Do ta përsëris, për të larguar me siguri keqkuptimet e mundshme. atribut rel caktoni një vlerë fletë stili meqenëse ne përfshijmë një fletë stili kaskadë si një skedar të jashtëm, ne specifikojmë shtegun për në skedarin css (në këtë shembull, skedari quhet mystyle.css dhe shtrihet pranë dokumentit HTML në të cilin është shkruar kjo lidhje) ne gjithashtu tregojmë se ky skedar është tekst dhe përmban një përshkrim stili shkruani = "tekst/css"
Tani e futim këtë rresht në titujt e faqeve të faqes sonë dhe shijojmë rezultatin..
Skedari mystyle.css
trupi (ngjyra e sfondit: #c5ffa0)
a (ngjyra:#000060; pesha e shkronjave: bold;)
a:hover (ngjyra:#ff0000; pesha e shkronjave: bold; teksti-dekorimi: asnjë)
h1 (ngjyra: #0000ff; madhësia e shkronjave: 18 px)
h2 (ngjyra: #ff00ff; madhësia e shkronjave: 16 px)
p (ngjyra: #600000; madhësia e shkronjave: 14 px)
skedar index.html
Menu:
Gjithçka rreth elefantëve.
Blej një elefant.
Merr me qira një elefant.
Gjithçka rreth elefantëve
Në këtë faqe do të gjeni çdo informacion rreth elefantëve.
skedari elefant.html
Menu:
Gjithçka rreth elefantëve.
Blej një elefant.
Merr me qira një elefant.
Blej një elefant
Këtu mund të blini elefantët më të mirë me çmime konkuruese!!
skedari elefant1.html
Menu:
Gjithçka rreth elefantëve.
Blej një elefant.
Merr me qira një elefant.
Merr me qira një elefant
Vetëm këtu mund të marrësh me qira ndonjë elefant!!
Në shembullin e mësipërm, "faqja e elefantit" aktualisht ka tre faqe, secila e lidhur me një skedar të vetëm të jashtëm css, mystyle.css. Kështu e “shkarkuam” ndjeshëm dhe e bëmë “mobile” dizajnin e të gjithë faqes. Imagjinoni sa kilobajt do të fitonim nëse do të kishte njëqind faqe të plota në këtë faqe!? Gjithashtu, sa kohë do të kursente nëse do të kishim nevojë të ndryshonim diçka në dizajnin e tij!?
Në këtë kapitull, ne shikuam tre mënyra për të futur CSS në një dokument HTML. Cili është më mirë të përdoret?
- Përdor atributin stil për çdo element nëse ky element me stil të ndryshëm nga elementët e tjerë është i vetmi në të gjithë sitin.
- Përdorni etiketën
Shembull: Fleta e brendshme e stilit
- Provojeni vetë"
kokë
Teksti një
Teksti dy
Teksti tre
Fletë stili e brendshme kokë
Teksti një
Teksti dy
Teksti tre
Në këtë shembull, ne vendosëm ngjyrën e sfondit të elementit duke përdorur CSS.
: ngjyra e sfondit: e gjelbër e zbehtë, ngjyra dhe lloji i fontit për titujt: ngjyra: blu; font-familje:verdana, dhe madhësia e shkronjave, ngjyra dhe shtrirja e tekstit për paragrafët
: madhësia e shkronjave: 20 px; ngjyra: e kuqe; text-align: qendër.
Stili inline
Kur është e nevojshme të formatoni një element të vetëm të një faqeje HTML, deklarata e stilit mund të vendoset direkt brenda etiketës hapëse duke përdorur atributin e stilit tashmë të specializuar. Për shembull:
Paragraf
Stilet e tilla quhen të integruara (inline), ose të ngulitura. Rregullat e përcaktuara drejtpërdrejt brenda etiketës hapëse të një elementi anashkalojnë rregullat e përcaktuara në një skedar të jashtëm CSS, si dhe rregullat e përcaktuara në një element
kokë
Teksti një
Teksti dy
Teksti tre