Wéi benotzen d'Spannungs- a Div Divor Elements

Spektakelen a Div an CSS fir méi Stil a Layoutreplikatioun benotzen.

Vill Leit, déi nei Webdesign an HTML / CSS neier sinn, benotzen d'Elementer an

anescht a baue se als Webseiten aus. D'Realitéit awer ass datt all dës HTML Elementer verschidden Zwecker déngen. Léieren fir se ze benotzen fir säin Intentiounsziler ze hëllefen Iech méi sauber Websäiten entwéckelen, déi Code leien allgemeng verwalten.

Benotzt de
Element

De div Element definéiert logesch Divisiounen op Ärer Websäit.

Et ass haaptsächlech eng Këscht, an där Dir aner HTML Elementer platzéiere kann, déi logesch zesummen goen. Eng Divisioun kann e puer aner Elementer hunn, wéi Paragrafen, Rubriken, Lëschte, Linke, Biller, etc. Et kann och nach aner Divisiounen an der Géigend hunn, fir är HTML-Dokumenter ofzebauen an ze organiséieren.

Fir den div element ze benotzen, plazéiert en oppene

-Tag virun der Gebitt vun der Säit, déi Dir als separate Divisioun uewe wëllt, a en no

Inhalt vun div

Wann de Beräich vun Ärer Säit e puer zousätzlech Informatioune braucht, déi Dir spéider mat CSS benotzt, kënnt Dir en ID selector (z.

id = "myDiv">), oder e Klassesektor (z. B. Klass = "bigDiv">). Béid vun dësen Attributer kënnen dann mat CSS ausgewielt ginn oder iwwer JavaScript modifizéiert ginn. Aktuell Best Practices leien op d'Benotze vun Klassementen anstatt IDen, deelweis wéinst spezifeschen ID Selektoren. An der Wahrheet däerf Dir awer eent benotzen an e kann souguer eng Divisioun als ID a Klassesektor ginn.

Wann Dir

Versus

De Div Element ass ënnerschiddlech vum HTML5-Deel Element, well et de Semester keng semantesch Bedeitung huet. Wann Dir net sécher sidd, ob de Inhaltsblock als Div oder eng Rubrik soll sinn, denken ech un wéi den Zweck vum Element an dem Inhalt hëllefe fir Iech ze entscheeden wat fir se ze benotzen:

  • Wann Dir de Element just fir Stiler an dësem Gebitt vun der Säit ze benotzen, musst Dir den div Element benotzen.
  • Wann de Contenu enthale sinn, huet e verschiddenen Fokus a kéint op eegene Stand zoustinn, da kënnt Dir d'Rubrik Deel anstatt benotzen.

Leschtend verlaangen zwee Divisiounen a Sektioun zimlech ähnlech. Dir kënnt entweder vun hinnen attribute Wäerter hunn an se mat CSS unzepassen fir de Bléck vun Ärem Site ze kréien deen Dir braucht. Déi zwee sinn Elementer vum Blockniveau.

Mat dem Element

D'Spannelement ass e Inline-Element nom Standard. Dat gesäit et aus der Divisioun Deel an Elementer. De Spannendelelement gëtt oft benotzt fir e spezifesche Bestanddeel ze bezéien, normalerweis Text, fir en zousätzleche "Haken" ze maachen, deen spéider méi styléiert gëtt. Dir benotzt mat CSS, et kann den Stil vum Text ëmgoen; Allerdings ouni all Stil Stil, ass de Spannendeleg eleng alleguer näischt iwwer Text.

Dëst ass den Haaptunterschied tëscht der Spannweile an den Div Elementer. Wéi schonn erwähnt ass d'Div div bestehend Paragraphe, sou datt de Spannungselement nëmmen de Browser erzielt huet, d'assoziéiert CSS-Stilregelen anzebezéien op wat geschitt mat den Variatiounen:


Highlighted Text an net markéierter Text.

Setzt d'Klass = "Highlight" oder aner Klass um Spannendelem fir den Text mat CSS ze benotzen (z. B. class = "highlight">).

De Spannendelelement huet keng Verännerungen uginn, awer déi dräi déi am Nëtzlech sinn déi selwecht wéi déi vum Div div:

  • Stil
  • Klass
  • id

Verwenden Spuere wann Dir den Inhaltstil ännert, ouni datt dësen Inhalt als neit Blockelement Element am Dokument definéiert.

Zum Beispill, wann Dir de zweete Wuert vun enger h3 Rubrik wou Dir kéint router sinn, kéint Dir dëst Wuert mat engem Spannend Element ëmginn dat dës Wuert als roude Text benotzt. D'Wuert bleift nach Deel vum h3-Element, awer elo och rëm:

Dëst ass meng Awesome Headline

Edited by Jeremy Girard um 2/2/17