CSS komentarų pavyzdys - kaip komentuoti CSS

Komentarai CSS naudojami kodo blokui paaiškinti arba laikiniems pakeitimams atlikti kūrimo metu. Komentuojamas kodas nevykdomas.

Tiek vienos, tiek kelių eilučių komentarai CSS prasideda /*ir baigiasi */, ir jūs galite pridėti tiek komentarų prie savo stiliaus lapo, kiek norite. Pavyzdžiui:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Taip pat galite padaryti komentarus lengviau skaitomus juos stilizuodami:

/* *** * 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 organizavimas su komentarais

Didesniuose projektuose CSS failai gali greitai išaugti ir tapti sunkiai prižiūrimi. Gali būti naudinga susisteminti CSS į atskirus skyrius su turiniu, kad ateityje būtų lengviau rasti tam tikras taisykles:

/* * 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 ***/

Šiek tiek daugiau apie CSS: CSS sintaksę ir parinkiklius

Kalbėdami apie CSS sintaksę kalbame apie tai, kaip viskas išdėstyta. Yra taisyklės, kas eina kur, todėl galite nuosekliai rašyti CSS, o programa (pvz., Naršyklė) gali ją interpretuoti ir tinkamai pritaikyti puslapyje.

Yra du pagrindiniai CSS rašymo būdai.

Įterpta CSS

CSS ypatumai: CSS gudrybės

„Inline CSS“ stilius taikomas vienam elementui ir jo vaikams, kol susiduriama su kitu stiliumi, viršijančiu pirmąjį.

Norėdami pritaikyti vidinį CSS, pridėkite atributą „style“ prie HTML elemento, kurį norite modifikuoti. Kabutėse įtraukite kabliataškiais atskirtą raktų / reikšmių porų sąrašą (kiekvienas savo ruožtu atskirtas dvitaškiu), nurodant nustatytinus stilius.

Pateikiame tiesioginio CSS pavyzdį. Žodžių „Vienas“ ir „Du“ fono spalva bus geltona, o teksto spalva - raudona. Žodis „Trys“ turi naują stilių, kuris pakeičia pirmąjį, o jo fono spalva bus žalia, o teksto spalva - žydra. Šiame pavyzdyje žymėms taikome stilius , tačiau stilių galite pritaikyti bet kuriam HTML elementui.

 One Two Three 

Vidinis CSS

Nors tiesioginio stiliaus rašymas yra greitas būdas pakeisti vieną elementą, yra efektyvesnis būdas tą patį stilių pritaikyti daugeliui puslapio elementų vienu metu.

Vidiniame CSS stiliai nurodyti žymoje ir jis yra įterptas į žymą.

Pateikiame pavyzdį, kuris turi panašų poveikį, kaip aukščiau pateiktas „įterptasis“ pavyzdys, išskyrus tai, kad CSS buvo ištrauktas į savo sritį. Žodžiai „Vienas“ ir „Du“ atitiks divparinkiklį ir bus raudonas tekstas geltoname fone. Žodžiai „Trys“ ir „Keturi“ taip pat atitiks divpasirinkiklį, tačiau jie taip pat sutiks su .nested_divparinkikliu, taikomu bet kuriam HTML elementui, nurodančiam tą klasę. Šis konkretesnis selektorius pakeičia pirmąjį ir galiausiai jie pasirodo kaip žalsvai mėlynas tekstas žaliame fone.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Aukščiau parodyti selektoriai yra labai paprasti, tačiau jie gali būti gana sudėtingi. Pvz., Stilius galima taikyti tik įdėtiems elementams; tai yra elementas, kuris yra kito elemento vaikas.

Štai pavyzdys, kuriame mes nurodome stilių, kuris turėtų būti taikomas tik tiems divelementams, kurie yra tiesioginis kitų divelementų vaikas . Rezultatas yra tas, kad „Du“ ir „Trys“ bus rodomi raudonu tekstu geltoname fone, tačiau „Vienas“ ir „Keturi“ liks nepaveikti (ir greičiausiai juodas tekstas baltame fone).

 div > div { color: red; background: yellow; } One Two Three Four 

Išorinė CSS

Visas stilius turi savo dokumentą, kuris yra susietas žymoje. Susieto failo plėtinys yra.css