Je to uvnitř vrstvy

- otevírací štítek a

Toto je text uvnitř vrstvy

Uveďte v atributu styl značky div a také pravidla pro posuvníky vrstvy:

Zde overflow:auto znamená, že posuvníky se objeví automaticky, to znamená, když se obsah vrstvy nevejde do zadaných rozměrů. Pokud je auto nahrazeno rolováním, budou tyto pruhy přítomny vždy, bez ohledu na to, zda jsou potřeba nebo ne. A skrytá hodnota bude mít opačný efekt – neobjeví se, i když obsah tohoto kontejneru není vidět za jeho okraji.

Použijte stejnou metodu k přidání posuvníků obecně. Ve výchozím nastavení se zobrazují podle potřeby, ale pokud je z nějakého důvodu potřeba jejich neustálá přítomnost, pak by mělo být do zdrojového html kódu přidáno odpovídající pravidlo stylu. Najděte koncovou značku záhlaví dokumentu v kódu stránky a před tím napište tyto stylové pokyny:

Mít vlastní web v dnešní době není luxus, ale spíše nutnost. Jeho tvorba vyžaduje určité dovednosti a znalost html. Vytvoření jednoduchého webu je poměrně snadné. Nicméně jeho výzdoba a tvorba interaktivní prvky poskytování další funkce stránka bude začátečníkovi působit potíže. Jedním z těchto interaktivních prvků zvyšujících pohodlí návštěvníků stránek je bar. rolování. Je užitečný zejména v polích webu, které zajišťují jeho propojení se skripty (interakce webu s uživateli).

budete potřebovat

• Internet nebo jakýkoli html tutoriál

Instrukce

Nejdůležitější je v každém případě pohodlí. Samotná myšlenka použití proužku rolování na vašich webových stránkách bude vhodné pouze tehdy, pokud to nebude diktováno vaší touhou, ale její nezbytností. Vytvořte rozvržení, kam chcete umístit pás rolování. Vyberte místo pro posouvání (také se tomu říká pruhy rolování).

Vyberte umístění proužku rolování na stránce, která vás zajímá. Musí být pevně spojen s nějakým prvkem (např. textové pole nebo rozevírací seznam). Tento prostor musíte vypočítat v pixelech nebo procentech. To není obtížné, zvláště pokud má rozložení webu jasnou strukturu.

Mezi značky BODY byste měli přidat standardní kód pro rolování. Najdete ho v jakékoli html učebnici. Existují dvě možnosti - buď přidat tento fragment přímo do html kód stránku nebo ji připojte do šablony stylů css. Druhý způsob je pohodlnější, pokud neměníte pouze jeden, ale celý web. Poté musíte zadat parametry barvy pruhu rolování, jinak bude šedá a nezajímavá. Obrázek ukazuje a označuje prvky posouvání. Parametry je nutné zadat stejným způsobem, jak je znázorněno na obrázku, se středníkem.

Nyní rozhodně musíte provést vylepšení. Svléknout se rolování vypadalo to stejně ve všech prohlížečích, zkontrolujte to v těch hlavních - Internet Explorer, Mozilla Firefox a Opera. Pokud je na jednom z nich, vraťte se k prvnímu kroku a opravte chyby.

Užitečná rada

Existuje snadný způsob, jak vytvořit posuvník pro webovou stránku. Nastavte parametr výšky pro váš web na 75 %, poté se rolování objeví samo. Pravda, jeho barevná schémata stále to stojí za nastavení.

Zdroje:

• Web pro začínající webové vývojáře v roce 2019

Instrukce

Přijmout správné rozhodnutí. Proužek rolování by se měly objevit na vašem webu pouze v případě, že je to diktováno potřebou vytvořit další pohodlí pro uživatele, a nikoli pouze vašimi přáními. Vytvořte rozvržení stránky, na kterou se chystáte umístit pás rolování. Vyberte pro něj vhodné místo.

Vytvořte pevnou rolovací vazbu (může se také nazývat pás rolování) některým konkrétní prvek stránky. Může to být textové pole představující . Vypočítejte „parkovací“ polohu jízdního pruhu v pixelech a procento. To nebude vůbec těžké, pokud bude stránka přehledně strukturovaná.

Přidejte standardní proužkový kód rolování mezi tělesné štítky. Pokud nevíte co mluvíme o, stáhněte si libovolnou učebnici na html rozložení. Kód tam bude jasně popsán. Pro takové případy je nejlepší mít po ruce hotové šablony, abyste si mohli vzít jednotlivé prvky programový kód, který výrazně usnadňuje život. Takže jste našli kód. Umístěte jej buď přímo do samotného kódu stránky, nebo jej připojte css tabulka, což je mnohem jednodušší, ale pouze v případě, že nezměníte jednu, ale všechny stránky webu.

Nastavte barevné parametry pro pruh, jinak se bude jednat o standardní šedou barvu, která se s největší pravděpodobností nebude hodit do designu webu. Tyto parametry se nastavují ve stejném pořadí jako u všech ostatních grafický prvek stránky. Testujte v několika prohlížečích, například Mozilla, Opera a Explorer. Pokud je v některém z nich, opravte chyby v kódu programu.

Poté nastavte parametr výšky webu na 75 %. programový kód pro rolování bude zadáno automaticky. Ale stejně se musíte změnit pás rolování, a konkrétně - ona grafické možnosti. To je popsáno v předchozích odstavcích.

V tomto článku podrobně prozkoumáme vlastnost přetečení se všemi jejími hodnotami, která také umožňuje přidat nebo odebrat horizontální/vertikální posuvník. Jinými slovy, jak udělat posuvníky.

Přetečení v CSS zodpovídá za to, jak bude vypadat zobrazení informací v bloku, pokud obsah přesáhne výšku nebo šířku tohoto bloku. Tato vlastnost se vztahuje pouze na prvky bloku (display : block ; nebo ty, které jsou původně prvky bloku - divs atd.).

Možné hodnoty, které tato vlastnost nabývá (ve výchozím nastavení viditelné):

• Viditelný – Zobrazí se celý obsah prvku, a to i za zadanou výškou a šířkou.
• Skrytý - Zobrazí se pouze oblast uvnitř prvku, zbytek bude skrytý.
• Posouvání – posuvníky jsou vždy přidány.
• Auto – posuvníky se přidávají pouze v případě potřeby.
• Zdědit – Zdědí hodnotu rodiče.

Nejčastěji se tato vlastnost používá k odstranění nebo přidání posuvníků k prvku. Takto si například poradí s rámy, aby je nenacpali do plné velikosti. Nebo vložit nějaké velký text, takže nezabírá půl stránky, ale sedí pohodlně ve speciálním bloku a tam se dá posouvat a číst. Nemovitost z velké části řeší problém pohodlného zobrazování informací.

V ukázce můžete vidět, jak každá hodnota nemovitosti funguje v praxi:

HTML kód

tělo (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (color:#CC0033;) div ( width:200px; /* pevná šířka */ výška:300px; /* pevná výška */ border:1px solid #555; plovoucí:left) .VisibleDiv (overflow:visible;).HiddenDiv (overflow:hidden;).ScrollDiv (overflow:scroll;).

Stojí za to věnovat pozornost skutečnosti, že v tomto konkrétním případě mají bloky danou pevnou výšku a šířku. To je důležité, zvažte například možnost, když je výška bloku nastavena na auto:

Vidíme, že text se uvnitř bloku zobrazuje správně ve všech případech, až na malou nepříjemnost v případě scroll , kde se objevují neaktivní posuvníky.

V tomto případě však existuje malé nebezpečí, s nímž mnozí nerozumí, proč vzniklo a jak jej napravit. Faktem je, že pokud blok s přetečením: viditelný;

to znamená, že výchozí hodnota a její obsah mají prvky s jakoukoli plovoucí hodnotou kromě none , pak se toto vše zobrazí nesprávně. Abyste pochopili, jaká je tato situace, zvažte příklad: Pod Blok VisibleDiv

Přichází bezprostředně za div s přetečením:visible (výchozí hodnota)

Pod blokem VisibleDiv není nic

tělo (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (color:#CC0033;) p (float:left;) div ( width:500px; height:auto; border: 1px plný #555; okraj: 4px;

V prvním případě je zřejmé, že obsah s vlastností float se pohybuje mimo blok a není zohledněn při určování výšky bloku, ve druhém případě pod blokem s přetečením: viditelný ;

Další blok je speciálně umístěn a natřen jinou barvou. Toto nejsou jediné příklady toho, jak se takové bloky mohou chovat na stránce (s přetečením : viditelným ; a výškou : auto ; ). To lze opravit nahrazením viditelné hodnoty skrytým , je třeba si uvědomit, že tato vlastnost by měla být zadána pouze pro bloky s výškou: auto; , pokud existuje pevná výška, pak je velká šance, že obsah bude jednoduše skryt, pokud je větší než zadaná výška. Takto bude vypadat opravená verze: Také nebudete mít takový problém, pokud má blok přetečení: viditelné ;

a výška: auto; je také specifikována nějaká hodnota plovoucí vlastnosti

. Obecně platí, že v mnoha případech zobrazení prvků závisí spíše na sadě vlastností než na jednotlivých vlastnostech. Podívejme se, jak pravidlo použít Přetečení CSS

Samozřejmě se v mnoha případech nelze obejít bez zadání konkrétních rozměrů plochy pomocí width a height (šířka a výška bloku), které mohou zabrat . Obecně níže zvážíme příklady působení vlastnosti přetečení ve všech možných variantách.

Přetečení (viditelné, skryté) - viditelný nebo skrytý obsah bloku, který přesahuje jeho hranice

Nejprve se podle tradice podívejme, jaké hodnoty jsou platné v tabulce specifikace W3C (data jsou prezentována podle CSS2.1, i když jsou platné a podporované ve více nová verze CSS3):

Jak vidíte, přetečení má 4 hlavní parametry (viditelné, skryté, automatické, rolování) a zdědit hodnotu, které lze v případě potřeby zadat, ale ve výchozím nastavení se toto pravidlo nedědí ( zděděno: ne na snímku obrazovky). Výchozí hodnota je viditelná (počáteční: viditelná).

Před zahájením výzkumu s praktické příklady, pojďme si ujasnit některé podrobnosti. Jak bylo uvedeno výše, pravidlo přetečení vám umožňuje ovládat obsah blokový prvek v případech, kdy se nevejde do jeho mezí. To přímo vyplývá z názvu tohoto Pravidla CSS(overflow v angličtině znamená přetečení, přebytek.)

Předem se můžete seznámit s tím, z čeho se skládá, kliknutím na uvedený odkaz. Kromě toho by bylo užitečné podívat se na materiál o, který dává prvkům na stránce charakteristiky bloku.

Vezměme si jako příklad kontejner DIV (více o div jako základ blokové rozložení), pojďme to zabarvit pomocí pozadí, prostřednictvím atributu style a umístěte jej dovnitř volný text:

Konečný výsledek bude něco takového:

Šířku kontejneru jsme nedefinovali. V tomto případě, pokud si pamatujete, prvek bloku na šířku zabírá veškerý prostor, který má k dispozici. Ale výška bloku, pokud není specifikována, je určena přesně obsahem (v našem příkladu tam přítomným textem).

Pravidlo přetečení pro bloky obsahující obsah, který nelze rozložit na výšku

Výše jsem nabídl příklad, kdy prvek bloku obsahuje text, který, když je omezená šířka, může být redistribuován (změnou zalamování slov). To platí zejména nyní při používání adaptivní design pro prohlížení na mobilních telefonech. Stává se však, že obsah z toho či onoho důvodu takovou flexibilitu nemá.

Začněme se stejnými podmínkami jako v příkladu, který jsme probrali výše. Jak si pamatujete, při zadání pevné šířky bloku byl obsah přerozdělen tak, aby nepřesahoval horizontální hranici, ale zároveň vertikálně zvětšoval výšku kontejneru (spolu s obsahem). Nyní změníme obsah a nahradíme standardní text dlouhými slovy bez mezer označujících šířku:

Upozorňujeme, že obsah nyní při omezení šířky okamžitě překračuje vodorovné hranice. A pokud napíšeme přetečení skryté, ořízneme tím obsah:

Přidání rolování pomocí parametrů rolování a automatického pravidla přetečení

Nyní se podíváme na případ, kdy je šířka a výška kontejneru pevná, ale obsah, který se do něj nevejde, je vhodné ponechat přístupný. Vezměme si stejný příklad c pevná šířka a výška, pouze hodnota výšky bude pro přehlednost nastavena na 60px, přidává se přetečení:scroll Na CSS styly:

V důsledku toho se posuvníky objevily svisle a vodorovně:

Obsah se tak stává přístupným, i když rolováním. Upozorňujeme však, že se vytvořilo nejen vertikální rolování, které je potřeba pro plné zobrazení, ale také horizontální rolování, které není aktivní. Toto je vlastnost rolovací hodnoty.

Chtěl bych poznamenat, že základní pravidlo stylu má variace ve formě přetečení-x a přetečení-y, které nabývají stejných hodnot (viditelné, skryté, rolování, auto) jako základní přetečení, pouze dané parametry aplikovat na obsah bloků vodorovně (x) a svisle (y).

CSS pravidlo přetečení textu (klip, elipsa).

Nyní se seznámíme s výše popsanou úpravou vlastnosti overflow, která se objevila pouze v CSS3. Informace o tom lze nalézt na odpovídající oficiální stránce (redakční návrh W3C):

Vlastnictví přetečení textu má 2 hlavní významy (klip a elipsa). Projeví se pouze v případě, že je zadáno přetečení, což je hodnota jiná než viditelná. A to je, jak si pamatujete, výchozí parametr, takže styly pro odpovídající prvek musí mít přetečení skrytými, rolovacími nebo automatickými.

Clip je výchozí hodnota a jednoduše ořízne text. Proto použijeme text-overflow pro náš DIV s odpovídajícím Vlastnosti CSS, přidání mezery:nowrap (pro zakázání zalamování slov):

Jak můžete vidět, elipsa umožňuje přidat elipsu místo oříznutého textu, který naznačuje jeho pokračování. Chcete-li dát tomuto příkladu logický závěr, můžete pro div přidat pseudotřídu:hover, která změní styl prvku, když na něj najedete myší:

Třída1:hover (přetečení:viditelné; prázdné znaky:normální;)

Nyní bude text oříznut, ale pokud na něj najedete myší, zobrazí se celý. Můžete si to ověřit kliknutím na uvedený odkaz.

Vlastnost přetečení řídí zobrazení obsahu prvku bloku, pokud se celý obsah nevejde a přesahuje oblast zadaných rozměrů.

Stručné informace

Označení

	Popis	Příklad
<тип>	Označuje typ hodnoty.	<размер>
A && B	Hodnoty musí být na výstupu 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í | malokapitálky
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čítat
	Hodnoty skupin.	[ plodina || křížek]
*	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

viditelný Zobrazí celý obsah prvku, dokonce i mimo zadanou výšku a šířku. skryté Zobrazí se pouze oblast uvnitř prvku, zbytek bude skrytý. posuvné posuvníky jsou vždy přidány. automatické posuvníky se přidávají pouze v případě potřeby.

Pískoviště

Medvídek Pú se vždy nebránil malému občerstvení, zvláště v jedenáct dopoledne, protože v té době snídaně dávno končila a oběd ještě nezačal. A samozřejmě měl hroznou radost, když viděl, že Králík vyndává hrnky a talíře.

div ( výška: 80px; přetečení: auto; )

Příklad

Výsledek tento příklad znázorněno na Obr. 1.

Rýže. 1. Použití vlastnosti přetečení

Objektový model

Objekt.styl.přetečení

Poznámka

Internet Explorer až do verze 7.0 včetně:

• relativně umístěné podřízené prvky, jehož hodnoty přetečení jsou nastaveny na auto nebo scroll se chovají, jako by měly pozici: pevnou .

Internet Explorer 8:

• Kombinace přetečení s hodnotou posouvání s vlastnostmi max-height a float může vést k chybějícím prvkům webové stránky a zobrazení prázdné obrazovky v prohlížeči.
• U bloku, který má vlastnosti float a overflow nastavené na scroll , se šířka zadaná pomocí vlastnosti max-width ignoruje.
• Výška bloku od vodorovný pruh rolování se zvyšuje o výšku posuvníku, i když podle specifikace Určeno CSS rozměry by měly zahrnovat posuvníky.

Firefox 3.6 správně neaplikuje přetečení na skupiny buněk tabulky ( , , ).

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.

×