Pro podobné případy a existují dvě specifické značky, které samy o sobě v podstatě nic nedělají. Ale při aplikaci požadované styly s nimi můžete dosáhnout čehokoli. Obecně můžete použít pouze tyto dvě značky a aplikovat na ně styly, abyste vytvořili celou stránku webu.

To jsou tedy značky

Jaký je mezi nimi rozdíl, pokud se používají pro stejnou věc?

prvek div - Tento bloková značka, a může obsahovat libovolné nám známé značky (seznamy, obrázky, tabulky...).

rozpětí prvek- Tento značka řádku a vztahuje se výhradně na text (zvýraznění části textu jinou barvou).

Styly, které se vztahují na tyto značky, jsou všechny styly, které jsme studovali. Neexistují žádná omezení pro použití jakýchkoli stylů.

Podívejme se na styly, které jsou pro tyto značky nejtypičtější. Vztahují se na všechny ostatní značky a používají se stejným způsobem, jen se častěji používají s těmito značkami (zejména

První místo, kterým bych chtěl začít, je umístění prvků.

Tato vlastnost:

pozice— nastavuje nebo definuje polohu prvku.

Hodnoty:

statický- výchozí. Poloha objektu je určena proudem HTML značení Podle standardní pravidla.

absolutní— poloha objektu je určena vzhledem k poloze nadřazeného objektu nebo vzhledem k objektu těla. relativní— Pozice objektu je určena posunem od pozice, ve které se objevil ve výchozím nastavení.

vlevo/nahoře— nastavuje nebo určuje polohu prvku vzhledem k levé/horní hraně.

Hodnoty:

X– číslo v procentech nebo pixelech.

auto- výchozí hodnota.

Podívejme se na příklad:

XHTML

Tento příklad ukazuje, že naše pole o šířce 300 pixelů se posune o 350 pixelů dolů a doleva o 200 pixelů vzhledem k tomu, kde se zobrazuje ve výchozím nastavení.

Následující důležitý majetek:

okraj– velikost odsazení od našeho bloku k sousedním objektům na čtyřech stranách.

Hodnoty:

margin-top— nastaví velikost horního okraje objektu

okraj-levý— nastavuje míru levého odsazení objektu

okraj-pravý— nastavuje míru pravého odsazení objektu

okraj-dole— nastaví hodnotu spodního odsazení objektu

XHTML

Vytvořili jsme blok s 30px okraji ze všech stran.

Nad čím bych se ještě rád pozastavil:

vycpávka– vlastnost určuje množství prostoru vloženého mezi objekt a jeho hranice.

Hodnoty:

vycpávka-dno— určuje velikost mezery vložené mezi objekt a jeho spodní okraj.

polstrování-vlevo— určuje velikost mezery vložené mezi objekt a jeho levý okraj.

vycpávka-vpravo- určuje velikost mezery vložené mezi objekt a jeho pravý okraj.

polstrování-top- určuje velikost mezery vložené mezi objekt a jeho horní okraj.

XHTML

Vytvořili jsme blok s 30px odsazením od obsahu na všechny jeho strany.

A podívejme se na příklad pomocí značky:

Řekněme, že máme konstrukci jako:

Jakýkoli text!

Chceme udělat text slova na žlutém pozadí modrými písmeny. Za tímto účelem jej uzavřeme do značky a použijeme příslušné styly.

Prvky z předchozí kapitoly se zobrazují postupně na jedné vodorovné lince. Chovají se jako prostý text a jsou jednoduše zobrazeny vedle sebe, i když mají konkrétní velikosti a další vlastnosti, které s textem nesouvisejí. To by nemělo být překvapivé, protože , A - prvky, které patří do jedné skupiny zvané inline-block. Takové prvky mohou mít <a href="https://innovakon.ru/cs/phone/chto-nuzhno-skachat-chtoby-pechatal-printer-luchshie-programmy-dlya.html">různé velikosti</a>, prohlížeč je však vždy zobrazuje vodorovně jako text. V této kapitole se seznámíme s různými skupinami prvků podle toho, jak jsou rozmístěny na stránce.</p><p>Nejprve se podíváme na to, jak zobrazit jeden prvek svisle pod druhým. V zásadě musíme prohlížeči říci: "Hele, chceme kontejner, který se dá skládat vertikálně." Naštěstí je tato značka kontejneru známá jako <div>a to je jakési „zabalení“ obsahu na nový řádek (jako zalomení stránky nebo zalomení řádku v textových editorech).</p><p>Chcete-li vidět, jak prvky fungují <div>Použijeme tři z nich a nastavíme jejich šířku, výšku a pozadí.</p><p>Podle výše uvedených podmínek bude HTML vypadat takto.</p><p> <div class="container"></div> <div class="container"></div> <div class="container"></div> </p><p>V CSS píšeme třídu .container, která je spojena s tagem <div> .</p><p>Kontejner ( šířka: 200px; výška: 200px; barva pozadí: modrá; )</p><p>Podívejme se na to v prohlížeči.</p><p>Vypadá to jako jeden velký obdélník. Co takhle oddělit značky? <div>od sebe navzájem?</p><p>Kontejner ( šířka: 200px; výška: 200px; barva pozadí: modrá; okraj-dolní: 10px; )</p><p>Skvělý! Prohlížeč zobrazuje tyto „bloky“ jeden pod druhým, na rozdíl od našeho předchozího příkladu formuláře, kde byly prvky zobrazeny na jednom řádku.</p><p>Jaký je rozdíl? Pokud jde o zobrazování značek, prohlížeč rozpoznává tři skupiny prvků:</p><ul><li>inline (malá písmena);</li><li>blok (blok);</li><li>inline-block (line-block).</li> </ul><p>Vložené prvky nezpůsobují nový řádek a zobrazují jeden prvek vedle druhého vodorovně. Prvky bloku jsou nastaveny jako bloky, které se skládají na sebe a nikdy se neobjevují vedle sebe vodorovně, pokud nepoužijeme kouzelnické triky CSS (o kterých se dozvíme v další kapitole). Prvky inline-block se chovají jako vložené prvky (zobrazené vedle sebe), ale liší se od nich tím, že mohou mít velikost. Například pole <textarea>může vypadat jako velký obdélník, ale stále zabírá místo za jedním řádkem textu.</p><ul><li>malá písmena - , <span><em> , <strong> </li><li>Blokovat - <div> , <p> , <article> </li><li>Řádkový blok - <input> , <textarea> </li> </ul><p>Ve výchozím nastavení mají vložené prvky vlastnost stylu zobrazení nastavenou na inline . Pro prvky bloku je jeho hodnota block a pro prvky inline-block inline-block . Nyní můžete vysvětlit, proč značka <span>nezalomí text na nový řádek. Protože se jedná o inline prvek, což znamená, že jeho vlastnost display je v CSS nastavena na inline. S ohledem na to je kód níže:</p><p>Jedna dvě tři</p><p>Prohlížeč zobrazí na jednom řádku:</p><p>jedna dvě tři</p><p>Toto chování však můžete změnit přidáním jednoho řádku CSS:</p><p>Rozpětí ( displej: blok; )</p><p>Nyní naše značky <span>se zobrazují jinak, každý začíná na novém řádku, protože jsme nastavili vlastnost display na block .</p><p>Pro tento příklad používáme <div>. Možná se ptáte, co tento tag v dokumentu popisuje. Krátká odpověď: nic. Používáme značku <div>v případech, kdy všechny ostatní značky nejsou vhodné pro použití toho, co jsme do dokumentu vložili. Obecně platí, že značka <div>(v kombinaci s různými třídami) se používá k dosažení různých vizuálních efektů, v důsledku toho nemá funkci pro popis obsahu. Pokud například chcete mít na svém webu tři svislé sloupce, možná budete potřebovat prvek, který dokáže oddělit některé vložené prvky nebo prvky vloženého bloku.</p><p>Obecně je dobré značku nadměrně nepoužívat <div>, Pokud možno.</p><p>S našimi novými znalostmi o blocích přepracujme kód formuláře tak, aby se pole formuláře a jejich popisy zobrazovaly pěkně pod sebou.</p><p> <form> <div> <label for="nickname">Tvé jméno:</label> </div> <div> <input type="text" id="nickname" name="nickname"> </div> <div> <label for="user-email">Tvůj e-mail:</label> </div> <div> <input type="email" id="user-email" name="user-email"> </div> <div> <label for="content">Obsah:</label> </div> <div> <textarea rows="10" cols="50" id="content" name="content">