Skip to main content

Použitie prvkov HTML Span a Div s CSS v návrhu webových stránok

Anonim

Mnoho ľudí, ktorí sú novými pri návrhu webových stránok a HTML / CSS, používajú a

prvky vzájomne zameniteľné, keď vytvárajú webové stránky. Realita však spočíva v tom, že každý z týchto prvkov HTML slúži rôznym účelom. Naučiť sa používať každý pre svoj určený účel vám pomôže vyvíjať čistejšie webové stránky, ktorých kód je ľahšie spravovať celkovo.

Použitie
Element

Element div definuje logické rozdiely na vašej webovej stránke. Je to v podstate krabica, v ktorej môžete umiestniť ďalšie prvky HTML, ktoré logicky idú dohromady. Divízia môže mať v sebe viacero ďalších prvkov, ako napríklad odseky, nadpisy, zoznamy, odkazy, obrázky atď. Môže mať dokonca aj ďalšie rozdelenia, ktoré vám poskytnú dodatočnú štruktúru a organizáciu dokumentu HTML.

Ak chcete použiť prvok div, umiestnite ho do otvorenej polohy

značku pred oblasťou vašej stránky, ktorú chcete ako samostatné oddelenie a zatvorenie
tag po ňom:

obsah div

Ak oblasť vašej stránky potrebuje nejaké ďalšie informácie, ktoré budete používať na štýl s CSS neskôr, môžete pridať selektor id (napr.

id = "myDiv">

) alebo výberu triedy (napr.

class = "bigDiv">

). Oba tieto atribúty je možné vybrať pomocou CSS alebo modifikovať pomocou jazyka JavaScript. Súčasné osvedčené postupy sa opierajú o použitie výberov triedy namiesto identifikátorov ID, čiastočne kvôli tomu, ako sú špecifické selektory ID. V pravde však môžete použiť jeden z nich a dokonca dať rozdelenie ako ID a triedu selector.When používať
Proti

Element div sa líši od elementu sekcie HTML5, pretože nedáva priloženému obsahu žiadny sémantický význam. Ak si nie ste istí, či by obsah bloku mal byť div alebo sekcia, premýšľajte nad tým, akým účelom prvku a obsahom máte pomôcť pri rozhodovaní o tom, ktoré použitie:

  • Ak potrebujete prvok jednoducho pridať štýly do tejto oblasti stránky, mali by ste použiť prvok div.
  • Ak obsah, ktorý má byť obsiahnutý, má zreteľné zameranie a mohol by byť sám osebe, možno by ste chceli použiť prvok sekcie.

Nakoniec sa obaja divízie a sekcie správajú veľmi podobne a môžete im dať buď hodnoty atribútov a ich štýl pomocou CSS, aby ste získali vzhľad vašich stránok, ktoré potrebujete. Obidva tieto sú prvky blokovej úrovne.

Použitie Element

Prvok span je predvoleným elementom. To ho odlišuje od elementov div a sekcií. Prvok rozpätia sa často používa na zabalenie určitého obsahu, obyčajne textu, aby mu dal ďalší "hák", ktorý môže byť neskôr štylizovaný. Používa sa so službou CSS, ale môže zmeniť štýl textu, ktorý obklopuje. avšak bez atribútov štýlu samotný prvok rozpätia nemá žiadny vplyv na text vôbec.

Toto je hlavný rozdiel medzi prvkami span a div. Ako už bolo uvedené vyššie, prvok div obsahuje zlomok odstavca, zatiaľ čo element span len informuje prehliadač, aby použil súvisiace pravidlá štýlu CSS na to, čo je priložené tagy:

Zvýraznený text a nezvýraznený text.

Pridajte

class = "vrcholom"

alebo inej triedy do elementu rozpoznávania textu na štýl textu pomocou CSS (napr.

class = "highlight">

). Span element nemá žiadne požadované atribúty, ale tie tri, ktoré sú najužitočnejšie, sú rovnaké ako tri prvky div:

  • štýl
  • trieda
  • id

Použite rozpätie, ak chcete zmeniť štýl obsahu bez definovania tohto obsahu ako nového prvku na úrovni bloku v dokumente.

Napríklad, ak chcete, aby druhé slovo v záhlaví h3 bolo červené, môžete toto slovo obklopiť spanovým prvkom, ktorý by mal slovo ako červený text. Slovo stále zostáva súčasťou elementu h3, ale teraz sa zobrazuje aj červenou farbou:

Toto je môj úžasný nadpis