Dobrý den, milí čtenáři tohoto blogu! Dnes budeme pokračovat v našem zkoumání kaskádových stylů neboli CSS. V předchozích článcích jsme již obecně zkoumali blokové uspořádání webu. Díky tomu nám začaly vznikat docela profesionální webovky, ale něco na nich chybí. A s největší pravděpodobností jim chybí odsazení a rámečky. Dnes se podíváme na pravidla stylu margin, padding a border, která umožňují nastavit okraje a okraje pro html-elementy.

Možnosti odsazení CSS

U kaskádových stylů existují dva typy odsazení.

1.Vnitřní polstrování Je vzdálenost od pomyslné hranice prvku k jeho obsahu. Vzdálenost se nastavuje pomocí parametru vycpávka... Toto odsazení patří k samotnému prvku a nachází se uvnitř něj.

2. Vnější polstrování- vzdálenost mezi okrajem aktuálního prvku webové stránky a hranicemi sousedních prvků nebo nadřazeného prvku. Velikost vzdálenosti je řízena nemovitostí okraj... Toto odsazení je mimo prvek.

Pro názornost obrázek:

Představte si například buňku vyplněnou textem. Výplň je pak vzdálenost mezi pomyslným okrajem buňky a textem, který obsahuje. A vnější okraj je vzdálenost mezi okraji sousedních buněk. Začněme vycpávkou.

Odsazení v CSS s odsazením (nahoře, dole, vlevo, vpravo)

Vlastnosti stylu padding-left, padding-top, padding-right a padding-bottom umožňují nastavit míru odsazení vlevo, nahoře, vpravo a dole od prvku webové stránky:

polstrování-top | vycpávka-pravá | polstrování-spodní | padding-left: value | zájem | zdědit

Velikost odsazení lze zadat v pixelech (px), procentech (%) nebo jiných jednotkách přijatelných pro CSS. Při zadávání procenta se hodnota vypočítá ze šířky prvku. Hodnota dědit označuje, že je zděděna od rodiče.

Například pro aktuální odstavec jsem použil pravidlo stylu, které nastavuje levé odsazení na 20 pixelů, horní odsazení na 5 pixelů, pravé odsazení na 35 pixelů a spodních 10 pixelů. Zápis pravidla bude vypadat takto:

p.test (
padding-left: 20px;
padding-top: 5px;
padding-right: 35px;
vycpávka: 10px
}

Kombinované pravidlo vycpávky umožňuje zadat odsazení na všech stranách prvku webové stránky najednou:

vycpávka:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

V kolektivním pravidle je povoleno používat jednu, dvě, tři nebo čtyři hodnoty a oddělit je mezerou. V tomto případě závisí účinek na počtu hodnot:

• pokud zadáte jednu hodnotu, nastaví velikost odsazení na všech stranách prvku stránky;
• pokud zadáte dvě hodnoty, pak první nastaví míru odsazení nahoře a dole a druhá - vlevo a vpravo;
• pokud zadáte tři hodnoty, pak první určí míru odsazení nahoře, druhá - vlevo a vpravo a třetí - dole;
• pokud jsou zadány čtyři hodnoty, první nastaví výplň nahoru, druhá doprava, třetí dolů a čtvrtá doleva.

Výše uvedené pravidlo CSS lze tedy co nejvíce zkrátit a zapsat následovně:

p.test (odsazení: 5px 35px 10px 20px)

Vlastnost nebo okraje v CSS

Atributy stylu margin-left, margin-top, margin-right a margin-bottom umožňují nastavit okraje pro levý, horní, pravý a dolní okraj:

margin-top | okraj-pravý | okraj-dole | okraj-levý:<значение>| auto | zdědit

Jak bylo uvedeno výše, vnější výplň je vzdálenost od okraje aktuálního prvku k okraji sousedního prvku nebo, pokud žádné sousedící prvky neexistují, k vnitřnímu okraji nadřazeného kontejneru.

Velikost odsazení lze zadat v pixelech (px), procentech (%) nebo jiných jednotkách přijatelných pro CSS:

p (
margin-left: 20px;
}
h1 (
pravý okraj: 15 %;
}

Hodnota auto znamená, že velikost odsazení bude automaticky vypočítána prohlížečem. V případě použití procentního zápisu se odsazení počítá v závislosti na šířka nadřazeného kontejneru... A to platí nejen pro margin-left a margin-right, ale také pro margin-top a margin-bottom, odsazení v procentech bude vypočítáno v závislosti na šířce, nikoli na výšce kontejneru.

