Kuinka voin asettaa CSS-reunuksen vain yhdelle puolelle?

Kuinka Voin Asettaa Css Reunuksen Vain Yhdelle Puolelle



Kehittäjät voivat käyttää useita CSS-ominaisuuksia tehdäkseen verkkosivuistaan ​​houkuttelevampia, kuten ' korkeus ' ja ' leveys ' koon asettamisen ominaisuudet, ' tekstin tasaus ' tekstin säätämiseen', ' rajatyyliin ' ja ' raja-säde ”-ominaisuudet elementin ympärille reunuksen asettamiseen. Lisäksi voit lisätä reunuksen tarpeidesi mukaan, esimerkiksi elementin toiselle puolelle, jotta esineiden takana olevat asiat näkyvät paremmin.

Tämä viesti osoittaa:







Tapa 1: Aseta reuna yhdelle puolelle

CSS:ssä käyttäjät voivat asettaa reunuksen halutun elementin toiselle puolelle. Tätä tarkoitusta varten ' raja-vasen ”, “ raja-oikea ”, “ reuna-yläosa ' ja ' raja-ala ”-ominaisuuksia käytetään reunusten lisäämiseen vasemmalle, oikealle, ylä- tai alapuolelle.



Tässä osiossa asetamme erityisesti reunuksen säiliön vasemmalle puolelle. Voit tehdä sen noudattamalla alla olevia ohjeita.



Vaihe 1: Luo div-säilö





Luo ensin div-säilö ''

' -tunniste. Lisää ' id ” attribuutti ja anna tunnukselle nimi.

Vaihe 2: Lisää otsikko



Käytä seuraavaksi '< h1> ” -tunnistetta lisätäksesi otsikon div-säilön sisään. Lisäksi voit käyttää myös muita otsikkotunnisteita vaatimuksen mukaan, kuten “< h1> ' - '< h6> 'tunnisteet:

< div id = 'main-div' >
< h1 > Raja toisella puolella h1 >
div >


Voidaan nähdä, että säilö on luotu onnistuneesti:


Vaihe 3: Avaa div Container

Siirry nyt HTML-div-säilöön ja käytä luokan nimeä. Voit tehdä tämän käyttämällä luokan valitsinta ' # ' käytetään luokan nimen kanssa.

Vaihe 4: Lisää reunus vain yhdelle puolelle

Kun olet avannut div-säilön, käytä alla mainittuja CSS-ominaisuuksia:

#main-div{
reunus vasen: 5px kiinteä punainen ;
tausta: rgb ( 56 , 239 , 245 ) ;
marginaali: 20px 100px;
leveys: 200px; korkeus: 150px
}


Tässä:

    • ' raja-vasen on lyhennetty ominaisuus vasemman reunan leveyden, tyylin ja värin asettamiseen.
    • ' tausta ” -ominaisuutta käytetään elementin taustavärin säätämiseen.
    • ' marginaali ”-ominaisuudet asettavat tilan rajan ulkopuolelle.
    • ' leveys ” määrittää elementin leveyden koon säilössä.

Tuloksena oleva kuva näyttää reunuksen vain yhdellä sivulla:

Tapa 2: Aseta reunus kaikille puolille eri tyyleillä

Käytä yllä olevaa HTML-koodia asettaaksesi reunuksen jokaiselle puolelle eri väreillä. Siirry sitten div-säilöön tunnuksen nimen ja valitsimen avulla:

#main-div{
marginaali: 80px;
reunan leveys: 8px 2px 1px 10px;
reunan säde: 50 pikseliä;
reunatyylinen: upotettu kiinteä kaksoispiste;
reunan väri: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}


Yllä annetussa koodissa:

    • ' marginaali ” määrittää tyhjän tilan elementin ulkopuolella.
    • ' reunan leveys ” asettaa leveyden eri arvoilla jokaiselle sivulle. Olemme esimerkiksi lisänneet erilaisia ​​arvoja pikseleinä.
    • ' raja-säde ” käytetään reunan pyöreän kaaren tekemiseen.
    • ' rajatyyliin ” -ominaisuutta käytetään rajauksen tyylin asettamiseen. Tässä skenaariossa reunuksen kummallekin puolelle asetetaan neljä erilaista tyyliä.
    • ' reunuksen väri ” -ominaisuutta käytetään värin osoittamiseen reunukselle. Tässä kummankin puolen arvo on asetettu eriväriseksi.

Tämän seurauksena molemmilla puolilla on eri tyylisiä reunuksia:


Tässä artikkelissa olet oppinut erilaisia ​​tapoja asettaa CSS-reunus yhdelle ja usealle puolelle.

Johtopäätös

Jos haluat asettaa rajan vain yhdelle puolelle, luo ensin div käyttämällä '

”elementtiä. Siirry seuraavaksi div-säilöön ja ota CSS-ominaisuudet käyttöön. Käytä sen jälkeen mitä tahansa omaisuutta näiden joukossa, mukaan lukien ' raja-vasen ”, “ raja-oikea ”, “ reuna-yläosa ' ja ' raja-ala ” asettaaksesi yhden sivun reunan. Lisäksi käyttäjät voivat myös asettaa ' reunan leveys ”, “ rajatyyliin ' ja ' reunuksen väri ” erikseen molemmin puolin rajaa. Tämä viesti selitti menetelmän CSS-reunan asettamiseen vain yhdelle puolelle.