Користите распон и див са ЦСС-ом ради веће контроле стилова и распореда.
Многи људи који су нови у веб дизајну и ХТМЛ / ЦСС користе елементе <спан> и <див> наизменично, док граде веб странице. Реалност је, међутим, да сваки од ових ХТМЛ елемента служи различитим намјенама. Учење да се свако користи за његову намјену ће вам помоћи да развијете чистије веб странице које је код тога лакше управљати уопште.
Коришћење елемента <див>
Елемент див дели логичке подјеле на вашој веб страници.
То је у основи кутија у којој можете поставити друге ХТМЛ елементе који се логички крећу. Подела може имати више других елемената у њему, као што су параграфи, заглавља, листе, линкови, слике итд. Може имати и друге делове унутар ње да обезбеде додатну структуру и организацију у свој ХТМЛ документ.
Да бисте користили елемент див, поставите отворену ознаку <див> пре подручја ваше странице коју желите као засебну подјелу и близу ознаке након ње:
<див>садржај див
Ако је на вашој страници потребно додатне информације које ћете касније стиснути помоћу ЦСС-а, можете додати селектор ид-а (нпр.
ид = "миДив">), или селектор класе (нпр. класа = "бигДив">). Оба ова атрибута се затим могу изабрати користећи ЦСС или модификоване помоћу ЈаваСцрипт-а. Тренутне најбоље праксе се подсећају на употребу селектора класе умјесто ИД-ова, дијелом због тога како су одређени селектори ИД-а. У истини, међутим, можете користити било који од њих и чак можете подијелити и ИД и селектор разреда.
Када користити <див> Версус <сецтион>
Елемент див се разликује од елемента елемента ХТМЛ5 јер он не даје семантичком значењу приложеном садржају. Ако нисте сигурни да ли ће блок садржаја бити див или секција, размислите о томе која је сврха елемената и садржаја да вам помогне да одлучите које ћете користити:
- Ако вам је потребан елемент једноставно додати стилове у то подручје странице, требало би да користите елемент див.
- Ако садр¾ај који треба да се садр¾и има посебан фокус и мо¾е да стоји самостално, можда ¾елите да користите елемент дијела.
На крају, и дивови и секције се понашају прилично слично и можете дати било којој од њих вредности атрибута и стилизовати их ЦСС-ом како бисте добили изглед вашег сајта који вам је потребан. Оба су елементи блок-нивоа.
Коришћење елемента <спан>
Елемент распона је подразумевани инлине елемент. Ово га разликује од елемената дива и одсека. Елемент распона се често користи за обележавање одређеног комада садржаја, обично текста, како би му дати додатни "кука" који се може стајати касније. Користе се у ЦСС-у, може променити стил текста који садржи; међутим, без икаквих стилских атрибута, елеменат распона само уопште нема ефекта на текст.
Ово је главна разлика између распона и див елемената. Као што је већ речено, елемент див укључује прекид пасуса, док елемент елемента само говори претраживачу да примени одговарајућа правила ЦСС стила на оно што је приложено ознакама <спан>:
<див ид = "мидив">
<п> <спан> Означени текст и необележени текст.
Додајте разред = "хигхлигхт" или другу класу елементу распона како бисте створили текст помоћу ЦСС-а (нпр. Класа = "хигхлигхт">).
Елемент распона нема тражене атрибуте, али три која су најкориснија су иста као и елемента див елемента:
- стил
- класа
- ид
Користите распон када желите да промените стил садржаја без дефинисања тог садржаја као новог елемента блок-нивоа у документу.
На пример, ако желите да друга реч од наслова х3 буде црвена, могли бисте да окружите ту реч са елементом распона који би створио ту реч као црвени текст. Реч и даље остаје део елемента х3, али сада се такође приказује у црвеној боји:
Ово је Ми Авесоме Хеадлине
Исправио / ла Јереми Гирард дана 2/2/17