Kuidas rakendada CSS-is erinevaid piire?

See artikkel annab teile üksikasjalikud ja põhjalikud teadmised CSS-i piiridest, nende kujundamise aspektidest ja erinevatest tüüpidest.

Ääriseid kasutatakse HTML-lehtedes sisu piiritlemiseks ja esiletõstmiseks. Kui lehel on palju teavet ja soovite juhtida kasutaja tähelepanu konkreetsetele osadele, kasutage selle sisu ääriseid. Selles CSS-i piiride artiklis käsitlen järgmisi teemasid:



Millal Bordersit kasutada

Tavapraktika on CSS-i ääremärgendite kasutamine HTML-lehtede piiride määratlemiseks:



  • Tähtsate pealkirjade ümber
  • Järelsõna või oluliste märkmete esiletõstmiseks
  • Lisada pilte, illustratsioone, inimeste tsitaate, videoid
  • Pöörata tähelepanu hinnakujundusele, tähtaegadele või muule olulisele teabele

Võiksite lugeda lehelt enne CSS-i piiride tundmaõppimist.

Põhjaliku CSS-õpetuse saamiseks külastage aadressi Edureka CSSi õpetus algajatele . Saate suurepärase heads-upi selle kohta, kuidas CSS-i kasutatakse HTML-veebidisaini täiustamiseks.



Piirid CSS-is

CSS-piire saab määrata HTML-lehe erinevatele jaotistele, olenemata sellest, kas see sisaldab pealkirju või lõike. Alustame näitest. Siin määratleme piiri pealkirja ümber ja teise piiri lõigu teksti ümber.

body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}

Piir ümber lõigu ka!

Piirid CSS-is



CSS Border atribuudid

CSS-i piiridel on nende kolm peamist atribuuti

  • stiil:Thestiilatribuut määrab piiri mustri.
  • värv: Värv võib olla ükskõik milline CSS-i värvidega määratletud komplektist.
  • laius: Laiust kasutatakse ääre paksuse muutmiseks, et muuta see silmatorkavamaks.

Ülaltoodud näites nägime, et määratletud on ainult üks äärise atribuut, see on selle stiil. Kui teised atribuudid pole määratletud, saavad need vaikeväärtused. On veel üks atribuut nimega raadius, mida kasutatakse harvemini. Seda kasutatakse piiri servade ümardamiseks.

kuidas skannerit Java-s kasutada
  • piiri stiilis atribuut
Stiil Kirjeldus
ääris-stiil: kindel
piiri stiilis: topelt
ääris-stiil: soon
piiri stiilis: seljandik
piiri stiilis: sisestatud
border-style: algus
border-style: puudub
border-style: varjatud
ääris-stiil: punktiir
ääris-stiil: katkendlik

Märkate, et on olemas ka variandid „piir puudub” ja „peidetud piir”. Arendaja saab lihtsalt piiride määratlemisest hoiduda, miks peaks see sõnaselgelt määratlema „varjatud piirina“? Seda tehakse ruumi kasutamise ja lehe teiste elementidega joondamise eesmärgil.

Äärisstiile saab segada ka elemendi sees. Sel eesmärgil saab 4 üksikut piiripoolt erinevate stiilidega eraldi määratleda. Seda saab teha kahel viisil. Mõlemad määrake kõik 4 külge ühes sildis. Sellisel juhul algab loendamine ülemisest reast ja liigub seejärel päripäeva. Teise võimalusena saab iga 4 piirjoont määratleda ka üksikute siltidena. Mõlemad juhtumid on näidatud järgmises näites.

Stiil Kirjeldus
ääris-stiilis: punktiirjoonega katkendlik kahekordne

border-top-style: punktiir

ääris-parem-stiil: katkendlik

border-bottom-style: kindel

piir-vasak-stiil: topelt

  • äärisvärv atribuut

