Divs ir apima nėra keičiami kuriant tinklalapį. Kiekvienas jų skirtas skirtingiems tikslams, o žinojimas, kada juos naudoti, padės sukurti švarias, lengvai valdomas svetaines.
Naudojant „Div“ elementą
Divs apibrėžti loginius skirstymus savo tinklalapyje. A div- trumpas dalijimasis - iš esmės yra langelis, kuriame galite įdėti kitus HTML elementai kurie priklauso kartu. Skyriuje gali būti keli kiti elementai, tokie kaip pastraipos, antraštės, sąrašai, nuorodos, vaizdai ir kt. Jis netgi gali turėti kitų padalinių, kad būtų sukurta papildoma struktūra ir organizacija.
Norėdami naudoti div elementą, padėkite atvirą žyma prieš puslapio sritį, kurią norite atskirti, ir uždarymas
div turinys
Jei sukursite šią sritį naudodami CSS, galite pridėti ID parinkiklis prie pradinės div žymos:
Arba galite pridėti klasės parinkiklį:
Tada galite dirbti su šiais elementais CSS arba „JavaScript“.
Dabartinės geriausios praktikos yra linkusios naudoti klasių parinkiklius vietoj ID, iš dalies dėl konkretaus asmens pasirinkimo. Bet kuris iš jų yra priimtinas, ir jūs netgi galite duoti
div ir ID, ir klasės parinkiklį.Divai ar skyriai?
div elementas skiriasi nuo HTML5skyrius elementas, nes jis nesuteikia uždaram turiniui prasminės prasmės. Jei nesate tikri, ar turinio blokas turėtų būti a div arba a skyrius, pagalvokite apie elemento ir turinio paskirtį.
- Jei jums reikia elemento, kad paprasčiausiai pridėtumėte stilių prie tos puslapio srities, turėtumėte naudoti div elementas.
- Jei turinys yra aiškiai sutelktas ir gali atsiskirti, apsvarstykite galimybę naudoti skyrius elementas.
Galiausiai tiek divai ir skyriai elkitės panašiai, ir jūs galite suteikti bet kurį iš jų atributus ir suformuoti juos naudodami CSS. Abu jie yra bloko lygio elementai.
Naudojant „Spans“
Span pagal nutylėjimą yra įterptasis elementas, skirtingai div ir skyrius elementai. ruožas elementas paprastai naudojamas konkretaus turinio, pvz., teksto, apvyniojimui, suteikiant jam papildomą kabliuką, kurį galite naudoti norėdami pridėti stilių. Tačiau be jokių stiliaus atributų ruožas neturi jokio poveikio tekstui.
Kitas skirtumas tarp ruožas ir div elementai yra tai, kad div elementas apima pastraipos pertrauką, o ruožas elementas tik nurodo naršyklei taikyti susietas CSS stiliaus taisykles tam, kas yra žymos:
Paryškintas tekstas ir neakcentuotas tekstas.
Galite pridėti.
class = "paryškinti"
arba panašus į ruožas elementas, norint stilizuoti tekstą naudojant CSS.
Tarpatramio elementas neturi privalomų atributų, tačiau trys naudingiausi yra tokie patys kaip ir div elementas:
- stiliaus
- klasė
- ID
Naudokite ruožas kai norite pakeisti turinio stilių neapibrėždami to turinio kaip naujo bloko lygio elementas dokumente.
Pvz., Jei norite antrojo žodžio h3 norėdamas būti raudonas, galėtum apgaubti šį žodį a ruožas elementas, kuris stilizuotų šį žodį kaip raudoną tekstą. Žodis vis dar išlieka h3 elementas, bet bus rodomas raudonai.