Dat het gaat om een ​​vrij snel video.
Ik wil gewoon een deel van de developer tools die Google Chrome geeft ons om te werken met elk team uit en zie beoordelen markeren.
Dus dit is de To Do lijst die we in de laatste video.
Het is nog steeds zo lelijk als het toen was en ik wil gewoon benadrukken twee dingen.
Dus de eerste kunnen we eigenlijk zien pagina bron net zoals we op andere volkeren.
Elk kwam uit manier in het begin van deze cursus, maar dat is niet zo zinvol.
We kunnen niet echt dit of iets veranderen, maar wat we kunnen doen is klik met de rechtermuisknop en klik op inspecteren element.
En wat dit zal doen, is de lancering van de element inspecteur.
Zo zie je dat we deze nieuwe visie krijgen hier.
Dus er is een heleboel tabs we gaan om te leren over al deze in de tijd.
Voor nu zijn we gewoon beginnen bij tabblad dit element.
Dus wat is het is het eigenlijk een mooie interactieve weergave van alle elementen.
Zodat u kunt zien hebben we onze doctype.
Elk team zal het hoofd van het lichaam te hebben.
Of elke één of ons en onze bondgenoten alsook de ingangen en het eerste wat ik wil dat u opmerkt is als ik de muisaanwijzer over deze elementen.
Dus laten we de muisaanwijzer over deze H-1.
Het is eigenlijk gemarkeerd hier.
Dus ik hang hier en het is gemarkeerd om me hier laten zien is degene die je het over hebt.
Hier is de UL of hier is het selectievakje ingang.
Hier is de tekst enzovoort.
Dus dit is handig in zijn eigen recht.
Gewoon om dingen te zuiveren en te zien wat de ruimte een element wordt toegang tot en waar het valt in de stroom van een document.
Maar wat ik echt wil concentreren op het tabblad CSSA hier het tabblad stijlen.
Dus laten we een van deze dingen.
Laten we selecteer deze bondgenoot met klasse vervolledigden de top of de tweede.
En ik ga klikken.
En hier ben ik eigenlijk het zien van een interactief overzicht van alle van de stijlen die dit element heeft momenteel toegepast.
Dus we zien als gevolg van de voltooide klasse heeft deze tekst decoratie lijn door als gevolg van de vlieg code die ik schreef voor alle bondgenoten.
Het heeft een rode rand en wat we kunnen doen is in feite zet deze in of uit.
Dus ik heb nu alle bondgenoten rode grenzen off omgeschakeld.
Ik kan ze weer terug op en ik kan deze live aanpassen om 6 pixels of 10 of één pixel.
Ik kan u op de kleur en kies een nieuwe kleur te geven het een blauwe rand.
Een ding dat ik zal benadrukken hoewel dit niet echt ons dossier veranderen at all.
Dit is alleen in de browser zodra ik deze pagina te verversen of sluit het venster mijn wijzigingen weg te gaan.
Dus dit is nuttig in eigenlijk twee verschillende manieren.
Een daarvan is om te werken aan je eigen code uw eigen pagina en test dingen en zien wat er gebeurt als je de kleur veranderen of je de grens veranderen of u een ander kenmerk van een aantal van hun eigendom te veranderen en alleen visueel onmiddellijk zien.
Het andere ding dat is handig voor is eigenlijk op zoek naar de code van iemand anders.
Dus ik heb MVNO geopend alleen op de homepage.
Laten we zeggen dat ik wilde wat meer informatie over deze tekst weten hier.
Wat ik wel kan doen is eigenlijk klik met de rechtermuisknop op en klik op inspecteren element.
En als ik klik op een element in het bijzonder het daadwerkelijk zal worden gemarkeerd voor mij.
Dus je kunt zien dat het sprong meteen naar de juiste tag die een H-1 gedeelde kennis.
En dan is er een overspanning in daar ook.
Het zegt voor het open web.
Dus laten we eens een kijkje op de H-1.
En hier krijg ik alle stijlen.
Zodat de eerste kleur is.
Als ik veranderen de kleur van deze H-1 verandert.
Dus laten we zeggen dat ik wilde het lettertype weten zodat ik naar beneden zou gaan en op een gegeven moment iemand die Mazola schreef de stijlen die een lettertype van toepassing is.
Hier is het ding en dat is wat we gaan richten op de komende video's is dat dit ergens zou worden overgenomen van een andere selector.
Dus het zou zijn toegepast op het hele lichaam niet alleen H-1 direct.
Dus als je naar beneden scrollt het lijkt alsof het is hier.
Font familie geopend stuurt licht een zeer reële zin, indien en dat lijkt op dat doet.
Dus dit is niet om te laten zien hoe we eigenlijk doen lettertype.
Dat is een aparte video binnenkort.
Dit is gewoon om te laten zien dat als je iets wilde weten over een pagina laten we zeggen dat ik wilde weten wat voor soort element zijn deze knoppen hier.
De rol van icon Ik kan selecteren wordt vergrootglas en zweven over dingen en klik en het zal me te laten zien hier dat een oog.
Dus een oog is een andere tag gebruikt voor iconen en kunnen we alle stijlen te zien hier.
Hetzelfde als ik wil zien wat element is dit hier ik kan erop klikken als ze eenmaal het vergrootglas en ik zie dat het een anker-tag en het lijkt erop dat.
Dus het is niet een afbeelding tag is het een anker tag die moet betekenen dat ze een achtergrondafbeelding instelt ergens en laten we zien waar dat is.
Daar gaan we.
Ze zijn de achtergrondafbeelding instellen om dit beeld te zijn hier.
Dus om dit alles samen te vatten ik wilde alleen maar om aan te tonen dat u kunt openen van deze Inspektor in Google Chrome en u kunt HMO bekijken en u kunt bekijken het beoordelen en kunt u niet alleen kunnen bekijken, maar je kunt het manipuleren u kunt communiceren met het u kunt proberen dingen te veranderen en je kunt dat doen op uw eigen sites of kun je dat doen op iemand anders website.
En dus het is echt handig als je wilt om uit te gaan en te repliceren iemands ontwerp waar u wilt repliceren in effect.
En als we in Javascript je eigenlijk zien we precies hetzelfde doen voor javascript ook.