1
00:00:01,440 --> 00:00:03,080
Dat het gaat om een ​​vrij snel video.

2
00:00:03,090 --> 00:00:09,710
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.

3
00:00:09,720 --> 00:00:12,260
Dus dit is de To Do lijst die we in de laatste video.

4
00:00:12,360 --> 00:00:16,950
Het is nog steeds zo lelijk als het toen was en ik wil gewoon benadrukken twee dingen.

5
00:00:17,130 --> 00:00:23,040
Dus de eerste kunnen we eigenlijk zien pagina bron net zoals we op andere volkeren.

6
00:00:23,040 --> 00:00:28,210
Elk kwam uit manier in het begin van deze cursus, maar dat is niet zo zinvol.

7
00:00:28,230 --> 00:00:37,110
We kunnen niet echt dit of iets veranderen, maar wat we kunnen doen is klik met de rechtermuisknop en klik op inspecteren element.

8
00:00:37,110 --> 00:00:40,170
En wat dit zal doen, is de lancering van de element inspecteur.

9
00:00:40,320 --> 00:00:43,170
Zo zie je dat we deze nieuwe visie krijgen hier.

10
00:00:43,530 --> 00:00:47,080
Dus er is een heleboel tabs we gaan om te leren over al deze in de tijd.

11
00:00:47,160 --> 00:00:50,270
Voor nu zijn we gewoon beginnen bij tabblad dit element.

12
00:00:50,370 --> 00:00:56,700
Dus wat is het is het eigenlijk een mooie interactieve weergave van alle elementen.

13
00:00:56,700 --> 00:00:59,280
Zodat u kunt zien hebben we onze doctype.

14
00:00:59,370 --> 00:01:03,600
Elk team zal het hoofd van het lichaam te hebben.

15
00:01:03,840 --> 00:01:13,650
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.

16
00:01:13,710 --> 00:01:15,420
Dus laten we de muisaanwijzer over deze H-1.

17
00:01:15,690 --> 00:01:17,810
Het is eigenlijk gemarkeerd hier.

18
00:01:18,000 --> 00:01:23,230
Dus ik hang hier en het is gemarkeerd om me hier laten zien is degene die je het over hebt.

19
00:01:23,260 --> 00:01:27,960
Hier is de UL of hier is het selectievakje ingang.

20
00:01:28,290 --> 00:01:30,020
Hier is de tekst enzovoort.

21
00:01:30,120 --> 00:01:32,790
Dus dit is handig in zijn eigen recht.

22
00:01:32,790 --> 00:01:39,100
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.

23
00:01:39,360 --> 00:01:44,140
Maar wat ik echt wil concentreren op het tabblad CSSA hier het tabblad stijlen.

24
00:01:44,190 --> 00:01:45,890
Dus laten we een van deze dingen.

25
00:01:46,080 --> 00:01:51,600
Laten we selecteer deze bondgenoot met klasse vervolledigden de top of de tweede.

26
00:01:51,810 --> 00:01:53,000
En ik ga klikken.

27
00:01:53,160 --> 00:02:01,700
En hier ben ik eigenlijk het zien van een interactief overzicht van alle van de stijlen die dit element heeft momenteel toegepast.

28
00:02:02,070 --> 00:02:12,540
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.

29
00:02:12,540 --> 00:02:16,500
Het heeft een rode rand en wat we kunnen doen is in feite zet deze in of uit.

30
00:02:16,920 --> 00:02:21,360
Dus ik heb nu alle bondgenoten rode grenzen off omgeschakeld.

31
00:02:21,390 --> 00:02:29,800
Ik kan ze weer terug op en ik kan deze live aanpassen om 6 pixels of 10 of één pixel.

32
00:02:30,210 --> 00:02:35,050
Ik kan u op de kleur en kies een nieuwe kleur te geven het een blauwe rand.

33
00:02:35,100 --> 00:02:38,900
Een ding dat ik zal benadrukken hoewel dit niet echt ons dossier veranderen at all.

34
00:02:38,910 --> 00:02:44,360
Dit is alleen in de browser zodra ik deze pagina te verversen of sluit het venster mijn wijzigingen weg te gaan.

35
00:02:44,370 --> 00:02:47,340
Dus dit is nuttig in eigenlijk twee verschillende manieren.

36
00:02:47,340 --> 00:03:01,320
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.

37
00:03:01,320 --> 00:03:05,990
Het andere ding dat is handig voor is eigenlijk op zoek naar de code van iemand anders.

38
00:03:06,150 --> 00:03:09,570
Dus ik heb MVNO geopend alleen op de homepage.

39
00:03:10,200 --> 00:03:14,910
Laten we zeggen dat ik wilde wat meer informatie over deze tekst weten hier.

40
00:03:15,270 --> 00:03:20,790
Wat ik wel kan doen is eigenlijk klik met de rechtermuisknop op en klik op inspecteren element.

41
00:03:21,360 --> 00:03:25,000
En als ik klik op een element in het bijzonder het daadwerkelijk zal worden gemarkeerd voor mij.

42
00:03:25,350 --> 00:03:31,670
Dus je kunt zien dat het sprong meteen naar de juiste tag die een H-1 gedeelde kennis.

43
00:03:31,680 --> 00:03:33,430
En dan is er een overspanning in daar ook.

44
00:03:33,450 --> 00:03:34,920
Het zegt voor het open web.

45
00:03:35,240 --> 00:03:37,190
Dus laten we eens een kijkje op de H-1.

46
00:03:37,470 --> 00:03:40,530
En hier krijg ik alle stijlen.

47
00:03:40,650 --> 00:03:41,980
Zodat de eerste kleur is.

48
00:03:42,210 --> 00:03:46,630
Als ik veranderen de kleur van deze H-1 verandert.

49
00:03:46,890 --> 00:03:57,360
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.

50
00:03:57,360 --> 00:04:06,030
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.

51
00:04:06,030 --> 00:04:11,200
Dus het zou zijn toegepast op het hele lichaam niet alleen H-1 direct.

52
00:04:11,250 --> 00:04:13,940
Dus als je naar beneden scrollt het lijkt alsof het is hier.

53
00:04:13,950 --> 00:04:21,640
Font familie geopend stuurt licht een zeer reële zin, indien en dat lijkt op dat doet.

54
00:04:22,560 --> 00:04:25,010
Dus dit is niet om te laten zien hoe we eigenlijk doen lettertype.

55
00:04:25,020 --> 00:04:26,950
Dat is een aparte video binnenkort.

56
00:04:26,970 --> 00:04:35,810
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.

57
00:04:35,900 --> 00:04:47,250
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.

58
00:04:47,340 --> 00:04:52,790
Dus een oog is een andere tag gebruikt voor iconen en kunnen we alle stijlen te zien hier.

59
00:04:52,880 --> 00:05:03,080
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.

60
00:05:03,090 --> 00:05:11,190
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.

61
00:05:11,270 --> 00:05:11,850
Daar gaan we.

62
00:05:11,850 --> 00:05:14,860
Ze zijn de achtergrondafbeelding instellen om dit beeld te zijn hier.

63
00:05:15,090 --> 00:05:33,100
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.

64
00:05:33,150 --> 00:05:39,130
En dus het is echt handig als je wilt om uit te gaan en te repliceren iemands ontwerp waar u wilt repliceren in effect.

65
00:05:39,150 --> 00:05:43,670
En als we in Javascript je eigenlijk zien we precies hetzelfde doen voor javascript ook.