Je přípustné použít jako hodnoty okrajů záporné hodnoty:

p (
margin-left: -20px;
}

Pokud se při kladných hodnotách okrajů sousední prvky vzdalují, pak se zápornou hodnotou sousední blok přejede prvek, pro který jsme takové záporné okraje nastavili.

Okraje můžeme také určit pomocí atributu style okraj... Nastavuje míru odsazení na všech stranách prvku webové stránky současně:

okraj:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Tato vlastnost, v případě nastavení jedné, dvou, tří nebo čtyř hodnot výplně, se řídí stejnými zákony jako pravidlo výplně.

Možnosti ohraničení pomocí vlastnosti border

Při přizpůsobování rámců existují tři typy parametrů:

• border-width - tloušťka okraje;
• border-color - barva okraje;
• border-style - typ čáry, kterou bude ohraničení nakresleno.

Začněme parametrem tloušťky okraje:

šířka okraje: [hodnota | tenký | střední | tlustý] (1,4) | zdědit

Tloušťka rámu lze nastavit v pixelech nebo v jiných jednotkách dostupných v css. Proměnné tenký, střední a tlustý nastavují tloušťku okraje na 2, 4 a 6 pixelů:

šířka okraje: střední;

Stejně jako u vlastností padding a margin můžete pro parametr border-width použít jednu, dvě, tři nebo čtyři hodnoty, čímž nastavíte šířku okraje pro všechny strany najednou nebo pro každou zvlášť:

border-width: 5px 3px 5px 3px

Pro aktuální odstavec udělejme horní okraj 1px, pravý 2px, spodní 3px a levý 4px pomocí pravidla (šířka okraje: 1px 2px 3px 4px;)

Atributy stylu border-left-width, border-top-width, border-right-width a border-bottom-width lze použít k nastavení šířky levé, horní, pravé a spodní strany ohraničení. :

border-left-width | border-top-width | border-right-width | border-bottom-width: tenký | střední | silný |<толщина>| zdědit

Dalším parametrem je border-color, kterým můžete ovládat barva rámu:

barva ohraničení: [barva | transparentní] (1,4) | zdědit

Vlastnost umožňuje nastavit barvu ohraničení pro všechny strany prvku najednou nebo jen pro zadané. Jako hodnotu můžete použít metody určení barev akceptovaných v html pro barvy: hexadecimální kód, klíčová slova atd.:

p (šířka okraje: 2px; barva okraje: červená)

Hodnota průhlednosti nastaví barvu okraje na průhlednou a zdědí hodnotu rodiče. Ve výchozím nastavení, pokud není specifikována žádná barva ohraničení, bude použita ta použitá pro písmo uvnitř tohoto prvku.

Pomocí atributů stylu border-left-color, border-top-color, border-right-color a border-bottom-color můžete nastavit barvu levé, horní, pravé a spodní strany ohraničení, resp. :

border-left-color | border-top-color | border-right-color | border-bottom-color: transparent |<цвет>| zdědit

A poslední parametr, border-style, nastaví typ rámu:

border-style: (1,4) | zdědit

Typ rámu lze zadat pro všechny strany prvku najednou nebo pouze pro zadané. Jako hodnoty lze použít několik klíčových slov. Vzhled bude záviset na použitém prohlížeči a tloušťce ohraničení. Význam žádný se používá ve výchozím nastavení a nezobrazuje rámeček a jeho tloušťka je nastavena na nulu. Skrytá hodnota má stejný účinek. Výsledný rámec pro zbytek hodnot v závislosti na tloušťce je uveden v tabulce níže:

Atributy stylu border-left-style, border-top-style, border-right-style a border-bottom-style určují styl čar, které budou použity k vykreslení levé, horní, pravé a spodní strany hranice, respektive:

styl ohraničení vlevo | styl ohraničení nahoře | styl ohraničení vpravo | styl ohraničení dolního okraje: žádné | skryté | tečkované | přerušované | plné | dvojité | drážka | hřeben | vsazení | začátek | dědit

Stejně jako u možností odsazení a odsazení je ohraničení ohraničení. obecná hraniční vlastnost... Umožňuje nastavit tloušťku, styl a barvu ohraničení kolem prvku současně:

hranice: | zdědit

Hodnoty mohou být v libovolném pořadí, oddělené mezerami:

td (ohraničení: 1px plná žlutá)

Chcete-li nastavit ohraničení pouze na určité strany prvku, existují vlastnosti border-top, border-bottom, border-left, border-right, které umožňují nastavit parametry pro horní, dolní, levou a pravou stranu. hranic, resp.

Zbývá jen shrnout:

• pro zadání vycpávka nemovitost využíváme vycpávka;
• pro nastavení okraje existuje pravidlo okraj;
• možnosti rámu se nastavují pomocí atributu okraj.

Všimněte si, že všechny tyto vlastnosti css zvětšují velikost prvku webové stránky. Pokud tedy změníme tloušťku ohraničení nebo velikost odsazení blokových kontejnerů, které tvoří design webové stránky, budeme muset velikost těchto kontejnerů odpovídajícím způsobem upravit, jinak se mohou posunout a design se rozbije.

To je vše, brzy se uvidíme!

CSS nám také umožňuje vytvářet plné, tečkované nebo tečkované čáry. rám podél pomyslné hranice prvku webové stránky.

Atributy stylu border-left-width, border-top-width, border-right-width a border-bottom-width nastavují šířku levé, horní, pravé a spodní strany ohraničení:

border-left-width | border-top-width | border-right-width |

okraj-spodní-šířka: tenký | střední | silný |<толщина>| zdědit

Můžeme zadat buď absolutní nebo relativní číselnou hodnotu pro tloušťku ohraničení, nebo jednu z předdefinovaných hodnot: tenký, střední nebo tlustý. V druhém případě skutečná tloušťka rámec záleží na webovém prohlížeči. Výchozí tloušťka je také závislá na prohlížeči, takže je vždy nejlepší ji nastavit explicitně.

Ve výpisu 11.2 nastavíme šířku ohraničení buněk tabulky na jeden pixel.

A zde je styl, který tvoří všechny nadpisy první úrovně rám pouze ze spodní strany, tloušťka 5 pixelů:

H1 (šířka ohraničení: 5 pixelů)

Prakticky všechny nadpisy první úrovně budou podtržené.

Atribut border-width style umožňuje zadat hodnoty tloušťky pro všechny strany ohraničení najednou:

šířka okraje:<толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

Pokud je zadána jedna hodnota, nastaví se tloušťka všech stran rámu.

Pokud jsou zadány dvě hodnoty, první nastaví tloušťku horní a dolní části a druhá nastaví levou a pravou stranu rámu.

Pokud jsou zadány tři hodnoty, první nastaví tloušťku horní části, druhá nastaví levou a pravou stranu a třetí nastaví spodní strany rámu.

Pokud jsou zadány čtyři hodnoty, první nastaví tloušťku horní části, druhá doprava, třetí dolů a čtvrtá doleva. rámec.

Příklad:

TD, TH (šířka okraje: tenký)

Atributy stylu border-left-color, border-top-color, border-right-color a border-bottom-color nastavují barvu levé, horní, pravé a spodní strany ohraničení:

border-left-color | border-top-color | border-right-color |
barva okrajů-spodní: průhledná |<цвет>| zdědit

Hodnota transparent určuje "průhlednou" barvu, přes kterou bude pozadí nadřazeného prvku "prohlížet".

POZORNOST!

Barva ohraničení by měla být vždy nastavena explicitně, jinak se nemusí kreslit.

Příklad:

H1 (šířka okraje-dola: 5px
barva okraje-spodu: červená)

Atribut border-color style umožňuje zadat barvu pro všechny strany ohraničení najednou:

barva okraje:<цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

Chová se stejně jako podobný atribut stylu border-width:

TD, TH (šířka okraje: tenký;
barva okraje: černá)

Atributy stylu border-left-style, border-top-style, border-right-style a border-bottom-style určují styl čar, které budou nakresleny, respektive levé, horní, pravé a spodní strany. . rámec:

border-left-style | border-top-style | border-right-style |

styl okraje-dola: žádný | skrytý | tečkovaný | přerušovaný | plný | dvojitý | drážka |

hřeben | vložka | začátek | zdědit

Zde jsou k dispozici následující hodnoty:

Žádné a skryté - bez ohraničení (normální chování);

Tečkovaná - tečkovaná čára;

Přerušovaná - přerušovaná čára;

Plná - plná čára;

Double - dvojitá čára;

Drážka - "protlačená" 3D čára;

Ridge - "konvexní" trojrozměrná čára;

Vložka - trojrozměrná "boule";

Počátek je trojrozměrné "odsazení".

Příklad:

H1 (šířka okraje-dola: 5px
Barva okraje: červená
border-bottom-style: double)

Atribut border-style vám umožňuje zadat styl pro všechny strany ohraničení najednou:

styl ohraničení:<стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

Chová se stejně jako podobné atributy stylu border-width a border-color.

Příklad:

TD, TH (šířka okraje: tenký;
barva okraje: černá;
styl ohraničení: tečkovaný)

Atributy stylu border-left, border-top, border-right a border-bottom umožňují nastavit všechny možnosti pro levou, horní, pravou a spodní stranu. rámec:

border-left | border-top | border-right | border-bottom:

<толщина> <стиль> <цвет>| zdědit

V mnoha případech jsou preferovány tyto atributy stylu:

H1 (ohraničení dole: 5 pixelů, dvojitá červená)

Atribut „global“ stylu ohraničení umožňuje nastavit všechny parametry najednou pro všechny strany ohraničení:

okraj:<толщина> <стиль> <цвет>| zdědit
TD, TH (ohraničení: tenké tečkované černé)

POZORNOST!

Rámce také zvětšují velikost prvku webové stránky. Pokud tedy tvoříme rámec u blokových kontejnerů, které tvoří design webové stránky, budeme muset odpovídajícím způsobem změnit velikost těchto kontejnerů, jinak se posunou a design bude narušen.

Podání pro náš web

Mezi kontejnery, které tvoří design našich webových stránek, a mezi okrajem těchto kontejnerů a jejich obsahem vytvoříme nějakou výplň.

Okraj mezi okraji okna webového prohlížeče a obsahem webové stránky je nulový. Využijte prostor v okně webového prohlížeče na maximum.

NA POZNÁMKU

Ve výchozím nastavení každý webový prohlížeč vytváří vlastní výplň mezi okraji svého okna a obsahem webové stránky.

Odsazení na levé a pravé straně kontejneru záhlaví webu (cheader) je 20 pixelů. Budeme muset přesunout text nadpisu od okrajů okna webového prohlížeče, jinak bude nadpis vypadat ošklivě.

Vnější prostor mezi kontejnery s navigační lištou (cnavbar) a s hlavním obsahem (cmain) je 10 pixelů.

Vnitřní vycpávka kontejneru s hlavním obsahem (cmain) na všech stranách je 5 pixelů.

Horní okraj kontejneru s hlavním obsahem (cmain) je 10 pixelů. Tím jej oddělíte od kontejnerů cnavbar a cmain.

Odsazení na levé a pravé straně kontejneru autorských práv (ccopyright) je 20 pixelů. Text chráněný autorským právem by měl být také posunut mimo okraje okna webového prohlížeče.

Uvedené hodnoty odsazení byly získány autorem jako výsledek experimentů. Můžete se zeptat ostatních.

Nyní rozdělme všechny čtyři nádoby rámečky.

Kontejner cheader obdrží rám s jednou spodní stranou.

Hlavní kontejner je rám s jednou levou stranou.

Kontejner na ochranu autorských práv je rám s jednou horní stranou.

Rámečky uděláme tenké a tečkované. Nastavte je na # B1BEC6 (světle modrá) jako barvu.

Výpis 11.3 ukazuje revidovaný úryvek CSS pro šablonu stylů main.css, která implementuje možnosti odsazení a ohraničení, které jsme zvolili.

Pojďme to rozebrat.

K odstranění okraje mezi okrajem okna prohlížeče a obsahem webové stránky jsme použili atribut style margin. Vložili jsme to do stylu přepsání značky a dal mu hodnotu 0 pixelů:

TĚLO (barva: # 3B4043;
barva pozadí: # F8F8F8;
rodina písem: Verdana, Arial, sans-serif;
okraj: 0px)

V pojmenovaném stylu cheader, ukotveném ke stejnojmennému kontejneru, nastavíme výplň vlevo a vpravo na 20 pixelů a rám pouze s jednou spodní stranou. Tento rám odděluje tento kontejner od níže uvedených:

#cheader (šířka: 1010px;
odsazení: 0 20px;
okraj-dole: tenký tečkovaný # B1BEC6)

