Kuidas ma saan CSS-i piiri seada ainult ühel küljel?

Kuidas Ma Saan Css I Piiri Seada Ainult Uhel Kuljel



Arendajad saavad oma veebilehtede atraktiivsemaks muutmiseks rakendada mitut CSS-i atribuuti, näiteks ' kõrgus ” ja „ laius ' atribuudid suuruse määramiseks, ' teksti joondamine teksti kohandamiseks, ' piiri stiilis ” ja „ piiriraadius ” atribuudid elemendi ümber oleva äärise määramiseks. Lisaks saate lisada äärise vastavalt oma vajadustele, näiteks elemendi ühele küljele, et muuta objektide taga olevad asjad paremini nähtavaks.

See postitus näitab:





1. meetod: määrake ääris ühel küljel

CSS-is saavad kasutajad määrata soovitud elemendi ühele küljele äärise. Sel eesmärgil on ' piir-vasak ”, „ piir-parem ”, „ piiripealne ” ja „ ääris-alumine ” atribuute kasutatakse ääriste lisamiseks vasakule, paremale, ülemisele või alumisele küljele.



Selles jaotises seame konkreetselt konteineri vasakule küljele äärise. Selleks järgige alltoodud juhiseid.



1. samm: looge div-konteiner



Esmalt looge 'div-konteiner'

” silti. Sisestage ' id ” atribuut ja määrake ID-le nimi.

2. samm: sisestage pealkiri



Järgmisena kasutage '< h1> ” märgendit, et lisada div-konteinerisse päis. Lisaks saate vastavalt nõudele kasutada ka muid pealkirjasilte, näiteks '< h1> ' kuni '< h6> ” sildid:

< div id = 'main-div' >
< h1 > Piir ühel pool h1 >
div >


On näha, et konteiner on edukalt loodud:


3. toiming. Juurdepääs div konteinerile

Nüüd avage HTML-div konteiner ja avage klassi nimi. Selleks kasutage klassivalijat ' # ” kasutatakse koos klassi nimega.

4. samm: sisestage ääris ainult ühel küljel

Pärast div-konteineri avamist rakendage alltoodud CSS-i atribuute:

#main-div{
ääris vasak: 5 pikslit punane ;
taust:rgb ( 56 , 239 , 245 ) ;
veeris: 20px 100px;
laius: 200 pikslit; kõrgus: 150 pikslit
}


Siin:

    • “ piir-vasak on stenogrammi omadus äärise vasaku laiuse, stiili ja värvi määramiseks.
    • “ taustal ” atribuuti kasutatakse elemendi taustavärvi reguleerimiseks.
    • “ marginaal ” omadused määravad ruumi väljaspool piiri.
    • “ laius ” määrab elemendi laiuse suuruse konteineris.

Saadud pildil on ainult ühe küljega piir:

2. meetod: määrake kõikidele külgedele erinevate stiilidega ääris

Kõigile külgedele erinevate värvidega ääriste määramiseks kasutage ülaltoodud HTML-koodi. Seejärel avage ID-nime ja valija abil div-konteiner:

#main-div{
veeris: 80 pikslit;
äärise laius: 8 pikslit 2 pikslit 1 pikslit 10 pikslit;
piiri raadius: 50 pikslit;
äärisstiil: sisestus ühtlane kahepunktiline;
äärise värv: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}


Ülaltoodud koodis:

    • “ marginaal ” määrab tühja ruumi väljaspool elementi.
    • “ piiri laius ” määrab iga külje laiuse erinevate väärtustega. Näiteks oleme lisanud erinevaid väärtusi pikslites.
    • “ piiriraadius ” kasutatakse piiri ümmarguse kõvera tegemiseks.
    • “ piiri stiilis ” atribuuti kasutatakse äärise stiili määramiseks. Selle stsenaariumi korral määratakse äärise mõlemale küljele neli erinevat tüüpi stiili.
    • “ piirivärv ” atribuuti kasutatakse piirile värvi määramiseks. Siin on iga külje väärtus määratud erineva värviga.

Selle tulemusel rakendatakse mõlemal küljel erineva stiiliga ääris:


Sellest artiklist olete õppinud erinevaid viise, kuidas määrata CSS-i piire ühele ja mitmele küljele.

Järeldus

Piiri määramiseks ainult ühele küljele looge esmalt div, kasutades '

” element. Järgmisena avage div-konteiner ja rakendage CSS-i atribuute. Pärast seda kasutage mis tahes atribuuti nende hulgas, sealhulgas ' piir-vasak ”, „ piir-parem ”, „ piiripealne ” ja „ ääris-alumine ” ühe külje äärise määramiseks. Lisaks saavad kasutajad määrata ka ' piiri laius ”, „ piiri stiilis ” ja „ piirivärv ” mõlemal pool piiri eraldi. See postitus selgitas meetodit CSS-i piiri määramiseks ainult ühel küljel.

muud

Kategooria

Lemmik Postitused

Kuidas Javas Max Heap kasutada?

Tühjendage Pandas DataFrame

Laadige Pickle File Python

Kuidas hankida Minecraftis kooripuuvilju

Parandage Discordi häälühenduse vead opsüsteemis Windows 11/10

Mis on Javas meetodi alistamine

Raspberry Pi 5 parimat töölauakeskkonda

Kuidas installida Wine'i Pop!_OS-i

Mis vahe on MariaDB ja MySQL vahel

Kuidas kasutada käsku dig Linuxis

Kuidas leida riistvara üksikasju Raspberry Pi GUI

Parimad kleepuvate märkmete rakendused Linux Mint 21 jaoks

MicroSD-kaardi mooduli liidestamine ESP32-ga Arduino IDE abil

Kohandatud robotitoimingute väljatöötamine Botpressis

Plotly.expess.line

Elasticsearchi puhastamise hetkepiltide hoidla

Kuidas kasutada Grep Comandit ainult failinime printimiseks

Kuidas kasutada faili avamise dialoogi C# rakendustes

Kuidas installida Snap Debian 12-sse

Kuidas leida eilset kuupäeva Bashis