Santrumpa CSS reiškia „kaskadiniai stiliaus lapai“. CSS naudojamas stilizuoti svetaines ir programas, naudojamas visuose įrenginiuose. Stiliaus lapas dažniausiai naudojamas kartu su HTML ir priekine programavimo kalba, pvz., „JavaScript“.

CSS gali būti įgyvendinamas vienu iš trijų būdų - įterpiamas, vidinis arba išorinis. Nors išorinis CSS yra rekomenduojamas metodas, yra atvejų, kai du likę įgyvendinimo būdai gali būti praktiškesni.

Šiame mokymo straipsnyje sužinosite visus CSS pagrindus, kad galėtumėte pradėti kurti programas šiandien.

Kada naudoti skirtingus CSS diegimo metodus?

Įterptas CSS yra idealus diegimo metodas, kai ketinama tinklalapyje įtraukti tik vieną ar dvi stiliaus nuostatas kartu su keliais kitais nišiniais atvejais. Įtrauktas CSS metodas naudoja stilius raktinį žodį kartu su CSS ypatybe, kad būtų pasiektas konkretus rezultatas.

Jei ketinate pakeisti vienos antraštės spalvą į raudoną, tinkamas CSS gali būti geras pasirinkimas. Nišinis atvejis, kaip minėta aukščiau, būtų kuriant HTML maketus, daugiausia sudarytus iš lentelių (pasenusi praktika).

Inline CSS pavyzdys

Pagrindinė antraštė

Aukščiau esančioje kodo eilutėje bus rodomas raudonos spalvos tekstas „Pagrindinė antraštė“. Tai greičiausiai yra viena iš vienintelių praktinių priežasčių, kodėl reikia naudoti įterptąjį CSS, nes paprastai yra tik viena h1 elementą tam tikrame tinklalapyje.

Jei ketinate viską padengti h2 elementai tinklalapyje su geltona spalva. Turėsite naudoti CSS stilius raktinį žodį kartu su spalva savybė ir jos vertė (geltona) kiekviename elemente. Tačiau efektyvesnis šios užduoties atlikimo būdas yra vidinės CSS naudojimas.

Naudojant vidinį CSS pavyzdį

Įdėkite kodą aukščiau HTML failo žyma užtikrins, kad visi h2 to failo elementai yra padengti geltona spalva. Vidinis CSS yra atskirtas nuo HTML kodo, todėl metodas tampa efektyvesnis, nes palengvina taikymą pagal įvairias elementų grupes.

Taigi kodėl išorinis CSS diegimo metodas vis dar yra labiausiai rekomenduojamas metodas? Susirūpinimo atskyrimas. Naudojant išorinį CSS, jūsų CSS kodas yra visiškai atskirtas nuo jūsų HTML kodo, o tai užtikrina didelių projektų mastelio keitimą ir daro bandymo procesą efektyvesnį.

Išorinio CSS pavyzdys

Įdėkite aukščiau esančią kodo eilutę į HTML failo žyma palengvins jūsų tinklalapio formavimą naudojant išorinį CSS metodą. Vienintelis pasikeitęs kodo aspektas yra reikšmė, priskirta href nuosavybė, kuri visada turėtų būti CSS failo pavadinimas (įskaitant .css plėtinį).

Susijęs: Kas yra pakopinio stiliaus lapai ir kam naudojamas CSS? Kai jūsų CSS failas yra susietas su jūsų HTML dokumentu, dabar galite pradėti rašyti CSS kodą į savo CSS failą. Šiuo metu vienintelis skirtumas tarp aukščiau pateikto vidinio CSS pavyzdžio ir išorinio CSS yra stilius žyma. Todėl įterpę šį kodą į CSS failą gausite tą patį rezultatą, kaip ir aukščiau pateiktame vidiniame CSS pavyzdyje.

h2 {
spalva: geltona;
}

Pagrindinės CSS struktūros tyrimas

Kaip matyti iš toliau pateikto pavyzdžio, pagrindinėje CSS deklaracijoje yra septyni esminiai elementai. Visi jie dirba kartu, kad pasiektų tam tikrą stiliaus nuostatų rinkinį.

Rinkiklis

