1
00:00:01,440 --> 00:00:03,080
To, że będzie to dość krótkiego filmu.

2
00:00:03,090 --> 00:00:09,710
Chcę tylko podkreślić niektóre z narzędzi programistycznych, że Google Chrome daje nam pracować z każdego zespołu i zobaczyć oceny.

3
00:00:09,720 --> 00:00:12,260
Więc to jest lista zadań do wykonania, które zrobiliśmy w poprzednim filmie.

4
00:00:12,360 --> 00:00:16,950
To nadal brzydka jak to było wtedy i chcę tylko podkreślić dwie rzeczy.

5
00:00:17,130 --> 00:00:23,040
Więc pierwsze rzeczywiście możemy przeglądać strony źródłowej tak jak zrobiliśmy w innych narodów.

6
00:00:23,040 --> 00:00:28,210
Każdy wyszedł tak wcześnie w tym kursie, ale to nie wszystko, co użyteczne.

7
00:00:28,230 --> 00:00:37,110
Nie możemy zmienić tego czy coś, ale co możemy zrobić, to kliknąć prawym przyciskiem myszy i kliknij sprawdzić element.

8
00:00:37,110 --> 00:00:40,170
A co to będzie zrobić, to uruchomić elementu inspektor.

9
00:00:40,320 --> 00:00:43,170
Więc widać mamy tutaj ten nowy widok.

10
00:00:43,530 --> 00:00:47,080
Więc jest kilka kart Jedziemy, aby poznać wszystko to w czasie.

11
00:00:47,160 --> 00:00:50,270
Na razie jesteśmy po prostu zaczynając Ta zakładka elementu.

12
00:00:50,370 --> 00:00:56,700
Więc co to jest to rzeczywiście miły interaktywne przedstawienie wszystkich elementów.

13
00:00:56,700 --> 00:00:59,280
Więc widać, mamy doctype.

14
00:00:59,370 --> 00:01:03,600
Każdy zespół będzie miał głowę ciała.

15
00:01:03,840 --> 00:01:13,650
Albo każdy jeden lub my i nasi sojusznicy, jak i wejścia, a pierwszą rzeczą, którą chcę Ci zauważyć, jest jak unoszą się nad tymi elementami.

16
00:01:13,710 --> 00:01:15,420
Warto więc unoszą się nad tym H-1.

17
00:01:15,690 --> 00:01:17,810
To rzeczywiście podświetlony tutaj.

18
00:01:18,000 --> 00:01:23,230
Więc unosić tutaj i to podświetlone, aby pokazać mi, tu jest jeden, że mówisz.

19
00:01:23,260 --> 00:01:27,960
Oto UL lub tutaj jest pole wprowadzania.

20
00:01:28,290 --> 00:01:30,020
Oto tekst i tak dalej.

21
00:01:30,120 --> 00:01:32,790
Więc to jest przydatne w sobie.

22
00:01:32,790 --> 00:01:39,100
Wystarczy, aby debugować rzeczy i zobaczyć, jakie miejsca elementem jest podejmowanie i gdzie spadnie w przepływie dokumentu.

23
00:01:39,360 --> 00:01:44,140
Ale to, co naprawdę chcę skupić się tylko na kartę CSSA tutaj zakładce Style.

24
00:01:44,190 --> 00:01:45,890
Warto więc wybrać jeden z tych rzeczy.

25
00:01:46,080 --> 00:01:51,600
Załóżmy, wybierz tę sojusznika z klasą zakończone szczyt lub drugi.

26
00:01:51,810 --> 00:01:53,000
I zamierzam na nią kliknąć.

27
00:01:53,160 --> 00:02:01,700
A tutaj jestem naprawdę widząc interaktywny widok wszystkich stylów, że element ten został zastosowany wobec niej komunikatu.

28
00:02:02,070 --> 00:02:12,540
Widzimy więc, ze względu na ukończony klasy ma ona tę linię dekoracji tekstu poprzez bo kodu lotnego, który napisałem dla wszystkich sojuszników.

29
00:02:12,540 --> 00:02:16,500
Ma czerwone obramowanie i co możemy zrobić, to faktycznie włączyć je włączyć lub wyłączyć.

30
00:02:16,920 --> 00:02:21,360
Więc teraz nie włączać wszystkich sojuszników czerwone granice off.

31
00:02:21,390 --> 00:02:29,800
Mogę włączyć je z powrotem i mogę zmienić to tu mieszka za 6 pikseli lub 10 lub jeden piksel.

32
00:02:30,210 --> 00:02:35,050
Mogę kliknąć na kolor i wybrać nowy kolor nadać mu niebieską ramkę.

33
00:02:35,100 --> 00:02:38,900
Jedna rzecz, którą trzeba podkreślić choć w rzeczywistości nie zmienia nasz plik w ogóle.

34
00:02:38,910 --> 00:02:44,360
To jest tylko w przeglądarce jak tylko odświeżyć stronę lub zamknąć okno moje zmiany odejść.

35
00:02:44,370 --> 00:02:47,340
Więc to jest przydatne w naprawdę dwa różne sposoby.

