Ne do të mësojmë se çfarë janë fletët e stilit kaskadë, çfarë është stili CSS dhe si ta vendosim atë për elementët HTML.

Me këtë artikull, ju tashmë keni një kuptim të fortë se cila gjuhë e shënjimit të hipertekstit përdoret për të përshkruar përmbajtjen e një faqe interneti. Ndërsa shfletojmë në ueb, vërejmë se faqet duken ndryshe: ngjyrat, shkronjat, hapësira e rreshtave, imazhet e sfondit dhe madje edhe animacioni. Pa e lënë mënjanë, dua t'ju shpjegoj menjëherë se si do të duken këto faqe ndikohet nga përdorimi i fletët e stilit kaskadë (Fletët e stilit të kaskadës - css). Si pjesë e tutorialit HTML, ju dhe unë do të shikojmë shkurtimisht përdorimin e fletëve të stilit kaskadë, mund t'i studioni ato në detaje pas këtij kursi në seksionin e tutorialit CSS.

Çfarë është stili? Stili vendos pamjen e çdo elementi të faqes, d.m.th. Përafërsisht, ky është një rregull që i tregon shfletuesit se si të formatojë një element të caktuar (për shembull, të ndryshojë ngjyrën e sfondit ose të shkronjave).

Çdo element HTML ka stili i paracaktuar. Ndryshimi i stilit të paracaktuar të një elementi HTML mund të bëhet duke përdorur atributin e stilit global. Kompletet e atributeve të ndërtuara (ne rresht) Stili CSS për elementin. CSS inline përdoret për të aplikuar një stil unik në një element të vetëm HTML. Si pjesë e të mësuarit rreth HTML, ne do të shikojmë vetëm përdorimin e CSS-së inline.

Këshillë: Ky shembull përdor ngjyrat e mëposhtme: të bardhë(e bardhë), kaki(kaki), gri(Gri). Për tekstin e poezisë përdoret fonti Verdana.

Nëse keni vështirësi në përfundimin e detyrës, atëherë inspektoni kodin e faqes duke hapur shembullin në një dritare të veçantë duke klikuar mbi imazhin.

CSS (Cascading Style Sheets), ose Cascading Style Sheets, përdoren për të përshkruar pamjen e një dokumenti ueb të shkruar në një gjuhë shënjimi. CSS vendos rregulla stili që ndryshojnë pamjen e elementeve të vendosura në faqet e internetit, rregullojnë hollësitë e tyre, të tilla si ngjyra, fonti, madhësia, kufijtë, sfondi dhe vendndodhja në dokument.

Ju mund të futni kodin CSS direkt në një element shënjimi si një vlerë atributi stil. Ky atribut është i disponueshëm në të gjithë elementët HTML. Me CSS, ju mund të specifikoni një numër karakteristikash stili për një element të caktuar HTML. Çdo pronë ka një emër dhe vlerë të ndara me një dy pika (:). Çdo pronë e deklaruar ndahet me një pikëpresje (;).

Ja se si duket për një element

Mënyrat për të shtuar stile CSS

Standardi CSS ofron tre opsione për aplikimin e një fletë stili në një faqe interneti:

• Fleta e jashtme e stilit - përcaktimi i rregullave të fletës së stilit në një skedar të veçantë .css, dhe më pas përfshirja e këtij skedari në një dokument HTML duke përdorur një etiketë
• Fleta e brendshme e stilit - përcaktimi i rregullave të fletës së stilit duke përdorur një etiketë

  Shembull: Fleta e brendshme e stilit

  • Provojeni vetë"

  kokë

  Teksti një

  Teksti dy

  Teksti tre

  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ë skedarin e jashtëm CSS, si dhe rregullat e përcaktuara në element

  kokë

  Teksti një

  Teksti dy

  Teksti tre

  Detyrat

  • Shtrirja e tekstit në qendër

    Përdorni stilin e paragrafit në linjë për të përqendruar tekstin.

  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

  Nëse shkruani kod si ky midis etiketave ... , atëherë të gjithë titujt e nivelit të parë do të jenë blu. Me këtë metodë, stilet vendosen duke përdorur etiketa. . Gjithashtu tegu por jo siti në tërësi.

• Fletët e stilit të jashtëm. Ato vendosen në një skedar të veçantë dhe lidhen me dokumentin html duke përdorur etiketën , i cili vendoset midis etiketave ... . Le ta shqyrtojmë këtë rast në më shumë detaje. E shkruajmë këtë kod në notepad dhe e ruajmë si skedar html.

  
  
  
  
  
  
  

  Titulli i nivelit të parë

  
  

  Kreu i nivelit të tretë, i vendosur në qendër të dokumentit html

  
  

  Kreu i nivelit të gjashtë, faqja e internetit e rreshtuar djathtas

  
  
  

  Pas kësaj, krijoni një skedar të ri me përmbajtjen e mëposhtme:

  H1 (ngjyra: blu;)
  h3 (ngjyra: e kuqe;)
  H6 (ngjyra: jeshile;)

  Dhe ruajeni si stil me shtrirje *css. Shihni rezultatin. Ky është skedari ynë html i kokës. Tani le të shohim se si funksionon ky dizajn. Në një dokument html me tituj, ne jemi midis etiketave ... shkroi këtë rresht:

  Këtu me etiketën ne përfshijmë fletë stilesh në dokumentin html. atribut href i referohet vendndodhjes së fletës së stilit, ky është një atribut i kërkuar. atribut lloji ne tashmë e dimë se ai specifikon llojin e fletës së stilit. atribut rel tregon lidhjen e skedarit të përfshirë me dokumentin e dhënë html. Në rastin tonë, vlera e atributit rel = "fletë stili" do të thotë që kemi shtuar bazë fletë stili. Avantazhi i kësaj metode të vendosjes së fletëve të stileve është se nëse dëshironi të ndryshoni dizajnin e faqes në tërësi, mjafton të ndryshoni vetëm një skedar me fletë stilesh.