Äärise värviatribuuti saab määrata mitmel viisil. See sarnaneb teiste elementide värvi määramisega. Värve saab määrata ühe järgmise meetodiga:

  • nimi - määrake värvi nimi, näiteks “sinine”. Samuti saate proovida mõnda väljamõeldud värvivalikut, näiteks “BlanchedAlmond”!
  • Hex - määrake kuuskantväärtus, näiteks “# ff0000”
  • RGB - määrake RGB-kood. Näiteks rgb (255,255,0) tähendab kollast.
  • seade - näiteks „läbipaistev” või „läbipaistmatu”
  • piiri laius atribuut:

Atribuut Laius, nagu nimigi ütleb, määrab 4 äärepoolse külje paksuse. Kui üks väärtus on määratletud, on see mõeldud kõigile külgedele, vastasel juhul saab määrata ka individuaalseid laiuse väärtusi.

Laiust saab määrata ükskõik millises standardühikus, näiteks pikslites (‘px’), punktides (’pt’) või sentimeetrites (’cm’). Laiuse saate määrata ka eelnevalt määratletud väärtuste „paks”, „õhuke” ja „keskmine” abil.

Stiil Kirjeldus
äärise laius: 10px
piiri laius: 0,1 cm
piiri laius: keskmine
  • piiri raadius atribuut

Raadiuse määratlemise eesmärk on saada piiri jaoks ümardatud nurgad. Raadiustegur määrab ümarduse ulatuse. Suurem väärtus, kumeramad nurgad muutuvad. Tavapraktikana hoitakse raadiuse väärtusi vahemikus 1-3 korda piiri laiusest.

Luuakse järgmine kood:

java näidisprogrammides

äärise laius: 10px
piiri raadius: 30 pikslit

Piiri atribuutide vaikeväärtused

  • Ainus kohustuslik atribuut on stiil . Kui stiil puudub, siis piiri ei kuvata.

  • Kui värvi pole määratud, võetakse vaikeväärtuseks aluseks oleva elemendi värv. Näiteks kui lõigu tekstivärv on määratletud kui „sinine“, siis on vaikimisi äärisvärv ka sinine. Kui isegi elemendi jaoks pole värvimääratlust, on vaikevärviks must.

  • Laiuse vaikeväärtus on keskmine.

Piiride määratlemine lühikirjas

Mõned arendajad eelistavad piirjoonte atribuute määratleda lühikeses üherealises sildis. See lühike vorming aitab koodiridu minimeerida ja eksperdiarendajad eelistavad seda vormingut. Kiire vormingu kasutamine on soovitatav, kui piiri määratlus on lihtne ja üsna standardiseeritud. Kui aga peate piiri mõlemat külge esile tõstma erinevas stiilis, peate jääma üksikute siltide määratlemise vormingu juurde.

Kasutatakse järgmist koodi:

ääris-stiil: katkendlik
äärisvärv: roheline
äärise laius: 5px
ääris: katkendlik roheline 5px

Punktid, mida CSS-is piiride kujundamisel meeles pidada

  • Ärge kasutage lehel liiga palju piire, see võib häirida ja raskendada kasutaja keskendumist.

  • Oluline on säilitada piiride stiili ja värvide järjepidevus. Lehe samal hierarhia tasemel olevatel elementidel peab ühtluse jaoks olema sarnane äärisstiil ja laius. Näiteks kui lõikes on määratletud kindla äärise ja 5px laiusega, säilitage see formaat ka kogu muu lõikes veebisaidi kujundamisel.

    java apleti programmide näited väljundiga
  • Püsi ühes sildimääratluste stiilis. Mõnele arendajale sobivad kiirklahvid, mille kõik väärtused on määratud ühele piir silt. Mõni teine ​​eelistab kõigi siltide selget loetlemist laiuse, värvi ja stiili osas. Kokkulepe on see, et kui lehel on vaja keerukaid äärekaunistusi, on üksikud sildid loetletud eraldi. See aitab selliste kohandatud piiride definitsioonide silumisel. Tavalistel juhtudel sobiks vaid otsetee määratlus.

Loodetavasti leidsite CSS-i piiridelt otsitava teabe ja wSeetõttu jõuame CSS-i artiklis selle Piirid lõpuni.

Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagumise ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.

Kas teil on meile küsimus? Palun mainige seda ajaveebi „Piir CSS-is” kommentaaride osas ja me võtame teiega ühendust.