✅ Seznamy a nabídky v CSS3

Obsah

Na vytvářet dynamické nabídky pro naše webové stránky Dnes je velmi běžné programovat v HTML5 a poté mu dát osobní vzhled a dojem CSS3 že je to jazyk, který je založen na šablonách stylů, to znamená, že kód, který dává naší stránce tvar, barvu a strukturu, jde do samostatného souboru zakódovaného mimo samotnou stránku, kterou píšeme.

Nejprve se podíváme na to, jak vytvářet seznamy, protože koneckonců nabídka je seznam, který je navržen tak, aby byl viditelně elegantnější. Tímto způsobem jsme strukturováni v Html jako seznam odkazů a poté vložíme personalizovaný vzhled již s CSS3.

Existují dva typy seznamů, seřazené a neuspořádané. Pokud použijeme seznam k pozdější konfiguraci nabídky, je velmi pravděpodobné, že použijeme neuspořádaný seznam, nicméně možnosti uvidíme.

Jsou vytvořeny úplně stejně, jediný rozdíl spočívá ve vyhrazeném slově, které pro objednané bude

HTML kód je následující:


První prvek
Druhý prvek
Třetí prvek


První prvek
Druhý prvek
Třetí prvek

1. První prvek
2. Druhý prvek
3. Třetí prvek

Nebo přesně to samé bez pořadové číslice jako první:

První prvek
Druhý prvek
Třetí prvek

V HTML existují určité předformáty, když vytváříme seznam, to znamená, že existuje určité rozpětí, barva písma, odrážka, odsazení atd. to se ve výchozím nastavení zobrazuje při vytváření našeho seznamu. Špatné je, že vizuálně to nevypadá moc dobře, dobré je, že je extrémně snadné jej změnit podle našich představ díky CSS.

Začneme tím, že se podíváme na různé typy vinět, které můžeme umístit do naší nabídky. Ve výchozím nastavení každé položce v seznamu předchází černý kruh. Můžeme však ze svého souboru vložit čtverce, prázdné kruhy nebo obrázek.

Kód pro úpravu kulky v CSS3 je následující:

 #menu {list-style-type: square;}

Chcete -li upravit okraj pomocí ukázkové nabídky, je to stejně jednoduché jako použití tohoto kód v CSS3:

 #menu {margin: 0px;}

 #menu {margin: 0px; polstrování: 2px; }

Kód CSS3

 #menu {border: 2px;}

Kromě tloušťky je ohraničení pole, které má mnoho možností, můžeme si vybrat styl, barvu, přechod … a uvidíme některé možnosti.

Border-Style
Počínaje hranovým stylem, hraničním stylu, nejpoužívanějšími možnostmi jsou:

ŽádnýCo to dělá, je odstranit samotný okraj. Toto je výchozí možnost, takže normálně, když vytváříme seznamy pro naše nabídky, nezobrazí se žádná ohraničení, pokud je nezadáme.

PevnýToto je hrana, kterou lze nejvíce využít. Je to souvislý okraj, černé barvy.
SkrytýO skrytá je další možnost, ve které nevidíme žádné hrany, protože jsou skryté. Pro účely programování však existuje. Používá se k ohraničení okrajů jinými sousedními buňkami nebo tabulkami, i když nechceme, aby byl vidět silný okraj.
HřbetTuto hranu dáme, pokud chceme, aby vyčnívala ze zbytku. Vypadá, že se ohraničení zdá být umístěno o jednu úroveň výše než ostatní na obrazovce.
ZačátekStejně jako předchozí je to vyčnívající hrana, ale nezdá se, že by to byla úroveň nad povrchem obrazovky, než to, co nese uvnitř.
DrážkaNa rozdíl od hřebene s tímto hraničním stylem se zdá, že prvek je zapuštěn pod ostatní.
VsazenoStejným způsobem jako Groove se tento okraj nezdá být propadlý, ale ve skutečnosti je o jednu úroveň níže než ostatní.
TečkovanýPomocí tohoto stylu generujeme ohraničení tvořené tečkovanou čarou, ve výchozím nastavení černé a mezery.
DvojnásobekJak samo slovo říká, je to dvojitý okraj, tvořený dvěma souvislými černými čarami oddělenými mezerou.

PomlčkaJedná se o speciální typ ohraničení podobného tečkovaným, kromě toho, že body se stávají většími čarami, to znamená, že je to druh přerušované čáry.

Stejně jako u ohraničení můžeme u stylu ohraničení definovat ohraničení jedné strany, obou, horní hranice, dolní hranice nebo všech. Pokud zapíšeme pouze jednu hodnotu, vloží se na všechny hrany, a pokud místo jedné napíšeme dvě možnosti, první je pro horní a dolní hranu a druhá pro strany.

Tím jsme definovali ohraničení, velikost a styl, nicméně nabídka zůstává velmi jednoduchá a vizuálně nepříliš hezká. Můžeme chtít vertikální nabídky, protože jsou ve výchozím nastavení vytvořeny, ale pokud chceme, aby byly horizontální, musíme přidat klíčové slovo float, aby byla každá položka v seznamu umístěna vedle další.

