CSS -täyte mahdollistaa HTML -kooderin asettaa oletuspehmusteen tai tyhjän tilan HTML -elementin ulkopuolelle. Tästä on se hyöty, että se säästää kooderia toistamasta täyttökoodia kyseisen elementin jokaiselle esiintymälle ja luo helpommin yhdenmukaisuuden sivulla. Pehmustettu HTML -elementti voi olla mitä tahansa, kuten kappale, taulukko tai otsikko.
Jos haluat luoda täydennyksen CSS: ssä, sinun on ensin tunnistettava täytettävä HTML -elementti. Tämä elementti, jonka haluat pehmittää, tunnetaan valitsimena. Sitten sinun on määritettävä sopivat täytearvot. CSS: ssä on viisi erityyppistä pehmusteominaisuutta – yksi elementin kaikille neljälle puolelle kerralla ja neljä muuta elementin kullekin puolelle (esim. Vasen, oikea, ylä- tai alapuoli) ). Ominaisuutta, jonka avulla ohjelmoija voi määrittää arvot HTML -elementin kaikille neljälle puolelle kerralla, kutsutaan lyhenneominaisuudeksi.
Koodikieli, jota käytetään yhden CSS -täyteilmoituksen määrittämiseen, on yksinkertaisesti sana “täyte”. Merkinnän jälkeen ovat pehmusteen asiaankuuluvat “arvot” tai tiedot halutusta tilan määrästä, yleensä joko pikseleinä tai prosentteina. Pehmuste ja arvot on kirjoitettu kihara- tai hakasulkeisiin (eli ”{” ja “}”). Edellä oleva on pehmustettava HTML -elementti (esim. ”P” kappaleessa tai “H2” tason 2 otsikoissa).
Arvon esittämisen kannalta arvot voidaan esittää pikseleinä (esim. 1px tai 5px), pisteinä (esim. 1pt tai 5pt) tai tuumina (esim. 1in tai 5in) tai senttimetreinä (esim. 1 cm tai 5 cm) . Arvot voidaan myös ilmoittaa prosentteina tyylittävän HTML -elementin määrästä. Jos arvo on esimerkiksi 50%, pehmuste on puolet elementin koosta.
Seuraavat esimerkit ovat HTML -koodi HTML -elementin täyttöä varten prosentteina ja pituuksina ilmaistuina arvoina. Jos vain yksi arvo on määritetty, selaimet määrittävät tämän täytteen HTML -elementin kaikille neljälle puolelle.
pehmuste: 10%;
täyte: 100px;
Lisäämällä arvoja yllä olevaan täyttöilmoitustyyppiin verkkoselaimet tulkitsevat ne tietyllä tavalla. Jos määritetään kaksi arvoa, ensimmäinen vastaa ylä- ja alaosaa ja toinen vasenta ja oikeaa. Kolme arvoa saa ensimmäisen viittaamaan yläosaan, toinen vasemmalle ja oikealle puolelle ja kolmas HTML -elementin alareunaan. Kun määrität enintään neljä arvoa, ensimmäinen, toinen, kolmas ja neljäs arvo vastaavat HTML -elementin ylä-, oikeaa, ala- ja vasenta puolta tässä järjestyksessä. Jos annetaan useita arvoja, ne on erotettava välilyönneillä ja päätettävä puolipisteeseen, esimerkiksi:
pehmuste: 10px 20px 10px 20px;
Pehmuste CSS: ssä voidaan tehdä myös yhdeltä puolelta kerrallaan. Tältä osin saatavilla on vielä neljä pehmusteominaisuutta. Nämä ovat toppaus ylhäällä, täyte oikealla, pehmuste alhaalla ja täyte vasemmalla. Jos haluat luoda täydennyksen CSS: ssä tällä tarkemmin, sinun on varustettava ominaisuudet samalla syntaksilla kuin edellä kuvatut pikanäppäimet. Jokainen näistä pehmustusominaisuuksista saa vain yhden arvon joko pituuden tai prosenttiosuuden mukaan. Esimerkiksi:
padding-top: 10px;
pehmustus oikea: 20px;
padding-bottom: 10px;
padding-left: 20px;
Seuraava koodi luo verkkosivun, ilmoittaa täyteominaisuudet tyylitunnisteiden välillä ja käyttää niitä sitten p -tagin määrittämässä kappale -elementissä. / *: N ja * /: n välinen teksti on huomautuksia käytetyn pehmusteen tyypistä, eikä se sisälly CSS -täytekoodiin.
Tässä tekstissä on sama pehmuste kummallakin puolella. Pehmuste kummallakin puolella on 10 kuvapistettä.
Tämän tekstin ylä- ja alapehmuste on 50 pikseliä ja vasen ja oikea pehmuste 30 pikseliä.
Tämän tekstin yläpehmuste on 10 kuvapistettä, oikea pehmuste 20 pikseliä, alapehmuste 10 pikseliä ja vasen täyttö 20 pikseliä.
Yllä olevassa esimerkissä “esimerkki1” jne. Ovat luokalle määritettyjä nimiä, joihin viitataan sitten kappaleissa. Kausi p -tagin ja luokan nimien välillä koodin alussa osoittaa kappaleelle määritetyn luokan ilmoituksen. Huomaa olkaimet luokkailmoituksen jälkeen, joka sisältää pehmusteominaisuuden arvomääritykset.
Vaikka tämä saattaa tuntua paljon työtä, se on paljon vähemmän työvoimavaltaista kuin täydennyksen määrittäminen jokaiselle yksittäiselle kappaleelle. Voit ilmoittaa halutulle elementille yhden täyttöominaisuuden, joka yllä olevassa esimerkissä on p -tagi, ja viitata sitten luokkaan, kun käytät elementtiä sivun body -tunnisteiden välissä. Jos kaikkiin kappaleisiin tarvitaan vain yksi täyte, sinun ei tarvitse käyttää luokkia lainkaan. Käytä vain seuraavaa koodia tyylitunnisteiden välissä ja koodaa sitten kappaleet määrittämättä luokkaa. Tämä koodi siirtyy body -tunnisteiden välille yllä olevan esimerkin koodin sijaan.
p {täyte: 10px 20px 10px 20px;}
Tämä luoma CSS -täyttö vaikuttaisi kaikkiin kappaleisiin, vaikka luokkaa ei olisi määritetty.