CSS: ohraničení. Hranice prvků. Nastaví ohraničení pro ohraničení jednoho prvku. Vytvořte bublinu
Ohraničení CSS Prvek je jedna nebo více čar obklopujících obsah prvku a jeho odsazení. Hranice se určuje pomocí vlastnosti zkrácené hranice. Styl rámu se nastavuje pomocí tří vlastností: styl, barva A šířka.
Zdobení rámečků a okrajů prvků HTML pomocí vlastností CSS
1. Hraniční styl
Ve výchozím nastavení se okraje vždy kreslí přes pozadí prvku, přičemž pozadí zasahuje až k vnějšímu okraji prvku. Styl rámečku určuje jeho zobrazení bez této vlastnosti, rámečky nebudou vůbec viditelné. U prvku můžete nastavit ohraničení pro všechny strany současně pomocí vlastnosti border-style nebo pro každou stranu zvlášť pomocí kvalifikačních vlastností border-top-style atd. Neděděno.
| hraniční styl (border-top-style, border-right-style, border-bottom-style, border-left-style) |
|
|---|---|
| Hodnoty: | |
| žádný | Výchozí hodnota znamená žádný rámec. Také odebere rámec prvku ze skupiny prvků s hodnotou této sady vlastností. |
| skrytý | Ekvivalent žádné . |
| tečkovaný |
tečkovaný |
| čárkovaná |
čárkovaná |
| solidní |
solidní |
| dvojnásobek |
dvojnásobek |
| drážka |
drážka |
| hřbet |
hřbet |
| vložka |
vložka |
| začátek |
začátek |
| {1,4} |
Výpis čtyř různých stylů pro ohraničení prvku najednou, pouze pro vlastnost border-style:
|
| počáteční | |
| zdědit | |
Syntax
P (styl ohraničení: plný;) p (styl ohraničení: plný;)
2. Barva rámu border-color
Vlastnost nastavuje barvu rámečků na všech stranách současně. Pomocí vlastností zjasnění můžete nastavit jinou barvu pro ohraničení každé strany prvku. Pokud pro rámeček není specifikována žádná barva, bude stejná jako barva textu prvku. Pokud prvek neobsahuje žádný text, barva ohraničení bude stejná jako barva textu nadřazeného prvku. Neděděno.
| barva ohraničení (border-top-color, border-right-color, border-bottom-color, border-left-color) |
|
|---|---|
| Hodnoty: | |
| průhledný | Nastaví průhlednou barvu okraje. Šířka rámu přitom zůstává zachována. Lze použít ke změně barvy ohraničení při najetí myší na prvek, aby nedošlo k posunutí prvku. |
| barva | Barva rámečků se nastavuje pomocí hodnot vlastnosti. (barva ohraničení: #cacd58;) |
| {1,4} |
Současný výpis čtyř různých barev pro ohraničení prvku, pouze pro vlastnost border-color:
|
| počáteční | Nastaví hodnotu vlastnosti na výchozí hodnotu. |
| zdědit | Zdědí hodnotu vlastnosti z nadřazeného prvku. |
Syntax
P (barva ohraničení: #cacd58;)
3. Šířka okraje
Šířka rámce se určuje pomocí jednotek délky nebo klíčových slov. Pokud je vlastnost border-style nastavena na none a okraj prvku je nastaven na určitou šířku, pak je v tomto případě šířka okraje nastavena na nulu. Neděděno.
Syntax
P (šířka okraje: 2px;)
4. Nastavení rámce s jednou vlastností
Vlastnost border vám umožňuje kombinovat následující vlastnosti: border-width , border-style , border-color , například:
Div ( šířka: 100px; výška: 100px; ohraničení: 2px plná šedá; )
V tomto případě budou zadané vlastnosti aplikovány na všechny okraje prvku současně. Pokud není zadána žádná hodnota, nahradí ji výchozí hodnota.
5. Nastavení rámečku pro jeden okraj prvku
V případech, kdy potřebujete pro prvek určit jiný styl ohraničení, můžete pro odpovídající ohraničení použít zkrácený zápis.
Vlastnosti uvedené níže kombinují následující vlastnosti do jediné deklarace: border-width , border-style a border-color . Seznam vlastností je specifikován v daném pořadí, přičemž jednu nebo dvě hodnoty lze přeskočit, v takovém případě jejich hodnoty nabudou výchozích hodnot.
Styl horního ohraničení se nastavuje pomocí vlastnosti border-top, bottom- border-bottom , left- border-left a right- border-right .
Syntax
P (horní ohraničení: 2 pixely plné šedé;)
6. Vnější obrys obrysu
Vlastnost určuje vnější ohraničení kolem prvků (tj. mimo normální ohraničení). Hlavním účelem této vlastnosti je zvýraznit prvek. Na rozdíl od vlastnosti border nemá použití této vlastnosti vliv na velikost ani polohu prvku, protože obrys se zobrazí v horní části rámečku prvku, což může mít za následek překrytí vnější výplně prvku a sousedních oblastí.
Také vnější obrys, na rozdíl od rámu prvku, obklopuje prvek ze všech stran a celý jej rámuje.
Vnější obrys je vždy obdélníkový a nesleduje hranici bloku, pro který je určen border-radius.
Vlastnost obrys umožňuje kombinovat následující vlastnosti: obrys-barva , styl obrysu , šířka-nákresu . Pokud není zadána žádná hodnota, nahradí ji výchozí hodnota.
Div ( šířka: 100px; výška: 100px; obrys: #cacd58 solid 2px; )
6.1. obrysový styl
Vzhled vnější obrysové čáry se nastavuje podobně jako styl rámečku prvku. Neděděno.
Syntax
P (styl obrysu: hřeben;)
6.2. Barva vnějšího obrysu obrys-barva
Barvu vnějšího obrysu lze zadat pouze v případě, že je nastavena hodnota stylu obrysu. Neděděno.
Syntax
P ( styl obrysu: hřeben; barva obrysu: stříbrná; )
6.3. Vnější tloušťka obrysu obrys-šířka
Tloušťka vnější obrysové čáry se nastavuje podobně jako tloušťka rámu prvku. Neděděno.
Syntax
P ( styl obrysu: tečkovaný; šířka obrysu: 5 pixelů; )
Jsem si jistý, že jste již obeznámeni s vlastností border css. Dozvíte se o css border něco nového, co jste dosud nevěděli? Nejen, že se naučíte, ale také uvidíte několik nových věcí, které jste dosud nevěděli!
CSS3 lze použít nejen k vytvoření zaoblených rohů, ale čistý kód CSS lze použít také k vytvoření složitých tvarů. Dříve jste mohli použít obrázek na pozadí k vytvoření vzhledu zaoblených rohů. Díky novým technikám pro použití border to dokážeme s čistým CSS kódem.
Základy používání css border
Pravděpodobně již znáte standardní použití vlastnosti border:
Ohraničení: 1px plná černá;
Výše uvedený kód bude mít na výstupu 1px okraj, který bude černý. Snadné a jednoduché. Můžete také trochu rozšířit syntaxi:
Šířka okraje: tlustý; styl ohraničení: pevný; barva okraje: černá;
Jako doplněk můžete použít specifické hodnoty pro vlastnost border-width, tři klíčová slova: tenký, střední, tlustý.
Použití rozšířené syntaxe však není vždy praktické. Podívejme se na příklad, kdy potřebujete změnit barvu rámečku bloku při najetí myší. V tomto případě je použití zkrácené syntaxe mnohem jednodušší:
Box ( orámování: 1px plný červený; ) .box:hover ( rám: 1px plný zelený; )
Elegantnější a jednodušší způsob, jak to udělat, je:
Box ( border: 1px symetricky červená; ) .box:hover ( border-color: green; )
Jak vidíte, pokročilá technika se hodí i tehdy, když měníme jen některé vlastnosti: šířku, styl, barvu a další.
Hraniční poloměr
Pohraniční-poloměr- Toto je "zlatá" vlastnost CSS3 - první, nejběžnější vlastnost, která se stala praktickou a užitečnou. S výjimkou IE8 a verzí níže všechny prohlížeče zobrazují zaoblené rohy pomocí tohoto.
Pro správný styl je však nutné použít speciální předpony pro Webkit a Mozillu.
Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
V dnešní době můžeme speciální předpony odstranit a použít standardní formu border-radius.
Další výhodou je, že můžeme použít speciální hodnoty pro každou stranu bloku:
Poloměr okraje vlevo nahoře: 20 pixelů; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;
Ve výše uvedeném kódu lze nastavením border-top-right-radius a border-bottom-left-radius na "null" dosáhnout úžasných tvarů. I když prvek může zdědit některé vlastnosti, které bude nutné resetovat.
Podobně jako u margin a padding můžeme komprimovat syntaxi:
/* vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole */ border-radius: 20px 0 30px 0;
Jako příklad použití vlastnosti border-radius vám ukážu „citrón“, který návrháři často používají při navrhování webových stránek:
Citron ( šířka: 200px; výška: 200px; pozadí: #F5F240; rám: 1px plný #F0D900; okraj-rádius: 10px 150px 30px 150px; )
Pojďme za základy
Pro mnoho designérů zde veškeré znalosti v oblasti vlastností CSS hranic končí. Ale existují i další skvělé věci, které můžete použít k vytvoření úžasných věcí!
Komplexní css hraniční struktury
Existuje mnoho technik pro vytváření návrhů pomocí složitých hraničních struktur. Podívejme se například na následující...
Hraniční styl
Vždy používáme nejznámější vlastnosti plné, čárkované a tečkované. Existuje však několik dalších vlastností ve stylu ohraničení: drážka a hřeben.
Ohraničení: 20px drážka #e3e3e3;
Nebo v rozšířené syntaxi:
Barva ohraničení: #e3e3e3; border-width: 20px; border-style: groove;
I když jsou tyto vlastnosti užitečné, nejsou základem pro vytváření složitých snímků.
Obrys
Nejoblíbenější technikou pro vytvoření dvojitého okraje je použití vlastnosti obrysu.
Box ( ohraničení: 5px plný #292929; obrys: 5px plný #e3e3e3; )
Tato metoda funguje skvěle, i když nás omezuje pouze na dva snímky. Někdy potřebujete vytvořit přechodovou hranici, která se skládá z mnoha vrstev... jak potom?
Pseudoprvky
Pokud technika osnovy nestačí, alternativním řešením je použití pseudo prvků:před a:po. Pomocí kterých můžete k prvku přidat další rámečky:
Box ( šířka: 200px; výška: 200px; pozadí: #e3e3e3; pozice: relativní; okraj: 10px plná zelená; ) /* Vytvořte dvě pole se stejnou šířkou kontejneru */ .box:after, .box:before ( obsah: ""; pozice: absolutní vlevo: 0;
Nevypadá to moc elegantně, ale aspoň to funguje. Je trochu obtížné zjistit posloupnost barev uvnitř rámečků... ale můžete to pochopit.
Box-Shadow
Zajímavým „dětským způsobem“, jak vytvořit podobný efekt, je použití vlastnosti box-shadow CSS3:
Box ( orámování: 5px plná červená; rámeček-shadow: 0 0 0 5px zelená, 0 0 0 10px žlutá, 0 0 0 15px oranžová; )
V tomto případě jsme byli chytřejší a použili jsme vyhrazenou vlastnost box-shadow. Změnou parametrů x, y, rozostření na nulu můžeme použít různé barvy k vytvoření více snímků.
Ale je tu problém: ve starších prohlížečích, které nerozumí vlastnosti box-shadow, bude viditelný pouze jeden 5px červený rámeček.
„Pamatuj! Design stránek by měl vypadat pro různé prohlížeče, tedy stejně ve všech prohlížečích. Včetně starších verzí."
Změna úhlů
Kromě jednoduché použité hodnoty border-radius můžeme zadat dvě samostatné - oddělujeme je pomocí / určíme horizontální a vertikální poloměr.
Například:
Poloměr ohraničení: 50px / 100px; /* horizontální poloměr, vertikální poloměr */
...toto je ekvivalentní:
Poloměr okraje vlevo nahoře: 50 pixelů 100 pixelů; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;
Tato technika je vhodná pro vytváření jedinečných tvarů bloků. Zde je například postup, jak vytvořit efekt zabaleného papíru:
Box ( šířka: 200px; výška: 200px; pozadí: #666; border-top-left-radius: 15 em 1 em; border-bottom-right-radius: 15 em 1 em; )
CSS formuláře pomocí ohraničení
Tato technika ukazuje, jak můžete vytvářet formuláře CSS při použití prvků s nulovými rozměry výšky a šířky. Překvapený? Podívejme se na příklad...
Pro několik následujících příkladů použijeme následující označení:
...a následující základní styl:
Pole ( šířka: 200px; výška: 200px; pozadí: černé; )
Nejběžnějším příkladem použití tvarů CSS je vytvoření obtékací šipky. Tajemství této šipky spočívá ve vytvoření okraje s jinou barvou pro každou stranu. Poté nastavte atributy width a height na 0.
Pojďme přiřadit třídu šipky k bloku div:
Šipka ( šířka: 0; výška: 0; okraj-horní: 100px plná červená; border-right: 100px plná zelená; okraj-dolní: 100px plná modrá; border-left: 100px plná žlutá; )
Pro demonstraci nejprve použijeme rozšířenou syntaxi. Dále můžeme dodatečný kód odstranit pomocí zkrácené syntaxe:
Šipka ( šířka: 0; výška: 0; ohraničení: 100px plné; barva ohraničení: červená zelená modrá žlutá; )
Zajímavé, že? Nyní nastavíme průhledné barvy na všechny strany kromě modré.
Šipka ( šířka: 0; výška: 0; ohraničení: 100 pixelů; barva ohraničení: modrá; )
Dopadlo to skvěle! Ale to je v rozporu sémantické rozložení, vytvořte div .arrow, stačí přidat na stránku šipku. K tomuto účelu můžeme použít pseudoprvky, což nyní uděláme.
Vytvořte bublinu
K vytvoření bubliny potřebujeme malý kousek čistého kódu CSS a jeden blok div.
Bublina ( pozice: relativní; barva pozadí: #292929; šířka: 200px; výška: 150px; výška řádku: 150px; /* svisle na střed */ barva: bílá; zarovnání textu: na střed; )
Speech-bubble:after ( content: ""; )
V této fázi vytvoříme šipku, kterou jsme vytvořili dříve, přidáme ji k prvku a zbývá ji pouze umístit:
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; )
Pokud chceme, aby šipka směřovala dolů, budeme muset nastavit všechny okraje na průhledné kromě horního.
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; )
Když vytváříme tento CSS formulář, nemůžeme konkrétně určit velikost šipky. Místo toho můžeme nastavit vlastnost border-width, která šipce přiřadí velikost. Nastavíme také polohu šipky dole uprostřed. V souladu s tím používáme hodnoty nahoře a vlevo.
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px full; border-top-color: red; top: 100%; left: 50%; )
Navíc mu stačí dát barvu stejnou jako blok. Pamatujte, že při umísťování je třeba vzít v úvahu velikost ostatních okrajů, které jsou neviditelné (15px). Bloku dáme také zaoblení v rozích.
Speech-bubble ( /* … další styly */ border-radius: 10px; ) .speech-bubble:after ( content: ""; pozice: absolutní; šířka: 0; výška: 0; okraj: 15px plný; border-top -barva: #292929; horní okraj: -15px;
Není to špatné, co? Pomocí několika tříd CSS a triků s hranicemi můžete takovou věc vytvořit.
/* Použití řečových bublin: Použijte třídu .speech-bubble a .speech-bubble-DIRECTION, jak je uvedeno níže
Bonus! Vertikální centrování uvnitř bloku
Pro jeden řádek textu můžete použít výšku řádku. Ale pokud máte dva nebo více řádků textu... Nejlepším řešením je nastavit vlastnost display na tabulku a celý text vložit do odstavce. Takto to vypadá v html značení:
Speech-bubble ( /* další styly */ display: table; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )
Neomezujeme se na trojúhelníky. CSS dokáže zobrazovat různé tvary – dokonce i srdce a znak biologického nebezpečí.
Biohazard ( šířka: 0; výška: 0; ohraničení: 60px plný; okraj-poloměr: 50 %; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right- barva: žlutá)
Závěr
Jako designérovi layoutu mi vždy vážně vadilo, že se při určování šířky bloku zohledňuje tloušťka okraje v CSS. Souhlasím s tím, že takto je to správnější, ale v některých případech je to prostě do očí bijící nespravedlnost, která s sebou nese mnoho dalších problémů.
Jedním z takových problémů byla neschopnost rozvržení rozložení s dokonale rovnoměrným zarovnáním bloků podél okrajů. Nějaký blok vždy vylezl za okraje všech ostatních. Tento problém byl zahlazen tím, že „toto prolézání“ bylo maximálně 1-2 pixely a zákazník si toho nejčastěji nevšiml. Ale mě osobně to hodně vadilo.
To je stejné, jako když si koupíte čínské falešné švýcarské hodinky. Zdá se, že vše vypadá úplně stejně, ale vy sami chápete, že je to padělek.
Jen trochu teorie
Standard CSS uvádí, že konečná šířka bloku je tvořena velikostí vycpávky, šířky rámečku (pokud má rámeček 2 vodorovné okraje, pak je třeba i tuto velikost vynásobit 2) a šířky textu . Ten význam šířka, na který všichni ukazují na blok div a byla šířka textu. Mnoho lidí si myslí, že je to šířka bloku, ale není. Přesně to jsem si taky myslel.
V CSS existuje nástroj, který vám umožní tento stav obejít a umožní vám použít parametr CSS šířka nastavte šířku bloku bez zohlednění odsazení a ohraničení.
Řešení problému
Pro snazší pochopení uvádíme příklad boje:
Možnosti -moz-box-sizing A -webkit-box-sizing nutné, aby starší verze prohlížečů Firefox a Safari pochopily, že v tomto případě není nutné zahrnout šířku okraje a velikosti výplně.
Každý specialista musí každý den vyhledávat nové informace ve svém oboru činnosti. Ne nadarmo se říká, že život je pohyb pouze vpřed. Pokud jste prožili den a nevzali jste si z něj nic nového, pak si buďte jisti, že jste tento den prožili nadarmo!
P.S. Pro mě, jako pro vývojáře webových stránek na zakázku, je velmi vážným testem propagace webových stránek ve vyhledávačích. Všechny tyhle vyhledávače a SEO jsou pro mě temným lesem, který se snažím „dávat“ ostatním, protože člověk může být profesionál jen v jednom, ve svém oboru. Nepotřebuji někoho jiného.
O několik lekcí dříve jsme se podívali na schematické znázornění bloku webové stránky a také jsme krátce hovořili o vlastnosti CSS border , kterou lze použít k nastavení hranic pro prvek. Tentokrát se na tuto vlastnost podíváme podrobněji na příkladech.
Hranice se nachází mezi okrajem a výplní. To znamená, že marže je pro pohraniční. Ohraničení lze nastavit na všechny čtyři strany (jakoby blokoval blok v rámu), nebo na jednu, dvě nebo tři strany. CSS umožňuje ovládat tloušťku, barvu a styl ohraničení. Pojďme si to prostudovat podrobněji.
Border-width: šířka okraje
Vlastnost border-width nastavuje šířku ohraničení. Nejčastěji se tato velikost udává v pixelech. Můžete nastavit stejnou nebo jinou šířku pro všechny čtyři okraje, například:
/* všechny 4 okraje jsou široké 2px: */ border-width: 2px; /* horní a dolní okraje jsou široké 2px, levé a pravé jsou 4px: */ border-width: 2px 4px; /* horní okraj - 2px, levý a pravý - 6px, dolní - 3px: */ border-width: 2px 6px 3px; /* horní okraj - 2px, pravý - 3px, dolní - 4px, levý - 5px: */ border-width: 2px 3px 4px 5px;
Kromě toho existují klíčová slova pro označení šířky ohraničení:
- tenký - okraj široký 2px;
- střední - okraj široký 4px;
- tlustý - okraj široký 6px.
Border-color: Border-color
Vlastnost border-color určuje barvu pro okraje. Barvy lze zadat v libovolném formátu CSS: klíčová slova, hexadecimální nebo RGB - podle toho, co je pro vás výhodnější. Analogicky s předchozí vlastností můžete nastavit buď jednu barvu pro všechny okraje, nebo vybrat různé barvy pro každý okraj.
Barva ohraničení: #FFFF00;
Můžete také nastavit průhlednou barvu zadáním:
Barva okraje: transparentní;
Border-style: Border-style
Díky vlastnosti border-style můžete z běžného okraje udělat tečkovaný, dvojitý, pevný – existuje mnoho různých významů. Chcete-li to provést, použijte následující klíčová slova:
- pevný - pevný okraj;
- tečkovaný - hranice teček;
- přerušovaná - tečkovaná hranice;
- dvojitý - dvojitý okraj;
- drážka - objemová hranice zářezu;
- hřeben - objemná hranice se silným okrajem (v podstatě inverze předchozího stylu);
- začátek - vytlačený okraj;
- inset - odsazený okraj (v podstatě inverze předchozího stylu).
Stejně jako u vlastností border-width a border-color, každé ohraničení bloku může být stylizováno jinak – například můžete horní a dolní ohraničení vytvořit přerušovaně a pravé a levé ohraničení zdvojnásobit. Zde vše závisí pouze na fantazii.
Styl ohraničení: dvojité tečkované;
Poznámka: Vzhled okrajů se může v různých prohlížečích mírně lišit.
Společná hranice vlastnosti CSS: 3 v 1
Chcete-li upravit styl ohraničení, nemusíte postupně používat všechny tři výše uvedené vlastnosti. Stačí vědět o obecném univerzálním CSS border property, se kterým napíšete styl mnohem rychleji a ušetříte místo. Chcete-li to provést, zapište si hodnoty všech tří vlastností v náhodném pořadí:
Ohraničení: 2px tečkované #FF0000;
Hranice pro jednotlivé strany
Pomocí dalších vlastností okraje v CSS můžete stylovat každý okraj bloku individuálně. Následující vlastnosti vám s tím pomohou:
- border-top - styl pro horní okraj;
- border-right - pro pravý okraj;
- border-bottom - pro spodní okraj;
- border-left - pro levé ohraničení.
Výsledky
Nyní, když víte, jak vytvořit hranice pro bloky, můžete si je procvičit. Existuje mnoho způsobů, jak stručně popsat styl, aniž byste měli v souboru CSS příliš mnoho řádků. Důležitou roli zde hraje znalost principů kaskádových stylů. Podívejme se na příklad.
Řekněme, že chcete vytvořit okraj pro prvek div se třemi plnými šedými okraji a přerušovaným zeleným spodním okrajem. Tento styl můžete napsat takto:
Div ( border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px tečkované #FDD201; )
Ale to je příliš dlouhý příspěvek. To vše lze stručně napsat:
Div ( border: 8px double #FF0000; border-top: 4px tečkované #FDD201; )
Jak již bylo zmíněno výše, zde využijeme kaskádových vlastností CSS. Nejprve zaznamenáme styl pro všechny čtyři strany rámečku a poté specifikujeme styl samostatně pro spodní okraj, čímž částečně přepíšeme předchozí styl. Je velmi důležité dodržet tuto sekvenci řádků.
Mini úkol
Zkuste vytvořit ohraničení pro div o rozměrech 200x200 pixelů. Styly pro rám by měly být následující:
- Udělejte horní a spodní okraj pevný solidní, dejte jim stejnou barvu a šířku 5 pixelů.
- Vytvořte levý okraj čárkovaná, šířka 3 pixely, vyberte barvu odlišnou od předchozí.
- Udělejte pravý okraj dvojitý dvojnásobek, šířka 7 pixelů, barva odlišná od předchozích dvou.
Vaše práce by měla nakonec vypadat takto (kromě barvy, kterou si zvolíte):
Výsledek úlohy (zobrazit v Chrome)