Një fletë stili CSS, nëse marrim vetë përkufizimin, është një gjuhë për të përshkruar pamjen e një dokumenti. Kjo do të thotë, HTML është përgjegjëse për strukturën e faqes, dhe fleta e stilit CSS është përgjegjëse për të gjithë dizajnin. Unë kam mbledhur informacion këtu që do t'ju lejojë të përdorni lirisht fletën e stilit. Unë nuk do të shkruaj se si është e nevojshme ta njohësh atë, sepse është e qartë se pa të nuk do të mund ta çosh faqen në një pamje pak a shumë normale. Nëse dikush sapo ka filluar të mësojë stilet CSS, atëherë këto materiale janë të mjaftueshme për të filluar të mësojë CSS.

1. Gjërat themelore

Do të filloj me bazat. Kur fillova këtë faqe, shkrova një tutorial të vogël për të mësuar fletët e stilit CSS. Mësimet janë të përshtatshme si për ata që sapo kanë filluar, ashtu edhe për ata që tashmë dinë diçka për të rifreskuar njohuritë e tyre. Atje gjithçka është e përshtatur në foto dhe në shembuj realë.

Digresion i vogël: kur fillova të studioja vetë temën e ndërtimit të faqes, mësova pothuajse të gjitha etiketat HTML dhe nuk më frymëzuan shumë. Por pasi fillova të mësoja fletën e stilit CSS dhe të provoja secilën nga veçoritë, më pëlqeu aq shumë (nuk do të kisha krijuar nëse nuk do të më pëlqente). Pashë që mund të bësh gjëra të mahnitshme vetëm me CSS. Nuk është një gjuhë programimi që kërkon muaj për të mësuar. Fleta e stilit mund të zotërohet në një (maksimum dy) javë.

Sigurisht, nuk do të mësoni absolutisht të gjitha pronat dhe vlerat e tyre, dhe nuk keni nevojë! Ju vetëm duhet të dini bazat në mënyrë që të filloni ta aplikoni dhe ta përdorni në projektet tuaja. Një nuancë e rëndësishme është se ju duhet të aplikoni MENJËHERË pronën që sapo mësuat në një shembull real. Le të jetë faqja juaj ose një sajt i thjeshtë HTML - nuk ka rëndësi. Është e rëndësishme që të përpiqeni të shkruani me duart tuaja dhe të shihni rezultatin.

Unë kam shumë shembuj në faqen time që përdorin CSS. Vetëm dhe së bashku përmbajnë më shumë se 100 mësime! Kur dini të paktën bazat, atëherë mund t'i ndryshoni dhe zbatoni me siguri të gjithë shembujt nga mësimet.

Mësimet e Mia mbi Bazat e Stileve Cascading CSS

2. Fletët e mashtrimit CSS dhe CSS3

Epo, mësuat bazat dhe pas nja dy ditësh keni harruar gjithçka me "sukses" dhe, me siguri, mendoni se kjo nuk është e juaja dhe gjithçka është e ndërlikuar. Unë dua t'ju gëzoj pak menjëherë - unë vetë nuk i di të gjitha vetitë e CSS. Por çfarë më pengon t'i shoh ato në internet?

Vërtetë, ndërsa shkoni në Yandex ose Google, atëherë do të shkruani kërkesën që ju nevojitet. Dhe nëse ende nuk jep atë që ju nevojitet në kërkim. Kështu që ju mund të shpenzoni shumë kohë dhe ende të mos gjeni atë që po kërkoni vërtet.

Për fat të mirë, njerëzit e mirë kanë përpiluar fletë mashtrimesh shumë të dobishme që më kanë ndihmuar më shumë se një herë. Mjafton të kuptosh se ku është gjithçka dhe më pas të gjesh pronat e duhura nuk është e vështirë.

Fletët e mashtrimit CSS dhe CSS3

Këto janë thjesht materiale të domosdoshme për paraqitjen dhe dizajnin e sitit. Koha për t'u shpërqendruar dhe për të kërkuar në internet për një përshkrim të pronave është zvogëluar shumë herë.

Vërtetë, siç e kuptoni, sa më shumë të krijoni faqe ose të dizajnoni, aq më pak duhet ta shikoni këtë aluzion, pasi të gjitha vetitë e nevojshme mbeten gjithmonë në kujtesë. Por megjithatë, të kesh në dorë këtë grup fletësh mashtrimi nuk do të jetë e tepërt.

Është si në shkollë: edhe nëse nuk përdorni një fletë mashtrimi, është ende disi më e qetë në shpirtin tuaj 😆 .