HTML styly - Funkce a způsoby, jak zahrnout CSS na webové stránce

Obsah:

Anonim

Co jsou to styly HTML?

HTML kaskádový styl je list se sadou pravidel a vlastností, který říká prohlížeči, jak vykreslit HTML pomocí všech zadaných stylů.

CSS je způsob, jakým stylujeme jakékoli webové stránky. CSS má všechny vlastnosti jako pozadí, barvy, písma, mezery, ohraničení atd., Které můžeme definovat pro každý prvek na stránkách.

HTML Style Sheets se také používají k nastavení rozvržení stránky, jako například umístění záhlaví, zápatí nebo jiných prvků na stránku. CSS se vždy hovoří společně s HTML, protože stránky bez stylingu jsou velmi bledé bez zvýraznění nadpisy atd. A stejné velikosti písma na celé stránce, která uživatelům nedává dobrý vzhled.

Jak používat šablony stylů HTML?

V minulosti byly styly, skripty, HTML všechno napsané na stejné stránce. Díky tomu byly stránky extrémně zdlouhavé a velmi obtížně čitelné a editovatelné. Pak přišel způsob, jak oddělit HTML, styly a Javascript.

Způsoby, jak zahrnout šablony stylů HTML na webovou stránku:

Styly můžeme zahrnout 3 způsoby:

  1. Inline styling

Toto je způsob psaní stylů pro každý prvek v samotném HTML uvnitř atributu nazvaného styl.

Tento způsob stylingu se vůbec nedoporučuje, protože HTML vypadá zaplněný a nemůžeme se řídit přístupem „Write once, Use on many place“

Eg: Hello World!

Eg: Hello World!

  1. Vnitřní styling

Tím jsou styly zahrnuty do značky stylů a umístěny na webovou stránku nad HTML. Tento způsob stylingu je stále lepší než inline styling, protože můžeme mít společné styly sdružené v případě, že musí být použito pro více prvků najednou.

Ve vývojové fázi je snazší upravit soubor HTML a nemusíme pokaždé otevřít odpovídající soubor CSS a pokaždé je upravit.

Eg:

container-block(
font-size: 10px;
margin-top: 10px;
)

Hello World!

  1. Vnější styling

Toto je nejběžnější a nejlepší způsob, jak mít styly pro webovou stránku. Je to podobné internímu stylu, ale rozdíl je v tom, že styly jsou psány v samostatném souboru s příponou .css a odkaz na něj je umístěn ve značce head na webové stránce.

Syntaxe pro propojení souboru CSS na webové stránce je:

Styly by měly být zahrnuty do značky head, která je nad značkou body (tj. Skutečným obsahem) HTML

Jaká je priorita mezi vloženým, interním a externím stylingem?

Inline styly mají větší prioritu než interní a pak poslední priorita přichází pro externí styling.

Inline> Internal> External

Doporučené postupy při používání CSS:

  • CSS lze rozdělit do několika souborů místo jednoho.
  • Oddělené soubory CSS mohou být zahrnuty jeden po druhém do značky head pomocí značek odkazů.
  • Nebo jeden soubor CSS může mít více importovaných příkazů k importu zbytku souborů CSS. Tím logicky oddělíte CSS, ale nakonec se všechny styly vykreslí ze stejného souboru.

Použití: @import './process.css';

  • Styly lze definovat pro libovolné prvky webové stránky pomocí selektorů jako samotných značek HTML, názvů tříd, ID, libovolných názvů atributů.
  • K dispozici jsou některé pseudo selektory jako:
    • před
    • po
    • n-dítě
    • první dítě
    • poslední dítě
    • vznášet se
    • navštívil

V zásadě jde o stavy vybraných prvků a ne o přesné prvky.

  • Pokud je na stránce zahrnuto znásobené soubory CSS, poslední z nich má nejvyšší prioritu a přepíše stávající styly předchozích souborů se stejným selektorem.
  • Šablony stylů by měly být použity před samotným HTML, aby se styly aplikovaly během načítání stránky. Pokud bude HTML zahrnuto na konci, nejprve se načte a poté se pomalu aplikují styly, což uživateli dává velmi špatnou zkušenost.

Různé funkce HTML kaskádových stylů:

  • CSS poskytuje animace : Dříve byl javascript používán pouze pro animace. Nejnovější CSS tj. CSS3 poskytuje animace pomocí samotných vlastností.
  • Předpony dodavatele: Než prohlížeče uvolní standardní verzi / název vlastnosti pro jakékoli nové funkce, prohlížeče nám poskytnou nějaké předvolby dodavatele na určitou dobu po určitou dobu jako experiment. Vývojáři musí počkat, až prohlížeč vydá své standardní verze a mezitím mohou být experimentální funkce použity s předponami dodavatele.
  • Transformace CSS: Přechod se používá k postupnému přechodu na jednu hodnotu z jiné vlastnosti v daném trvání.

Eg: -webkit-transition: width 2s, height 4s;

  • Transformace CSS: Transformace v CSS vám umožňují překládat, otáčet, měnit měřítko a zkosit prvky.

Mediální dotazy:

Mobilní, stolní počítače a iPady se chovají odlišně, stránky však nemůžeme stylizovat stejným způsobem. Předchozí webové standardy byly navrženy tak, že jsme měli různé CSS pro každý typ zařízení.

S vývojem webových standardů a způsobem, jakým je web vytvářen, jsou prohlížeče vyvíjeny tak, aby měly jeden CSS, který lze použít pro jakýkoli typ zařízení. Pro změnu stylů zařízení na základě šířky a výšky se používají mediální dotazy, pomocí kterých můžeme určit minimální nebo maximální šířku zařízení a styly zápisu v něm.

Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)

Styly jsou určitě výhoda pro web. A protože vývoj webových stránek v poslední době exponenciálně rostl, CSS3 určitě získala velkou poptávku, aby byly stránky extrémně interaktivní a intuitivní.

Doporučené články

Toto byl průvodce HTML šablonami stylů. Zde diskutujeme o tom, jak pomocí HTML stylů, různých funkcí a způsobů zahrnout CSS na webovou stránku. Další informace naleznete také v následujících článcích -

  1. Úvod do CSS
  2. Výhody CSS ve Web Design
  3. Co je CSS? | Jak používat?
  4. Je CSS Case Sensitive?
  5. Různé styly seznamu HTML