Šířku tohoto kontejneru jsme navíc nastavili na absolutní hodnotu. Pamatujte: při zobrazení kontejneru s relativní šířkou webový prohlížeč nejprve vypočítá absolutní hodnotu jeho šířky a poté k ní přidá množství výplně. V důsledku toho se kontejner rozšíří než okno prohlížeče a v okně se objeví posuvníky, které vůbec nepotřebujeme. Proto je lepší nastavit šířku kontejneru na absolutní hodnotu a upravit ji tak, aby se kontejner zaručeně vešel do šířky okna prohlížeče.

V pojmenovaném stylu cnavbar jsme nastavili 10pixelový pravý okraj pro vizuální oddělení kontejneru cnavbar od kontejneru cmain:

#cnavbar (šířka: 250px;
výška: 570px;
plavat vlevo;
pravý okraj: 10px)

V pojmenovaném stylu cmain nastavíme odsazení a ohraničení s jednou levou stranou – tím se oddělí kontejner cmain od kontejneru cnavbar:

#cmain (šířka: 760px;
výška: 570px;
plavat vlevo;
přetečení: auto;
výplň: 5px;
okraj-levý: tenký tečkovaný # B1BEC6)

V pojmenovaném stylu ccopyright nastavíme levé a pravé odsazení na 20 pixelů a horní odsazení na 10 pixelů. Kromě toho vytvoříme ohraničení s jednou horní stranou, která oddělí kontejner autorských práv od jeho sousedů výše:

#ccopyright (šířka: 1010px;
jasné: obojí;

odsazení: 10px 20px 0px 20px;
okraj-top: tenký tečkovaný # B1BEC6)

To je vše. Uložíme si šablonu stylů main.css a otevřeme webovou stránku index.htm ve webovém prohlížeči. Autor zde neuvede ilustraci, jelikož tenké rámečky, které jsme vytvořili, na ní prakticky nejsou vidět. Na obrazovce počítače ale vypadají velmi působivě.

Nyní se podíváme na navigační lištu. Nevýrazné hypertextové odkazy jsou seskupeny v horní části kontejneru cnavbar, jen je škoda se na ně dívat! rámec.

Jak si pamatujeme, náš navigační panel je seznam a jeho jednotlivé hypertextové odkazy jsou položky v tomto seznamu.

Zde jsou potřebné změny:

Posuňte seznam, který tvoří pruh hypertextových odkazů, doleva o 30 pixelů. Tím se odstraní nevábné volné místo vlevo po odstranění značek.

Horní a dolní okraje položek seznamu jsou 10 pixelů. Tím oddělíte hypertextové odkazy od sebe.

Rámeček položky seznamu – tenký, plný, barva # B1BEC6.

Vnitřní výplň položek seznamu: nahoře a dole - 5 pixelů, vlevo a vpravo - 10 pixelů. Tím se oddělí text odstavce od rámec.

Nezbývá než odpovídajícím způsobem upravit CSS pro šablonu stylů main.css (Výpis 11.4).

Zvažme je podrobněji.

Do navbaru pojmenovaného stylu, který je ukotven ke značce seznamu tvořící navigační panel, jsme přidali levý okraj –30 pixelů. Tím se posune seznam doleva a vyplní se prázdné místo:

#navbar (rodina písem: Arial, sans-serif;
velikost písma: 14pt;

text-transform: velká písmena;
list-style-type: none;
levý okraj: -30px)

Nově vytvořený kombinovaný styl vytvoří položky seznamu, které tvoří navigační panel, rám a nastaví příslušné odsazení:

#navbar LI (odsazení: 5px 10px;
okraj: 10px 0px;
okraj: tenký plný # B1BEC6)

Uložte revidovanou šablonu stylů a stisknutím tlačítka obnovte webovou stránku index.htm, která je otevřená ve vašem webovém prohlížeči ... Je to mnohem lepší, že (obrázek 11.1)?

Rámečky lze využít mnoha způsoby, například jako dekorativní prvek nebo k oddělení dvou předmětů. CSS poskytuje nespočet možností pro použití rámců.

Tloušťka rámu

Šířka okraje je určena vlastností border-width, která může být tenký, střední a tlustý, nebo číselná hodnota v pixelech. Obrázek ukazuje tento systém:

Barva rámu

Vlastnost border-color definuje barvu ohraničení. Hodnoty jsou normální hodnoty barev, jako je „# 123456“, „rgb (123,123,123)“ nebo „žlutá“.

Typy rámů

Existují různé typy rámů. Níže je uvedeno osm typů rámců a jejich interpretace v aplikaci Internet Explorer 5.5. Všechny příklady jsou zobrazeny ve "zlaté" barvě a "silné" tloušťce, ale mohou být samozřejmě zobrazeny v jiné barvě a tloušťce.

