Akronīms CSS apzīmē "kaskādes stila lapas". CSS tiek izmantots vietņu un lietojumprogrammu veidošanai visās ierīcēs. Stila lapa parasti tiek izmantota līdzās HTML un priekšpuses programmēšanas valodai, piemēram, JavaScript.

CSS var ieviest vienā no trim veidiem - inline, iekšēji vai ārēji. Lai gan ieteicamā pieeja ir ārējā CSS, ir gadījumi, kad abas atlikušās ieviešanas metodes varētu būt praktiskākas.

Šajā apmācības rakstā jūs uzzināsit visus CSS pamatus, lai jau šodien sāktu veidot lietojumprogrammas.

Kad izmantot dažādas CSS ieviešanas metodes

Iekļautā CSS ir ideāla ieviešanas metode, ja tīmekļa lapā kopā ar dažiem citiem nišas gadījumiem ir paredzēts iekļaut tikai vienu vai divas stila preferences. Iekļautā CSS metode izmanto stils atslēgvārdu kopā ar CSS īpašumu, lai sasniegtu konkrētu rezultātu.

Ja plānojat mainīt viena virsraksta krāsu uz sarkanu, ieslēgts CSS varētu būt labs risinājums. Kā minēts iepriekš, nišas gadījums būtu HTML izkārtojumu veidošana, kas galvenokārt sastāv no tabulām (novecojusi prakse).

Izmantojot iekļauto CSS piemēru

Galvenā pozīcija

Iepriekš redzamā koda rindiņa parādīs tekstu “Galvenais virsraksts” sarkanā krāsā. Tas, iespējams, ir viens no vienīgajiem praktiskajiem iemesliem iekļautās CSS izmantošanai, jo parasti ir tikai viens h1 elements noteiktā tīmekļa lapā.

Ja jūs plānojat pārklāt visu h2 elementi tīmekļa lapā ar dzeltenu krāsu. Jums būs jāizmanto CSS stils atslēgvārdu kopā ar krāsa īpašums un tā vērtība (dzeltena) uz katra elementa. Tomēr efektīvāks veids, kā izpildīt šo uzdevumu, ir izmantot iekšējo CSS.

Izmantojot iekšējo CSS piemēru

Ievietojot iepriekš minēto kodu sadaļā HTML faila tags nodrošinās, ka visi h2 faila elementi ir pārklāti ar dzeltenu krāsu. Iekšējais CSS ir atdalīts no HTML koda, un tas padara metodi efektīvāku, jo atvieglo mērķauditorijas atlasi dažādās elementu grupās.

Tātad, kāpēc ārējā CSS ieviešanas metode joprojām ir ieteicamākā pieeja? Bažu nodalīšana. Izmantojot ārējo CSS, jūsu CSS kods ir pilnībā atdalīts no jūsu HTML koda, kas nodrošina mērogojamību lieliem projektiem un padara testēšanas procesu efektīvāku.

Izmantojot ārēju CSS piemēru

Ievietojiet koda rindiņu iepriekš HTML faila tags atvieglos jūsu tīmekļa lapas veidošanu, izmantojot ārējo CSS metodi. Vienīgais iepriekš minētā koda aspekts, kas mainīsies, ir vērtība, kas piešķirta href īpašums, kuram vienmēr jābūt CSS faila nosaukumam (ieskaitot paplašinājumu .css).

Saistīts: Kas ir kaskādes stila lapas un kādam nolūkam tiek izmantots CSS? Kad jūsu CSS fails ir saistīts ar jūsu HTML dokumentu, tagad varat sākt rakstīt CSS kodu savā CSS failā. Šajā brīdī vienīgā atšķirība starp iepriekš minēto CSS piemēru un ārējo CSS ir stils tagu. Tāpēc, ievietojot šādu kodu CSS failā, tiks iegūts tāds pats rezultāts kā iepriekšējā CSS piemērā.

h2 {
krāsa: dzeltena;
}

CSS pamatstruktūras izpēte

CSS pamatdeklarācija satur septiņus būtiskus elementus, kā redzams zemāk esošajā piemērā. Viņi visi strādā kopā, lai sasniegtu noteiktu stila preferenču kopumu.

Atlasītājs

