Kur shfletuesi lexon fletën e stilit, ai e formaton dokumentin në përputhje me rrethanat.
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ë ndodhet në pjesën e kokës:
Mos lini hapësira midis vlerës së pronës dhe njësive të saj! "margin-left: 20px" (në vend të "margin-left: 20px") do të funksionojë në IE (shfletuesi Internet Explorer), por jo në Shfletuesit 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ë pjesën e kokës faqet HTML duke përdorur etiketën (të mos ngatërrohet me atributin me të njëjtin emër) në të cilin bëhet 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 mundeni çmime të favorshme blej elefantët më të mirë !!
Punësoni një elefant
Vetëm këtu mund të marrësh me qira ndonjë elefant!
Siç mund ta shihni nga shembulli, ne arritëm saktësisht të njëjtin rezultat si në rastin e parë, vetëm tani nuk përshkruajmë një stil për secilin element veç e veç, por e vendosim atë në "kokën" e dokumentit, duke treguar kështu që të gjithë titujt ,
- do të jetë blu dhe paragrafët
- e kuqe. Imagjinoni se si do ta bënim më të lehtë punën tonë nëse do të kishte njëqind paragrafë të tillë dhe pesëmbëdhjetë tituj në një faqe, dhe vetë dokumenti do të fillonte të peshonte më pak për shkak të "heqjes" së të gjitha përshkrimeve të stilit të përsëritur për secilin 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 pikëpresje.
CSS në një skedar të jashtëm të veçantë.
Sa kohë është e shkurtër, kemi ardhur në avantazhin kryesor, për mendimin tim, të CSS, përkatësisht aftësinë për të transferuar të gjitha informacionet që lidhen 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: rri pezull (ngjyra: # ff0000; pesha e shkronjave: bold; dekorimi i tekstit: 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)
Ajo që kemi shkruar kaq të çuditshme, do të përpiqem t'ju tregoj në detaje në kapitujt pasues të këtij tutoriali.
Gjithçka! Skedari i përshkrimit të stilit u krijua! Tani ka mbetur vetëm pak, domethënë të detyrohet faqet e nevojshme e faqes sonë për të nxjerrë informacion nga ky skedar.
Kjo bëhet duke përdorur etiketën (lidhje). Etiketë shumë qëllime dhe shërben për të "lidhur" një dokument HTML me skedarë të jashtëm shtesë 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 në vetvete ekskluzivisht informacion shërbimi ndodhet në kokën e dokumentit HTML ndërmjet etiketave dhe nuk shfaqet në ekran nga shfletuesit.
Etiketë ka atribute:
href- Rruga për në skedar.rel- Përcakton marrëdhëniet ndërmjet dokument aktual dhe skedari që referohet.
- Ikona e shkurtores - Përcakton se çfarë është skedari i përfshirë.
- fletë stili- Përcakton që skedari i përfshirë përmban një fletë stili.
- aplikacioni / rss + xml - Skedari në format XML për të përshkruar burimin e lajmeve.
Meqenëse lidhemi si skedar i jashtëm fletë stili kaskadë, atëherë lidhja jonë e shërbimit duket si kjo:
E përsëris, për të larguar sigurisht keqkuptimet e mundshme. atribut rel caktoni vlerë fletë stili meqenëse ne përfshijmë fletën e stilit të kaskadës 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 këtë skedar tekst dhe përmban një përshkrim stili lloji = "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: rri pezull (ngjyra: # ff0000; pesha e shkronjave: bold; dekorimi i tekstit: 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)
Skedari 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 Elephant.html
Menu:
Gjithçka rreth elefantëve.
Blej një elefant.
Merr me qira një elefant.
Blej një elefant
Ju mund të blini elefantët më të mirë nga ne me çmime konkuruese !!
Skedari Elephant1.html
Menu:
Gjithçka rreth elefantëve.
Blej një elefant.
Merr me qira një elefant.
Punësoni një elefant
Vetëm këtu mund të marrësh me qira ndonjë elefant!
Në shembullin e mësipërm, "faqja e elefantit", në ky moment, ka tre faqe, secila prej të cilave shoqërohet me një single css e jashtme skedar - mystyle.css. Kështu e “shkarkuam” ndjeshëm dhe e bëmë “mobile” dizajnin e të gjithë faqes. Imagjinoni sa b kilobajt fituam nëse do të kishte njëqind faqe të plota në këtë faqe!? Dhe gjithashtu, sa kohë do të kursenit 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ërdorni 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 një etiketë …