CSS-kommenttiesimerkki - kuinka kommentoida CSS: ää

Kommentteja käytetään CSS: ssä selittämään koodilohko tai tekemään väliaikaisia ​​muutoksia kehityksen aikana. Kommentoitua koodia ei suoriteta.

Sekä yhden että moniriviset kommentit CSS: ssä alkavat /*ja päättyvät */, ja voit lisätä tyylitaulukkoon niin monta kommenttia 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ä kommenttisi helpommin luettavaksi tyylittelemällä ne:

/* *** * 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: n järjestäminen kommenteilla

Suuremmissa projekteissa CSS-tiedostojen koko voi kasvaa nopeasti ja niistä voi olla vaikea huoltaa. Voi olla hyödyllistä järjestää CSS erillisiin osioihin sisällysluettelolla, jotta tiettyjen sääntöjen löytäminen on helpompaa tulevaisuudessa:

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

Hieman lisää CSS: stä: CSS-syntaksista ja valitsimista

Kun puhumme CSS: n syntaksista, puhumme siitä, miten asiat on järjestetty. On sääntöjä siitä, mihin mennään, joten voit kirjoittaa CSS: ää johdonmukaisesti, ja ohjelma (kuten selain) voi tulkita sen ja soveltaa sitä sivulle oikein.

CSS: n kirjoittamiseen on kaksi päätapaa.

Sisäinen CSS

CSS-spesifisyyden yksityiskohdat: CSS-temput

Inline CSS käyttää tyyliä yksittäiseen elementtiin ja sen lapsiin, kunnes kohtaat toisen tyylin, joka ohittaa ensimmäisen.

Jos haluat käyttää sisäistä CSS: ää, lisää "style" -attribuutti HTML-elementtiin, jota haluat muokata. Sisällytä lainausmerkkeihin puolipisteillä erotettu luettelo avain / arvo-pareista (kukin puolestaan ​​erotettu kaksoispisteellä), jotka osoittavat asetettavat tyylit.

Tässä on esimerkki sisäisestä CSS: stä. Sanojen "Yksi" ja "Kaksi" taustaväri on keltainen ja tekstin väri punainen. Sanalla "Kolme" on uusi tyyli, joka ohittaa ensimmäisen, ja sen taustaväri on vihreä ja tekstin väri syaani. Tässä esimerkissä käytämme tyylejä tunnisteisiin, mutta voit käyttää tyyliä mihin tahansa HTML-elementtiin.

 One Two Three 

Sisäinen CSS

Vaikka sisäisen tyylin kirjoittaminen on nopea tapa muuttaa yksittäistä elementtiä, on tehokkaampi tapa soveltaa samaa tyyliä moniin sivun elementteihin kerralla.

Sisäisen CSS: n tyylit on määritetty tagissa, ja se on upotettu tagiin.

Tässä on esimerkki, jolla on samanlainen vaikutus kuin yllä olevalla ”inline” -esimerkillä, paitsi että CSS on purettu omalle alueelleen. Sanat "Yksi" ja "Kaksi" vastaavat divvalitsinta ja ovat punaisella tekstillä keltaisella pohjalla. Sanat "Kolme" ja "Neljä" sopivat myös divvalitsimeen, mutta ne sopivat myös .nested_divvalitsimeen, joka koskee kaikkia kyseiseen luokkaan viittaavia HTML-elementtejä. Tämä tarkempi valitsin ohittaa ensimmäisen ja ne näkyvät syaanina tekstinä vihreällä taustalla.

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

Edellä esitetyt valitsimet ovat erittäin yksinkertaisia, mutta ne voivat olla melko monimutkaisia. Esimerkiksi tyylejä on mahdollista käyttää vain sisäkkäisiin elementteihin; eli elementti, joka on toisen elementin lapsi.

Tässä on esimerkki, jossa määritämme tyylin, jota tulisi käyttää vain divelementteihin, jotka ovat muiden divelementtien suora lapsi . Tuloksena on, että "Kaksi" ja "Kolme" näkyvät punaisena tekstinä keltaisella pohjalla, mutta "Yksi" ja "Neljä" eivät muutu (ja todennäköisesti musta teksti valkoisella taustalla).

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

Ulkoinen CSS

Kaikilla tyylillä on oma asiakirja, joka on linkitetty tagiin. Linkitetyn tiedoston laajennus on.css