CSS deklarācijā atlasītājs var būt vai nu id, a klase, elements vai dažos īpašos gadījumos pseidoselektors. CSS struktūrā virs a elements tiek izmantots kā atlasītājs, kas nozīmē, ka visas tīmekļa lapas saites tiks pārklātas ar sarkanu krāsu. Būtībā atlasītāja mērķis ir noteikt elementu (-us), kas būtu jāveido stilā.

Deklarācijas sākums un beigas

Deklarācijas sākums un beigas ir svarīgas, jo tās ietver visas stila preferences, kas attiecas uz konkrētu atlasītāju. Abus elementus attēlo pāris atvērtas un aizvērtas cirtainas breketes. Labs veids, kā atcerēties izmantot deklarācijas sākumu vai deklarācijas beigas, ir atcerēties, ka, ja jums ir atvērta sprogaina lente, tai jābūt atbilstošai slēgtai cirtainai lentei un otrādi.

Īpašums

Deklarācijas struktūras CSS īpašums var būt jebkurš no vairāk nekā simts dažādiem īpašuma veidiem. Īpašuma tips, kas izmantots iepriekš CSS struktūrā, ir krāsa un šī rekvizīta mērķauditorija ir teksts tīmekļa lapā. Ja vēlaties uzzināt vairāk, apskatiet mūsu visaptverošs CSS rekvizītu saraksts un to izmantošana.

Īpašuma/vērtības atdalītājs

Lai gan īpašību/vērtību atdalītājs varētu šķist mazs un nenozīmīgs, tas ir tikpat svarīgs kā visi pārējie CSS struktūras elementi. Ja kādreiz ir gadījums, kad šis elements tiek aizmirsts, visa CSS deklarācija netiks izpildīta.

Vērtība

CSS rekvizīta vērtība atspoguļo precīzu stilu, kuru vēlaties lietot konkrētam īpašumam. Pieejamās vērtības ir atkarīgas no īpašuma veida. Piemēram, iepriekš aprakstītajā struktūrā izmantotais īpašums ir krāsa, kas nozīmē, ka šim īpašumam var izmantot tikai viena veida vērtību - krāsas nosaukumu. A krāsa vērtību var uzrādīt vienā no četrām formām: vārda vērtība (piemēram, iepriekš minētajā piemērā), heksadecimālā vērtība, HSL (nokrāsa, piesātinājums, gaišums) vērtība vai RGB (sarkana, zaļa, zila) vērtība.

Deklarācijas atdalītājs

Deklarāciju atdalītājs norāda, ka esat konkrētas stila deklarācijas beigās. Iepriekš redzamajā struktūrā ir tikai viens deklarāciju atdalītājs, bet var būt arī vairāk. Tas viss ir atkarīgs no to CSS rekvizītu skaita, kurus plānojat izmantot konkrētam klase, id, vai elements.

Kas ir ID un nodarbības?

ID un klases ir būtiska loma CSS veidošanas procesā. Tāpat kā HTML elementi, arī CSS ID un klases tiek izmantoti kā atlasītāji CSS deklarācijā. Tomēr, klases un ID priekšroka pār HTML elementu.

Vispārīgais CSS noteikums ir tāds, ka pēdējā stila deklarācija, ko pievienojat failam, ignorēs tās, kas bija iepriekš. Tāpēc, ja ir divas deklarācijas ar h2 atlasītājs CSS failā, pēdējā pievienotā deklarācija ignorē iepriekšējās deklarācijas.

Tomēr, ja šis h2 elementam ir id kas tiek izmantots kā atlasītājs CSS deklarācijā neatkarīgi no tā pozīcijas (pirms vai pēc) CSS deklarācijai, kurai ir h2 elements kā tā atlasītājs, stila izvēle id deklarācijai vienmēr būs prioritāte pār elementu. Īsāk sakot, an id ignorēs citus stila atlasītājus.

Ir svarīgi atcerēties, ka CSS deklarācijā ID sākas ar ciparu zīmi un nodarbības sākas ar punktu. Būtiskākā atšķirība starp id un a klase vai tas ir id ir unikāls, savukārt a klase var dublēt. Piemēram, līdzīgu kolekcija tagiem var piešķirt to pašu klase nosaukums; tomēr, id no katra atzīmei jābūt unikālai.

