CSS, si çdo gjuhë, ka sintaksën e vet. Nuk ka elemente, asnjë parametra, pa etiketa. Ka rregulla. Një rregull përbëhet nga një përzgjedhës dhe një bllok i deklarimit të stilit të mbyllur në kllapa kaçurrelë:

Vetë blloku i deklarimit të stilit përbëhet nga vetitë dhe vlerat e tyre, të ndara me pikëpresje:

Le ta provojmë në praktikë. Hapni faqen html dhe faqen css që keni krijuar në mësimin e fundit. Le t'i japim faqes tonë një sfond blu. Siç e mbani mend, etiketa është përgjegjëse për këtë , pastaj shkoni në faqen style.css dhe shkruani kodin e mëposhtëm:

trupi (sfondi: blu;)

Hapni faqen tuaj html në një shfletues dhe sigurohuni që sfondi i saj të jetë blu. Tani, le ta bëjmë tekstin në faqe të bardhë:

trupi (sfondi: blu; ngjyra: e bardhë; )

Rifresko faqen html në shfletues (Ctrl+F5) dhe sigurohu që tani të gjithë teksti të bardhë. Tani le t'i bëjmë ngjyrat e titullit të kuqe (për h1) dhe të verdhë (për h2):

trupi ( sfondi: blu; ngjyra: e bardhë; ) h1 ( ngjyra: e kuqe; ) h2 ( ngjyra: e verdhë; )

Rifreskojeni faqen në shfletuesin tuaj përsëri dhe sigurohuni që gjithçka të jetë ashtu siç synohet.

Unë mendoj se parimi është tashmë i qartë: ne specifikojmë përzgjedhësin, d.m.th. elementi në të cilin aplikohet stili, dhe në mbajtëse kaçurrelë- vetitë dhe kuptimet e tyre. Vetitë dhe vlerat do të diskutohen mësime individuale, tani për tani po e konsiderojmë parim i përgjithshëm përpilimi i një fletë stili.

Përzgjedhës CSS

Përzgjedhësit me ID

Në shembullin tonë, elementët e faqeve u përdorën si përzgjedhës: trupi, h1, h2. Por çfarë duhet të bëjmë nëse faqja jonë html ka disa elementë identikë (për shembull, paragrafë), dhe duam që teksti i të gjithë paragrafëve të jetë i zi dhe njëri prej tyre të jetë i zi? rozë. Atëherë do të na duhet të sigurojmë një identifikues unik për këtë paragraf dhe të krijojmë një stil për të.

Në HTML, identifikuesi i elementit specifikohet duke përdorur parametrin id, vlera e të cilit është një emër unik. Për shembull:

Teksti i paragrafit me identifikues (id).

Ju mund të jepni çdo emër përveç fjalëve të rezervuara (këto përfshijnë emrat e etiketave dhe parametrave të elementeve HTML dhe CSS), për shembull, nuk mund t'i jepni identifikuesit trupin e emrit. Le të shtojmë disa paragrafë në faqen tonë html dhe t'i caktojmë një identifikues njërit prej tyre: Nëse shikoni faqen tonë në shfletues tani, paragrafët tanë janë të dy të bardhë. Le të shtojmë stile për paragrafët tanë në fletën e stilit (style.css):

trupi ( sfondi: blu; ngjyra: e bardhë; ) h1 ( ngjyra: e kuqe; ) h2 ( ngjyra: e verdhë; ) p ( ngjyra: e zezë; ) p# rozë ( ngjyra: rozë; )

Fillimisht specifikuam që teksti i të gjithë paragrafëve të bëhet i zi, dhe teksti i paragrafit me id "rozë" bëje atë rozë. Përzgjedhësi ynë është në këtë rast nga elementi ( fq), ndarës ( # ) dhe emri identifikues ( rozë).

Është e rëndësishme të mbani mend se mund të ketë vetëm një identifikues (id) në një faqe. Ato. për shembullin tonë, është e pamundur të krijohen dy paragrafë me id "rozë", paragraf me këtë id mund të jetë vetëm një. Por çdo paragraf mund të ketë identifikuesin e vet, për shembull, mund të krijoni një paragraf me id = "gjelbër" dhe të vendosni stilin për këtë paragraf në fletën e stilit.

Përzgjedhës sipas klasave

Në shembullin e mësipërm, ne krijuam një paragraf me ngjyrë teksti rozë dhe treguam se mund të ketë vetëm një ID të tillë. Por çfarë nëse duam ngjyrë rozë teksti kishte dy-tre paragrafë. Ekziston një parametër për këtë në HTML klasës, vlera e të cilit është emri i saj.

Le të shtojmë disa paragrafë të tjerë në faqen tonë html dhe t'i caktojmë ato class = "rozë": Për të specifikuar stilin për këtë klasë, ne do të shkruajmë një rregull në fletën e stilit, ku elementi do të përdoret përsëri si përzgjedhës fq dhe emri rozë, por në këtë rast është një emër klase, kështu që një pikë (.) do të përdoret si ndarës:

trupi ( sfondi: blu; ngjyra: e bardhë; ) h1 ( ngjyra: e kuqe; ) h2 ( ngjyra: e verdhë; ) p ( ngjyra: e zezë; ) p# rozë ( ngjyra: rozë; ) p. rozë ( ngjyra: rozë; )

Mund të ketë aq paragrafë me këtë klasë sa të doni.

Le të përmbledhim:

• nëse të gjithë elementët e ngjashëm (për shembull, të gjithë titujt h1) duhet të kenë të njëjtin stil, atëherë zgjedhësi përbëhet vetëm nga ai element (për shembull, p (ngjyra: e zezë;))
• nëse një element (ndonjë: paragraf, titull...) duhet të jetë i ndryshëm nga të gjithë të tjerët, atëherë atij i caktohet një identifikues ( id) dhe ndarësi në fletën e stilit është shenja hash ( # ), Për shembull, p# rozë (ngjyra: rozë;) .
• nëse ka disa elementë në faqe me të njëjtin stil, atëherë atyre u caktohet një klasë ( klasës) dhe ndarësi i fletës së stilit është një pikë (.), për shembull, p.rozë (ngjyra:rozë;).
• identifikuesi ka prioritet më të lartë se klasa. Prandaj, nëse për ndonjë element specifikohen edhe një klasë edhe një identifikues (gjë që nuk bie në kundërshtim Parimet CSS), atëherë do të aplikohet stili identifikues.

Siç është përmendur tashmë, identifikuesit dhe klasat mund t'i caktohen çdo elementi html. Por shpesh ndodh që duam të nxjerrim në pah disa elementë të ndryshëm me një stil, p.sh. jeshile. Në këtë rast, ju mund të përdorni përzgjedhës i unifikuar. Në përzgjedhës të tillë, emri i elementit nuk specifikohet; një pikë ose shenjë hash specifikohet si shenjë e një klase ose identifikuesi dhe një emri. Për shembull:

E kuqe (ngjyra: e kuqe; ) #e verdhë ( ngjyra: e verdhë; )

Kështu, pavarësisht se cilin element vendosim class = "e kuqe"(titulli, paragrafi ose lidhja), ngjyra e tekstit të tij do të kthehet në të kuqe. Mund të vendosim një element në faqe (çdo) id = "e verdhë" dhe ngjyra e tekstit të atij elementi do të kthehet në të verdhë.

Përzgjedhësi i kontekstit

Le të themi se kemi një faqe HTML me kodin e mëposhtëm: Ne duam që shkronjat e pjerrëta të theksohen me të gjelbër. Më pas do të shkruajmë një përzgjedhës për elementin në fletën e stilit, d.m.th.

i (ngjyra: jeshile;)

Tani faqja jonë në shfletues duket si kjo:

Por çka nëse nuk duam që i gjithë teksti i pjerrët të theksohet me jeshile, por vetëm teksti që është në paragrafë. Për ta bërë këtë, ne do të bëjmë ndryshime në fletën e stilit:

p i (ngjyra: jeshile; )

Pra, ne treguam, aplikoni këtë stil ndaj elementeve i, të cilat janë në elementet fq. Emrat e elementeve ndahen me një hapësirë. Përzgjedhës të tillë quhen kontekstuale. Tani faqja jonë në shfletues duket si kjo:

Përzgjedhës grupimi

Nëse blloqet e deklarimit të stilit për disa përzgjedhës janë të njëjtë (për shembull, ne duam që titujt e tre niveleve të para të jenë jeshile), atëherë ato mund të grupohen. Për ta bërë këtë, përzgjedhësit për të cilët do të aplikohet një stil duhet të renditen të ndarë me presje. Shembull:

h1, h2, h3 (ngjyra: jeshile; )

Le të supozojmë se përveç ngjyrës, ne duam t'i japim titujve tanë një madhësi. Atëherë thjesht mund të shtojmë në fletën tonë të stilit:

h1, h2, h3 (ngjyra: jeshile; ) h1 (madhësia e shkronjave: 18 px; ) h2 (madhësia e shkronjave: 16 px; ) h3 (madhësia e shkronjave: 14 px; )

Titujt tanë do të kenë madhësia e specifikuar, por të gjitha do të jenë të gjelbra.

Në fakt, ka mosmarrëveshje për grupet. Disa njerëz mendojnë se kodi i mësipërm është i saktë, sepse. grupimi ndihmoi në shmangien e përsëritjes veti identike për tre elementë, kjo shkurton kodin.

Të tjerë besojnë se kjo redukton qëndrueshmërinë e kodit. Meqenëse, pasi gjetëm përzgjedhësin për titullin h3, nuk është menjëherë e qartë pse teksti në të është i gjelbër. Përkrahësit e logjikës rekomandojnë grupimin e vetëm elementeve, blloqet e përshkrimit të të cilëve përputhen plotësisht.

Në përgjithësi, grupimi apo jo është çështje e shijes tuaj. Por ju duhet të mbani mend qasje të ndryshme, kur lexoni kodin e dikujt tjetër, për shembull, në shabllone.

Kjo përfundon mësimin për përzgjedhësit. Në mësimin e ardhshëm do të prezantojmë koncepte të tilla si pseudo-elemente dhe pseudo-klasa.

ekziston katër mënyra për të lidhur stilet në dokumentin tuaj HTML. Metodat më të përdorura janë CSS inline dhe CSS e jashtme.

CSS inline në elementin HTML

Më poshtë është një shembull Zbatimi i CSS bazuar në sintaksën e mësipërme:

Drejtimi

Paragraf.

Ne marrim rezultatin e mëposhtëm:

Atributet

CSS inline - atributi i stilit

Ju mund të përdorni atributin në çdo element HTML për të përcaktuar rregullat e stilit. Këto rregulla do të zbatohen vetëm për këtë element. Këtu është sintaksa e përgjithshme:

<элемент style = "...правила стиля...">

Atributet

Shembull

Më poshtë është një shembull i CSS-së inline bazuar në sintaksën e mësipërme:

CSS inline

Ne marrim rezultatin e mëposhtëm:

Stilet e jashtme CSS - element

Elementi mund të përdoret për lidhje të jashtme skedar CSS ov në dokumentin tuaj HTML.

Tabela e jashtme Stilet CSS paraqet një të veçantë skedar teksti me shtrirje .css. Ju përcaktoni të gjitha rregullat e stilit në këtë skedar teksti dhe më pas mund të përfshini skedarin CSS në çdo dokument HTML duke përdorur elementin .

Këtu është sintaksa e përgjithshme për përfshirjen e një skedari të jashtëm CSS:

Atributet

Atributet shoqërohen me elementë ose rregullat e përcaktuara në ndonjë skedar i jashtëm fletë stili.

Çdo rregull i përcaktuar në etiketa, anashkalon rregullat e përcaktuara në çdo skedar të jashtëm CSS.

Çdo rregull i përcaktuar në një skedar të stilit të jashtëm ka përparësinë më të ulët në CSS dhe rregullat e përcaktuara në atë skedar do të zbatohen vetëm kur dy rregullat e mëparshme nuk zbatohen.

Trajtimi nga shfletuesit më të vjetër

Ka shumë shfletues të vjetër që nuk mbështesin CSS. Prandaj, ne duhet të kujdesemi për të shkruar CSS inline në dokumentin tonë HTML. Pjesa e mëposhtme e kodit tregon se si mund të përdoren etiketat e komenteve për të fshehur CSS nga shfletuesit më të vjetër:

Rregullat CSS

CSS, si çdo gjuhë tjetër kompjuterike, ka një sintaksë të përcaktuar rreptësisht, d.m.th. rregullat me të cilat krijohen fletët e stilit. Në kapitullin e mëparshëm, ju keni parë tashmë disa shembuj të fletëve të stileve të ndryshme dhe ndoshta keni vënë re se sintaksa CSS është e ndryshme nga sintaksa HTML. Nuk ka elemente, atribute ose etiketa në CSS. Ai ka rregulla, secila prej të cilave përshkruan pamjen e një ose një grupi elementësh HTML. Një rregull përcakton se si do të duket një element i caktuar. Le të japim një përkufizim.

Një rregull CSS është një njësi strukturore e një fletë stili që përmban një përshkrim të stileve për një element specifik. Një rregull përbëhet nga një përzgjedhës, i cili ndodhet gjithmonë në të majtë, dhe një bllok i deklarimit të stilit, i cili është i mbyllur në kllapa kaçurrelë dhe menjëherë pason përzgjedhësin (Figura). Çdo deklaratë nga ana e saj përbëhet nga një pronë dhe vlera e saj. Është vetia që përcakton llojin e stilit që do të zbatohet në element.

Një rregull mund të përmbajë deklarata të shumta, të ndara me pikëpresje. Nuk ka nevojë të vendosni pikëpresje pas deklaratës së fundit.

Për t'i bërë fletët e stileve më të lehta për t'u lexuar dhe modifikuar, rregullat zakonisht shkruhen në mënyrë që çdo deklaratë të jetë në një rresht të veçantë. Për shembull:

Do të perceptohet saktësisht në të njëjtën mënyrë, madje do të japë kursime shtesë në madhësinë e kodit për shkak të heqjes personazhe shtesë hapësirat dhe ndërprerjet e vijave. Por shkrimi në këtë mënyrë e bën kodin të vështirë për t'u kuptuar. Mund të bëni një kompromis: fillimisht shkruani rregullat, duke i ndarë ato në rreshta dhe pasi fleta e stileve të jetë më në fund gati, hiqni karakteret shtesë të parëndësishme. Por nuk ka asnjë garanci që pas kësaj nuk do të dëshironi të rregulloni diçka tjetër, atëherë do të duhet të vuani pak para se të gjeni pronën e duhur dhe ta redaktoni atë.

Për çdo pronë CSS Specifikimi specifikon grupin e vlerave që mund të marrë kjo pronë, si dhe vlerën dhe shtrirjen e saj të paracaktuar! pronat, d.m.th. ato elemente për të cilat mund të zbatohet. Gjithashtu tregon nëse kjo pronë është e trashëguar, d.m.th. nëse do të zbatohet për elementët pasardhës. Përcakton pajisjet dalëse për të cilat zbatohen këto veti. Meqenëse do të shqyrtojmë dizajn kompjuterik, atëherë do të përmendim vetëm ato prona që janë të zbatueshme në rastin tonë, d.m.th. janë krijuar për të kontrolluar ekranin në ekranin e monitorit dhe gjithashtu mbështeten nga shfletuesit modernë.

Le të shohim kryesoren Rregullat CSS për regjistrim elementet e tekstit Në faqe.

• font-familje: familja e shkronjave|lloji i shkronjave. Një paralajmërim: nëse emri i fontit përmban një hapësirë, atëherë ky emër duhet të vendoset në thonjëza.
• përmasa e germave: vlera|%. Kjo është madhësia e shkronjave. Mund të specifikohet në piksel, përqindje, em. Për më tepër, përqindja llogaritet në bazë të madhësisë së shkronjave që ky element ka marrë me trashëgimi.
• font-pesha: normal|bold|më e theksuar|më e lehtë|një numër nga 100 në 900. Kjo është trashësia e fontit. 400 = normale, 700 = bold.
• stili i shkronjave: normal|italik. Kjo është pjerrësia e fontit tuaj. Parazgjedhja është normale.
• font-variant: normal|kapakë të vegjël. Ky është një germë e vogël.
• rregullat e parafabrikimit font. Ato ju lejojnë të specifikoni rregulla individuale të ndara me hapësira. Në shumicën e rregullave të parafabrikuara, rendi nuk është i rëndësishëm, por në rregullin e shkronjave është i rëndësishëm.
• font: font-style font-variant font-pesha font-size font-family. Ne i shkruajmë rregullat vetëm në këtë mënyrë. Rregullat e madhësisë së shkronjave dhe të familjes së shkronjave duhet të specifikohen (pasi nuk kanë vlera të paracaktuara), rregullat e mbetura mund të hiqen.

font-familja: Arial, Geneva, Helvetica, sans-serif; madhësia e shkronjave: 10 px; pesha e shkronjave: bold; stili i shkronjave: italic; font-variant: me shkronja të vogla; font: bold 10px Arial;

Rregullat për të punuar me tekst në CSS

• rreshtimi i tekstit: majtas|djathtas|qendër|justifikoj. Ky është një zëvendësim atribut align, Kjo shtrirje horizontale linjat. Zbatohet vetëm për elementët e bllokut.
• tekst-dekorim: asnjë|mbi vijëzim (|) nënvizoj (|) vijë përmes. Ky është dizajni vije horizontale(pa rresht, rresht mbi një rresht teksti, poshtë një rreshti teksti, vijëzim).
• tekst-indent: vlera|%. Kjo është vija e kuqe. Përqindjet llogariten në bazë të madhësisë së zonës ku ndodhet teksti. Zbatohet vetëm për elementët e bllokut.
• tekst-transformim: asnjë|kapitalizuar|shkronja të mëdha|të vogla (karakteret nuk ndryshojnë, çdo fjalë shkruhet me shkronjë të madhe, shndërrimi në shkronja të vogla ose shkronjat e mëdha). Ky është një transformim i simboleve.
• ndarja e shkronjave: normale|madhësia. Kjo është distanca midis personazheve. Nuk mund të thuhet si përqindje.
• ndarja e fjalëve: normale|madhësia. Kjo është distanca midis fjalëve. Nuk mund të shprehet si përqindje.
• vertikal-rreshtoj: bazë|nën|super|lart|tekst-lart|mesi|poshtë|tekst-poshtë|%. Rreshtimi vertikal. Kjo është shtrirja elemente inline mes tyre. Por për elementët e tabelës "td" dhe "th" shtrirje vertikale rreshton të gjithë përmbajtjen që është brenda.
• vija e gjatesise: normale|madhësia|%. Lartësia e rreshtit ku ndodhet teksti.
• hapesire e bardhe: normal|para|tash. Si të përpunohet karaktere të hapësirës së bardhë në elementin tonë (normale - shkurtohen dhe bëhet mbështjellja automatike, nowrap - karakteret e hapësirës së bardhë janë shkurtuar, por nuk janë të mbështjellura, hapësirat paraprake nuk përpunohen në asnjë mënyrë, d.m.th. nuk shkurtohen dhe nuk ka as mbështjellje) .

text-align: djathtas; teksti- zbukurim: nënvizo; teksti-indent: 10px; tekst-transformim: shkronja të mëdha; ndarja e shkronjave: 10 px; ndarja e fjalëve: 10 px; vertikale-linjë: lartë; lartësia e vijës: 5%; hapësira e bardhë: para;

Listat e stilimit në CSS

Rregullat e hartimit të listës në css mund të aplikohen si për të gjithë listën ashtu edhe për elemente individuale listë.

• list-style-lloj: asnjë|rreth|disk|katror|dhjetore|alfa-e poshtme|alfa-e sipërme|romake e poshtme|romake e sipërme. Ky është lloji i shënimit: pa shënues, rreth, disk, katror, ​​numra arabë, letra në regjistra të ndryshëm, numërimi romak në regjistra të ndryshëm.
• listë-stili-pozicion: jashtë|brenda (jashtë, brenda). Kjo është vendosja e një zone me një shënues. Një zonë e veçantë është formuar për shënuesin: jashtë elementit "li" ose brenda tij (si parazgjedhje - jashtë elementit).
• listë-stili-imazh: asnjë|url. Foto për dizajnin e shënuesit. Mund të specifikojmë url-në e figurës në mënyrë që ajo të shfaqet në vend të shënuesit.
• stil-listë: list-style-type list-style-position list-style-image. Ato. këtu i shkruajmë të tre rregullat e mësipërme në një rregull të kombinuar. Rendi nuk ka rëndësi këtu.

list-style-lloj: katror; list-style-pozicion: brenda; list- style- image: url("ball.gif"); lista-stili: dhjetor brenda;

Vetitë e ngjyrave dhe të sfondit në CSS

• ngjyrë: ngjyrë.
• ngjyrë e sfondit: ngjyra|transparente. Kjo është ngjyra e sfondit. Si parazgjedhje është transparent.
• sfond-imazh: asnjë|url. Foto e sfondit. Ju mund të vendosni një foto duke specifikuar url-në e saj.
• sfond-pozicion: lart|poshtë|qendër|majtas|djathtas|magnitudë|%. Pozicionimi i imazhit në element.
• sfond-bashkëngjitje: fiks|lëvizje (kalimi te elementi, porta e pamjes). Bëhet fjalë për bashkëngjitjen e një fotografie, nga e cila llogaritet koordinata. Fiks - kjo është për të numëruar koordinatat nga zona e shikimit.
• sfond-përsërit: përsërit|përsërit-x|përsërit-y|nuk përsëritet. Përsëriteni: në të dy akset, përsërisni në boshtin x (horizontal), në boshtin y (vertikal), mos përsërisni.
• sfond: transparent sfond-ngjyra e sfondit-imazh background-repeat background-attachment background-position. Një rregull i kombinuar kombinon të gjitha rregullat e sfondit.

ngjyra: e kuqe; ngjyra e sfondit: #330033; sfond- imazh: url ("fon.gif"); pozicioni i sfondit: lart djathtas; sfond-bashkëngjitje: fikse; sfond- përsërit: përsërit- x; sfond: #ffffff pa- përsëritje url(fon.gif );

CSS (Cascading Style Sheets), ose fletë stilesh kaskadë, përdoren për të përshkruar pamjen dokument i shkruar në gjuhën e shënjimit. Në mënyrë tipike, stilet CSS përdoren për të krijuar dhe ndryshuar stilin e elementeve të faqes së internetit dhe ndërfaqet e përdoruesit shkruar në Gjuhët HTML dhe XHTML, por gjithashtu mund të aplikohet në çdo lloj dokumenti XML, duke përfshirë XML, SVG dhe XUL.

Fletët e stilit kaskadë përshkruajnë rregullat për formatimin e elementeve duke përdorur vetitë dhe vlerat e pranueshme këto veti. Për secilin element, mund të përdorni një grup të kufizuar të vetive; vetitë e tjera nuk do të kenë asnjë efekt mbi të.

Një deklaratë stili përbëhet nga dy pjesë: elementi i faqes së internetit − përzgjedhës, dhe komandat e formatimit - bllok reklamash. Përzgjedhësi i tregon shfletuesit se cilin element të formatojë dhe blloku i deklarimit (kodi në kllapa kaçurrelë) liston komandat e formatimit - vetitë dhe vlerat e tyre.

Oriz. 1. Struktura e deklarimit të stilit CSS

Llojet e fletëve të stilit kaskadë dhe specifikat e tyre

1. Llojet e fletëve të stilit

1.1. Fletë e jashtme e stilit

Fletë e jashtme e stilitështë një skedar teksti me shtesën .css, i cili përmban një grup stilesh CSS për elementët. Skedari krijohet në një redaktues kodi, ashtu si një faqe HTML. Skedari mund të përmbajë vetëm stile, pa shënime HTML. Një fletë stili e jashtme lidhet me një faqe interneti duke përdorur një etiketë , i vendosur brenda seksionit . Këto stile funksionojnë për të gjitha faqet e faqes.

Ju mund të bashkëngjitni fletë të shumta stilesh në secilën faqe interneti duke shtuar etiketa të shumta në rend , duke treguar qëllimin e kësaj fletë stili në atributin e etiketës media. rel="stylesheet" specifikon llojin e lidhjes (lidhja me një fletë stili).

Atributi type="text/css" nuk kërkohet nga standardi HTML5, kështu që mund të hiqet. Nëse atributi mungon, vlera e paracaktuar është type="text/css" .

1.2. Stilet e brendshme

Stilet e brendshme ngulitur në një seksion Dokumenti HTML dhe përcaktohen brenda etiketës. Stilet e brendshme kanë përparësi ndaj atyre të jashtme, por janë inferiore ndaj stileve inline (të specifikuara nëpërmjet atributit të stilit).

...

1.3. Stilet e integruara

Kur shkruajmë stilet inline, ne shkruajmë kodin CSS në skedarin HTML, direkt brenda etiketës së elementit duke përdorur atributin e stilit:

Kushtojini vëmendje këtij teksti.

Stilet e tilla ndikojnë vetëm në elementin për të cilin janë vendosur.

1.4. Rregulli @import

Rregulli @import Ju lejon të ngarkoni fletë stilesh të jashtme. Që direktiva @import të funksionojë, ajo duhet të shfaqet në fletën e stilit (të jashtme ose të brendshme) përpara të gjitha rregullave të tjera:

Rregulli @import përdoret gjithashtu për të përfshirë fontet në ueb:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cirilik);

2. Llojet e përzgjedhësve

Përzgjedhës përfaqësojnë strukturën e një faqe interneti. Ato ndihmojnë në krijimin e rregullave për formatimin e elementeve të faqes së internetit. Zgjedhësit mund të jenë elementë, klasat dhe identifikuesit e tyre, si dhe pseudo-klasa dhe pseudo-elemente.

2.1. Zgjedhës universal

Përputhet me çdo element HTML. Për shembull, * (margjina: 0;) do të rivendoset në zero kufijtë për të gjithë elementët e faqes. Zgjedhësi mund të përdoret gjithashtu në kombinim me një pseudo-klasë ose pseudo-element: *:after (stilet CSS) , *:checked (stilet CSS) .

2.2. Zgjedhësi i elementeve

Zgjedhësit e elementeve ju lejojnë të formatoni të gjithë elementët të këtij lloji në të gjitha faqet e faqes. Për shembull, h1 (font-family: Lobster, cursive;) do të vendosë stilin e përgjithshëm të formatimit për të gjithë titujt h1.

2.3. Përzgjedhësi i klasës

Zgjedhësit e klasave ju lejojnë të specifikoni stilet për një ose më shumë elementë me të njëjtin emër klasa e vendosur në vende të ndryshme në faqe ose në faqe të ndryshme faqe. Për shembull, për të krijuar një titull me klasën e titullit, duhet të shtoni atributin e klasës me titullin e vlerës në etiketën hapëse

dhe vendosni stilin për klasën e specifikuar. Stilet e krijuara duke përdorur një klasë mund të aplikohen në elementë të tjerë, jo domosdoshmërisht të atij lloji.

Udhëzime për përdorim Kompjuter personal

.titulli (transformimi i tekstit: shkronja të mëdha; ngjyra: blu e lehtë; )

2.4. përzgjedhës ID

Zgjedhësi ID ju lejon të formatoni një element specifik. ID-ja duhet të jetë unike dhe mund të shfaqet vetëm një herë në një faqe.

#bari anësor (gjerësia: 300 px; float: majtas; )

2.5. Përzgjedhës pasardhës

Zgjedhësit pasardhës aplikojnë stile për elementët brenda një elementi kontejner. Për shembull, ul li (transformimi i tekstit: shkronja të mëdha;) - do të zgjedhë të gjithë elementët li që janë fëmijë të të gjithë elementëve ul.

Nëse dëshironi të formatoni pasardhësit e një elementi të caktuar, duhet t'i jepni atij elementi një klasë stili:

p.së pari a (ngjyra: jeshile;) - ky stil do të zbatohet për të gjitha lidhjet pasardhës të paragrafit me klasën e parë;

p .first a (ngjyra: jeshile;) - nëse shtoni një hapësirë, lidhjet e vendosura brenda çdo etikete të klasit të parë që është një fëmijë i elementit do të stilohen

Së pari a (ngjyra: jeshile;) - ky stil do të aplikohet në çdo lidhje që ndodhet brenda një elementi tjetër, të caktuar nga class.first .

2.6. Përzgjedhës për fëmijë

Një element fëmijë është një fëmijë i drejtpërdrejtë i elementit që përmban. Një element mund të ketë disa elementë fëmijë, por secili element mund të ketë vetëm një element prind. Zgjedhësi fëmijë ju lejon të aplikoni stile vetëm nëse elementi fëmijë vjen menjëherë pas elementit prind dhe nuk ka elementë të tjerë midis tyre, domethënë, elementi fëmijë nuk është i futur brenda asgjëje tjetër.
Për shembull, p > strong do të zgjedhë të gjithë elementët e fortë që janë fëmijë të elementit p.

2.7. Motra përzgjedhëse

Motërsia ndodh midis elementeve që ndajnë një prind të përbashkët. Zgjedhësit e vëllezërve ju lejojnë të zgjidhni elementë nga një grup elementësh të të njëjtit nivel.

h1 + p - do të zgjedhë të gjithë paragrafët e parë menjëherë pas çdo etikete

pa prekur paragrafët e mbetur;

h1 ~ p - do të zgjedhë të gjithë paragrafët që janë të ngjashëm me çdo titull h1 dhe menjëherë pas tij.

2.8. Përzgjedhësi i atributeve

Zgjedhësit e atributeve zgjedhin elementë bazuar në emrin e atributit ose vlerën e atributit:

[atribut] - të gjithë elementët që përmbajnë atributin e specifikuar - të gjithë elementët për të cilët është specifikuar atributi alt;

përzgjedhës[atributi] - elementë të këtij lloji që përmbajnë atributin e specifikuar, img - vetëm imazhe për të cilat është specifikuar atributi alt;

përzgjedhës[atribute="vlera"] - elementë të këtij lloji që përmbajnë atributin e specifikuar me një vlerë specifike, img - të gjitha fotografitë, titulli i të cilave përmban fjalën lule;

përzgjedhës[atribut~="vlera"] - elemente që përmbajnë pjesërisht vlerën e dhënë, për shembull, nëse disa klasa janë specifikuar për një element të ndarë me një hapësirë, p - paragrafë emri i klasës së të cilëve përmban tipar ;

përzgjedhës[atribut|="vlera"] - elementet, lista e vlerave të atributeve të të cilëve fillon me fjalën e specifikuar, p - paragrafë, emri i klasës së të cilëve është tipar ose fillon me tipar;

përzgjedhës[atributi^="vlera"] - elementet vlera e atributit të të cilëve fillon me vlerën e specifikuar, a - të gjitha lidhjet duke filluar me http:// ;

përzgjedhës[atributi$="vlera"] - elemente vlera e atributit të të cilëve përfundon vlera e specifikuar, img - të gjitha imazhet në formatin png;

përzgjedhës[atributi*="vlera"] - elementë vlera e atributit të të cilëve përmban fjalën e specifikuar kudo, a - të gjitha lidhjet emri i të cilave përmban librin .

2.9. Përzgjedhës i pseudo-klasës

Pseudo-klasat janë klasa që në fakt nuk janë bashkangjitur me etiketat HTML. Ato ju lejojnë të aplikoni rregullat CSS për elementët kur ndodh ose i nënshtrohet një ngjarje një rregull të caktuar. Pseudo-klasat karakterizojnë elementet me vetitë e mëposhtme:

:hover - çdo element mbi të cilin është vendosur kursori i miut;

:fokus - një element ndërveprues që është lundruar në tastierë ose është aktivizuar duke përdorur miun;

:active - element që është aktivizuar nga përdoruesi;

:valid - fusha të formës, përmbajtja e të cilave është kontrolluar në shfletues për pajtueshmëri me llojin e specifikuar të të dhënave;

:invalid - formoni fusha, përmbajtja e të cilave nuk përputhet me llojin e specifikuar të të dhënave;

:enabled - të gjitha fushat aktive të formës;

:disabled - fushat e bllokuara të formës, d.m.th., në gjendje joaktive;

:in-range - formoni fusha, vlerat e të cilave janë në intervalin e specifikuar;

:jashtë diapazonit - formoni fusha, vlerat e të cilave nuk janë brenda intervalit të specifikuar;

:lang() - elemente me tekst në gjuhën e specifikuar;

:not(selector) - elemente që nuk përmbajnë përzgjedhësin e specifikuar - klasën, identifikuesin, emrin ose llojin e fushës së formës - :not() ;

:target është një element me simbolin # që është referuar në dokument;

:checked - elemente të formularit të zgjedhur (të zgjedhur nga përdoruesi).

2.10. Përzgjedhës strukturor i pseudo-klasës

Pseudo-klasat strukturore zgjedhin elementet fëmijë sipas parametrit të specifikuar në kllapa:

:nth-child(tek) - elemente tek fëmijë;

:nth-child(edhe) - elemente edhe fëmijë;

:nth-child(3n) - çdo element i tretë tek fëmijët;

:nth-child(3n+2) - zgjedh çdo element të tretë, duke filluar nga fëmija i dytë (+2);

:nth-child(n+2) - përzgjedh të gjithë elementët duke filluar nga i dyti;

:nth-child(3) - zgjedh elementin e tretë fëmijë;

:nth-last-child() - në listën e elementeve fëmijë, zgjedh elementin me vendndodhjen e specifikuar, ngjashëm me:nth-child() , por duke u nisur nga i fundit, në drejtim të kundërt;

:first-child - ju lejon të stiloni vetëm elementin e fëmijës së parë të etiketës;

:last-child - ju lejon të formatoni elementin e fundit fëmijë të etiketës;

:only-child - zgjedh një element që është elementi i vetëm fëmijë;

:bosh - përzgjedh elementë që nuk kanë fëmijë;

:root - zgjedh elementin që është rrënja në dokument - element html.

2.11. Përzgjedhës i pseudo-klasës së tipit strukturor

Tregon një lloj specifik të etiketës së fëmijëve:

:nth-of-type() - zgjedh elementë të ngjashëm me :nth-child() , por merr parasysh vetëm llojin e elementit;

:first-of-type - zgjedh fëmijën e parë të një lloji të caktuar;

:last-of-type - zgjedh elementi i fundit të këtij lloji;

:nth-last-of-type() - zgjedh një element lloji i dhënë në listën e elementeve sipas vendndodhjes së specifikuar, duke filluar nga fundi;

:only-of-type - zgjedh të vetmin element të llojit të specifikuar midis elementeve të tij fëmijë elementi prind.

2.12. Përzgjedhës i pseudo elementeve

Pseudo elementët përdoren për të shtuar përmbajtje, e cila krijohet duke përdorur veçorinë e përmbajtjes:

:first-letter - zgjedh shkronjën e parë të çdo paragrafi, vlen vetëm për elementet e bllokut;

:first-line - zgjedh rreshtin e parë të tekstit të elementit, zbatohet vetëm për elementët e bllokut;

:before - fut përmbajtjen e gjeneruar para elementit;

:after - shton përmbajtjen e gjeneruar pas elementit.

3. Kombinimi i përzgjedhësit

Për të zgjedhur më saktë elementët për formatim, mund të përdorni kombinime të përzgjedhësve:

img: n-të e llojit (edhe) - do të zgjedhë të gjitha fotot çift, tekst alternativ e cila përmban fjalë css.

4. Grupimi i përzgjedhësve

I njëjti stil mund të aplikohet në shumë elementë në të njëjtën kohë. Për ta bërë këtë, duhet të renditni përzgjedhësit e kërkuar në anën e majtë të deklaratës, të ndarë me presje:

H1, h2, p, shtrirje ( ngjyra: domate; sfondi: i bardhë; )

5. Trashëgimia dhe kaskada

Trashëgimia dhe kaskada janë dy koncepte themelore në CSS që janë të lidhura ngushtë. Trashëgimia është ajo ku elementët trashëgojnë vetitë nga prindi i tyre (elementi që i përmban ato). Kaskada manifestohet në mënyrën se si tipe te ndryshme Fletët e stileve aplikohen në një dokument dhe se si rregullat kontradiktore mbizotërojnë njëra-tjetrën.

5.1. Trashëgimia

Trashëgimiaështë mekanizmi me të cilin disa veti transmetohen nga një paraardhës te pasardhësit e tij. Specifikimi CSS lejon trashëgimin e vetive që lidhen me përmbajtjen e tekstit të faqes, si ngjyra, fonti, hapësira e shkronjave, lartësia e rreshtit, stili i listës, rreshtimi i tekstit, indentja e tekstit, transformimi i tekstit, dukshmëria, e bardha -hapësirë ​​dhe ndërmjet fjalëve. Në shumë raste, kjo është e përshtatshme sepse nuk keni nevojë të vendosni madhësinë e shkronjave dhe familjen e shkronjave për çdo element në faqen e internetit.

Vetitë që lidhen me formatimin e bllokut nuk trashëgohen. Këto janë sfondi , kufiri , ekrani , notimi dhe i qartë , lartësia dhe gjerësia , diferenca , min-max-lartësia dhe gjerësia , skica , tejmbushja , mbushja , pozicioni , dekorimi i tekstit , rreshtimi vertikal dhe indeksi z .

Trashëgimia e detyruar

Duke përdorur fjalë kyçe trashëgim mund të detyrojë një element të trashëgojë çdo vlerë pronësie të elementit të tij mëmë. Kjo funksionon edhe për pronat që nuk trashëgohen si parazgjedhje.

Si vendosen dhe funksionojnë stilet CSS

1) Stilet mund të trashëgohen nga elementi mëmë (veti të trashëguara ose duke përdorur vlerën trashëguese);

