Ää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
- Piirid CSS-is
- CSS Border atribuudid
- Piiriatribuutide vaikeväärtused
- Piiride määratlemine lühikirjas
- Punktid, mida CSS-is piiride kujundamisel meeles pidada
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!
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.