Her er nogle korte tips om hvordan man bruger class og id i style sheets. Husk, at nu brugen af Javascript avancerede teknikker, såsom brugen af Ajax motor, kan komme i konflikt med de henstillinger, der er anført her! Og i sidste ende vil vi se hvorfor.
Fordi du har, er attributten class="" at attributten id="" for at knytte en kode til en stil, som ofte er stadig forvirrede og forstår ikke, hvad er forskellen, eller det bedste valg mellem de to. I sandhed indberettet af TAG klasse eller id for CSS ikke ændre noget, eller næsten. Hvilke ændringer er den måde, vi tænker på den side, og anvende dem rigtigt id og derefter befinder os uden klasser for at omvende de valg, der træffes.
En afklaring om arvelig
Før du begynder Jeg vil gerne benytte denne lejlighed til at understrege en vigtig stilarter, eller coscading eller arv. I praksis er en sub arver egenskaberne ved de far, medmindre du udtrykkeligt angive, at !important Her er et eksempel, der kan afklare denne situation. Forestil dig, at du har oprettet følgende typografiark:
CSS: :14px } # A_box p (font-size: 14px)
:22px } # B_box p (font-size: 22px)
og følgende HTML-kode:
HTML: <p> tekst direkte i Første a_box
</ p> <p> Ifølge teksten nedenfor b_box og hans ansigt under a_box
</ p> </ Div>
</ Div>
Resultatet på browser vil faktisk være det, du ønsker, første afsnit vil blive foretaget med 14 pixel-skrifttype og andet afsnit med skrifttypen til 22 pixels! Vi forsøger nu at bruge klasse i stedet for id:
CSS: :14px } # C_box p (font-size: 14px)
:22px } . D_box p (font-size: 22px)
HTML:
HTML: <p> Prime tekst direkte nedenfor c_box
</ p> <p> Ifølge teksten nedenfor d_box og hans ansigt under c_box
</ p> </ Div>
</ Div>
Resultatet på browser (testet på Firefox 1.5 + og IE6), denne gang vil være anderledes! Hvad skete der? Den div med klasse d_box arvet font-size i første div id c_box id id c_box id så kræver de klasser "døtre" at arve deres attributter (selv om dette ikke er godt for alle stilarter). At fjerne problemet skal udtrykkeligt angive, med !important at font-size klasse d_box som vist nedenfor:
CSS: :14px } # C_box p (font-size: 14px)
!important } . D_box p (font-size: 22px! Vigtige)
På denne måde vil vi indføre at overveje den nye stil defineret i klassen d_box
Brug kun klasser:
CSS: :14px } . C_box p (font-size: 14px)
:22px } . D_box p (font-size: 22px)
HTML:
HTML: <p> Prime tekst direkte nedenfor c_box
</ p> <p> Ifølge teksten nedenfor d_box og hans ansigt under c_box
</ p> </ Div>
</ Div>
Resultatet vil være, at den oprindelige browser, begge stykker vil blive gjort ordentligt. Moral: meget omhyggeligt og derefter, når du bruger cascading style ... hvis det er rigtigt, at der ikke er nogen umiddelbar forskel mellem klasse og id er også rigtigt, at deres anvendelse er ikke helt identiske. For ellers er der to måder at behandle?
Regel
Men der er en måde at vide, hvem der "vandt", når du indstiller en stil. Denne teknik er normalt kaldes Cascade Regel 3.
Det giver en merværdi til hver selector, eller deklaratorisk linje CSS. Denne værdi er i form ABC.
1) tilsættes 1 til A for hver id i selector
2) tilsættes 1 til B for hver class i selector
3) tilsættes 1 til C for hver tag i selector
Her er et eksempel:
CSS: - 1 = 1 - [ p { color : red } 0 - 0 - 1 = 1 - [p (farve: rød)
- 1 = 11 - [ p .largetext 0 - 1.1 = 11 - [s. Largetext
- 1 = 101 - [ p#largetext 1 - 0 - 1 = 101 - [p # largetext
- 2 = 102 - [ body p#largetext 1 - 0 - 2 = 102 - [p # organ largetext
- 3 = 113 - [ body p#largetext ul .mylist 1.1 - 3 = 113 - [p # organ ul largetext. MyList
- 4 = 114 - [ body p#largetext ul .mylist li 1.1 - 4 = 114 - [p # organ ul largetext. MyList dem
Den højeste værdi vinder. Hvis to regler har den samme vægt, vandt sidste defineret.
Anbefalinger
En måde kunne være dette: Brug klassen, når problemet i en visuel TAG kan variere afhængigt af dets moderselskab beholder. Brug id det visuelle opførsel er unik, det er, uanset dets moderselskab beholder.
Et klart eksempel på denne tilgang kunne være følgende: problemet af en hypotetisk titel. I dette tilfælde bruger vi class="title" og underkastes regelmæssig container over de forskellige funktionsmåder. CSS fil kan være:
HTML: </ Code> <code> # listProducts. Titel (........ ) # Listusers. Titel (....... ) </ Code> </ div>
I virkeligheden, ja, tingene endnu bedre, fordi vi har TAG H n I en reel sag klassen title ville være nytteløst. I praksis teknik er at bruge id som selektorer adfærd (i virkeligheden er der ofte omtales som ID-selector). En reel situation kunne være:
HTML: </ Code> <code> # listProducts h1 (........ ) h1 (# Listusers ....... ) </ Code> </ div>
Vi har tre forskellige effekter afhængigt af selector. Den vigtigste regel kunne være: hvis det opfører TAG visuelt på en anden måde afhængigt af den beholder, der anvendes class
I dette tilfælde, blandt andet omfatter mange elementer af visuelle layout såsom lister ul Disse kan resultere i forskellige måder afhængigt af container mor kan se i navigation bar, en anden på forsiden, endnu en i indholdsoversigten, etc ... Men hvad vi har brug for, i de fleste tilfælde er den eneste selector id bedste TAG standard HTML metoder til rådighed.
For eksempel god regel er at bruge lister ul eller ol når du kan, under TAG H n TAG strong code der begrænser kort div og span anden måde gøre unødvendig brug af stilarter, også oversvømmelser nettet med bit supeflui . Ofte i virkeligheden ikke engang kender alle HTML-tags. Nogle webdesignere synes at ignorere nogle af de mest nyttige TAG stede i standard HTML. Sikkert nogle TAG (samt visse egenskaber, begivenheder, stilarter og desværre andre forskellige ting ...) er begrænset i et par specifikke standard browser, men der er mange TAG fuldt ud støttes af stort set alle eksisterende browsere (herunder Safari - Apropos men Apple har måske glemt, at det har udviklet sin egen browser?).
De style sheets, men desværre er også genstand for en misforståelse spredt her og der. For Web Designer ikke kun nødt til at vente håber på en fremtidig standard og mindre variabel. Brug id som selektorer kan ikke fritage sig selv fra at blive alt for involveret i en bivirkning er forbundet med brugen af Javascript. Gennem sproget mest klientsiden, hvis aktiveret i din browser, kan du få en pointer til et bestemt mærke eller side element. Dette er nu løst med lethed (for nogen tid siden var en smule mere kompliceret på grund af den stadigt nuværende uoverensstemmelser mellem browsere!) Gennem den metode getElementByID() stilles til rådighed document
Som det fremgår af samme navn af den metode, getElementByID() henter de pointer på grundlag af id af elementet. Problemet har at gøre med CSS er, at id pågældende er den samme som anvendes af getElementByID() elementet. Så forestille sig at skulle skrive en web-applikation, som administrerer en række af post-it på skærmen, hvis nogensinde med den position:absolute aktiveret. Det betyder, at post-it på den side, det kunne have et ukendt antal n. Web Designer, der ønsker at skrive typografiark på dette, efter vores tidligere regel ville vælge at bruge en div container og give den et id="postIt" På denne måde følger vi den regel, at når en post-it ikke involvere sig i et visuelt forskellige afhængigt af moderselskabet container. I vores specifikation er det kun et objekt er korrekte og derefter tildele en id Problemet kom da programmør Javascript (tegnene i denne ministore er 2 forskellige, men problemet ville være pinligt selv for en enkelt bygherre ...) forsøg på at opnå en pointer til en bestemt post-it! Det vil snart indse, at det ikke kan bruge ID som diskriminerende, som hvis siden indeholder flere elementer med samme ID derefter getElementByID() ikke kan vende tilbage en enkelt pointer, den grænse, kan returnere en liste (array), en liste over elementer, der vides alle er lige.
Denne lange og kedelige debat fører til en note i overensstemmelse hermed. I at udvikle HTML / JavaScript / CSS og især i ark af stilarter, meget afhænger af den overordnede vision. Der er egentlig ikke en regel gælder for enhver løsning. At være i stand til at se projektet i sin helhed kan hjælpe flere af de fastsatte regler.
Related Post
2 kommentarer » 