36
00:02:47,340 --> 00:03:01,320
Jednym z nich jest pracować na własnym kodzie własną stronę i testowe rzeczy i zobaczyć, co się dzieje, kiedy zmienić kolor lub zmienić granicę lub zmienić jakiś inny atrybut niektóre z ich własności i po prostu wizualnie zobaczyć go natychmiast.

37
00:03:01,320 --> 00:03:05,990
Inną rzeczą, która jest przydatna dla faktycznie patrząc na kod cudzego.

38
00:03:06,150 --> 00:03:09,570
Więc mam MVNO otwarty tylko na stronie głównej.

39
00:03:10,200 --> 00:03:14,910
Powiedzmy, że chciał wiedzieć coś więcej na temat tego tekstu tutaj.

40
00:03:15,270 --> 00:03:20,790
Co mogę zrobić, to rzeczywiście na nim prawym przyciskiem myszy i kliknij na inspekcję element.

41
00:03:21,360 --> 00:03:25,000
A jeśli kliknę na elemencie w szczególności będzie to faktycznie podświetlonego dla mnie.

42
00:03:25,350 --> 00:03:31,670
Więc widać, że wskoczył od razu do odpowiedniego znacznika który jest H-1 wspólna wiedza.

43
00:03:31,680 --> 00:03:33,430
A potem to rozpiętość w niej również.

44
00:03:33,450 --> 00:03:34,920
Mówi do otwartej sieci.

45
00:03:35,240 --> 00:03:37,190
Więc rzućmy okiem na H-1.

46
00:03:37,470 --> 00:03:40,530
I tu mam wszystkie style.

47
00:03:40,650 --> 00:03:41,980
Tak więc pierwszy z nich jest kolor.

48
00:03:42,210 --> 00:03:46,630
Gdybym zmienić kolor, że H-1 zmian.

49
00:03:46,890 --> 00:03:57,360
Więc powiedzmy, że chciałam wiedzieć czcionkę więc chciałbym przewinąć w dół i w pewnym momencie, że ktoś Mazola napisał style, które stosuje czcionkę.

50
00:03:57,360 --> 00:04:06,030
Tu chodzi o to, i to, co mamy zamiar skupić się w ciągu najbliższych kilku filmów jest to, że może to być dziedziczone z innego przełącznika gdzieś.

51
00:04:06,030 --> 00:04:11,200
Tak więc mogą być stosowane do całego organizmu nie tylko H-1, bezpośrednio.

52
00:04:11,250 --> 00:04:13,940
Więc jeśli przewinąć to wygląda, że ​​to właśnie tutaj.

53
00:04:13,950 --> 00:04:21,640
Font otwarta rodzina wysyła zapalić bardzo prawdziwy sens, jeśli i to wygląda, że ​​to robi.

54
00:04:22,560 --> 00:04:25,010
Więc nie jest to, aby pokazać, w jaki sposób właściwie robimy fontu.

55
00:04:25,020 --> 00:04:26,950
To osobny film zbliża się szybko.

56
00:04:26,970 --> 00:04:35,810
To jest po prostu pokazać, że jeśli chce znaleźć coś o stronie powiedzmy chciałam wiedzieć, jaki rodzaj elementu są te przyciski tutaj.

57
00:04:35,900 --> 00:04:47,250
Rola ikony mogę wybrać się lupą i najedź na rzeczy, a następnie kliknij i będzie mi to pokazać, że tu oka.

58
00:04:47,340 --> 00:04:52,790
Więc oko to kolejny znacznik używany do ikon i widzimy wszystkie style tutaj.

59
00:04:52,880 --> 00:05:03,080
To samo, jeśli chcę zobaczyć, co elementem jest tutaj mogę kliknąć na nim raz mają lupę i widzę, że jest to tag kotwicy i to wygląda.

60
00:05:03,090 --> 00:05:11,190
Więc to nie jest to obraz tag tag kotwicy, która musi oznaczać, że są one ustawienie obrazu tła gdzieś i zobaczmy, gdzie to jest.

61
00:05:11,270 --> 00:05:11,850
No to ruszamy.

62
00:05:11,850 --> 00:05:14,860
Oni ustawienie obrazu tła za ten obraz tutaj.

63
00:05:15,090 --> 00:05:33,100
Tak więc, aby podsumować to wszystko chciałem tylko pokazać, że można otworzyć ten inspektor w Google Chrome i można zobaczyć HMO i można przeglądać oceny i nie tylko można go zobaczyć, ale można manipulować można komunikować się z nim jesteś można spróbować zmienić rzeczy i można to zrobić na własnych stronach czy można zrobić na miejscu nikogo innego.

64
00:05:33,150 --> 00:05:39,130
A więc jest to bardzo przydatne, gdy chcesz wyjść i replikować projekt czyjąś gdzie chcesz replikować w mocy.

65
00:05:39,150 --> 00:05:43,670
A kiedy mamy do JavaScript zobaczyć, że rzeczywiście możemy zrobić dokładnie to samo dla javascript, jak również.