Vysvětlím to trochu podrobněji, každý prvek seznamu, který jsme zakódovali pomocí „li“, má ve výchozím nastavení chování blokového prvku, to znamená, že po umístění generuje zalomení řádku a brání umístění jiného prvku po jeho boku. Chceme -li umístit každý prvek našeho seznamu vedle předchozího, musíme toto chování bloku odstranit.

K tomu by kód byl následující:

 #menu {list-style: none; okraj: 0px; polstrování: 0; } #menu li {margin: 2px; polstrování: 2px; ohraničení: 2px plné; plavat vlevo; }

horizontální nabídka

Pokud nyní chceme, aby náš seznam fungoval jako nabídka a přesměroval nás tam, kam chceme, musíme přidat odkaz na naše prvky. To je velmi jednoduché. Do našeho kódu v Html přidáme následující:


První prvek
Druhý prvek
Třetí prvek

Nakonec uvidíme některé z možností vzhledu.

Vlastnosti textu
ŠířkaPokud chceme dát pevnou šířku. Například šířka: 100 px;
Textová dekoracePokud chceme, aby byl text našeho prvku nějakým způsobem ozdoben. Existuje mnoho možností, ale některé z nejběžnějších jsou:

zdůraznit: pokud chceme, aby bylo vše podtrženo
overline: stejné jako podtržení vloží do celého textu řádek, ale tentokrát místo pod výše.
blikat: Vytvořte text, který svítí, který přerušovaně bliká jako světlo.
line-through: Tuto možnost napíšeme, pokud chceme, aby byl náš text přeškrtnutý.
žádný: toto je nadbytečnost, protože ve výchozím nastavení je text dodáván s touto hodnotou, bez jakékoli dekorace. Někdy však bude užitečné, pokud se chceme vrátit k počáteční možnosti poté, co jsme použili efekt pomocí zdroje zvaného hover, který uvidíme dále.

Zarovnání textuJe to směr, ve kterém bude obsah našich blokových prvků publikován, pozor, ne samotný text, který uvidíme později s vlastností direction. Možnosti jsou velmi jednoduché: vlevo, pokud chceme, aby to šlo zleva, doprava, pokud chceme, aby to šlo zprava doleva, vycentrovat, pokud chceme, aby byl text vystředěn, a zarovnat, pokud chceme, aby byl text zarovnaný.

SměrTouto volbou definujeme směr textu, který píšeme, v tomto případě existují pouze dvě možnosti:

ltr: což je ten, který se standardně zobrazuje v prohlížečích, protože kromě některých jazyků, ve kterých se píše zprava doleva, je obvyklé psát zleva doprava, což definuje tuto možnost.
rtl: je to další možná směrovost textu zprava doleva, kterou použijeme, pokud chceme například psát arabské texty.

Odsazení textuŽe pochází z odsazení nebo tabulace, je vlastnost, která je zodpovědná za stanovení uvedeného kritéria v prvním řádku našich blokových prvků a také v tabulkách. Existují tři možnosti:

opatření
procento
zdědit

Pokud v nich použijeme procenta, budeme odkazovat na šířku prvku, ve kterém je umístěn.
Také ve všech z nich můžeme použít kladné nebo záporné hodnoty jakékoli z jednotek měření, které existují pro css3, pixely, ems …

Transformace textuPoslední vlastnost související s textem, který uvidíme, má co do činění s velkými a malými písmeny:

kapitalizovat: s touto volbou se zobrazí pouze první písmeno každého slova velkými písmeny.
velkými písmeny: zobrazí veškerý text velkými písmeny.
malá písmena- Zobrazí veškerý text malými písmeny.
žádný: ponechá text tak, jak byl napsán. Je to ten, který přichází ve výchozím nastavení.

Mezery mezi slovyAčkoli se nezabývá přímo textem, dělá to na prostoru, který ponecháme mezi slovy. Jeho hodnoty mohou být „normální“ nebo platné. Pokud zadáme míru, její hodnota se přičte k normální míře, která je ve výchozím nastavení.

Nyní přejdeme k vlastnostem písma.

Vlastnosti písma
PísmoTato vlastnost je nejkompletnější ze všech, které souvisejí s písmem, a má několik možností, pokud jde o jeho použití. Nejprve můžete začít s jednou, dvěma, třemi nebo žádnou z hodnot „font-style“, „font-variant“ a „Font-weight“.

Potom musíme zadat velikost písmene s volitelně „font-size“, za nímž následuje mezera, která je dána „line-height“ a vždy končí typem rodiny písem „font-family“. Nakonec budete muset zadat jednu z následujících hodnot:

titulek- Pro tlačítka nebo rozevírací seznamy, tj. Pro ovládací prvky a pole formuláře.
Jídelní lístek: pokud se chystáme konfigurovat rozevírací nabídky nebo jiné typy nabídek.
ikona: pro texty zobrazené pod ikonami.
schránka zpráv-U dialogových oken, ať už jde o vyskakovací okna s chybou, vyskakovací okna s informacemi atd.
stav-baA: pro stavové řádky okna.
malé-caption - Pro malá pole formuláře a ovládací prvky.

Ve vlastnosti font jsme použili některé další možnosti, které jsme ještě neviděli a které vysvětlíme níže:

Styl fontuS ním definujeme styl fontu. Hodnoty, které může mít, jsou „normální“, což je výchozí hodnota, „kurzíva“, pokud chceme, aby naše písmeno bylo kurzívou, tedy kurzívou; nebo „šikmé“, pokud chceme mít šikmé písmeno, což je druh kurzívy, kde jsou nakloněny pouze znaky a ne všechny jako kurzívou.

Písmo-variantaPoužijeme to k vytvoření varianty písma a máme pouze dvě možnosti, „normální“, která přichází ve výchozím nastavení, a varianta „malá písmena“, nazývaná také malá písmena, takže velká písmena vypadají stejně velká jako malá písmena.

Hmotnost písmaJe to jedna z nejpoužívanějších vlastností, protože s ním můžeme ovládat tloušťku písmen (pozor, není to stejné jako velikost každého písmene, které uvidíme později). Číselně řečeno, má 9 možností, které jsou stovky od 100 do 900, tj. 100, 200, 300, 400, 500, 600, 700, 800 a 900. Existují také zapsané hodnoty, „normální“, které se rovná 400 „tučné“, což odpovídá 700 a které bychom nazvali tučným a které se kupodivu neobjevilo ve stylu písma, ale zde. Existují také hodnoty „odvážnější“ nebo „lehčí“ a někdy i jiné, například „střední“ nebo „těžké“, které jsou přiřazeny číselným hodnotám v závislosti na počtu tlouštěk, které písmo má.

Velikost písmaS touto vlastností pokud budeme kontrolovat velikost písma. K dispozici jsou čtyři hodnoty „absolutní velikost“, „relativní velikost“, „procentní jednotka“ a „měrná jednotka“. V CSS je definováno několik absolutních a relativních měrných jednotek, například em, což je v této vlastnosti nejpoužívanější, např. Px,%, in, cm, mm, pt nebo pc. Kromě těchto opatření existuje několik slov, která fungují a lze je použít, například xx-malá pro nejmenší, x-malá, malá, střední, velká, x-velká nebo xx-velká pro největší. Těchto šest slov odpovídá velikostem různých tagů názvu html

na

a toto jsou absolutní míry, takže budou vždy vypadat stejně bez ohledu na rozlišení prohlížeče nebo obrazovky. Slova „menší“ a „větší“ lze také použít jako relativní měření, která budou záviset na velikosti písma prvku, který jej obsahuje.

Výška řádkuJe již definován ve vlastnostech textu.
Rodina písemŠiroce používaný majetek, který my umožňuje vybrat písmo nebo písmo. Nejprve zadáme název písma nebo písmo a volitelně za ním mohou následovat další názvy písem v případě, že náš prohlížeč nebo systém první nemá nebo jej nepodporuje. Neexistuje žádný výchozí typ písma, protože závisí na našem prohlížeči, i když velmi běžný je „Times New Roman“. Některé obecné hodnoty typu písma mohou být „patkové“, kde jsou zahrnuta některá písma jako Times New Roman, Garamond, Georgia nebo Cambria; „Bezpatkové“ a jeho typy Verdana, Arial, Tahoma, Helvetica nebo Futura. „Monospace“ a jeho příklady mimo jiné Courier New nebo Monaco. A „fantasy“ s typy Comic sans nebo Impact. Samozřejmě existuje mnoho dalších písem, ze kterých si můžeme vybírat.

Mezery mezi písmenyS tímto můžeme ovládat mezeru mezi písmeny, a funguje přesně stejně jako jeho analogová mezera mezi slovy u textových vlastností, s hodnotami „normální“ a platnou mírou.

BarvaNakonec uvidíme vlastnost barvy, kterou chceme vložit do našeho textu. Ve výchozím nastavení je černá. Existuje několik způsobů, jak vybrat barvu, jedním z nich je 17 různých barevných slov, která existují: aqua, černá, červená, žlutá, modrá, fuchsie, zelená, limetková, oranžová, šedá, kaštanová, olivová, námořnická, fialová , stříbrná, modrozelená a bílá.

Další možností je zadat barvu RGB procento, to je jednoduše zadání tří procent odpovídajících barvám červená ®, zelená (G) a modrá (B):

 barva: rgb (22%, 76%, 14%); (3 procenta nemusí dávat 100%)

Další způsob je RGB desítkové který funguje přesně stejně jako procento RGB, ale místo uvedení tří hodnot v procentech jsou uvedeny jako desetinné hodnoty: