Okraje sa na stránkach HTML používajú na ohraničenie a zvýraznenie obsahu. Ak je na stránke dostatok informácií a chcete upriamiť pozornosť používateľa na konkrétne časti, použite okolo tohto obsahu hranice. V tomto článku o hraniciach v CSS sa budem venovať nasledujúcim témam:
- Kedy použiť hranice
- Hranice v CSS
- Atribúty hranice CSS
- Predvolené hodnoty pre atribúty ohraničenia
- Definujte hranice v skratke
- Body, ktoré treba mať na pamäti pri navrhovaní hraníc v CSS
Kedy použiť hranice
Štandardným postupom je použitie okrajových značiek CSS na definovanie okrajov na stránkach HTML pre:
- Okolo dôležitých nadpisov
- Zvýraznenie postscriptového alebo dôležitých poznámok
- Priložiť obrázky, ilustrácie, citáty ľudí, videá
- Upozorniť na ceny, časové harmonogramy alebo také významné informácie
Možno budete chcieť prečítať ďalej predtým, ako sa začnete učiť o hraniciach CSS.
Komplexný návod k CSS nájdete na stránke Výukový program pre CSS Edureka pre začiatočníkov . Dostanete vynikajúci prehľad o tom, ako sa má CSS používať na vylepšenie webového dizajnu HTML.
Hranice v CSS
Okraje CSS je možné priradiť k rôznym častiam stránky HTML, či už ide o priloženie nadpisov alebo odsekov. Začnime príkladom. Tu definujeme ohraničenie okolo nadpisu a ďalšie ohraničenie okolo textu odseku.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Aj orámovanie okolo odseku!
Atribúty hranice CSS
Hranice CSS majú svoje 3 hlavné atribúty
- štýl:Theštýlatribút definuje vzor hranice.
- farba: Farbou môže byť ktorákoľvek zo sady definovanej farbami CSS.
- šírka: Šírka sa používa na zmenu hrúbky okraja, aby bol výraznejší.
Vo vyššie uvedenom príklade sme videli, že je definovaný iba jeden atribút ohraničenia, teda jeho štýl. Ostatné atribúty, ak nie sú definované, majú predvolené hodnoty. Existuje ďalší atribút nazývaný polomer, ktorý sa používa menej často. Používa sa na zaoblenie okrajov okraja.
- hraničný štýl atribút
| Štýl | Popis |
| hraničný štýl: pevný | |
| hraničný štýl: dvojitý | |
| hraničný štýl: drážka | |
| hraničný štýl: hrebeň | |
| hraničný štýl: vložka | |
| hraničný štýl: začiatok | |
| hraničný štýl: žiadny | |
| hraničný štýl: skrytý | |
| hraničný štýl: bodkovaný | |
| štýl okraja: prerušované |
Všimli by ste si, že existuje aj možnosť „bez orámovania“ a „skrytého orámovania“. Vývojár sa môže jednoducho vyhnúť definovaniu hranice, prečo ju výslovne definovať ako „skrytú hranicu“? Toto sa vykonáva na účely využitia priestoru a zosúladenia s ostatnými prvkami na stránke.
Štýly ohraničenia je možné kombinovať aj v rámci prvku. Z tohto dôvodu možno 4 jednotlivé okrajové strany osobitne definovať rôznymi štýlmi. To je možné vykonať dvoma spôsobmi. Buď definujte všetky 4 strany v jednej značke. V takom prípade počet začína od horného riadku a potom sa pohybuje v smere hodinových ručičiek. Alternatívne je možné každú zo 4 hraníc definovať aj v jednotlivých značkách. Oba prípady sú uvedené v nasledujúcom príklade.
| Štýl | Popis |
| štýl okraja: bodkovaná prerušovaná plná dvojitá border-top-style: bodkovaný štýl ohraničenia vpravo: prerušované štýl ohraničenia zdola: pevný border-left-style: double |
- hraničná farba atribút
Atribút farby pre orámovanie je možné nastaviť viacerými spôsobmi. Je to podobné ako pri nastavovaní farby pre ďalšie prvky. Farby je možné nastaviť jedným z nasledujúcich spôsobov:
- názov - zadajte názov farby, napríklad „modrá“. Môžete tiež vyskúšať niektoré luxusné možnosti farieb, ako napríklad „BlanchedAlmond“!
- Hex - zadajte hexadecimálnu hodnotu, napríklad „# ff0000“
- RGB - nastavte kód RGB. Napríklad rgb (255 255,0) znamená žltá.
- nastavenie - napríklad „priehľadné“ alebo „nepriehľadné“
- šírka hranice atribút:
Vlastnosť width, ako už názov napovedá, definuje hrúbku 4 bočných strán. Ak je definovaná jedna hodnota, je to pre všetky strany, inak je možné nastaviť aj jednotlivé hodnoty šírky.
Šírku je možné určiť v ktorejkoľvek zo štandardných jednotiek, napríklad v pixeloch („px“), bodoch („pt“) alebo v centimetroch („cm“). Šírku môžete určiť aj pomocou preddefinovaných hodnôt „silný“, „tenký“ a „stredný“.
| Štýl | Popis |
| šírka okraja: 10px | |
| šírka okraja: 0,1 cm | |
| šírka okraja: stredná |
- polomer hranice atribút
Účelom definovania polomeru je získať zaoblené rohy hranice. Faktor polomeru určuje rozsah zaoblenia. Čím je hodnota vyššia, tým sú rohy zaoblenejšie. Ako štandardný postup sa hodnoty polomeru udržiavajú medzi 1 až 3-násobkom šírky okraja.
Vygeneruje sa nasledujúci kód:
šírka okraja: 10px
polomer ohraničenia: 30 pixelov
Predvolené hodnoty pre atribúty hranice
Jediným povinným atribútom je štýl . Ak štýl chýba, okraj sa nezobrazí.
Ak nie je zadaná farba, použije sa ako predvolená hodnota farba podkladového prvku. Napríklad ak je farba textu odseku definovaná ako „modrá“, potom bude predvolená farba orámovania tiež modrá. Ak ani pre prvok neexistuje definícia farieb, potom je predvolená farba „čierna“.
Predvolená hodnota pre šírku je „stredná“.
Definujte hranice v skratke
Niektorí vývojári uprednostňujú definovanie atribútov ohraničenia v stručnej jednoriadkovej značke. Tento skratkový formát pomáha minimalizovať riadky kódu a odborníci vývojári uprednostňujú tento formát. Ak je definícia hranice jednoduchá a pomerne štandardizovaná, odporúča sa použitie skratkového formátu. Ak však potrebujete každú stranu ohraničenia zvýrazniť iným štýlom, musíte sa držať formátu definovania jednotlivých značiek.
Používa sa nasledujúci kód:
štýl okraja: prerušované
farba okraja: zelená
šírka okraja: 5px
orámovanie: prerušovaná zelená 5 pixelov
Body, ktoré treba mať na pamäti pri navrhovaní hraníc v CSS
Na stránke nepoužívajte príliš veľa orámovania, môže to pôsobiť rušivo a sťažiť používateľovi sústredenie.
Je dôležité zachovať konzistenciu štýlu a farieb okrajov. Prvky na rovnakej úrovni hierarchie na stránke musia mať pre jednotnosť podobný štýl a šírku orámovania. Napríklad ak odstavec je definovaný s plným okrajom a šírkou 5px, zachovajte tento formát aj v ostatných odstavec prvky počas návrhu webových stránok.
Držte sa jedného štýlu definícií značiek. Niektorým vývojárom vyhovujú definície skratiek so všetkými hodnotami priradenými k jednej hranica značka. Niektorí uprednostňujú explicitný zoznam všetkých značiek pre šírku, farbu a štýl. Konvencia spočíva v tom, že ak sa na stránke vyžadujú zložité dekorácie okrajov, jednotlivé značky sa zobrazia osobitne. To pomáha pri ladení takto upravených definícií hraníc. V bežných prípadoch by stačila definícia skratky.
Dúfam, že ste našli informácie, ktoré ste hľadali, na hraniciach CSS, a wTýmto sa dostávame na koniec tohto článku Borders in CSS.
Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže získať zručnosti v oblasti práce s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás otázku? Uveďte to v sekcii komentárov blogu „Border in CSS“ a my sa vám ozveme.
rozdiel medzi hodnotou pass by reference a pass by reference v jave