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ö '' 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: 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: Tuloksena oleva kuva näyttää reunuksen vain yhdellä sivulla: Käytä yllä olevaa HTML-koodia asettaaksesi reunuksen jokaiselle puolelle eri väreillä. Siirry sitten div-säilöön tunnuksen nimen ja valitsimen avulla: Tämän seurauksena molemmilla puolilla on eri tyylisiä reunuksia: Jos haluat asettaa rajan vain yhdelle puolelle, luo ensin div käyttämällä '
< h1 > Raja toisella puolella h1 >
div >
Voidaan nähdä, että säilö on luotu onnistuneesti:
Vaihe 3: Avaa div Container
reunus vasen: 5px kiinteä punainen ;
tausta: rgb ( 56 , 239 , 245 ) ;
marginaali: 20px 100px;
leveys: 200px; korkeus: 150px
}
Tässä:
Tapa 2: Aseta reunus kaikille puolille eri tyyleillä
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:
Tässä artikkelissa olet oppinut erilaisia tapoja asettaa CSS-reunus yhdelle ja usealle puolelle. Johtopäätös