Dažādu veidu atlasītāju izpēte

Ir trīs galvenie atlasītāju veidi - viens, vairāki un ligzdoti. Līdz šim šajā rakstā ir plaši apskatīti atsevišķi atlasītāji.

Izmantojot CSS, būs gadījumi, kad vēlaties dažādus elementus dažādās pozīcijās a lai iegūtu līdzīgu stilu, kas atšķiras no vispārējā stila, kas tiek piemērots visai tīmekļa lapai. Šādos gadījumos būs noderīgi zināt, kā izmantot vairākus atlasītājus.

Pamata HTML veidnes piemērs

Laipni lūdzam

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Apgrūtināta vēlēšanās
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempra voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Par

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Apgrūtināta vēlēšanās
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempra voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Nosaukums

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minimales, magni un iusto id vajadzība pēc harum ratione, ipsum doloremque deleniti ex eligendi
kavē maksimālo laiku? Eius modi optio ad, nisi tempora sapiente?







Nosaukums

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minimales, magni un iusto id vajadzība pēc harum ratione, ipsum doloremque deleniti ex eligendi
kavē maksimālo laiku? Eius modi optio ad, nisi tempora sapiente?

Ja rūpīgi ieskatīsities iepriekš redzamajā HTML failā, redzēsit dinamiku, kas pastāv starp tām ID un klases. Atsaucoties uz iepriekš minēto failu, ja vēlaties izmantot to pašu stilu par sadaļu un rakstus tikai tīmekļa lapā, to veiks šāds CSS kods.

Vairāku atlasītāju izmantošana

#Par, .content {
krāsa: balta;
fona krāsa: tumši ciāna;
}

Ja izmantojat vairākus atlasītājus, tie vienmēr ir jāatdala, izmantojot komatu. Iepriekš minētajā piemērā ir divi selektori, an id un a klase. Ja komats, kas seko parid trūkst, CSS deklarācija netiks izpildīta.

Atgriežoties pie iepriekš minētā HTML veidnes pamata piemēra, ir divi tagi - viens sveiciena sadaļā un otrs sadaļā par. Ja jūsu mērķis ir atlasīt tikai vienu no šiem atzīmēm, ligzdotajam atlasītājam vajadzētu būt jūsu izvēlētajai metodei.

Ligzdotu atlasītāju piemēri

#Welcome p span {
krāsa: sarkana;
}

Iepriekš izvietotajā ligzdotajā atlasītājā ir id un divi HTML elementi. Kā redzams iepriekš minētajā piemērā, ligzdotais atlasītājs nodrošina iespēju atlasīt mērķauditoriju pēc konkrēta grupas elementa.

Tāpēc tikai laidums sadaļā sadaļā atzīme div Ar laipni lūdzam id tiks pārklāti sarkanā krāsā.

Neatkarīgi no tā, vai izmantojat stila valodu, piemēram, CSS, vai programmēšanas valodu, jums noteikti vajadzētu zināt, kā rakstīt komentāru. Komentāri ir būtiski uzņēmuma līmeņa projektos, kuros strādā vairāki izstrādātāji, un tie ir noderīgi arī neliela mēroga izstrādē.

CSS komentārā ir divas slīpsvītras uz priekšu, divas zvaigznītes un komentāru sadaļa.

/ * Šādi jūs rakstāt vienas rindas komentāru CSS */

/*
Tā jūs rakstāt
daudzrindu komentārs
CSS
*/

Ko tālāk?

Šajā rakstā ir sniegti CSS pamatkomponenti. Tagad varat izmantot identifikatoru:

• Jebkura no trim CSS ieviešanas metodēm
• Visi CSS deklarācijas elementi
• Trīs galvenie atlasītāju veidi
• CSS komentārs

Tomēr tas ir tikai sākums. CSS ir vairāki ietvari, kas palīdzēs jums labāk izprast valodu. Vienīgais izaicinājums ir izlemt, kurš no tiem ir labākais jums.

Aizvēja CSS vs. Bootstrap: kurš ir labāks ietvars?

Izvēloties CSS ietvaru, ir svarīgi atrast to, kas atbilst jūsu prasībām.

Lasīt Tālāk

Par autoru