Možnosti ohraničení. Syntaxe šířky ohraničení CSS. Border-color: Border-color
Chcete-li ovládat ohraničení prvku, použijte obecnou vlastnost border. Tato vlastnost umožňuje nastavit tloušťku, styl a barvu ohraničení prvku v jediné deklaraci.
Tyto tři vlastnosti (tloušťka ohraničení, styl ohraničení a barva) lze nastavit v jediné deklaraci. Zde je příklad:
Styl ohraničení můžete určit pouze na jedné straně prvku. K tomu použijte vlastnosti border-top (horní ohraničení), border-right (pravý okraj), border-bottom (dolní okraj), border-left (levý okraj).
V tomto příkladu má každá strana bloku jinou tloušťku, styl a barvu ohraničení.
Přemýšlejte o tom, jak byste mohli vytvořit podobný tvar pomocí CSS:
Hodnoty ohraničení – tloušťka, styl a barva – lze nastavit samostatně pomocí speciálních vlastností.
- border-style - border-style.
- border-width - šířka okraje.
- border-color - barva okraje.
Zvažme každou z hodnot samostatně.
vlastnost ve stylu hranice Styl ohraničení.
Vlastnost border-style nastavuje styl ohraničení. V CSS, na rozdíl od HTML, může být hranice prvku nejen pevná. Pro styl ohraničení jsou akceptovány následující hodnoty:
- none - bez ohraničení (výchozí).
- pevný - pevný okraj.
- double - double border.
- přerušovaná - tečkovaná hranice.
- tečkovaný - hranice tvořená řadou teček.
- hřeben - hranice "hřeben".
- drážka - hranice "drážky".
- vložka - stlačený okraj.
- začátek - extrudovaný okraj.
Příklady toho, jak vypadají.
žádná hranice (žádná)
pevná hranice
dvojité ohraničení
ohraničení řady teček (tečkované)
přerušovaná hranice
hranice drážky
hřebenová hranice
odsazený okraj (vložka)
extrudovaný okraj (začátek)
Mimochodem, pokud nastavíte barvu okraje na černou pro hřebenový rám, dostanete tento výsledek.
Div blok s černým okrajem a hřebenovým stylem.
Rám vypadá pevně, ale to je způsobeno tím, že styl hřebene je vytvořen přidáním efektu černého stínu a černý efekt není na černém rámu vidět.
Pomocí vlastnosti border-style lze nastavit styl ohraničení nejen pro všechny strany bloku. Je možné nastavit více hodnot pro jednu vlastnost stylu ohraničení v závislosti na počtu hodnot, styl ohraničení bude přiřazen jinému počtu stran bloku. Můžete nastavit jednu, dvě, tři nebo čtyři hodnoty. Podívejme se na příklady pro každý případ.
Jedna hodnota (plná) – styl ohraničení je nastaven pro všechny strany bloku.
Dvě hodnoty (solid double) - první hodnota nastavuje styl pro horní a spodní stranu, druhá pro stranu.
Tři hodnoty (plné dvojité tečkované) - první hodnota pro horní stranu, druhá pro strany, třetí pro spodní.
Čtyři hodnoty (plné dvojité tečkované přerušované) – každá hodnota pro jednu stranu ve směru hodinových ručiček počínaje shora.
Vlastnost šířky hranice. Tloušťka okraje.
Chcete-li nastavit šířku ohraničení prvku, použijte vlastnost border-width. Tloušťku okraje lze zadat v libovolných absolutních jednotkách měření, například v pixelech.
Stejně jako vlastnost border-style lze vlastnost také nastavit na jednu až čtyři hodnoty. Podívejme se na příklady pro každý případ.
Příklad kódu:
Existují také hodnoty klíčových slov pro vlastnost border-width. Jsou celkem tři:
- tenký - tenký okraj;
- střední - průměrná tloušťka;
- tlustý - tlustý okraj;
Tloušťka okraje: tenký.
Tloušťka okraje: střední.
Tloušťka okraje: tl.
Vlastnost border-color. Barva ohraničení.
Chcete-li ovládat barvu ohraničení, použijte nástroj Barva ohraničení. Barvy pro tuto vlastnost lze nastavit pomocí libovolné metody popsané v článku "Barvy v CSS", konkrétně:
- Hexadecimální zápis (#ff00aa) barvy.
- Formát RGB je rgb(255,12,110) . Formát RGBA pro CSS3.
- Formáty HSL a HSLA pro CSS3.
- Název barvy, například černá. Úplný seznam názvů barev naleznete v tabulce Názvy barev CSS.
Vlastnost border-color může mít také jednu až čtyři hodnoty a zachází s nimi podobně jako s předchozími vlastnostmi.
Jedna hodnota (červená).
Dvě hodnoty (červená černá).
Tři hodnoty (červená černá žlutá).
Čtyři hodnoty (červená černá žlutá modrá).
Nyní se vraťme k výše uvedenému problému a nakreslete obrázek:
Zde je kód, který kreslí takový obrázek, pouze větší velikost:
Nastavení hodnot pro strany samostatně
Výše bylo uvedeno, že můžete zadat hodnoty vlastností border pouze pro jednu stranu bloku. Pro tyto účely existují vlastnosti:
- border-top (horní okraj)
- hranice vpravo
- hranice-dole
- okraj-levý (levý okraj)
Dovolte mi připomenout, že pro všechny vlastnosti jsou zadány tři hodnoty (tloušťka, styl a barva) v libovolném pořadí. Existují ale vlastnosti, které umožňují nastavit tloušťku, barvu a styl pro každou stranu zvlášť. Zápis těchto vlastností je odvozen od výše uvedeného.
Možnosti horního okraje (border-top).
- border-top-color - nastavuje barvu horního okraje prvku.
- border-top-width - nastavuje tloušťku horního okraje prvku.
- border-top-style - nastavuje styl horního okraje prvku.
Možnosti pravého okraje (ohraničení vpravo).
- border-right-color - nastavuje barvu pravého okraje prvku.
- border-right-width - nastavuje tloušťku pravého okraje prvku.
- border-right-style - nastavuje styl pravého okraje prvku.
Možnosti dolního okraje (border-bottom).
- border-bottom-color - nastavuje barvu spodního okraje prvku.
- border-bottom-width - nastavuje tloušťku spodního okraje prvku.
- border-bottom-style - nastavuje styl spodního okraje prvku.
Možnosti levého okraje (ohraničení vlevo).
- border-left-color - nastavuje barvu levého okraje prvku.
- border-left-width - nastavuje tloušťku levého okraje prvku.
- border-left-style - nastavuje styl levého okraje prvku.
Příklad použití těchto vlastností:
- barva horního okraje byla předefinována na červenou pomocí vlastnosti border-top-color,
- pomocí vlastnosti border-right-width je tloušťka pravého okraje nastavena na 10px,
- pomocí vlastnosti border-bottom-style je styl spodního okraje předefinován jako dvojitý,
- Pomocí vlastnosti border-left-color je barva levého okraje nastavena na modrou.
Vlastnost border-radius. Zaoblení okrajových rohů.
Vlastnost border-radius je určena k zaoblení rohů ohraničení prvku. Tato vlastnost byla zavedena v CSS3 a funguje správně ve všech moderních prohlížečích kromě Internet Exploreru 8 (a starších verzí).
Hodnoty mohou být jakákoli čísla použitá v CSS.
Vlastnost Border-radius: 15px.
Pokud není zadán rámeček bloku, dojde k zaoblení s pozadím. Zde je příklad zaobleného bloku bez ohraničení, ale s barvou pozadí:
Vlastnost Border-radius: 15px.
Existují vlastnosti pro zaoblení každého jednotlivého rohu prvku. Tento příklad je používá všechny:
Poloměr okraje vlevo nahoře: 15 pixelů; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;
Vlastnost Border-radius: 15px.
Ačkoli tento kód může být zapsán v jedné deklaraci: border-radius : 15px 0 15px 0 . Faktem je, že vlastnost border-radius lze nastavit od jedné do čtyř hodnot. Níže uvedená tabulka uvádí pravidla, kterými se taková oznámení řídí.
Po pečlivém prostudování této tabulky můžete pochopit, že nejkratší položka pro požadovaný styl bude vypadat takto: border-radius : 15px 0 . Existují pouze dva významy.
Trochu praxe
Kreslení citronu pomocí CSS.
Zde je kód pro takový blok:
Marže: 0 auto; /* Vycentrovat blok */ width: 200px; výška: 200px; pozadí: #F5F240; ohraničení: 1px plný #F0D900; border-radius: 10px 150px 30px 150px;
Obrázek jsme již nakreslili:
Nyní z toho necháme trojúhelník:
Kód trojúhelníku je:
Marže: 0 auto; /* Vycentrovat blok */ padding: 0px; šířka: 0px; výška: 0; ohraničení: 30px plná bílá; barva okraje: červená;
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ý. Jednoduše a jednoduše. 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
Okraj-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.
"Pamatovat si! 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 */
...to 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.
Přiřaďme 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 stejnou barvu 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
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 za okraj. Ohraničení lze nastavit na všechny čtyři strany (jako by blokovalo 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. Pro všechny čtyři okraje můžete nastavit stejnou nebo jinou šířku, 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ýsledek
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 napíšeme 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ý pevný, 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)
Obecná vlastnost ohraničení umožňuje současně nastavit tloušťku, styl a barvu ohraničení kolem prvku. Hodnoty mohou být v libovolném pořadí, oddělené mezerou, prohlížeč sám určí, která z nich odpovídá požadované vlastnosti. Chcete-li nastavit ohraničení pouze na určité strany prvku, použijte vlastnosti border-top , border-bottom , border-left , border-right.
stručné informace
Označení
| Popis | Příklad | |
|---|---|---|
| <тип> | Označuje typ hodnoty. | <размер> |
| A && B | Hodnoty musí být uvedeny v uvedeném pořadí. | <размер> && <цвет> |
| A | B | Označuje, že musíte vybrat pouze jednu z navržených hodnot (A nebo B). | normální | malé kapky |
| A || B | Každá hodnota může být použita samostatně nebo společně s ostatními v libovolném pořadí. | šířka || počet |
| Hodnoty skupin. | [ plodina || přejít ] | |
| * | Opakujte nula nebo vícekrát. | [,<время>]* |
| + | Opakujte jednou nebo vícekrát. | <число>+ |
| ? | Zadaný typ, slovo nebo skupina je volitelná. | vložka? |
| (A, B) | Opakujte alespoň A, ale ne více než Bkrát. | <радиус>{1,4} |
| # | Opakujte jednou nebo vícekrát odděleně čárkami. | <время># |
Hodnoty
Hodnota border-width určuje tloušťku ohraničení. K ovládání jeho vzhledu je k dispozici několik hodnot stylu ohraničení. Jejich jména a výsledek akce jsou uvedeny na Obr. 1.
Obr. 1. Styly rámů
border-color nastavuje barvu okraje, hodnota může být v libovolném formátu povoleném CSS.
Příklad
Tento příklad přidá kolem bloku dvojité ohraničení. Výsledek je znázorněn na Obr. 2.
Rýže. 2. Použití vlastnosti border
Objektový model
Objekt.styl.hranice
Poznámka
Prohlížeč Internet Explorer do verze 6 včetně zobrazuje tečkované jako čárkované s tloušťkou okraje 1 pixel. Při tloušťce 2px a vyšší tečkovaná hodnota funguje správně. Tato chyba je opravena v IE7, ale pouze pro všechna ohraničení 1px. Pokud má jeden z okrajů bloku tloušťku 2px nebo vyšší, pak se v IE7 hodnota s tečkami změní na čárkovanou .
Styl ohraničení se může mezi prohlížeči mírně lišit při použití hodnot groove , ridge , inset nebo outset.
Specifikace
Každá specifikace prochází několika fázemi schvalování.
- Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
- Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
- Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
- Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
- Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
- Koncept ( Návrh specifikace) - první verze návrhu normy.
Vlastnost CSS border se používá k vytvoření ohraničení objektu, konkrétně tloušťky ohraničení, jeho barvy a stylu. Tato vlastnost je široce používána v HTML. Pro lepší vnímání obsahu stránky můžete vytvářet různé efekty. Navrhněte například postranní panel, záhlaví webu, nabídku atd.
1. Syntaxe ohraničení CSS
okraj : border-width border-style border-color | zdědit;
- border-width - tloušťka okraje. Můžete jej nastavit v pixelech (px) nebo použít standardní hodnoty tenký, střední, tlustý (liší se pouze šířkou v pixelech)
- border-style - styl zobrazeného ohraničení. Může nabývat následujících hodnot
- žádné nebo skryté - zruší hranici
- tečkovaný - tečkovaný rám
- čárkovaný - rámeček z čárek
- plná - jednoduchá čára (nejčastěji používaná)
- dvojitý - dvojitý rám
- drážka - drážkovaný 3D okraj
- hřeben, vložka, začátek - různé efekty 3D rámu
- dědit - použije se hodnota nadřazeného prvku
- border-color - barva okraje. Lze zadat pomocí konkrétního názvu barvy nebo ve formátu RGB (viz názvy barev html pro web)
Hodnoty ve vlastnosti CSS border lze nastavit v libovolném pořadí. Nejčastěji používanou sekvencí je „barva stylu tloušťky“.
2. Příklady s různými okraji CSS
2.1. Příklad. Různé styly designu ohraničení styl ohraničení
styl ohraničení: čárkovanýstyl ohraničení: čárkovanýstyl ohraničení: pevnýborder-style: doubleborder-style: grooveborder-style: hřebenstyl ohraničení: vložkaborder-style:outsetČtyři různé rámečky
styl ohraničení: tečkovaný
styl ohraničení: čárkovaný
styl ohraničení: pevný
border-style: double
border-style: groove
border-style: hřeben
styl ohraničení: vložka
border-style:outset
Čtyři různé rámečky
2.2. Příklad. Změňte barvu rámečku při najetí myší
Tento příklad je velmi jednoduchý, ale zajímavý. Ukazuje, jak lze pseudotřídu :hover a okraj CSS použít k vytvoření jednoduchých efektů (jako jsou nabídky).
Když najedete myší na blok, barva rámečku se změní
Na stránce to vypadá takto:
2.3. Příklad. Jak vytvořit průhledný okrajový rám
Rám může být průhledný. Tento efekt je vzácný, ale někdy může být velmi užitečný pro webové designéry. Pro nastavení průhlednosti je potřeba použít nastavení barev ve tvaru RGBA (R, G, B, P), kde poslední parametr nastavuje průhlednost (skutečné číslo od 0,0 do 1,0)
Na stránce to vypadá takto:
3. Tloušťka okraje: vlastnost šířky okraje
Nastaví tloušťku čáry. Dříve jsme jej specifikovali v jediném popisu hranice.
Syntaxe šířky ohraničení CSS
šířka okraje: tenký | střední | tlustý | význam;
- tenký - tloušťka tenké čáry
- střední - průměrná tloušťka čáry
- tlustá - tloušťka tlusté čáry
Níže jsou uvedeny některé příklady. Nejneobvyklejší bude rozdílná tloušťka okraje na každé straně.
šířka okraje: tenkýšířka okraje: středníšířka okraje: tlustýRůzná tloušťka na okrajích
Na stránce to vypadá takto:
šířka okraje: tenký
šířka okraje: střední
šířka okraje: tlustý
Různá tloušťka na okrajích
4. Jak vyrobit okrajový rámeček pouze na jedné hraně (border)
Vlastnost CSS border má odvozené vlastnosti pro nastavení jednostranného ohraničení prvku:
- border-top - pro nastavení okraje nahoře (horní okraj)
- border-bottom - pro nastavení okraje dole (spodní okraj)
- border-right - pro nastavení okraje vpravo (pravý okraj)
- border-left - pro nastavení okraje vlevo (levý okraj)
Tyto hranice lze kombinovat, tzn. Napište svůj vlastní rám pro každý směr. Syntaxe je úplně stejná jako border.
Existují také vlastnosti
- border-top-color - nastavte barvu horního okraje
- border-top-style - nastavení stylu horního okraje
- border-top-width - nastavení tloušťky horního okraje
- atd. pro každý směr
Podle mého názoru je snazší psát vše na řádek, než vytvářet další text ve stylech. Například následující vlastnosti budou stejné
/* Popis dvou stejných stylů: */
4.1. Příklad. Krásný rám pro zvýraznění citátů
Příklad rámečku s citací
Na stránce to vypadá takto:
Příklad rámečku s citací
Poznámka
Pro každou stranu můžete nastavit samostatný okraj.
5. Jak přidat více okrajů k prvku html
Někdy je potřeba vytvořit několik okrajů. Uveďme příklad
5.1. První možnost s více okraji
Na stránce to vypadá takto:
Existuje druhá cesta přes stínování.
5.2. Překryjte stíny a vytvořte více okrajů
Na stránce to vypadá takto:
6. Zaoblení rohů na okrajích (poloměr okraje)
Chcete-li vytvořit krásné okraje, použijte vlastnost border-radius CSS (dostupná pouze v CSS3). Lze s ním vytvořit zaoblené rohy, čímž vznikne úplně jiný vzhled. Například
7. CSS Odsazená čára
Depresivní linie mohou vypadat působivě na tmavém pozadí, což není vhodné pro každé místo.
Na stránce to vypadá takto:
Chcete-li získat přístup k hranici z JavaScriptu, musíte napsat následující konstrukci:
document.getElementById("elementID").style.border="HODNOTA"(!JAZYK:
