Domov › Služby › Css parametry rámce prvku. Příklady s různými ohraničeními CSS. Příklad. Změňte barvu rámečku při najetí myší

Css parametry rámce prvku. Příklady s různými ohraničeními CSS. Příklad. Změňte barvu rámečku při najetí myší

Dobrý den, milí přátelé a hosté blogu! Dnes pokračujeme v seznamování s prvky tvorby webových stránek a pojďme se naučit vytvářet css frameworky. V mém minulém článku jsem vám řekl a ukázal, jak vznikají, ale css rámec vypadat krásnější a atraktivnější. Proto každý, kdo se naučil vytvářet html rámce, bude schopen vytvořit css rámec. A já vám s tím pomůžu! Začněme...

Jak si sami vytvořit css rámce pro web?

Jak jsem vám již řekl výše, css frameworky jsou mnohem krásnější a praktičtější než html frameworky a nebude pro vás těžké vytvořit takové css frameworky sami, pokud jste se již naučili vytvářet html frameworky.

Co potřebujeme k vytvoření css frameworku? Nic příliš pobuřujícího! Vaše přání a můj článek, ve kterém vám vše podrobně vysvětlím.

Zde je jeho kód:

První příklad css rámce

Naše css rámečky!

Zde je příklad druhého css rámce:

Zde je jeho kód:

První příklad css rámce

Naše css rámečky!

Zde je třetí příklad tečkovaného rámečku:

Toto je její kód:

První příklad css rámce

Naše css rámečky!

Toto je čtvrtý příklad rámce s dvojitým obrysem:

Toto je její kód:

První příklad css rámce

Naše css rámečky!

A pokud použijete hodnotu „ridge“, pak získáte tento rámec:

Zde je jeho kód:

První příklad css rámce

Naše css rámečky!

Nyní vytvoříme zaoblené okraje našeho css rámečku pomocí těchto hodnot „border-radius“ a „box-shadow“:

Zde je rámeček s oblými hranami a jeho kód:

První příklad css rámce

Naše css rámečky!

Nyní udělejme rám s rozmazanými okraji, to také vypadá docela atraktivně a je snadné to udělat, stačí změnit číslo v hodnotě "box-shadow" na vyšší hodnotu. A stane se toto:

Zde je jeho kód:

První příklad css rámce

Naše css rámečky!

Nyní vytvoříme rám s vícebarevnými obrysy, stačí přidat několik barevných schémat k hodnotě „box-shadow“:

Zde je jeho kód:

První příklad css rámce

Naše css rámečky!

A nyní je vrcholem našich css rámů kulatý rám. To lze také provést jednoduše změnou hodnoty „poloměr okraje“. Podívej se sem:

Zde je kód:

První příklad css rámce

Naše css rámečky!

Tak a to je pro dnešek vše. Uvidíme se znova!

Pokud se vám materiál líbil, proveďte následující...

Prosím, aby se mi to líbilo.

Retweetujte.

Sdílejte tento příspěvek se svými přáteli na sociálních sítích.

Děkuji za pozornost!

Dobrý den všem. Alexey Gulynin je v kontaktu. V minulém článku jste se naučili stylizovat text v CSS. V tomto článku bych vám rád řekl, co to je rámce v CSS a jak je používat. Pravidla upravující rám se skládají ze tří prvků: tloušťka rámu, styl a barva. Vytvořme soubor index.html s následujícím obsahem:

Hranice v CSS

Na stejné stránce nastavíme styly pro blok s id = tester (uvnitř záhlaví stránky přidáme následující řádky):

Vlastnost border-width je zodpovědná za šířku ohraničení, vlastnost border-style odpovídá za styl ohraničení a vlastnost border-color je zodpovědná za barvu ohraničení. U první a třetí vlastnosti je vše jasné. Všechny hodnoty, které může vlastnost border-style nabývat, jsou zobrazeny na obrázku níže:

Pokud nyní otevřeme naši stránku v prohlížeči, uvidíme, že se kolem bloku objevil plný červený rámeček o šířce 1px.