CSS deklaracijoje selektorius gali būti arba id, a klasė, elementas arba kai kuriais ypatingais atvejais-pseudo parinkiklis. CSS struktūroje aukščiau a elementas naudojamas kaip parinkiklis, o tai reiškia, kad visos tinklalapio nuorodos bus padengtos raudonai. Iš esmės selektoriaus tikslas yra nustatyti elementą (-us), kuris (-iai) turėtų būti stilizuotas.

Deklaracijos pradžia ir pabaiga

Deklaracijos pradžia ir pabaiga yra svarbios, nes jose pateikiamos visos stiliaus parinktys, taikomos konkrečiam parinkikliui. Abu elementai pavaizduoti pora atvirų ir uždarų garbanotų petnešų. Geras būdas nepamiršti naudoti deklaracijos pradžios ar deklaracijos pabaigos yra prisiminti, kad jei turite atvirą garbanotą petnešą, turi būti atitinkama uždara garbanota petnešėlė ir atvirkščiai.

Nuosavybė

CSS nuosavybė deklaravimo struktūroje gali būti bet kuri iš daugiau nei šimto skirtingų nuosavybės tipų. Nuosavybės tipas, naudojamas aukščiau esančioje CSS struktūroje, yra spalva ir ši nuosavybė taikoma pagal tekstą tinklalapyje. Jei norite sužinoti daugiau, peržiūrėkite mūsų išsamų CSS savybių sąrašą ir jų naudojimą.

Turto/vertės atskyrėjas

Nors tai gali atrodyti mažas ir nereikšmingas, nuosavybės ir vertės atskyrėjas yra toks pat svarbus kaip ir visi kiti CSS struktūros elementai. Jei kada nors bus pamirštas šis elementas, visa CSS deklaracija nebus vykdoma.

Vertė

CSS ypatybės vertė atitinka tikslų stilių, kurį norite taikyti konkrečiai nuosavybei. Galimos naudoti vertės priklauso nuo nuosavybės tipo. Pavyzdžiui, nuosavybė, naudojama aukščiau esančioje struktūroje, yra spalva, o tai reiškia, kad šiai ypatybei galima taikyti tik vieno tipo vertę - spalvos pavadinimą. A spalva reikšmę galima pateikti viena iš keturių formų: žodžio reikšmė (kaip aukščiau pateiktame pavyzdyje), šešioliktainė reikšmė, HSL (atspalvio, sodrumo, šviesumo) reikšmė arba RGB (raudona, žalia, mėlyna) reikšmė.

Deklaracijos atskyrėjas

Deklaracijų skyriklis nurodo, kad esate konkrečios stiliaus deklaracijos pabaigoje. Aukščiau esančioje struktūroje yra tik vienas deklaracijos atskyriklis, tačiau gali būti ir daugiau. Viskas priklauso nuo to, kiek CSS ypatybių ketinate naudoti konkrečiai klasė, id, arba elementas.

Kas yra ID ir klasės?

ID ir klasės vaidina pagrindinį vaidmenį CSS formavimo procese. Kaip ir HTML elementai, CSS ID ir klasės naudojami kaip selektoriai CSS deklaracijoje. Tačiau, klasės ir ID turi viršenybę prieš HTML elementą.

Bendra CSS taisyklė yra ta, kad paskutinė stiliaus deklaracija, kurią pridedate prie failo, pakeis anksčiau pateiktas stiliaus deklaracijas. Todėl, jei yra dvi deklaracijos su an h2 selektorių CSS faile, paskutinė pridėta deklaracija viršija tas, kurios buvo anksčiau.

Tačiau, jei šis h2 elementas turi id kuris naudojamas kaip selektorius CSS deklaracijoje, nepriklausomai nuo jo padėties (prieš arba po) CSS deklaracijoje, kurioje yra h2 elementą kaip jo parinkiklį, stiliaus parinktį id deklaracija visada bus viršesnė už elementą. Trumpai tariant, an id nepaisys kitų stiliaus parinkėjų.

Svarbu prisiminti, kad CSS deklaracijoje ID prasideda skaičiaus ženklu, o pamokos prasideda tašku. Reikšmingiausias skirtumas tarp id ir a klasė ar tai an id yra unikalus, o a klasė galima dubliuoti. Pavyzdžiui, panašių kolekcija žymėms galima suteikti tą patį klasė vardas; tačiau, id kiekvieno žyma turi būti unikali.

Įvairių tipų selektorių tyrimas

