Lugege altpoolt täielikku selgitust kaskaadlaaditabelite toimimise kohta. Kuvame oma rakendused lehe ülaosas, et neid oleks lihtne leida ja kasutada. Kui loete seda artiklit e-posti või voo kaudu, klõpsake lingil tihendab oma CSS-i.
Kui te tegelikult saite ei arenda, ei pruugi te kaskaadlaaditabelitest täielikult aru saada (CSS). CSS on stiilitabeli keel, mida kasutatakse kirjutatud dokumendi välimuse ja vormingu kirjeldamiseks HTML or XML. CSS-i saab kasutada erinevate elementide stiilide määramiseks, nagu font, värv, vahed ja paigutus. CSS võimaldab teil eraldada HTML-dokumendi esitusviisi selle sisust, muutes veebisaidi visuaalse stiili hooldamise ja värskendamise lihtsamaks.
CSS-i keele struktuur
. valija on HTML-element, mida soovite stiilida, ja kinnisvara ja väärtus määrake stiilid, mida soovite sellele elemendile rakendada:
selector {
property: value;
}Näiteks järgmine CSS teeb kõik <h1> lehe elementidel on punane värv ja fondi suurus 32 pikslit:
CSS
h1 {
color: red;
font-size: 32px;
}Väljund
Rubriik
Samuti saate määrata elemendi kordumatu ID jaoks CSS-i:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}Väljund
Või rakendage klassi mitmel elemendil:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}Väljund
Ma tahan esile sõna ulatussildis.
CSS-i saate oma HTML-dokumenti lisada kolmel viisil.
- Tekstisisene CSS, kasutades
styleatribuut HTML-elemendil - Sisemine CSS, kasutades a
<style>elementi<head>teie HTML-dokumendist - Väline CSS, kasutades eraldi .css-faili, mis on lingitud teie HTML-dokumendile, kasutades
<link>elementi<head>teie HTML-dokumendist
Responsiivne CSS
CSS on uskumatult paindlik ja seda saab kasutada elementide kuvamise reguleerimiseks ekraani eraldusvõime alusel, nii et saate kasutada sama HTML-i, kuid seda ehitada tundlik seadme eraldusvõimele:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS-i tihendamine
Ülaltoodud näites näete, et seal on kommentaar, meediapäring ja mitu stiili, mis kasutavad CSS-i vaate korraldamiseks tühikuid ja reavahetusi. Suurepärane on oma saidi CSS-i minimeerimine või tihendamine, et vähendada faili suurust ja seejärel stiili taotlemiseks ja renderdamiseks kuluvat aega. See pole väike summa... mõne ülaltoodud näite puhul näete üle 50% säästu.
Paljud serverikonfiguratsioonid pakuvad tööriistu, mis tihendavad automaatselt CSS-i ja salvestavad minimeeritud faili vahemällu, nii et te ei peaks seda käsitsi tegema.
Mis on SCSS?
Sassy CSS (SCSS) on CSS-i eelprotsessor, mis lisab CSS-keelele täiendavaid funktsioone ja süntaksit. See laiendab CSS-i võimalusi, võimaldades kasutada muutujaid, segusid, funktsioone ja muid funktsioone, mis pole standardses CSS-is saadaval.
SCSS-i eelised
- Täiustatud hooldatavus: muutujate kasutamisega saate salvestada väärtusi ühte kohta ja kasutada neid kogu stiilitabeli jooksul, muutes stiilide hooldamise ja värskendamise lihtsamaks.
- Parem korraldus: mikseridega saate stiilikomplekte rühmitada ja uuesti kasutada, muutes oma stiilitabeli organiseeritumaks ja hõlpsamini loetavaks.
- Suurenenud funktsionaalsus: SCSS sisaldab paljusid funktsioone, mis pole standardses CSS-is saadaval, nagu funktsioonid, juhtimisstruktuurid (nt if/else) ja aritmeetilised toimingud. See võimaldab dünaamilisemat ja väljendusrikkamat stiili.
- Parem jõudlus: SCSS-failid kompileeritakse CSS-iks, mis võib jõudlust parandada, vähendades brauseris sõelutava koodi hulka.
SCSS-i puudused
- Õppimiskõver: SCSS-il on standardsest CSS-ist erinev süntaks ja enne selle tõhusat kasutamist peate selle uue süntaksi selgeks õppima.
- Täiendav keerukus: kuigi SCSS võib muuta teie laaditabeli organiseeritumaks ja hõlpsamini hooldatavaks, võib see ka teie koodibaasi keerukamaks muuta, eriti kui te pole uute funktsioonide ja süntaksiga tuttav.
- Tööriistad: SCSS-i kasutamiseks vajate kompilaatorit, mis tõlkib teie SCSS-koodi CSS-i. See nõuab täiendavat seadistust ja tööriistu, mis võib mõne arendaja jaoks takistada sisenemist.
Allolevas näites kasutab SCSS-kood väärtuste salvestamiseks muutujaid ($primary-color ja $font-size), mida saab kogu laaditabeli jooksul uuesti kasutada. Sellest SCSS-koodist genereeritud CSS-kood on samaväärne, kuid see ei sisalda muutujaid. Selle asemel kasutatakse muutujate väärtusi otse CSS-is.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}Teine selles näites näidatud SCSS-i funktsioon on pesastatud stiilid. SCSS-koodis on h1 stiilid on pesastatud body stiilid, mis pole tavalises CSS-is võimalikud. Kui SCSS-kood on kompileeritud, laiendatakse pesastatud stiilid CSS-koodis eraldi stiilideks.
Üldiselt pakub SCSS palju eeliseid standardse CSS-i ees, kuid oluline on kaaluda kompromisse ja valida oma projekti jaoks õige tööriist vastavalt teie vajadustele ja piirangutele.
seotud Martech Zone sisu
