Hoe krijg ik de CSS3 Selector van een Element

Hoe krijg ik de CSS3 Selector van een Element


Een van de meest tijdrovende aspecten aan te passen een Web-sjabloon, script of thema is uitzoeken welke stijlen een bepaald deel van een pagina wijzigen. Bent u goed-bedreven in CSS, kan lezing door middel van een stylesheet soms eenvoudig. Maar bij het werken met CMS thema's of jQuery plugins, misschien vindt u de selecteurs verspreid over meerdere bestanden of in meerdere klassen uitgebroken. U kunt lezen door de broncode te vinden selectors, maar efficiënte dat dit vereist een grondige kennis van de Stichting van de code. Zelfs als u een expert bent, maakt met behulp van een tool zoals Firebug of Dreamweaver dit proces makkelijker.

Instructies

1

Download en installeer de Firebug add-on voor de Firefox-browser van firebug.com. Of, als u Opera, start de browser van de Opera. Zowel de Firebug add-on en de Opera-browser kunt u een functie toevoegt aan uw browser die u toelaat om elk element op uw webpagina selecteren en bekijken van de verwante stijlen en broncode.

2

Open uw HTML-document of de webpagina in de browser. Selecteer het element dat u aanpassen wilt door met de rechtermuisknop op direct bovenop. Kies 'Element inspecteren' in het menu om de codecontrole.

3

Evalueren van de gemarkeerde coderegel in het tabblad "HTML" aan de linkerzijde van het venster. In de meeste gevallen bevat deze regel de container van het element en de bijbehorende klasse- of selector. Bijvoorbeeld, als u kiest voor het inspecteren van een zijbalk doos op een blogpagina, ziet u zoiets als het volgende gewezen:

< div id = "sidebar" >

In andere gevallen kan het gemarkeerde element niet bevatten de klasse- of selector, in welk geval die u zult moeten kijken naar de coderegels net erboven die doorgaans overeen met de container van het element is in. Bijvoorbeeld, als u ervoor kiest om te inspecteren de kop van een inhoudsgebied op de pagina, kan zie je zoiets als dit:

< div class = "post >

< div id = "titel" >

< h2 > Dit is de inhoud kop < / h2 >

4

Kijk naar de bijbehorende CSS-stijl voor het geselecteerde element in het tabblad "Stijl" aan de rechterkant. De bestandsnaam van het opmaakmodel worden weergegeven aan de rechterkant van elke selector. U kunt verschillende lijnen van code of verschillende elementen in het browservenster naar de stijlen die van invloed zijn op het bekijken. U zult opmerken dat het geselecteerde element zal ook worden weergegeven met een gemarkeerde rand in het browservenster, waardoor het makkelijker om te zien wat er in elke regel met code ontstaat.

5

Hang uw muis links van een style attribuut in het tabblad "Stijl". Een selectievakje wordt weergegeven. U kunt selecteren of deselecteren van kenmerken om de directe gevolgen van het uitschakelen van het kenmerk weer te geven. Deze actie helpt u vinden van eventuele andere elementen die worden beïnvloed door de stijl ook. U kunt met behulp van deze methoden, krijgen de selector van elk element op de pagina en breng de gewenste wijzigingen in de juiste stylesheet.

Tips & waarschuwingen

  • Elementen met een HTML-kenmerk color gedefinieerd wordt weergegeven in het tabblad "Stijl" met een beetje kleurblok rechts van de waarde van het kenmerk. Verschillende kleuren uitproberen door op het vak te klikken en een andere kleur te kiezen in het kleurenwiel.
  • U kunt stijlen rechtstreeks in het "Style"-venster bewerken. Met de rechtermuisknop op het tabblad en kies "Inspect in CSS tab." Bewerkingen die u op deze manier zal onmiddellijk zichtbaar zijn. Als je het resultaat, kunt u sparen het dossier en het overschrijven van het origineel.