Undolog.com

Här är några korta tips om hur du använder class och id i stilmallar. Kom ihåg att nu användning av Javascript avancerad teknik, till exempel användningen av Ajax motor, kan komma i konflikt med de rekommendationer som anges här! Och i slutändan kommer vi att se varför.

Eftersom du har är attributet class="" att attributet id="" för att fästa en tagg till en stil, ofta är förvirrad och inte förstår vad som är skillnaden, eller det bästa valet mellan de två. I sanning rapporterats av TAG klass eller via id för CSS förändrar ingenting, eller nästan. Vilka förändringar är det sätt vi tycker om sidan och använda dem ordentligt id och sedan befinner oss utan klasser att ångra de val som görs.

Ett förtydligande om ärftlig

Innan du börjar vill jag ta tillfället i akt att understryka en viktig stilar, eller coscading eller arv. I praktiken, en undergrupp ärver egenskaperna hos fadern, om du inte uttryckligen anger !important Här är ett exempel som kan klargöra situationen. Tänk dig att du har skapat följande formatmall:

och följande HTML-kod:

Resultatet i webbläsaren faktiskt kommer att ha vad du vill, första stycket kommer att göras med 14 pixel typsnitt och andra stycket med typsnittet till 22 pixlar! Vi försöker nu att använda klass istället för id:

HTML:

Resultatet på webbläsaren (testat på Firefox 1.5 + och IE6), denna gång kommer att vara olika! Vad hände? Den div med klassen d_box ärvt font-size av den första div id c_box id id c_box id sedan kräver de klasser som "döttrar" ärva sina attribut (även om detta inte är bra för alla stilar). För att eliminera problemet måste uttryckligen, med !important det font-size klass d_box

På detta sätt som vi tvingar att överväga det nya formatet definieras av klass d_box

Genom att bara använda klasser:

HTML:

Resultatet blir att den ursprungliga webbläsare, båda punkterna kommer att göras ordentligt. Moral: mycket noggrant och sedan när du använder Cascading Style ... Om det är sant att det inte finns någon omedelbar skillnad mellan klass och id är också sant att deras användning inte är helt identiska. Eftersom det annars finns två sätt att ta itu med?

Artikel

Men det är ett sätt att veta vem som "vann" när du ställer en stil. Denna teknik som brukar kallas Cascade artikel 3.
Det ger ett värde på varje väljaren, eller förklarande linje CSS. Detta värde är i form ABC.

1) lägga till 1 till A för varje id i väljaren
2) lägg 1 till B för varje class i väljaren
3) lägga till 1 till C för varje tagg i väljaren

Här är ett exempel:

Det högsta värdet vinner. Om två regler har samma vikt, vann den sista definitionen.

Rekommendationer

Ett sätt kan vara detta: Använd klassen när beteendet hos en visuell TAG kan variera beroende på dess moderföretag container. Använd id det visuella beteende är unikt, det vill säga oberoende av dess moderföretag container.

Ett tydligt exempel på detta tillvägagångssätt skulle kunna vara följande: beteendet hos en hypotetisk titel. I detta fall kommer vi att använda class="title" och föremål för regelbundna container över olika beteenden. CSS-fil kan vara:

I verkligheten, ja, det är ännu bättre eftersom vi har TAG H n I ett verkligt fall klassen title skulle vara värdelösa. I praktiken tekniken är att använda id som omkopplare beteende (i själva verket ofta kallad id-selector). En verklig situation skulle kunna vara:

Vi har tre olika effekter beroende på väljaren. Huvudregeln kan vara: om detta visuellt TAG kommer att uppträda på olika sätt beroende på de behållare som används class

I detta fall bland annat omfattar många delar av visuell layout såsom listor ul Dessa kan på olika sätt beroende på behållaren mor kan titt i menyn till vänster, en annan på första sidan, ännu en i sidofältet, osv ... Men vad vi behöver i de flesta fall är det enda väljaren id TAG standarden HTML tillgängliga metoder.

Till exempel god regel är att använda listor ul eller ol när du kan, enligt TAG H n den TAG strong code kod, vilket begränsar kort div och span på annat sätt onödig användning av stilar, även översvämningar nätet med lite supeflui . Ofta i själva verket inte ens vet alla HTML-taggar. Vissa webb-designers verkar bortse från några av de mest användbara taggen finns i standard-HTML. Visst vissa TAG (samt vissa egenskaper, händelser, stilar och, tyvärr, andra olika saker ...) är begränsad till ett fåtal specifika standard webbläsare, men det finns många TAG fullt stöd av nästan alla befintliga webbläsare (inklusive Safari - TAL men Apple har kanske glömt att det utvecklat en egen webbläsare?).

Den stilmallar, men tyvärr också är föremål för vissa missförstånd utspridda här och där. För Web Designer inte bara har att vänta hoppas på en framtida standard och mindre rörlig. Använd id som omkopplare kan inte undanta sig själva från att bli för involverad i en biverkning i samband med användning av Javascript. Genom det språk som mest klientsidan, om aktiverat i din webbläsare kan du få en länk till en särskild TAG eller sidelement. Detta är nu löst med lätthet (för en tid sedan var något mer komplicerad på grund av den ständigt närvarande oförenlighet mellan webbläsare!) Genom metoden getElementByID() från document

Som framgår av samma namn för metoden, getElementByID() hämtar pekaren på grundval av id för objektet. Problemet har att göra med CSS är att id i fråga är samma som används av getElementByID() objektet. Tänk dig sedan med att skriva ett webb-program som förvaltar en rad post-it på skärmen, om ens någonsin med position:absolute aktiveras. Detta innebär att efter den på sidan det kunde ha ett okänt antal n. Web Designer som vill skriva formatmall om detta, efter våra tidigare regeln skulle välja att använda en div behållare och ge den ett id="postIt" På så sätt följer vi regeln att när en efter det inte handlar om sig själv i ett visuellt olika beroende på vilken förälder container. I vår specifikation är det bara ett objekt är korrekt och sedan tilldela ett id Problemet kom när programmerare Javascript (tecknen i detta MiniStore är 2 olika men frågan skulle vara besvärande även för en enda ...) försök att få en länk till en särskild post-it! Det kommer snart att inse att det inte kan använda ID som diskriminerande som om sidan innehåller flera objekt med samma ID sedan getElementByID() kan inte ge en enda länk, den gräns som kan ge en lista (array), en förteckning över faktorer som är kända för alla lika.

Detta lång och långtråkig debatt för med sig en notering om detta. Vid utvecklingen av HTML / JavaScript / CSS och särskilt i blad av stilar, mycket beror på den övergripande vision. Det är egentligen inte en regel som giltigt av någon lösning. Att kunna se projektet i sin helhet kan bidra till flera av de regler som.

Liknande Post

• Web2.0: Adobe försöker Apollo? (2)
• Web2.0: Gran Paradiso Firefox 3.0 och Apollo (2)
• jQuery: runda kanter på bilderna för att överlappa (0)
• Tillgänglighet och användbarhet: diskreta Javascript (4)
• Nascondimi (0)