Ukázal jsem vám dlouhý záznam v CSS (tento záznam je velmi těžkopádný a obvykle ho nikdo nepoužívá). Všechny instrukce mohou být obsaženy na jednom řádku. V našem případě to bude vypadat takto:

Ohraničení:1px plná červená;

Tito. Nejprve označíme tloušťku rámu, poté označíme styl a barvu rámu.

Pravděpodobně jste si všimli, že se rám objevil na všech čtyřech stranách. Rámy lze nastavit pro kteroukoli stranu samostatně (bude to jasné na konkrétním příkladu):

Horní okraj: 2px plná červená; border-bottom: 3px zelené tečkované; border-left: 6px přerušovaná žlutá; border-right: 5px double #fe54e5;

Můžete vidět, že všechny 4 strany mají různé rámečky. Pokud pro některou stranu neurčíte rám, pak tam žádný rám nebude.

Rámy se používají naprosto všude: je téměř obtížné najít design webu, který rámce nepoužívá. Velmi často jsou položky nabídky odděleny svislou čarou, která je určena vlastností border-right nebo border-left. Můžete také vytvářet zajímavé efekty pro odkazy. Domácí úkol právě na toto téma:

Musíte vytvořit stránku a umístit na ni 2 odkazy. Styl designu těchto odkazů je plná čára, po najetí myší by tato čára měla být tečkovaná.

Velmi dobré je také při rozvržení stránky používat rámečky pro prvky, abyste lépe pochopili, kde se který prvek nachází. Alespoň je pro mě mnohem jasnější a jasnější dělat rozvržení tímto způsobem.

V této kapitole:

Blokový model je způsob zobrazení prvků pomocí prohlížečů, které zpracovávají všechny značky jako malé bloky, pro ně je každá značka kontejnerem s obsahem: textem, obrázky, jinými značkami atd.

Okraj(margin) - prázdný prostor (margin), který odděluje jeden prvek od druhého. Nejjednodušším příkladem odsazení je mezera mezi odstavci, které následují za sebou. Oblast okraje je průhledná a nemůže mít vlastní barvu ani jiné efekty.
okraj(ohraničení prvku) - ohraničení na libovolné straně prvku. Rám lze instalovat na všechny strany prvku, nebo na jednu stranu. Pomocí rámečku můžete jednoduše ozdobit prvek nebo vizuálně oddělit obsah aktuálního prvku od ostatních prvků na stránce.
Vycpávka(padding) - prázdný prostor mezi obsahem prvku a jeho okrajem. Oblast polstrování je průhledná a nemůže mít vlastní barvu ani jiné designové efekty.
Většina prvků má obsahovou oblast, která obsahuje vše obsah prvek (text, vložené obrázky nebo jiné prvky).

Rám

Ohraničení je jednoduchá čára, která se objeví kolem prvku, který upravujete. Ale není vůbec nutné použít rám obklopující prvek ze všech stran. Můžete jej přidat pouze z požadované strany prvku. Pokud například přidáte ohraničení pouze do spodní části prvku bloku, bude mít stejný efekt jako prvek

(horizontální čára), fungující jako oddělovač.

Každý snímek má tři vlastnosti, které můžeme ovládat pomocí CSS: šířku, styl a barvu. Podívejme se, jaké vlastnosti lze použít k jejich nastavení a změně:

Namísto zadání všech tří vlastností můžete zadat pouze jednu - vlastnost border, která vám umožňuje současně zadat šířku, styl a barvu okraje:

Název dokumentu

První odstavec.

Druhý odstavec.

Třetí odstavec.

Chcete-li ovládat rám samostatně na každé straně prvku, použijte následující vlastnosti:

border-top - horní rám
border-left - left frame
ohraničení-pravý - pravý rám
border-bottom - spodní rám

Tyto vlastnosti fungují úplně stejně jako vlastnost border, kromě toho, že umožňují ovládat ohraničení pouze na jedné straně prvku, který upravujete.

Vnější a vnitřní okraje

Odsazení- prázdný prostor mezi obsahem prvku a jeho okrajem (pokud je nainstalován). Chcete-li přidat a ovládat šířku odsazení na všech čtyřech stranách prvku, použijte vlastnost padding.

Okraj je prázdný prostor, který odděluje prvek od ostatních prvků nebo okrajů okna prohlížeče. Chcete-li přidat a ovládat šířku okrajů na všech čtyřech stranách prvku, použijte vlastnost margin.

Vlastnosti padding a margin mohou nabývat jedné až čtyř hodnot:

Kde jsou hodnoty nastaveny ve směru hodinových ručiček, počínaje shora:

Zadáte-li pro vlastnosti pouze jednu hodnotu, budou mít odsazení na všech stranách stejnou šířku.

Na první pohled viditelný efekt při použití těchto vlastností vypadá stejně, abyste si všimli vizuálního rozdílu mezi nimi, můžete například nastavit rámeček pro prvek nebo nastavit pozadí:

Název dokumentu

Běžný odstavec.

Pro odsazení, stejně jako pro rámečky, existují vlastnosti, které umožňují ovládat velikost odsazení na každé straně zvlášť. Padding se řídí následujícími vlastnostmi: padding-top , padding-right , padding-bottom a padding-left . Vnější okraje jsou řízeny vlastnostmi: margin-top , margin-right , margin-bottom a margin-left .

Poznámka: Hodnoty vlastností padding a margin nejsou podřízené prvky zděděny, takže musíte zadat šířky odsazení zvlášť pro každý prvek, který je vyžaduje.

Šířka a výška prvku

Ve výchozím nastavení prvky bloku používají automatickou šířku. To znamená, že prvek bude natažen přesně tolik, kolik je volného místa. Výchozí výška blokových prvků se nastavuje automaticky, tzn. Prohlížeč roztáhne oblast obsahu svisle tak, aby se zobrazil veškerý obsah. Chcete-li nastavit vlastní rozměry pro oblast obsahu prvku, můžete použít vlastnosti width a height.

Prostudovali jsme vlastnosti pro návrh textu a písma, nyní je řada na nás, abychom přešli 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, takže stojí za to jí věnovat trochu více pozornosti.

A tak předpokládejme, že potřebujete vytvořit rám kolem nějakého prvku. Například, vytvoříme titulek a uděláme 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ámů CSS? Níže jsou uvedeny všechny dostupné styly rámů:

tečkovaný - Toto je tečkovaný rámeček.
čárkovaná - Toto je tečkovaný rámeček
pevný - Je to 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í rámečku kolem nadpisu.

HTML

HTML stránku

Vytvořte rámeček kolem nadpisu.

A styl pro samotný rám.

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

Výsledkem je pevný červený rám o tl 2px.

Rám se skládá ze čtyř stran: Horní, Že jo, Dolní A Vlevo, odjet a protože máme specifikovanou vlastnost okraj , pak prohlížeč ve výchozím nastavení vykreslí všechny čtyři strany rámečku. Pokud tedy potřebujete určit rámeček pouze na jedné straně, pak se předpony používají k označení strany, 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 pro každou vlastnost 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č bude znamenat, že stačí vytvořit rámeček zespodu, tzn. podtržení názvu. Stejným způsobem můžete tento kód duplikovat nastavením rámečku na druhou stranu, například 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ý okraj nahoře a dole. Totéž lze udělat pro ostatní strany.

Jak jste si již jistě všimli, nahrávka se ukázala být poměrně velká, a tak existuje v praxi často používaný zkrácený typ nahrávky.

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 - hraniční styl a barva rámu - #ff0000 .

To znamená, že prohlížeč vidí takový zkrácený záznam okraj: 2px pevné #ff0000; , vytvoří také rámeček na všech čtyřech stranách titulku. Tento krátký záznam je ekvivalentní záznamu, který jsme použili výše (kde byly použity tři vlastnosti).

Pokud pomocí krátkého zápisu potřebujete označit rámeček pouze na jedné straně, pak do vlastnosti přidáme prosťáček označující stranu, ze které má být rámeček vytvořen.

H2( border-top:2px solid #ff0000; )

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

Tímto způsobem pomocí nemovitosti okraj kolem jakéhokoli prvku je vytvořen rám. Rámeček můžete také použít k vytvoření podtržení pro odkazy, když potřebujete pro podtržení jinou barvu. No, to je s rámcem vše, přejděme k další důležité lekci, na kterou se podíváme

Podívejme se na nějaký dokument. Tvoří se na něm HTML prvky (zobrazují se na obrazovce v prohlížeči). Jsou tvořeny na základě značek. Umístěte značky, ty jsou zpracovány html parserem (dostupným v jakémkoli prohlížeči) a vytvoří html prvky. A jak tyto prvky budou vypadat, určuje CSS.

Všechny prvky html mají 4 oblasti: oblast výplně, okraj, výplň a obsah prvku. K čemu jsou potřeba?

Okraje jsou potřebné k regulaci interakce tohoto prvku s hranicemi ostatních prvků.
Padding je vzdálenost od rámečku k obsahu daného prvku.
Obsah samotného prvku. Tady je to jasné. Pokud existují vnořené prvky, pak se nacházejí v této oblasti.
Rám (okraj). Naznačuje hranice prvku. Schematicky lze tyto 4 oblasti znázornit takto:

Mělo by být zřejmé, že každý prvek leží v nějaké oblasti. Tato oblast pro prvek, který v ní leží, se nazývá kontejner. Tito. Kontejner je oblast obsahu nadřazeného prvku. Tato plocha určuje prostor pro stavbu vnitřního prvku. To znamená, že vnitřní prvek se přizpůsobí velikosti této oblasti.

Okraje

To je, když náš prvek interaguje s hranicemi kontejneru a s hranicemi sousedních prvků (těch, které jsou v kódu umístěny vedle něj). Základní pravidla:

margin-top: auto|magnitude|% - horní okraj.
margin-right: auto|magnitude|% - pravý okraj.
margin-bottom: auto|magnitude|% - dolní okraj.
margin-left: auto|magnitude|% - levý okraj.
margin: margin-top margin-right margin-bottom margin-left – prefabrikované pravidlo.

Hodnota „auto“ znamená, že prohlížeč bude tyto hodnoty analyzovat nezávisle. Velikost odsazení lze zadat v následujících hodnotách: em, ex, px. Procenta (%) se počítají z šířky kontejneru (z oblasti obsahu nadřazeného prvku). Pokud zadáte zápornou hodnotu, budou se hranice prvků uvnitř nadřazeného kontejneru vzájemně srážet.

Pravidlo „margin“ je složené; zde jsou uvedeny hodnoty všech 4 okrajů (začínaje shora a ve směru hodinových ručiček). Příklady:

Okraj: 10px 20px 20px 30px; okraj: 10px 20px 30px; - okraj zleva doprava je stejný: 10px 20px; - okraj shora dolů a zleva doprava je stejný: 10px; - všechny odrážky jsou stejné

Vycpávka

Zde nemohou být záporné hodnoty, protože Není možné přesunout obsah za rámec prvku. Procenta se počítají na základě šířky kontejneru.

padding-top: value|%.
padding-right: value|%.
padding-bottom: value|%.
padding-left: value|%.
polstrování: vycpávka-horní vycpávka-pravá vycpávka-dolní vycpávka-levá - prefabrikované pravidlo. Podobné jako „marže“.

Hranice v CSS

Všechny rámy mají následující vlastnosti:

Thickness - border-width: value (tenký|střední|tlustý). Výchozí hodnota je střední.
Barva - border-color: color. Výchozí je barva písma v tomto prvku.
Typ – styl ohraničení: žádný|tečkovaný|přerušovaný|plný|dvojitý|drážka|hřeben|vložka|výstup. Typy: bez rámu | tečky | tečkovaný | pevný | dvojitý | reliéfní imitace.

Pravidla samotného rámce: