CSSi kommentaaride näide - kuidas CSS-i kommenteerida
Kommentaare kasutatakse CSS-is koodiploki selgitamiseks või ajutiste muudatuste tegemiseks arenduse käigus. Kommenteeritud koodi ei käivitata.
Nii ühe- kui ka mitmerealised kommentaarid CSS-is algavad /*
ja lõpevad tähega */
ning saate oma stiililehele lisada nii palju kommentaare, kui soovite. Näiteks:
/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */
Samuti saate oma kommentaarid loetavamaks muuta, stiliseerides neid:
/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */
CSS-i korraldamine koos kommentaaridega
Suuremates projektides võivad CSS-failid kiiresti kasvada ja nende hooldamine võib olla keeruline. Abiks võib olla CSS-i korraldamine eraldi sisukorraga osadeks, et tulevikus oleks lihtsam teatud reegleid leida:
/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/
Natuke veel CSS-ist : CSS-i süntaks ja valijad
Kui räägime CSS-i süntaksist, räägime sellest, kuidas asjad on paigutatud. Seal on reeglid selle kohta, mis kuhu läheb, nii et saate CSS-i järjepidevalt kirjutada ja programm (nagu brauser) suudab seda tõlgendada ja lehele õigesti rakendada.
CSS-i kirjutamiseks on kaks peamist viisi.
Reas CSS
CSS-i spetsiifika eripära: CSS-i trikid
Reasisene CSS rakendab stiili üksikule elemendile ja selle lastele, kuni satub mõni teine, mis ületab esimese.
Sisemise CSS-i rakendamiseks lisage HTML-elemendile, mida soovite muuta, atribuut “style”. Jutumärkidesse lisage semikooloniga eraldatud loend võtme- ja väärtuspaaridest (millest igaüks on omakorda eraldatud kooloniga), mis näitab paika seatavaid stiile.
Siin on näide sisemisest CSS-ist. Sõnade „Üks” ja „Kaks” taustavärv on kollane ja teksti värv punane. Sõnal „Kolm” on uus stiil, mis alistab esimese, selle taustavärv on roheline ja teksti värv on tsüaan. Selles näites rakendame stiilidele silte, kuid saate stiili rakendada mis tahes HTML-elemendile.
One Two Three
Sisemine CSS
Kui tekstisisese stiili kirjutamine on kiire viis ühe elemendi muutmiseks, on tõhusam viis sama stiili rakendamine lehe paljudele elementidele korraga.
Sisemise CSS-i stiilid on märgendis täpsustatud ja see on
sildile manustatud .
Siin on näide, millel on sarnane mõju ülaltoodud "inline" näitega, välja arvatud see, et CSS on välja tõmmatud oma alale. Sõnad "Üks" ja "Kaks" sobivad div
valijaga ja on kollasel taustal punase tekstina. Sõnad "Kolm" ja "Neli" sobivad ka div
valijaga, kuid sobivad ka .nested_div
valijaga, mis kehtib kõigile HTML-elementidele, mis sellele klassile viitavad. See spetsiifilisem valija tühistab esimese ja lõpuks ilmuvad need rohelise taustaga tsüaantekstina.
div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four
Eespool näidatud selektorid on äärmiselt lihtsad, kuid võivad muutuda üsna keerukaks. Näiteks saab stiile rakendada ainult pesastatud elementidele; see tähendab element, mis on teise elemendi laps.
Siin on näide, kus määratleme stiili, mida tuleks rakendada ainult div
elementidele, mis on otseselt teiste div
elementide laps . Tulemuseks on see, et “Kaks” ja “Kolm” ilmuvad punase tekstina kollasel taustal, kuid “Üks” ja “Neli” jäävad muutmata (ja tõenäoliselt must tekst valgel taustal).
div > div { color: red; background: yellow; } One Two Three Four
Väline CSS
Kõigil stiilidel on oma dokument, mis on märgendis lingitud . Lingitud faili laiendus on
.css