Reunoja käytetään HTML-sivuilla sisällön rajaamiseen ja korostamiseen. Kun sivulla on paljon tietoa ja haluat kiinnittää käyttäjän huomion tiettyihin osiin, käytä sitten reunoja kyseisen sisällön ympärillä. Tässä CSS: n rajoja käsittelevässä artikkelissa käsittelen seuraavia aiheita:
- Milloin Bordersiä käytetään
- Rajat CSS: ssä
- CSS Border -attribuutit
- Raja-attribuuttien oletusarvot
- Määritä rajat lyhytkirjassa
- Pisteet, jotka on pidettävä mielessä suunniteltaessa rajoja CSS: ssä
Milloin Bordersiä käytetään
Tavallisena käytäntönä on käyttää CSS-reunustageja rajaamaan HTML-sivujen reunat seuraaville:
- Tärkeiden otsikoiden ympärillä
- Korosta jälkikirja tai tärkeät muistiinpanot
- Liittää kuvia, piirroksia, lainauksia ihmisiltä, videoita
- Kiinnittää huomiota hinnoitteluun, aikatauluihin tai vastaavaan merkittävään tietoon
Haluat ehkä lukea ennen CSS-rajojen oppimista.
Katso kattava CSS-opetusohjelma osoitteesta Edureka CSS -opastus aloittelijoille . Saat erinomaisen heads-upin tavasta, jolla CSS: ää käytetään HTML-web-suunnittelun täydentämiseen.
Rajat CSS: ssä
CSS-reunukset voidaan määrittää HTML-sivun eri osioihin, olipa kyse sitten otsikoiden tai kappaleiden liittämisestä. Aloitetaan esimerkistä. Tässä määritellään raja otsikon ympärille ja toinen raja kappaletekstin ympärille.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Raja myös kappaleen ympärillä!
CSS Border -attribuutit
CSS-rajoilla on kolme pääominaisuutta
- tyyli:tyyliattribute määrittelee reunan mallin.
- väri: Väri voi olla mikä tahansa CSS-värien määrittelemästä joukosta.
- leveys: Leveyttä käytetään vaihtamaan reunan paksuutta, jotta se olisi näkyvämpi.
Yllä olevassa esimerkissä näimme, että vain yksi reunamääritelmä on määritelty, se on sen tyyli. Muut määritteet ottavat oletusarvot, kun niitä ei ole määritelty. On toinen ominaisuus nimeltä säde, jota käytetään harvemmin. Sitä käytetään reunojen reunojen pyöristämiseen.
- rajatyylinen määritteen
| Tyyli | Kuvaus |
| reunatyyli: kiinteä | |
| reunatyyli: kaksinkertainen | |
| reunatyyli: ura | |
| reunatyyli: harjanne | |
| reunatyyli: upotettu | |
| reunatyyli: alku | |
| reunatyyli: ei mitään | |
| reunatyyli: piilotettu | |
| reunatyyli: pisteviiva | |
| reunatyyli: katkoviiva |
Huomaa, että on olemassa vaihtoehtoja myös 'ei rajaa' ja 'piilotettu raja'. Kehittäjä voi yksinkertaisesti välttää rajan määrittelemistä, miksi määritellä se nimenomaisesti 'piilotetuksi rajaksi'? Tämä tehdään tilankäyttöä ja kohdistusta varten sivun muiden elementtien kanssa.
Reunatyylejä voidaan sekoittaa myös elementissä. Tätä tarkoitusta varten 4 yksittäistä reunapuolta voidaan määrittää erikseen eri tyyleillä. Tämä voidaan tehdä kahdella tavalla. Joko määritä kaikki 4 sivua yhdeksi tunnisteeksi. Tässä tapauksessa laskenta alkaa yläriviltä ja liikkuu sitten myötäpäivään. Vaihtoehtoisesti kukin 4 reunaviivasta voidaan määrittää myös yksittäisissä tunnisteissa. Molemmat tapaukset on esitetty seuraavassa esimerkissä.
| Tyyli | Kuvaus |
| reunatyyli: pisteviiva, katkoviiva, kiinteä kaksinkertainen border-top-style: pisteviiva reuna-oikea-tyyli: katkoviiva border-bottom-style: kiinteä reuna-vasen-tyyli: kaksinkertainen |
- reunuksen väri määritteen
Reunan väriominaisuus voidaan asettaa useilla tavoilla. Tämä on samanlainen kuin muiden elementtien värin asettaminen. Värit voidaan asettaa jollakin seuraavista tavoista:
- nimi - määritä värin nimi, kuten 'sininen'. Voit myös kokeilla hienoja värivaihtoehtoja, kuten “BlanchedAlmond”!
- Hex - määritä heksadesimaaliarvo, kuten '# ff0000'
- RGB - aseta RGB-koodi. Esimerkiksi rgb (255,255,0) tarkoittaa keltaista.
- asetus - kuten 'läpinäkyvä' tai 'läpinäkymätön'
- reunan leveys attribuutti:
Leveysominaisuus, kuten nimestä voi päätellä, määrittää 4 reunuspuolen paksuuden. Jos yksi arvo on määritelty, se on kaikille puolille, muuten voidaan asettaa myös yksittäiset leveysarvot.
Leveys voidaan määrittää missä tahansa vakioyksikössä, kuten pikselinä (”px”), pisteinä (“pt”) tai senttimetreinä (”cm”). Voit myös määrittää leveyden käyttämällä ennalta määritettyjä arvoja 'paksu', 'ohut' ja 'keskitaso'.
| Tyyli | Kuvaus |
| reunan leveys: 10 kuvapistettä | |
| reunan leveys: 0,1 cm | |
| reunan leveys: keskikokoinen |
- raja-säde määritteen
Säteen määrittelyn tarkoituksena on saada pyöristetyt kulmat rajaa varten. Sädekerroin määrittää pyöristyksen laajuuden. Suurempi arvo, kaarevammat kulmat muuttuvat. Vakiokäytännössä sädearvot pidetään välillä 1-3 kertaa reunan leveys.
Seuraava koodi luo:
reunan leveys: 10 kuvapistettä
reunan säde: 30 kuvapistettä
kuinka kirjoittaa tostring-menetelmä
Raja-attribuuttien oletusarvot
Ainoa pakollinen määrite on tyyli . Jos tyyli puuttuu, reunaa ei tule näkyviin.
Jos väriä ei ole määritetty, oletusarvoksi otetaan taustalla olevan elementin väri. Jos esimerkiksi kappaleen tekstin väri määritellään siniseksi, oletusarvoinen reunaväri on myös sininen. Jos edes elementille ei ole määritelty väriä, oletusväri on ”musta”.
Leveyden oletusarvo on keskitaso.
Määritä rajat lyhytkirjassa
Jotkut kehittäjät määrittelevät mieluummin reunamääritteet ytimekkäässä yksirivisessä tagissa. Tämä lyhyt muoto auttaa minimoimaan koodirivit ja asiantuntijakehittäjät suosivat tätä muotoa. Lyhennemuodon käyttöä suositellaan, kun reunamääritys on yksinkertainen ja melko standardoitu. Jos sinun on kuitenkin korostettava reunan molemmat puolet eri tyylillä, sinun on pidettävä kiinni yksittäisten tunnisteiden muotoilusta.
Seuraavaa koodia käytetään:
reunatyyli: katkoviiva
reunaväri: vihreä
reunan leveys: 5 kuvapistettä
reunus: katkoviivainen 5 kuvapistettä
Pisteet, jotka on pidettävä mielessä suunniteltaessa rajoja CSS: ssä
Älä käytä liikaa reunuksia sivulla, se voi häiritä ja vaikeuttaa käyttäjän keskittymistä.
On tärkeää säilyttää reunatyylin ja värien yhtenäisyys. Sivun samalla hierarkiatasolla olevilla elementeillä on oltava samanlainen reunatyyli ja leveys yhtenäisyyden takaamiseksi. Esimerkiksi jos kohta on määritelty kiinteällä reunalla ja 5 kuvapisteen leveydellä, säilytä tämä muoto kaikissa muissa kohta elementtejä verkkosivujen suunnittelun aikana.
Pidä kiinni yhden tyyppisestä tunnisteiden määrittelystä. Jotkut kehittäjät ovat tyytyväisiä pikakuvamäärityksiin, joissa kaikki arvot on määritetty yhdelle rajalla tag. Jotkut toiset haluavat nimenomaisen luettelon kaikista tunnisteista leveyden, värin ja tyylin suhteen. Periaatteena on, että kun sivulla vaaditaan tarkkoja reunakoristeita, yksittäiset tunnisteet luetellaan erikseen. Tämä auttaa tällaisten mukautettujen reunamääritelmien virheenkorjauksessa. Normaaleissa tapauksissa vain pikakuvamäärittely tekisi.
Toivottavasti löysit etsimäsi tiedot CSS-rajoista ja wTämän vuoksi olemme päässeet tämän Bordersin CSS-artikkelin loppuun.
Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.
Onko sinulla kysymys meille? Mainitse se 'Border in CSS' -blogin kommenttiosassa ja palaamme sinuun.