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 divvalijaga ja on kollasel taustal punase tekstina. Sõnad "Kolm" ja "Neli" sobivad ka divvalijaga, kuid sobivad ka .nested_divvalijaga, 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 divelementidele, mis on otseselt teiste divelementide 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
