CSS Kommentti Esimerkki – Miten Kommentoida CSS

Kommentteja on käytetty CSS selittää lohkon koodi tai tehdä väliaikaisia muutoksia kehityksen aikana. Kommentoitu koodi ei toimi.

– Sekä single ja multi-line kommentteja CSS alkaa /* ja päättyy */, ja voit lisätä niin monta kommentteja tyylitiedoston kuin haluat. Esimerkiksi:

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

Voit myös tehdä teidän kommentteja enemmän luettavissa stylizing heitä:

suurempia hankkeita, CSS-tiedostoja voi nopeasti kasvaa kokoa ja tulla vaikea ylläpitää., Se voi olla hyödyllistä järjestää CSS osaksi erillistä osaa, jossa on sisällysluettelo, jotta se on helpompi löytää tiettyjä sääntöjä tulevaisuudessa:

hieman lisää CSS: CSS Syntaksi ja Valitsimet

Kun puhumme syntaksi CSS, me puhumme siitä, miten asiat on aseteltu. On olemassa sääntöjä siitä, mitä tapahtuu, missä, niin voit kirjoittaa CSS johdonmukaisesti ja ohjelma (kuten selain) voi tulkita sitä ja soveltaa sitä sivun oikein.

CSS: n kirjoittamiseen on kaksi päätapaa.,

Inline CSS

Yksityiskohtia CSS Spesifisyys: CSS Temppuja,

Inline CSS koskee muotoilu yhden elementin ja sen lapset, kunnes toinen tyyli ensisijainen ensimmäinen on kohdannut.

Jos haluat soveltaa inline CSS: ää, lisää ”style” – attribuutti HTML-elementtiin, jota haluat muokata. Sisällä lainausmerkkejä, sisällyttää puolipisteellä rajattu luettelo avain / arvo paria (kukin vuorollaan erotettu kaksoispiste) osoittaa tyylejä asettaa.

Here ’ s an example of inline CSS. Sanojen ”yksi” ja ”kaksi” taustaväri on keltainen ja tekstin väri punainen., Sana ”Kolme” on uusi tyyli, joka korvaa ensimmäisen, ja on taustan väri vihreä ja tekstin väri syaani. Esimerkissä sovellamme tyylejä <div> tageihin, mutta voit soveltaa tyyliä mihin tahansa HTML-elementtiin.

<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>

Sisäinen CSS

Kun kirjoitat inline tyyli on nopea tapa muuttaa yhden elementin, siellä on enemmän tehokas tapa soveltaa samaan tyyliin monia elementtejä sivun kerralla.,

sisäinen CSS on sen tyylit määritelty <style> – tagin, ja se on upotettu <head> – tagin.

Tässä on esimerkki, joka on samanlainen vaikutus kuin ”inline” esimerkki edellä, paitsi CSS on erotettu oma alue. Sanat ”Yksi” ja ”Kaksi” täsmää div valitsinta ja punaista tekstiä keltaisella pohjalla., Sanat ”Kolme” ja ”Neljä” täsmää div valitsin liian, mutta he myös vastaavat .nested_div valitsin, joka koskee mitä tahansa HTML-elementti, joka viittaa, että luokan. Tämä tarkempi valitsin ohittaa ensimmäisen, ja ne päätyvät näkyviin syaanitekstinä vihreällä pohjalla.

yllä esitetyt valitsimet ovat äärimmäisen yksinkertaisia, mutta niistä voi tulla varsin monimutkaisia. Esimerkiksi, on mahdollista soveltaa tyylejä vain sisäkkäisiä elementtejä; se on elementti, joka on lapsen toinen elementti.,

Tässä on esimerkki, jossa olemme määritellään tyyli, että pitäisi vain sovellettava div elementit, jotka ovat suoraan lapsen muita div elementit. Tuloksena on, että ”Kaksi” ja ”Kolme” näkyy punainen teksti keltaisella pohjalla, mutta ”Yksi” ja ”Neljä” pysyy ennallaan (ja todennäköisesti musta teksti valkoisella taustalla).

<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>

Ulkoinen CSS

muotoilu on oma dokumentti, johon on linkitetty <head> – tagin. Linkitetyn Tiedoston laajennus on .css

Share

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *