Jak implementovat různé hranice v CSS?



Tento článek vám poskytne podrobné a komplexní znalosti hranic v CSS, jejich konstrukčních aspektů a různých typů.

Okraje se na stránkách HTML používají k vymezení a zvýraznění obsahu. Pokud je na stránce spousta informací a chcete uživatele upozornit na konkrétní části, použijte kolem tohoto obsahu ohraničení. V tomto článku o hranicích v CSS se budu zabývat následujícími tématy:

Kdy použít ohraničení

Standardní praxí je použití hraničních značek CSS k definování hranic na stránkách HTML pro:





  • Kolem důležitých nadpisů
  • Zvýraznit postscript nebo důležité poznámky
  • Chcete-li přiložit obrázky, ilustrace, citace od lidí, videa
  • Upozornit na ceny, časové osy nebo takové významné informace

Možná budete chtít přečíst na než se seznámíte s hranicemi CSS.

Komplexní výukový program CSS najdete na Výukový program pro CSS Edureka pro začátečníky . Získáte vynikající heads-up o způsobu, jakým má být CSS použit k rozšíření webového designu HTML.



Hranice v CSS

Okraje CSS lze přiřadit k různým částem stránky HTML, ať už se jedná o uzavření nadpisů nebo odstavců. Začněme příkladem. Zde definujeme ohraničení kolem nadpisu a další ohraničení kolem odstavcového textu.

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

Také ohraničení odstavce!

Hranice v CSS



Atributy hranice CSS

Hranice CSS mají 3 hlavní atributy

  • styl:Thestylatribut definuje vzor ohraničení.
  • barva: Barvou může být kterákoli ze sady definované barvami CSS.
  • šířka: Šířka se používá ke změně tloušťky ohraničení, aby byl výraznější.

Ve výše uvedeném příkladu jsme viděli, že je definován pouze jeden atribut ohraničení, tedy jeho styl. Ostatní atributy, pokud nejsou definovány, mají výchozí hodnoty. Existuje další atribut zvaný radius, který se používá méně často. Používá se k zaoblení okrajů ohraničení.

  • hraniční styl atribut
Styl Popis
styl ohraničení: pevný
styl ohraničení: dvojitý
border-style: groove
hraniční styl: hřeben
border-style: inset
styl ohraničení: začátek
styl ohraničení: žádný
border-style: hidden
styl ohraničení: tečkovaný
styl ohraničení: čárkovaný

Všimli byste si, že existuje také možnost „bez ohraničení“ a „skrytý ohraničení“. Vývojář se jednoduše vyhne definování ohraničení, proč jej výslovně definovat jako „skrytý ohraničení“? To se provádí pro účely využití prostoru a zarovnání s ostatními prvky na stránce.

Styly ohraničení lze v prvku také smíchat. Za tímto účelem lze 4 jednotlivé okrajové strany samostatně definovat různými styly. To lze provést dvěma způsoby. Buď definujte všechny 4 strany v jedné značce. V tomto případě začíná počet od horního řádku a poté se pohybuje ve směru hodinových ručiček. Alternativně lze každou ze 4 hranic definovat také v jednotlivých značkách. Oba případy jsou uvedeny v následujícím příkladu.

Styl Popis
styl ohraničení: tečkovaná přerušovaná plná dvojitá

border-top-style: tečkovaný

styl ohraničení vpravo: čárkovaný

styl ohraničení dole: pevný

border-left-style: double

  • barva okraje atribut

Atribut barvy pro ohraničení lze nastavit několika způsoby. To je podobné nastavení barvy pro jiné prvky. Barvy lze nastavit jednou z následujících metod:

  • název - zadejte název barvy, například „modrý“. Můžete také vyzkoušet několik efektních barevných možností, jako je „BlanchedAlmond“!
  • Hex - zadejte hexadecimální hodnotu, například „# ff0000“
  • RGB - nastavte kód RGB. Například rgb (255 255,0) znamená žlutá.
  • nastavení - jako „transparentní“ nebo „neprůhledný“
  • šířka okraje atribut:

Vlastnost width, jak název napovídá, definuje tloušťku 4 hraničních stran. Pokud je definována jedna hodnota, je pro všechny strany, jinak lze také nastavit jednotlivé hodnoty šířky.

Šířku lze zadat v kterékoli standardní jednotce, například v pixelech („px“), bodech („pt“) nebo v centimetrech („cm“). Šířku můžete také určit pomocí předdefinovaných hodnot „tlustý“, „tenký“ a „střední“.

Styl Popis
šířka okraje: 10px
šířka okraje: 0,1 cm
border-width: medium
  • poloměr ohraničení atribut

Účelem definování poloměru je získat zaoblené rohy ohraničení. Faktor poloměru určuje rozsah zaoblení. Čím větší je hodnota, tím jsou rohy zakřivenější. Standardně se hodnoty poloměru udržují mezi 1–3násobkem šířky ohraničení.

Vygeneruje se následující kód:

šířka okraje: 10px
poloměr ohraničení: 30 pixelů

Výchozí hodnoty pro atributy ohraničení

  • Jediným povinným atributem je styl . Pokud styl chybí, ohraničení se nezobrazí.

  • Není-li zadána barva, použije se jako výchozí hodnota barva podkladového prvku. Pokud je například barva textu odstavce definována jako „modrá“, bude výchozí barva ohraničení také modrá. V případě, že ani pro prvek neexistuje žádná definice barev, je výchozí barva „černá“.

  • Výchozí hodnota šířky je „střední“.

Definujte hranice ve zkratce

Někteří vývojáři dávají přednost definování atributů ohraničení ve stručné jednorázové značce. Tento zkratkový formát pomáhá minimalizovat řádky kódu a zkušení vývojáři tento formát upřednostňují. Pokud je definice ohraničení jednoduchá a poměrně standardizovaná, doporučuje se použít zkratkový formát. Pokud však potřebujete zvýraznit každou stranu ohraničení jiným stylem, musíte se držet formátu definování jednotlivých značek.

Používá se následující kód:

styl ohraničení: čárkovaný
barva ohraničení: zelená
šířka okraje: 5px
ohraničení: přerušovaná zelená 5px

Body, které je třeba mít na paměti při navrhování hranic v CSS

  • Nepoužívejte na stránce příliš mnoho ohraničení, může to rušit a ztěžovat uživateli soustředění.

  • Je důležité zachovat konzistenci stylu a barev ohraničení. Prvky na stejné úrovni hierarchie na stránce musí mít pro jednotnost podobný styl ohraničení a šířku. Například pokud odstavec je definován s plným okrajem a šířkou 5px, udržujte tento formát v ostatních odstavec prvky během návrhu webových stránek.

  • Držte se jednoho stylu definic značek. Některým vývojářům vyhovuje definice zkratek se všemi hodnotami přiřazenými k jedné okraj štítek. Někteří dávají přednost explicitnímu výpisu všech značek pro šířku, barvu a styl. Konvence spočívá v tom, že když je na stránce vyžadováno komplikované ohraničení dekorací, jsou jednotlivé značky uvedeny samostatně. To pomáhá při ladění takto přizpůsobených definic ohraničení. V normálních případech by stačila definice zkratky.

Doufám, že jste našli informace, které jste hledali, na hranicích CSS a wTím se dostáváme na konec tohoto článku Borders in CSS.

Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás dotaz? Uveďte to prosím v sekci komentářů blogu „Border in CSS“ a my se vám ozveme.

rozdíl mezi hodnotou pass by pass a reference v java