2) Stilet e vendosura në fletën e stileve më poshtë anashkalojnë stilet e vendosura në tabelën e mësipërme;

3) Mund të aplikohen stile nga një element burime të ndryshme. Mund të kontrolloni se cilat stile janë aplikuar në modalitetin e zhvilluesit të shfletuesit. Për ta bërë këtë, klikoni në elementin klikoni me të djathtën miun dhe zgjidhni "Shiko kodin" (ose diçka të ngjashme). Kolona e djathtë do të listojë të gjitha vetitë që janë vendosur në këtë element ose të trashëguara nga një element prind, së bashku me skedarët e stilit në të cilët janë specifikuar, dhe numër serik rreshtat e kodit.

Oriz. 2. Modaliteti i zhvilluesit në Shfletuesi i Google krom

4) Kur përcaktoni një stil, mund të përdorni çdo kombinim përzgjedhësish - një përzgjedhës elementi, një pseudo-klasë elementi, një klasë ose një identifikues elementi.

div (kufiri: 1px solid #eee;) #wrap (gjerësia: 500px;).box (float: majtas;).clear (e qartë: të dyja;)

5.2. Kaskada

Kaskadëështë një mekanizëm që kontrollon rezultatin përfundimtar në një situatë ku rregulla të ndryshme CSS zbatohen për të njëjtin element. Ekzistojnë tre kritere që përcaktojnë rendin në të cilin zbatohen vetitë—rregulli i rëndësishëm!, specifika dhe renditja në të cilën përfshihen fletët e stilit.

Rregulla! e rëndësishme

Pesha e një rregulli mund të specifikohet duke përdorur fjalën kyçe!important, e cila shtohet menjëherë pas vlerës së vetive, për shembull, span (pesha e shkronjave: bold!i rëndësishëm;) . Rregulli duhet të vendoset në fund të deklaratës përpara kllapës mbyllëse, pa hapësirë. Një njoftim i tillë do të ketë përparësi ndaj të gjitha rregullave të tjera. Ky rregull ju lejon të anuloni një vlerë pronësie dhe të vendosni një të re për një element nga një grup elementësh në rastin kur nuk ka akses direkt te skedari i stilit.

Specifikimi

Për çdo rregull, shfletuesi llogarit specifika e përzgjedhësit, dhe nëse një element ka deklarata kundërshtuese të pasurisë, merret parasysh rregulli që ka më shumë specifikë. Vlera e specifikës ka katër pjesë: 0, 0, 0, 0. Specifikimi i përzgjedhësit përcaktohet si më poshtë:

për id, shtohet 0, 1, 0, 0;
për klasën 0, 0, 1, 0 shtohet;
për çdo element dhe pseudoelement, shtohet 0, 0, 0, 1;
për një stil inline të shtuar drejtpërdrejt në një element - 1, 0, 0, 0 ;
Një përzgjedhës universal nuk ka specifikë.

H1 (ngjyra: blu e lehtë;) /*specifiteti 0, 0, 0, 1*/ em (ngjyra: argjend;) /*specifiteti 0, 0, 0, 1*/ h1 em (ngjyra: ari;) /*specifiteti: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div# p.kryesore rreth (ngjyra: blu;) /*specifiteti: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .bar (ngjyra: gri;) /*specifiteti 0, 0, 1, 0 */ #shirit anësor (ngjyra: portokalli;) /*specifiteti 0, 1, 0, 0*/ li#bari anësor (ngjyra: aqua;) /*specifiteti: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Si rezultat, ato rregulla që janë më specifike do të zbatohen për elementin. Për shembull, nëse një element ka dy specifika me vlera 0, 0, 0, 2 dhe 0, 1, 0, 1, atëherë rregulli i dytë do të fitojë.

Rendi i tabelave të lidhura

Mund të krijoni fletë të shumta stilesh të jashtme dhe t'i lidhni ato me një faqe interneti. Nëse në tabela të ndryshme do të takohemi kuptime të ndryshme vetitë e një elementi, atëherë si rezultat rregulli në fletën e stilit të renditur më poshtë do të zbatohet për elementin.