Yra trys pagrindiniai selektorių tipai - vienas, dauginis ir įdėtas. Iki šiol šis straipsnis plačiai apėmė atskirus selektorius.

Naudojant CSS, bus atvejų, kai norėsite skirtingų elementų skirtingose ​​pozicijose tinklalapis turi panašų stilių, kuris skiriasi nuo bendro stiliaus, taikomo visam tinklalapiui. Tokiais atvejais bus naudinga žinoti, kaip naudoti kelis selektorius.

Pagrindinio HTML šablono pavyzdys

Sveiki

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunkiai veikia
dignissimos voluptatibus tenetur.  Atsisakymas, animi corporis!  Architecto
tempora voluptates nulla officia vieta quisquam facere at! Quod dolore doloribus eos!







Apie

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunkiai veikia
dignissimos voluptatibus tenetur.  Atsisakymas, animi corporis!  Architecto
tempora voluptates nulla officia vieta quisquam facere at! Quod dolore doloribus eos!







Pavadinimas

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 yra tenetur corrupti
mollitia, minimumas, magni ir iusto id vajadus harum ratione, ipsum doloremque deleniti ex eligendi
trukdo hic maxime? Eius modi optio ad, nisi tempora sapiente?







Pavadinimas

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 yra tenetur corrupti
mollitia, minimumas, magni ir iusto id vajadus harum ratione, ipsum doloremque deleniti ex eligendi
trukdo hic maxime? Eius modi optio ad, nisi tempora sapiente?

Jei atidžiai pažvelgsite į aukščiau esantį HTML failą, pamatysite dinamiką, egzistuojančią tarp jų ID ir klasės. Remdamiesi aukščiau esančiu failu, jei norite pritaikyti tą patį stilių apie skyriuje ir tik tinklalapio straipsniuose, tai padarys šis CSS kodas.

Kelių selektorių naudojimo pavyzdys

#Apie, .content {
spalva: balta;
fono spalva: tamsiai mėlyna;
}

Jei naudojate kelis selektorius, kiekvieną selektorių visada turėtumėte atskirti kableliu. Aukščiau pateiktame pavyzdyje yra du selektoriai, an id ir a klasė. Jei kablelis, einantis po apieid trūksta, CSS deklaracija nebus vykdoma.

Grįžtant prie aukščiau pateikto pagrindinio HTML šablono pavyzdžio, yra du žymės - viena sveikinimo skiltyje, kita - skiltyje „Apie“. Jei jūsų tikslas yra nukreipti tik į vieną iš jų žymes, įterptas parinkiklis turėtų būti jūsų pagrindinis metodas.

Įdėtų selektorių pavyzdžiai

#Sveiki atvykę p span {
spalva: raudona;
}

Aukščiau esančiame įdėtame parinkiklyje yra id ir du HTML elementai. Kaip matote iš aukščiau pateikto pavyzdžio, įdėtas selektorius suteikia galimybę taikyti pagal konkretų grupės elementą.

Todėl tik span skyriuje žyma div su sveikintinas id bus padengta raudona spalva.

Nesvarbu, ar naudojate stiliaus kalbą, pvz., CSS, ar programavimo kalbą, jūs tikrai turėtumėte žinoti, kaip parašyti komentarą. Komentarai yra būtini įmonės lygmens projektuose, kuriuose dirba keli kūrėjai, taip pat naudinga vykdant nedidelio masto kūrimą.

CSS komentare yra du pasvirieji brūkšniai, dvi žvaigždutės ir komentarų skiltis.

/ * Taip CSS rašote vienos eilutės komentarą */

/*
Štai kaip jūs rašote
kelių eilučių komentaras
CSS
*/

Kas toliau?

Šiame straipsnyje pateikiami pagrindiniai CSS komponentai. Dabar galite naudoti identifikatorių:

• Bet kuris iš trijų CSS diegimo būdų
• Visi CSS deklaracijos elementai
• Trys pagrindiniai selektorių tipai
• CSS komentaras

Vis dėlto tai tik pradžia. CSS turi keletą sistemų, kurios padės geriau suprasti kalbą. Vienintelis iššūkis yra nuspręsti, kuris iš jų yra geriausias jums.

„Tailwind CSS“ vs. „Bootstrap“: kuri yra geresnė sistema?

Renkantis CSS sistemą svarbu rasti tą, kuri atitinka jūsų reikalavimus.

Skaityti toliau

Apie autorių