Hvordan få den CSS3 Selector av et element

Hvordan få den CSS3 Selector av et element


En av de mest tidkrevende aspekter ved å tilpasse en web mal, script, eller tema er å finne ut hvilke stiler endre en bestemt del av en side. Hvis du er godt bevandret i CSS, kan lese gjennom en stil noen ganger være grei. Men når du arbeider med CMS temaer eller jQuery plugins, kan du finne velgere spredt ut over flere filer eller brutt ut i flere klasser. Du kan lese gjennom kildekoden for å finne velgere, men for å være effektiv dette krever en dyp kunnskap om koden fundament. Selv om du er en ekspert, ved hjelp av et verktøy som Firebug eller Dreamweaver vil gjøre denne prosessen enklere.

Bruksanvisning

1 Last ned og installer Firebug tillegget for nettleseren Firefox fra firebug.com. Eller, hvis du bruker Opera, starte Opera nettleser. Både Firebug-og Opera nettleser legge til en funksjon i nettleseren din som gjør at du kan velge hvilken som helst element på nettsiden og se de relaterte stiler og kildekoden.

2 Åpne HTML-dokumentet eller nettsiden i nettleseren. Velg elementet du vil tilpasse ved å høyreklikke direkte på toppen av det. Velg "Inspiser Element" fra menyen for å få opp kode inspektør.

3 Vurdere den markerte linjen med kode i "HTML" fanen på venstre side av vinduet. I de fleste tilfeller inneholder denne linjen elementet beholderen og den tilsvarende klasse eller velgeren. For eksempel, hvis du velger å inspisere en sidebar boksen på en blogg side, kan du se noe som følgende uthevet:

<Div id = "sidebar">

I andre tilfeller kan det merkede elementet ikke inneholde klassen eller velgeren, i så fall må du se på linjer med kode like over det som typisk tilsvarer beholderen elementet er i. For eksempel, hvis du velger å inspisere overskriften et innholdsområdet på siden din, kan du se noe som dette:

<Div class = "post>

<Div id = "title">

<H2> Dette er innholdet overskriften </ h2>

4 Se på den tilsvarende CSS stil for det valgte elementet i "Style" -kategorien på høyre side. Filnavnet på stil vil bli oppført til høyre for hver velgeren. Du kan velge forskjellige linjer med kode eller ulike elementer i nettleservinduet for å vise stilene som påvirker den. Du vil merke at det valgte elementet vil også vises med en markert kant i nettleservinduet, noe som gjør det lettere å se hva hver kodelinje skaper.

5 Hold musen til venstre for en stil attributt i "Style" -kategorien. En avmerkingsboks vises. Du kan velge eller velge bort attributter for å se den umiddelbare virkningen av invalidiserende attributtet. Denne handlingen hjelper deg også finne noen andre elementer påvirket av stilen. Ved hjelp av disse metodene, kan du få velger av noe element på siden, og gjør endringene i riktig stilarket.

Hint

  • Elementer med en HTML-farge attributt definert vil vises i "Style" -kategorien med litt farge blokk til høyre for attributtverdi. Prøv ut forskjellige farger ved å klikke på boksen og velge en annen farge fra fargehjulet.
  • Du kan redigere stiler direkte i "Style" -vinduet. Høyreklikk og velg "Inspiser i kategorien CSS." Endringer du gjør på denne måten vil være synlig umiddelbart. Hvis du liker resultatet, kan du lagre filen og overskrive den opprinnelige.