Potřebné nářadí
Abychom rozvinuli koncept zarovnání v HTML, musíme zmínit některé potřebné nástroje potřebné ke spuštění kódu HTML. Jeden je textový editor a druhý je prohlížeč. Textový editor může být poznámkový blok, úžasný, poznámkový blok ++ nebo jakýkoli jiný, který by mohl pomoci. V této příručce jsme jako prohlížeč použili Poznámkový blok, výchozí aplikaci v systému Windows a Google Chrome.
HTML formát
Abychom porozuměli zarovnání, musíme mít nejprve nějaké znalosti základů HTML. Představili jsme snímek obrazovky ukázkového kódu.
< html >
< hlava >...</ hlava >
< tělo >….</ tělo >
</ html >
HTML má dvě hlavní části. Jedna je hlava a druhá tělo. Všechny značky jsou zapsány v hranatých závorkách. Hlavní část se zabývá pojmenováním html stránky pomocí tagu title. A také použijte prohlášení o stylu uvnitř hlavy. Na druhé straně se tělo zabývá všemi ostatními značkami textu, obrázků nebo videí atd. Jinými slovy, cokoli chcete přidat na svou html stránku, je napsáno v části těla html.
Jedna věc, kterou zde musím zdůraznit, je otevírání a zavírání značek. Každý tag, který je zapsán, musí být uzavřen. Například Html má počáteční značku a koncovou značku. Je tedy pozorováno, že koncová značka má lomítko následované názvem značky. Podobně všechny ostatní značky také používají stejný přístup. Každý textový editor je poté uložen s příponou html. Použili jsme například soubor s názvem example.html. Poté uvidíte, že se ikona poznámkového bloku změnila na ikonu prohlížeče.
Protože zarovnání je obsahem stylingu. Styl v html je tří typů. Řadový styl, vnitřní a vnější styl. Inline znamená ve značce. Interní je napsáno uvnitř hlavy. Současně je externí styl zapsán do samostatného souboru CSS.
Vložený styl textu
Příklad 1
Nyní je čas diskutovat o příkladu zde. Zvažte obrázek zobrazený výše. Do tohoto souboru poznámkového bloku jsme napsali jednoduchý text. Když jej spustíme jako prohlížeč, zobrazí v prohlížeči níže uvedený výstup.
Pokud chceme, aby se tento text zobrazoval uprostřed, značku změníme.
Tato značka je vložená značka. Tuto značku napíšeme, když zavedeme značku odstavce do těla html. Za textem pak zavřete značku odstavce. Uložte a poté soubor otevřete v prohlížeči.
Odstavec je zarovnán uprostřed, jak je zobrazen v prohlížeči. Značka použitá v tomto příkladu se používá pro jakékoli zarovnání, tj. Pro levé, pravé a středové pole. Pokud však chcete zarovnat text pouze uprostřed, použije se k tomu konkrétní značka.
< centrum > …… ..</ centrum >Středová značka se používá před a za textem. To také ukáže stejný výsledek jako předchozí příklad.
Příklad 2
Toto je příklad zarovnání nadpisu místo odstavce v html textu. Syntaxe pro toto zarovnání nadpisu je stejná. To lze provést pomocí značky nebo vloženým stylem nebo přidáním značky zarovnání do značky záhlaví.
Výstup se zobrazí v prohlížeči. Značka nadpisu převedla prostý text na nadpis a značka jej zarovnala do středu.
Příklad 3
Zarovnejte text uprostřed
Zvažte příklad, ve kterém je v prohlížeči zobrazen odstavec. Musíme to zarovnat uprostřed.
Tento soubor otevřeme v poznámkovém bloku a poté jej zarovnáme do středové polohy pomocí značky.
< p styl =text-zarovnat: střed;>Po přidání této značky do odstavcové značky soubor uložte a spusťte v prohlížeči. Uvidíte, že odstavec je nyní zarovnán na střed. Viz obrázek níže.
Zarovnejte text doprava
Naklonění textu doprava je podobné umístění ve středu stránky. Pouze středové slovo je nahrazeno vpravo ve značce odstavce.
< p styl =text-zarovnat: správně;> ……… ..</ p >Změny lze vidět na níže přiloženém obrázku.
Uložte a obnovte webovou stránku v prohlížeči. Text je nyní přesunut na pravou stranu stránky.
Interní styling textu
Příklad 1
Jak je popsáno výše, interní CSS (kaskádový styl) nebo interní styl je typ CSS, který je definován v hlavní části html stránky. Funguje to podobně jako interní tagy.
Zvažte výše uvedenou stránku; obsahuje nadpisy a odstavce. Máme požadavek vidět text uprostřed. Zarovnání v řádku vyžaduje ruční psaní značek do každého odstavce. Interní styl lze však automaticky použít na každý odstavec textu uvedením písmene p v prohlášení o stylu. Do odstavcového tagu pak není třeba psát žádný tag. Nyní sledujte kód a funguje to.
< styl >P{Text-zarovnat: střed}
</ styl >
Tato značka je zapsána do značky stylu v hlavní části. Nyní spusťte kód v prohlížeči.
Když spustíte stránku v prohlížeči, uvidíte, že všechny odstavce jsou zarovnány uprostřed stránky. Tato značka se použije na každý odstavec v textu.
Příklad 2
V tomto případě stejně jako odstavec zarovnáme všechny nadpisy v textu na pravou stranu. Za tímto účelem zmíníme nadpisy v prohlášení o stylu uvnitř hlavy.
H2, h3{
Text-zarovnat: že jo
}
Nyní po uložení souboru spusťte soubor poznámkového bloku v prohlížeči. Uvidíte, že nadpisy jsou zarovnány na pravé straně stránky HTML.
Příklad 3
Ve vnitřním stylu může nastat situace, kdy potřebujete zarovnat text pouze u některých odstavců v textu, zatímco ostatní zůstanou stejné. Proto používáme koncept třídy. Uvádíme třídu tečkovou metodou uvnitř značky stylu. Do značky odstavce, kterou chcete zarovnat, je nutné přidat název třídy.
< styl >.centrum{
Text-zarovnat: střed}
</ styl >
třída =centrum> ……</ p >
Třídu jsme přidali do prvních tří odstavců. Nyní spusťte kód. Na výstupu můžete vidět, že první tři odstavce jsou zarovnány uprostřed, zatímco jiné nikoli.
Závěr
Tento článek vysvětlil, že zarovnání lze provést různými způsoby pomocí vložených a interních značek.