Kako koristiti Span i Div HTML elemente

Koristite raspon i div sa CSS-om radi veće kontrole stilova i rasporeda.

Mnogi ljudi koji su novi u web dizajnu i HTML / CSS koriste elemente i

naizmenično, dok izgrade web stranice. Realnost je, međutim, da svaki od ovih HTML elementa služi različitim namjenama. Učenje da se svako koristi za njegovu namjenu će vam pomoći da razvijete čistije web stranice koje kodovi lakše upravljaju uopšte.

Korišćenje
Elementa

Element div definiše logičke podele na vašoj web stranici.

U suštini to je kutija u kojoj možete postaviti i druge HTML elemente koji se logički kreću. Podela može imati više drugih elemenata u njemu, kao što su paragrafi, zaglavlja, liste, veze, slike itd. Može imati i druge razlike unutar nje da obezbede dodatnu strukturu i organizaciju u svoj HTML dokument.

Da biste koristili element div, postavite otvorenu oznaku

pre područja vaše stranice koju želite kao zasebnu podjelu, a zatim zatvorite oznaku nakon nje:

sadržaj div

Ako je na vašoj stranici potrebno dodatne informacije koje ćete kasnije stajati s CSS-om, možete dodati selektor id-a (npr.

id = "myDiv">) ili selektor klase (npr. klasa = "bigDiv">). Oba ova atributa se zatim mogu izabrati koristeći CSS ili modifikovane pomoću JavaScript-a. Trenutne najbolje prakse se nagoveštavaju upotrebi selektora klase umesto ID-ova, dijelom zbog toga kako su određeni selektori ID-a. Istina, međutim, možete koristiti bilo koji od njih i čak možete podeliti i ID i selektor razreda.

Kada koristiti

Versus

Element div se razlikuje od elementa elementa HTML5 jer on ne daje semantičkom značenju priloženom sadržaju. Ako niste sigurni da li će blok sadržaja biti div ili odjeljak, razmislite o tome koja je svrha elemenata i sadržaja da vam pomogne da odlučite koja će se koristiti:

  • Ako vam je potreban element jednostavno dodati stilove u to područje stranice, trebalo bi da koristite element div.
  • Ako sadr¾aj koji treba sadr¾ati ima poseban fokus i mo¾e da stoji samostalno, možda ¾elite da koristite element dijela umjesto toga.

Na kraju krajeva, i divevi i sekcije se ponašaju prilično slično i možete dati bilo kojoj od njih vrijednosti atributa i stilizirati ih CSS-om kako biste dobili izgled vašeg sajta koji vam je potreban. Oba su elementi blok-nivoa.

Korišćenje elementa

Element raspona je podrazumevani inline element. Ovo ga izdvaja od elemenata divova i odseka. Element raspona se često koristi za obeležavanje određenog komada sadržaja, obično teksta, kako bi mu dala dodatnu "kuku" koja se kasnije može stajati. Koriste se u CSS-u, može promeniti stil teksta koji se nalazi u njemu; Međutim, bez ikakvih stilskih atributa, elemenat raspona samo uopšte nema efekta na tekst.

Ovo je glavna razlika između raspona i div elemenata. Kao što je već rečeno, element div uključuje prekid pasusa, dok element elementa samo govori pretraživaču da primeni odgovarajuća pravila CSS stila na ono što je priloženo oznakama :


Označeni tekst i neobeleženi tekst.

Dodajte razred = "highlight" ili drugu klasu elementu raspona kako biste stvorili tekst pomoću CSS-a (npr. Klasa = "highlight">).

Element raspona nema nikakvih atributa, ali tri koja su najkorisnija su ista kao i elementa div:

  • stil
  • klasa
  • id

Koristite raspon kada želite da promenite stil sadržaja bez definisanja tog sadržaja kao novog elementa blok-nivoa u dokumentu.

Na primjer, ako želite da druga riječ od naslova h3 bude crvena, možete je okružiti tom riječom s elementom raspona koji bi oblikovao riječ kao crveni tekst. Riječ i dalje ostaje dio elementa h3, ali sada se također prikazuje u crvenoj boji:

Ovo je moj Awesome Headline

Ispravio / la Jeremy Girard dana 2/2/17