Pokud nechcete zobrazit ohraničení, můžete použít hodnoty none nebo hidden.

Příklady definování rámců

Tři výše uvedené vlastnosti lze kombinovat v každém prvku a podle toho nastavit různé snímky. Pro ilustraci se podívejte na dokument, který definuje různé rámce pro

,

,

a

Výsledek nemusí být tak působivý, ale ukazuje některé možnosti:

H1 (šířka ohraničení: tlustá; styl ohraničení: tečkovaný; barva ohraničení: zlatá;) h2 (šířka ohraničení: 20px; styl ohraničení: začátek; barva ohraničení: červená;) p (šířka ohraničení: 1px; styl okraje: přerušovaný; barva okraje: modrá;) ul (šířka okraje: tenký; styl okraje: plný; barva okraje: oranžová;)

Můžete také nastavit vlastní vlastnosti pro horní, spodní, pravý a levý okraj rámečku. Zde je návod, jak se to dělá:

H1 (šířka okraje nahoře: tlustý; styl okraje nahoře: plný; barva okraje nahoře: červená; šířka okraje nahoře: tlustý; styl okraje dole: plný; barva okraje dole: modrá; border-right-width: tlustý; border-right-style: plný; border-right-color: green; border-left-width: tlustý; border-left-style: solid; border-left-color: orange;)

Zkrácený zápis

Stejně jako u mnoha jiných vlastností můžete pomocí slova ohraničení spojit více vlastností do jedné. Příklad:

P (šířka ohraničení: 1px; styl ohraničení: plné; barva ohraničení: modrá;)

lze kombinovat do:

P (ohraničení: 1px souvisle modré;)

souhrn

V tomto tutoriálu jste se dozvěděli o neomezených možnostech CSS při používání rámců.

V další lekci se podíváme na to, jak definovat rozměry v modelu krabice – výšku a šířku.

Obecná vlastnost border se používá k ovládání ohraničení prvku. Tato vlastnost umožňuje nastavit šířku, styl a barvu ohraničení prvku v jediné deklaraci.

Tyto tři vlastnosti (tloušťka, styl a barva ohraničení) lze nastavit v jedné deklaraci. Zde je příklad:

Div s 3px červeným okrajem.

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).

Blok div s různými hranicemi.

V tomto příkladu má každá strana krabice jinou tloušťku, styl a barvu ohraničení.

Zvažte, jak můžete vytvořit podobný tvar pomocí CSS:

Hodnoty ohraničení – tloušťka, styl a barva – lze nastavit samostatně pomocí speciálních vlastností.

• border-style - styl ohraničení.
• border-width - šířka okraje.
• border-color - barva okraje.

Zvažme každou z hodnot samostatně.

Vlastnost ve stylu ohraničení. Styl ohraničení.

Vlastnost border-style nastavuje styl ohraničení. V CSS, na rozdíl od HTML, může být ohraničení prvku více než jen jednolité. Platné hodnoty pro styl ohraničení jsou:

1. none - bez ohraničení (výchozí).
2. pevný - pevný okraj.
3. double - double border.
4. čárkovaný - čárkovaný okraj.
5. tečkovaný – ohraničení tvořené řadou teček.
6. hřeben - hřebenová hranice.
7. drážka - hranice drážky.
8. vložka - odsazený okraj.
9. začátek - extrudovaný okraj.

Příklady toho, jak vypadají.

žádná hranice (žádná)




pevná hranice




dvojité ohraničení




tečkovaný okraj




přerušovaná hranice




hranice drážky




hřebenová hranice




vložený okraj




začátek

Mimochodem, pokud nastavíte barvu okraje na černou pro hřebenový rám, dostanete následující výsledek.

Div s černým okrajem a hřebenovým stylem.

Ohraničení vypadá jako plné, 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 na černém okraji není vidět.

Pomocí vlastnosti border-style lze styl ohraničení nastavit pro více než jen všechny strany bloku. Pro jednu vlastnost stylu ohraničení je možné nastavit několik hodnot, v závislosti na počtu hodnot bude styl ohraničení přiřazen různému počtu stran bloku. Můžete nastavit jednu, dvě, tři a č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 stranu, 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.

Vlastnost border-width se používá k nastavení tloušťky ohraničení prvku. Tloušťku okraje lze zadat v jakékoli absolutní měrné jednotce, jako jsou pixely.

Stejně jako u vlastnosti 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:

Jedna hodnota (2px) - tloušťka ohraničení je nastavena pro všechny strany bloku.


Dvě hodnoty (1px 5px) - první hodnota nastavuje tloušťku pro horní a spodní stranu, druhá pro stranu.


Tři hodnoty (1px 3px 5px) – první hodnota pro horní stranu, druhá pro strany a třetí pro spodní.


Čtyři hodnoty (1px 3px 5px 7px) - každá hodnota pro jednu stranu ve směru hodinových ručiček počínaje shora.

Existují také hodnoty klíčových slov pro vlastnost border-width. Jsou tři z nich:

• tenký - tenký okraj;
• střední - střední tloušťka;
• tlustý - tlustý okraj;

Tloušťka okraje: tenký.




Tloušťka okraje: střední.




Tloušťka okraje: tlustá.

Vlastnost border-color. Barva ohraničení.

Funkce border-color se používá k ovládání barvy 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 - 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ázvů barev CSS.

Vlastnost border-color může mít také jednu až čtyři hodnoty a zachází s nimi stejným způsobem jako s předchozími vlastnostmi.

Jedna hodnota (červená).




Dvě hodnoty (červená černá).




Tři významy (červená černá žlutá).




Čtyři významy (červená černá žlutá modrá).

Nyní se vraťme k výše uvedenému problému a nakreslete tvar:

Zde je kód, který nakreslí takový tvar, pouze větší velikost:

Nastavení hodnot pro strany samostatně

Jak bylo uvedeno výše, můžete zadat hodnoty vlastnosti border pouze pro jednu stranu bloku. Pro tyto účely existují vlastnosti:

• border-top (horní okraj)
• pravý okraj (pravý okraj)
• border-bottom (spodní okraj)
• okraj-levý (levý okraj)

Dovolte mi připomenout, že všechny vlastnosti mají 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 – Nastaví 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 – Nastaví barvu pravého okraje prvku.
• border-right-width – Nastavuje šířku pravého okraje prvku.
• border-right-style – Nastaví styl pravého okraje prvku.

Dolní parametry (border-bottom).

• border-bottom-color - nastavuje barvu spodního okraje prvku.
• border-bottom-width – Nastavuje šíř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 – Nastaví barvu levého okraje prvku.
• border-left-width - Nastavuje šířku levého okraje prvku.
• border-left-style – Nastaví styl levého okraje prvku.

Příklad použití těchto vlastností:

V tomto příkladu je div nejprve nastaven na ohraničení 3px a styl plný na všech stranách. Pak:
• předefinoval barvu horního okraje pomocí vlastnosti border-top-color na červenou,
• pomocí vlastnosti border-right-width nastavte tloušťku pravého okraje na 10px,
• pomocí vlastnosti border-bottom-style je styl spodního okraje předefinován jako dvojitý,
• pomocí vlastnosti border-left-color je levý okraj nastaven na modrou.

Vlastnost s hraničním poloměrem. Zaoblení rohů hranice.

Vlastnost border-radius slouží 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).

Hodnoty mohou být libovolné číslo používané v CSS.

Vlastnost border-radius je 15px.

Pokud není zadán rámeček bloku, dojde k zaokrouhlení s pozadím. Zde je příklad zaokrouhlení rámečku bez ohraničení, ale s barvou pozadí:

Vlastnost border-radius je 15px.

Existují vlastnosti pro zaoblení každého rohu prvku jednotlivě. Tento příklad používá všechny z nich:

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 je 15px.

Ačkoli tento kód může být zapsán v jedné deklaraci: border-radius: 15px 0 15px 0. Jde o to, že vlastnost border-radius lze nastavit od jedné do čtyř hodnot. Níže uvedená tabulka uvádí pravidla, kterými se takové reklamy řídí.

Po pečlivém prostudování této tabulky můžete pochopit, že nejkratší záznam požadovaného stylu bude vypadat takto: border-radius: 15px 0. Jsou pouze dvě hodnoty.

Trochu praxe

Jak nakreslit citron pomocí CSS.

Zde je kód pro takový blok:

Okraj: 0 auto; / * Umístěte blok do středu * / šířka: 200px; výška: 200px; pozadí: # F5F240; ohraničení: 1px plný # F0D900; border-radius: 10px 150px 30px 150px;

Již jsme nakreslili tvar:

Nyní z toho necháme trojúhelník:

Kód trojúhelníku je takto:

Okraj: 0 auto; / * Umístěte blok do středu * / padding: 0px; šířka: 0px; výška: 0; ohraničení: 30px plná bílá; barva okraje: červená;

Prostudovali jsme vlastnost pro zdobení textu a písma, nyní je čas přejít k dalším prvkům. V tomto tutoriálu se podíváme na vytváření rámců pomocí CSS... Tato vlastnost je využívána poměrně často, proto by se jí mělo věnovat trochu více pozornosti.

A tak předpokládejme, že je třeba kolem nějakého prvku vytvořit ohraničení. Například, vytvořit titulek a vytvořte kolem něj rám.

Parametry charakterizující rám: 1) Tloušťka rámu, 2) Styl rámu a 3) Barva rámu. A jdeme popořadě:

• 1. Tloušťka rámu: šířka okraje: 2px;
• 2. Styl rámu: styl ohraničení: pevný;
• 3. Barva rámu: barva okraje: # ff0000;

Jaké jsou styly rámečků CSS? Níže jsou uvedeny všechny dostupné styly ohraničení:



• tečkovaný - Je to tečkovaný rám.
• čárkovaná - Toto je tečkovaný rám
• pevný - Toto je pevný rám
• dvojnásobek - Toto je dvojitý rám
• drážka - Objemový pohled
• hřbet - Objemový pohled
• vložka - Objemový pohled
• začátek - Objemový pohled

Nyní máme vše pro vytvoření ohraničení kolem nadpisu.

Html

Vytvoří ohraničení kolem názvu.

A samotný styl rámu.

H2 (šířka ohraničení: 2px; styl ohraničení: plná; barva ohraničení: # FF0000;)

Výsledkem je jednolitý červený okraj o tloušťce 2px.

Rám se skládá ze čtyř stran: Horní, Že jo, Dolní a Vlevo, odjet a protože jsme specifikovali vlastnost okraj , pak prohlížeč ve výchozím nastavení vykreslí všechny čtyři strany rámečku. Pokud tedy potřebujete nastavit rámeček pouze na jednu stranu, pak se použijí předpony označující stranu, kde má být rámeček vytvořen.

• horní - Horní.
• že jo - Že jo
• dno - Dno
• vlevo, odjet - Vlevo, odjet

Pokud tedy chceme udělat rámeček pouze na konci odstavce, to znamená podtrhnout, pak ke každé vlastnosti okraj přidat předponu dno ... Výsledkem bude následující struktura kódu.

H2 (border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: # FF0000;)


Použití těchto stylů pro prohlížeč by znamenalo, že stačí vytvořit ohraničení zespodu, tzn. podtrhnout název. Stejným způsobem můžete tento kód duplikovat nastavením rámečku na druhou stranu, například na horní.

H2 (border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: # FF0000; border-top-width: 2px; border-top-style: double; border-top-color: # FF0000 ;)

Nadpis bude mít nyní červený rámeček nahoře a dole. Totéž lze udělat pro ostatní strany.

Jak jste si již pravděpodobně všimli, deska se ukázala být poměrně velká, proto existuje zkrácený typ desky, který se v praxi často používá.



Obrázek výše ukazuje strukturu zkráceného zápisu, kde je vlastnost označena okraj a jako hodnoty oddělené mezerou je uvedena šířka rámečku - hranice-šířka , styl rámu je hraniční styl a barva okraje - # ff0000 .

Tedy když prohlížeč vidí takový zkrácený zápis okraj: 2px plné # ff0000; , vytvoří také ohraničení na všech čtyřech stranách titulku. Tento krátký zápis je ekvivalentní tomu, který jsme použili výše (kde byly použity tři vlastnosti).

Pokud pomocí krátkého zápisu potřebujete určit rámeček pouze na jedné straně, přidejte do vlastnosti prosťáček označující stranu, se kterou chcete rámeček vytvořit.

H2 (horní ohraničení: 2px plné # ff0000;)

Takže pomocí krátké poznámky je shora vyroben rám, kde je také uvedena tloušťka, styl a barva rámu.

Tímto způsobem, pomocí majetku okraj kolem jakéhokoli prvku je vytvořen rám. S pomocí rámečku se také vytvářejí podtržené vazby, když je potřeba jiná barva podtržení. No, to je s rámy vše, přejdeme k další důležité lekci, kde budeme uvažovat