1
00:00:00,000 --> 00:00:00,500

2
00:00:00,500 --> 00:00:04,500
>> [Παίζει μουσική]

3
00:00:04,500 --> 00:00:10,099

4
00:00:10,099 --> 00:00:12,224
ALLISON BUCHHOLTZ-ΑΕ: Έτσι
Είμαστε ουσιαστικά ακριβώς πρόκειται

5
00:00:12,224 --> 00:00:14,629
για να σας δώσει ένα υποβαθμισμένο
του CSS, γιατί ξέρουμε

6
00:00:14,629 --> 00:00:16,420
ότι δεν καλύπτεται
σε όλα τα τμήματα.

7
00:00:16,420 --> 00:00:20,090
Και θέλουμε πραγματικά να βεβαιωθείτε ότι έχετε
παιδιά έχουν αυτό το εργαλείο στη διάθεσή σας,

8
00:00:20,090 --> 00:00:24,790
επειδή έχει την ικανότητα να κάνει
ιστοσελίδες σας φαίνονται πολύ πιο όμορφη.

9
00:00:24,790 --> 00:00:28,660
>> Και αν είστε οικοδόμηση ενός δικτυακού τόπου, τότε
πιθανόν να θέλετε να κάνετε αυτό αρκετά.

10
00:00:28,660 --> 00:00:31,372
Θέλω να πω, δεν χρειάζεται να,
αλλά θα ήθελα να το προτείνω. [Γέλια]

11
00:00:31,372 --> 00:00:35,430
Εάν θέλετε οι χρήστες να το χρησιμοποιούν, ίσως
θέλουν να είναι λίγο [δεν ακούγεται] κάνει.

12
00:00:35,430 --> 00:00:39,130
Έτσι θα πάμε για να προσπαθήσουμε και να σας δώσει μόνο
μερικά βασικά εργαλεία και κατανόηση,

13
00:00:39,130 --> 00:00:42,340
έτσι ώστε όταν θα πάτε έξω και να είστε
ερευνά τα πράγματα για CSS,

14
00:00:42,340 --> 00:00:45,902
Δεν είναι ολοκληρωθεί ασυναρτησίες,
όπως CSS μερικές φορές να είναι.

15
00:00:45,902 --> 00:00:47,240
>> ΤΟΜΑΣ Reimers: Ναι.

16
00:00:47,240 --> 00:00:49,930
Allison είπε αρκετά καλά.

17
00:00:49,930 --> 00:00:53,250
Έτσι υποθέτω ότι το πρώτο πράγμα που
θα πρέπει να αρχίσει με είναι ό, τι είναι CSS;

18
00:00:53,250 --> 00:00:55,750
Έτσι, CSS είναι φοβερό.

19
00:00:55,750 --> 00:00:56,250
CSS--

20
00:00:56,250 --> 00:00:58,320
>> ALLISON BUCHHOLTZ-ΑΕ: Αυτό είναι
το όνομα του σεμιναρίου μας.

21
00:00:58,320 --> 00:00:58,434
>> ΤΟΜΑΣ Reimers: Ναι.

22
00:00:58,434 --> 00:01:00,130
Είναι πολύ σημαντικό ότι
καταλαβαίνετε ότι μέχρι τότε.

23
00:01:00,130 --> 00:01:03,090
Εάν μόνο να πάρει ένα
πράγμα, αυτό είναι ότι αν CSS φοβερό.

24
00:01:03,090 --> 00:01:06,180
Δύο είναι CSS σημαίνει για
Cascading Style Sheets.

25
00:01:06,180 --> 00:01:10,380
Έτσι, στον πυρήνα του, CSS είναι
ένα φύλλο στυλ, που σημαίνει

26
00:01:10,380 --> 00:01:13,200
σας επιτρέπει να το στυλ μιας ιστοσελίδας.

27
00:01:13,200 --> 00:01:16,609
Και τότε τι σημαίνει αυτό, αυτό είναι ένα
τρόπος για να προσθέσετε το στυλ για να σας ιστοσελίδες.

28
00:01:16,609 --> 00:01:18,900
Έτσι, από το στυλ, εννοούμε τα πάντα
ότι δεν είναι structural--

29
00:01:18,900 --> 00:01:24,350
έτσι τα πράγματα όπως τα χρώματα, φόντο
εικόνες, τα σύνορα, όπως, βάτες,

30
00:01:24,350 --> 00:01:25,040
περιθώρια.

31
00:01:25,040 --> 00:01:27,310
Θα μιλήσουμε για το τι
όλα αυτά μέσα σε ένα κομμάτι.

32
00:01:27,310 --> 00:01:30,110
>> Έτσι έχουμε μόλις προχωρήσει και
άνοιξε και οι δύο από αυτούς σε gedit.

33
00:01:30,110 --> 00:01:32,680
Έτσι, αυτό είναι index.html.

34
00:01:32,680 --> 00:01:34,800
Και αυτό είναι main.css.

35
00:01:34,800 --> 00:01:36,829
Έτσι main.css δεν έχει τίποτα.

36
00:01:36,829 --> 00:01:38,412
ALLISON BUCHHOLTZ-ΑΕ: Όχι στυλ μέχρι στιγμής.

37
00:01:38,412 --> 00:01:39,245
ΤΟΜΑΣ Reimers: Καμία.

38
00:01:39,245 --> 00:01:42,577
Και όπως θα δείτε, είναι
ένα πραγματικά άσχημο τοποθεσίας.

39
00:01:42,577 --> 00:01:44,160
ALLISON BUCHHOLTZ-ΑΕ: Είναι απλά.

40
00:01:44,160 --> 00:01:45,820
ΤΟΜΑΣ Reimers: Ναι.

41
00:01:45,820 --> 00:01:49,150
Ναι, δεν είναι άσχημο,
είναι ακριβώς μινιμαλιστική.

42
00:01:49,150 --> 00:01:53,430
Και τότε εδώ έχουμε index.html.

43
00:01:53,430 --> 00:01:55,729
Και έτσι για μια γρήγορη
ανακεφαλαίωση της HTML, Allison,

44
00:01:55,729 --> 00:01:57,270
Θέλετε να μιλάμε μόνο για την σελίδα;

45
00:01:57,270 --> 00:01:58,395
>> ALLISON BUCHHOLTZ-ΑΕ: Ναι.

46
00:01:58,395 --> 00:02:01,100
Έτσι, προφανώς, έχουμε HTML μας
ετικέτα, η οποία απλώς τα ονόματα των αρχείων HTML.

47
00:02:01,100 --> 00:02:07,080
Έχουμε κεφαλίδα μας εδώ, με CSS
Τέλεια, which-- αν πας πίσω.

48
00:02:07,080 --> 00:02:07,720
Πού είναι αυτό;

49
00:02:07,720 --> 00:02:09,136
>> ΤΟΜΑΣ Reimers: Αχ.

50
00:02:09,136 --> 00:02:10,301
Ναι, μπορείτε να δείτε.

51
00:02:10,301 --> 00:02:12,092
ALLISON BUCHHOLTZ-ΑΕ:
Και παρατηρήσετε την κεφαλίδα

52
00:02:12,092 --> 00:02:14,120
Είναι αυτή η κεφαλίδα καρτέλα δεξιά μέχρι εδώ.

53
00:02:14,120 --> 00:02:17,130
Και τότε "Γεια σου, κόσμε!" είναι
το κείμενο που έχουμε μόνο

54
00:02:17,130 --> 00:02:19,620
εμφάνιση στο web
σελίδα, η οποία is-- πάει πίσω.

55
00:02:19,620 --> 00:02:21,290
Πίσω.

56
00:02:21,290 --> 00:02:24,287
Ποια είναι ακριβώς στο σώμα μας
here-- το απλό κείμενο.

57
00:02:24,287 --> 00:02:26,120
Επίσης, ένα πράγμα που πρέπει να
παρατηρήσετε, αν δει κανείς εδώ,

58
00:02:26,120 --> 00:02:29,410
Tomas ενεργοποιημένο μέχρι αυτά
δύο από το κλείστρο μας.

59
00:02:29,410 --> 00:02:32,035
Έτσι, εφ 'όσον έχετε όλα
τρία από αυτά, είστε μια χαρά.

60
00:02:32,035 --> 00:02:34,044
Μπορούν να είναι σε οποιαδήποτε σειρά που θέλετε.

61
00:02:34,044 --> 00:02:39,368
Τι είναι πιο σημαντικό είναι ακριβώς αυτό
έχετε κάθε ένα από αυτά τα τρία πράγματα.

62
00:02:39,368 --> 00:02:40,340
>> ΤΟΜΑΣ Reimers: Cool.

63
00:02:40,340 --> 00:02:41,111
Προσθέστε ένα τύπο doc;

64
00:02:41,111 --> 00:02:42,235
ALLISON BUCHHOLTZ-ΑΕ: Ναι.

65
00:02:42,235 --> 00:02:43,068
ΤΟΜΑΣ Reimers: Ναι.

66
00:02:43,068 --> 00:02:43,769
Cool.

67
00:02:43,769 --> 00:02:46,102
ALLISON BUCHHOLTZ-ΑΕ: Προφανώς,
μικρόφωνα μου δεν μου αρέσει.

68
00:02:46,102 --> 00:02:49,650
ΤΟΜΑΣ Reimers: Αχ, να μας δώσει ένα δευτερόλεπτο μόνο
ενώ Allison διακόπτες έξω μικρόφωνο της.

69
00:02:49,650 --> 00:02:50,500
Οπότε ναι.

70
00:02:50,500 --> 00:02:52,030
Γι 'αυτό και έχουν την κύρια σελίδα μας.

71
00:02:52,030 --> 00:02:53,890
Είναι το είδος του unstyled.

72
00:02:53,890 --> 00:02:54,780
Δεν έχουμε πολύ.

73
00:02:54,780 --> 00:02:57,110
Εμείς απλά πρέπει βασικά κείμενο.

74
00:02:57,110 --> 00:02:59,470
Έχουμε το φύλλο στυλ.

75
00:02:59,470 --> 00:03:00,220
Έχουμε τον τίτλο.

76
00:03:00,220 --> 00:03:04,020
Έτσι απλά γυμνά-χωρίς κόκαλα
συστατικά κάνει μια ιστοσελίδα.

77
00:03:04,020 --> 00:03:08,880
>> Έτσι, από εκεί, ας
μιλήσουμε για το τι είναι CSS

78
00:03:08,880 --> 00:03:11,270
και τι μοιάζει και όλα αυτά.

79
00:03:11,270 --> 00:03:12,047
Έτσι, για that--

80
00:03:12,047 --> 00:03:13,755
ALLISON BUCHHOLTZ-ΑΕ:
Επιστροφή στις διαφάνειες.

81
00:03:13,755 --> 00:03:15,200
ΤΟΜΑΣ Reimers: Επιστροφή στις διαφάνειες.

82
00:03:15,200 --> 00:03:17,240
Και Allison μπορεί να αναλάβει.

83
00:03:17,240 --> 00:03:18,720
>> ALLISON BUCHHOLTZ-ΑΕ: Woo.

84
00:03:18,720 --> 00:03:19,220
ΟΚ.

85
00:03:19,220 --> 00:03:22,360
Έτσι στο αρχείο CSS σας,
θα πάμε για να έχουν

86
00:03:22,360 --> 00:03:25,010
πολλά από αυτά τα πράγματα που ονομάζεται επιλογείς.

87
00:03:25,010 --> 00:03:27,420
Αυτό θα είναι μόνο η
βάση το αρχείο CSS σας.

88
00:03:27,420 --> 00:03:29,480
Είναι ακριβώς πρόκειται να είναι
πάρα πολλά από αυτά.

89
00:03:29,480 --> 00:03:30,780
Έτσι επιλογέα.

90
00:03:30,780 --> 00:03:32,649
Αυτή είναι μόνο η γενική ανατομία.

91
00:03:32,649 --> 00:03:35,190
Εμείς πάμε για να περάσει
παραδείγματα, γιατί αν εσείς ποτέ

92
00:03:35,190 --> 00:03:38,400
παρακολούθησαν το τμήμα μου, αισθάνομαι
όπως τα πράγματα στο αφηρημένο

93
00:03:38,400 --> 00:03:39,400
δεν κάνουν πραγματικά νόημα.

94
00:03:39,400 --> 00:03:41,110
Βοηθά πάντα να δείτε τα παραδείγματα.

95
00:03:41,110 --> 00:03:42,420
>> Έτσι έχουμε κάποια επιλογέα.

96
00:03:42,420 --> 00:03:49,120
Αυτό πρόκειται να είναι κάποια αναγνωριστικό για
ό, τι θέλουμε το στυλ για να εφαρμοστεί.

97
00:03:49,120 --> 00:03:52,220
Και τότε μπορούμε να έχουμε οποιαδήποτε
σύνολο κανόνων και αξιών.

98
00:03:52,220 --> 00:03:55,680
Έτσι επιλογείς που μπορείτε να δείτε
θα μπορούσε να είναι κάτι σαν το σώμα,

99
00:03:55,680 --> 00:04:00,262
ή της παραγράφου με Ρ,
ή κεφαλίδα, ή οτιδήποτε άλλο,

100
00:04:00,262 --> 00:04:02,000
Ό, τι θέλετε ετικέτες HTML σας να είναι.

101
00:04:02,000 --> 00:04:03,570
>> Έτσι, σε αυτή την περίπτωση, έχουμε σώμα.

102
00:04:03,570 --> 00:04:06,985
Και έχουμε κάποιο κανόνα,
που αυτό αντιστοιχεί

103
00:04:06,985 --> 00:04:09,610
σε ό, τι στυλ σας να ισχύει.

104
00:04:09,610 --> 00:04:12,720
Έτσι, σε αυτή την περίπτωση, έχουμε
χρώμα του φόντου και της γραμματοσειράς βάρος.

105
00:04:12,720 --> 00:04:16,200
Έτσι, αυτό πρόκειται να αλλάξει
το φόντο του τίποτα

106
00:04:16,200 --> 00:04:19,640
μέσα σε κάθε ετικέτα σώμα του αρχείου HTML μας.

107
00:04:19,640 --> 00:04:22,810
Και πρόκειται να δώσει
είναι αυτό το φως μπλε αξία.

108
00:04:22,810 --> 00:04:24,820
>> Γι 'αυτό πρόκειται να κάνει η
φόντο γαλάζιο.

109
00:04:24,820 --> 00:04:28,660
Και τότε κάτι μέσα στο σώμα είναι
πρόκειται να έχει ένα βάρος γραμματοσειράς τολμηρή.

110
00:04:28,660 --> 00:04:31,142
Γι 'αυτό ακριβώς πρόκειται να
τολμηρή όλο το κείμενό μας.

111
00:04:31,142 --> 00:04:32,970
Και αυτό είναι μόνο ένα επιλογέα.

112
00:04:32,970 --> 00:04:34,680
Αλλά θα μπορούσατε να έχετε πάρα πολλά από αυτά.

113
00:04:34,680 --> 00:04:38,730
Και όπως θα πάμε να δείξουμε
αργότερα, λίγο περισσότερο στο πώς

114
00:04:38,730 --> 00:04:40,709
ότι τα έργα και περισσότερα παραδείγματα εκεί.

115
00:04:40,709 --> 00:04:41,750
Οτιδήποτε θέλετε να προσθέσετε;

116
00:04:41,750 --> 00:04:42,499
>> ΤΟΜΑΣ Reimers: Όχι.

117
00:04:42,499 --> 00:04:43,500
Allison πήρε.

118
00:04:43,500 --> 00:04:46,144
Εμείς απλά θα κόψουν ένα
παράδειγμα εδώ για παράδειγμα το site μας.

119
00:04:46,144 --> 00:04:47,310
Ας λάβει πράγματι αυτό.

120
00:04:47,310 --> 00:04:48,620
Είναι τέλεια.

121
00:04:48,620 --> 00:04:54,460
Έτσι, είμαι απλώς πρόκειται να αντιγράψετε και να επικολλήσετε
ότι το δικαίωμα σε αρχείο main.css μας.

122
00:04:54,460 --> 00:04:56,530
Και Πάω να το αποθηκεύσετε.

123
00:04:56,530 --> 00:04:59,190
Και τότε θα το τρέξει.

124
00:04:59,190 --> 00:05:01,600
Έτσι πλευρά σημείωση, ένα από τα
πιο απογοητευτικό πράγματα

125
00:05:01,600 --> 00:05:04,490
είναι αν δεν αποθηκεύσετε ένα αρχείο, και
τότε, όπως, επαναλάβετε τη φόρτωση της σελίδας,

126
00:05:04,490 --> 00:05:07,450
και παρόμοια, γιατί δεν είναι
η αλλαγή συμβαίνει;

127
00:05:07,450 --> 00:05:07,950
Συμβαίνει.

128
00:05:07,950 --> 00:05:14,230
Έτσι, εδώ είδαμε ότι κάναμε μας
ιστοχώρο ένα γαλάζιο φόντο

129
00:05:14,230 --> 00:05:16,560
και κάποια έντονη γραφή.

130
00:05:16,560 --> 00:05:20,730
>> Θα ήθελα επίσης να αναφέρω, αν
παιδιά έχετε ερωτήσεις σχετικά με τίποτα

131
00:05:20,730 --> 00:05:23,622
κάνουμε, παρακαλώ αισθάνονται
ελεύθερος να μας σταματήσει και να ζητήσει μας.

132
00:05:23,622 --> 00:05:25,330
Είμαστε απόλυτα πρόθυμοι
να παρατάσσουν ερωτήσεις.

133
00:05:25,330 --> 00:05:27,951

134
00:05:27,951 --> 00:05:31,930
>> ALLISON BUCHHOLTZ-ΑΕ: Προφανώς, με
CSS, ό, τι βασίζεται η ίδια.

135
00:05:31,930 --> 00:05:34,107
Έτσι, αν ένα πράγμα δεν κάνει
νόημα τώρα, εμείς

136
00:05:34,107 --> 00:05:35,690
Δεν το θέλουμε αυτό να σας κολλάει αργότερα.

137
00:05:35,690 --> 00:05:38,390

138
00:05:38,390 --> 00:05:41,930
>> ΤΟΜΑΣ Reimers: Ας
είδος του διαμελίζω αυτό.

139
00:05:41,930 --> 00:05:44,210
Έτσι θέλετε να ξεκινήσετε
με τον επιλογέα εδώ;

140
00:05:44,210 --> 00:05:45,979
>> ALLISON BUCHHOLTZ-ΑΕ: Ναι.

141
00:05:45,979 --> 00:05:48,270
Όπως είπα και νωρίτερα, το σώμα
είναι απλά επιλογέας μας εδώ.

142
00:05:48,270 --> 00:05:50,950
Έτσι, αν πάμε πίσω πάνω σε index-- αχ μας.

143
00:05:50,950 --> 00:05:53,245
>> ΤΟΜΑΣ Reimers: Ποια εγώ μόλις έκλεισε.

144
00:05:53,245 --> 00:05:54,530
Δώσε μου ένα δευτερόλεπτο.

145
00:05:54,530 --> 00:05:58,286
Έτσι αρχείο, ανοίξτε, index.html.

146
00:05:58,286 --> 00:05:59,410
ALLISON BUCHHOLTZ-ΑΕ: Cool.

147
00:05:59,410 --> 00:06:02,710
Έτσι, αν παρατηρήσετε εδώ, εμείς
έχουν αυτές τις ετικέτες σώμα, έτσι δεν είναι;

148
00:06:02,710 --> 00:06:06,270
Έτσι, ο επιλογέας ακριβώς αντιστοιχεί σε
οι ετικέτες που μιλάμε.

149
00:06:06,270 --> 00:06:07,670
Έτσι, το σώμα εδώ.

150
00:06:07,670 --> 00:06:10,315
Έτσι, αυτό που λέμε είναι
everything-- μπορούμε να πάμε πίσω;

151
00:06:10,315 --> 00:06:12,065
Μακάρι να μπορούσα μόνο
σαν να αγγίξετε την οθόνη.

152
00:06:12,065 --> 00:06:14,410
Θα ήθελα να είναι τόσο πολύ πιο δροσερές.

153
00:06:14,410 --> 00:06:17,150
>> Έτσι, οτιδήποτε μέσα σε εκείνους
ετικέτες του σώματος, που είδαμε

154
00:06:17,150 --> 00:06:19,637
ήταν απλά, όπως, το κείμενο,
και το σώμα γενικά

155
00:06:19,637 --> 00:06:20,970
αναφέρεται, όπως, το φόντο.

156
00:06:20,970 --> 00:06:22,720
Αν ποτέ θέλετε να
να αλλάξετε το φόντο,

157
00:06:22,720 --> 00:06:25,090
ότι πρόκειται να είναι σε μια ετικέτα του σώματος.

158
00:06:25,090 --> 00:06:27,120
Απλά έχει αυτούς τους κανόνες που εφαρμόζονται σε αυτά.

159
00:06:27,120 --> 00:06:32,040
>> Έτσι, αν ήταν να πάει να
index.html and-- πραγματικότητα,

160
00:06:32,040 --> 00:06:33,840
μπορούμε να έχουμε κάτι
έξω από το σώμα;

161
00:06:33,840 --> 00:06:37,340
Αν είχαμε, όπως, ένα υποσέλιδο ή
κάτι, δεν θα ισχύουν για αυτό.

162
00:06:37,340 --> 00:06:40,900
Αλλά τίποτα μέσα
Αυτές οι ετικέτες σώμα πρόκειται

163
00:06:40,900 --> 00:06:44,960
να επηρεαστούν από αυτό το σώμα
επιλογέα που έχουμε κάνει.

164
00:06:44,960 --> 00:06:47,405
Έτσι, εάν θέλετε να πληκτρολογήσετε
κάτι άλλο there--

165
00:06:47,405 --> 00:06:49,400
>> ΤΟΜΑΣ Reimers: Ας το πετύχετε αυτό.

166
00:06:49,400 --> 00:06:55,330
Έτσι, αν είχαμε μια div-- έτσι ώστε να είναι
ακριβώς μια άλλη ετικέτα που μπορείτε να έχετε.

167
00:06:55,330 --> 00:06:56,350
Πάω να το κλείσετε.

168
00:06:56,350 --> 00:06:58,280
Ή ας το κάνουν ένα σημείο.

169
00:06:58,280 --> 00:07:01,430
Έτσι, p σημαίνει παράγραφο.

170
00:07:01,430 --> 00:07:02,560
Και μέσα σε αυτό το σημείο.

171
00:07:02,560 --> 00:07:05,650
Και τότε λέω, "Αυτό είναι το κείμενο."

172
00:07:05,650 --> 00:07:06,369
Cool.

173
00:07:06,369 --> 00:07:09,160
Και τότε έκανα αυτός ο κανόνας ισχύει για
ένα σημείο αντί του σώματος.

174
00:07:09,160 --> 00:07:12,390

175
00:07:12,390 --> 00:07:17,320
Θα δούμε πώς θα ισχύει μόνο για
η νεοσυσταθείσα παράγραφο, δεξιά,

176
00:07:17,320 --> 00:07:18,892
Δεν το όλο θέμα.

177
00:07:18,892 --> 00:07:20,090
Μήπως αυτό έχει νόημα;

178
00:07:20,090 --> 00:07:21,840
>> ALLISON BUCHHOLTZ-ΑΕ:
Έτσι, αυτό είναι όλο το σώμα,

179
00:07:21,840 --> 00:07:24,450
αλλά τώρα επιλογέα μας μόνο
αντιστοιχεί στην παράγραφο.

180
00:07:24,450 --> 00:07:27,050
Γι 'αυτό ακριβώς έχουν έντονη και μπλε
για τη συγκεκριμένη παράγραφο,

181
00:07:27,050 --> 00:07:30,760
επειδή αυτό είναι το μόνο πράγμα
που περικλείεται μέσα στην ετικέτα σ.

182
00:07:30,760 --> 00:07:35,349
>> ΤΟΜΑΣ Reimers: Μήπως αυτό έχει νόημα είδος
του πώς τα πράγματα περικλείουν άλλα πράγματα;

183
00:07:35,349 --> 00:07:38,140
ALLISON BUCHHOLTZ-ΑΕ: Επίσης, μόλις
να πει, όπως, ένας από τους καλύτερους τρόπους

184
00:07:38,140 --> 00:07:40,889
για να πάρει πραγματικά άνετα με CSS
έχει να κάνει ακριβώς τα πράγματα όπως αυτό,

185
00:07:40,889 --> 00:07:42,050
απλά να το δοκιμάσετε.

186
00:07:42,050 --> 00:07:46,700
Είναι πολύ απλό να πληκτρολογήσετε κάτι
έξω, χτύπησε Ανανέωση, και να δούμε τι θα συμβεί.

187
00:07:46,700 --> 00:07:48,940
Και όπως συμβαίνει με τα περισσότερα CS,
πειραματισμός μπορεί συχνά

188
00:07:48,940 --> 00:07:51,790
να οδηγήσει σε ένα πολύ καλύτερο
διαισθητική κατανόηση.

189
00:07:51,790 --> 00:07:54,432
Ακόμα περισσότερο από ό, τι μας μόνο,
όπως, μιλώντας σε σας.

190
00:07:54,432 --> 00:07:58,350
>> ΤΟΜΑΣ Reimers: Απολύτως
100% συμφωνούν σε αυτό το σημείο.

191
00:07:58,350 --> 00:08:02,430
Έτσι, αν πάμε πίσω σε αυτό, ας ξεκινήσουμε
τεμαχίζοντας ακριβώς τι κάνουν αυτά τα δύο.

192
00:08:02,430 --> 00:08:04,550
Έτσι έχουμε δύο κανόνες για το θέμα αυτό.

193
00:08:04,550 --> 00:08:07,420
Έτσι, η πρώτη είναι το χρώμα του φόντου.

194
00:08:07,420 --> 00:08:10,590
Και βλέπετε ότι έχουμε αυτό που
ίσο με την τιμή, γαλάζιο.

195
00:08:10,590 --> 00:08:15,009
>> Έτσι, σε CSS, CSS είναι είδος
πολύ χαλαρό για το πώς

196
00:08:15,009 --> 00:08:16,300
έχετε τη δυνατότητα να ορίσετε το χρώμα.

197
00:08:16,300 --> 00:08:17,800
Έτσι μπορείτε να ορίσετε με βάση το όνομα.

198
00:08:17,800 --> 00:08:20,650
Μπορείτε επίσης να κάνετε κάτι σαν «κόκκινο».

199
00:08:20,650 --> 00:08:25,270
Και τότε, αν πάμε πίσω σε αυτό,
θα δείτε ότι το φόντο είναι κόκκινο.

200
00:08:25,270 --> 00:08:29,040
Μπορείτε επίσης να πάρετε really-- νομίζω ότι εσύ
μπορεί να πάρει αρκετά δημιουργικοί με αυτό,

201
00:08:29,040 --> 00:08:29,540
Δεν μπορείς;

202
00:08:29,540 --> 00:08:31,170
>> ALLISON BUCHHOLTZ-ΑΕ: Ι
πιστεύετε ότι μπορείτε να χρησιμοποιήσετε το εξάγωνο.

203
00:08:31,170 --> 00:08:31,250
Μπορεί να μην σας;

204
00:08:31,250 --> 00:08:32,083
>> ΤΟΜΑΣ Reimers: Ναι.

205
00:08:32,083 --> 00:08:32,969
Έτσι, μπορείτε να χρησιμοποιήσετε το εξάγωνο.

206
00:08:32,969 --> 00:08:34,490
Αλλά σκέφτομαι όνομα-σοφός.

207
00:08:34,490 --> 00:08:35,385
Δεν είναι εκεί;

208
00:08:35,385 --> 00:08:37,260
ALLISON BUCHHOLTZ-ΑΕ:
Μπορείτε να κάνετε κάμποσους.

209
00:08:37,260 --> 00:08:43,350
Λίγο πολύ όπως και τα περισσότερα χρώματα που σας
μπορεί name-- όπως, νομίζω ότι ο σολομός είναι ένα.

210
00:08:43,350 --> 00:08:45,322
>> ΤΟΜΑΣ Reimers: Θα προσπαθήσουμε σολομού.

211
00:08:45,322 --> 00:08:47,530
ALLISON BUCHHOLTZ-ΑΕ: Ι
νομίζω chartreuse είναι εκεί.

212
00:08:47,530 --> 00:08:48,050
ΤΟΜΑΣ Reimers: Ναι.

213
00:08:48,050 --> 00:08:48,550
Βλέπεις;

214
00:08:48,550 --> 00:08:50,080
Έτσι, μπορείτε να πάρετε αρκετά δημιουργικοί.

215
00:08:50,080 --> 00:08:52,246
>> ALLISON BUCHHOLTZ-ΑΕ: Μπορείτε
θα μπορούσε να πάρει αρκετά δημιουργικοί.

216
00:08:52,246 --> 00:08:55,750
Όπως, αν μπορείτε να σκεφτείτε το
όνομα του χρώματος, είναι πιθανώς εκεί.

217
00:08:55,750 --> 00:08:57,840
Αν θέλετε πραγματικά ωραία
λεπτομέρεια, μπορείτε να πάτε εξάγωνο.

218
00:08:57,840 --> 00:08:58,673
>> ΤΟΜΑΣ Reimers: Ναι.

219
00:08:58,673 --> 00:08:59,390
Έτσι, δεκαεξαδικό.

220
00:08:59,390 --> 00:09:05,280
Αν εσείς θυμάστε αυτό πίσω
από την παλιά PSET σας, Εικόνα Ανάκτηση,

221
00:09:05,280 --> 00:09:08,300
σας παιδιά είχαν να αντιμετωπίσουν
με αυτές τις αξίες εξάγωνο.

222
00:09:08,300 --> 00:09:15,280
Και το είδος της για να ανακεφαλαιώσουμε τι είναι αυτό,
εξάγωνο έχει τρεις τιμές που αποθηκεύονται σε αυτό.

223
00:09:15,280 --> 00:09:17,250
Έτσι είναι σε ομάδες των δύο προσαυξήσεις.

224
00:09:17,250 --> 00:09:19,300
Τα δύο πρώτα αντιπροσωπεύουν το κόκκινο αξία.

225
00:09:19,300 --> 00:09:22,420
Το δεύτερο αντιπροσωπεύει
το πράσινο αξία.

226
00:09:22,420 --> 00:09:25,020
Και το τελευταίο είναι μπλε;

227
00:09:25,020 --> 00:09:30,050
>> Έτσι FF συμβαίνει να αντιπροσωπεύουν
μια δεκαεξαδική 255.

228
00:09:30,050 --> 00:09:35,480
Έτσι, έχετε 255 κόκκινο, 255
πράσινο, και το 0 για το μπλε.

229
00:09:35,480 --> 00:09:37,670
Και οι τιμές κυμαίνονται μεταξύ 0 και 255.

230
00:09:37,670 --> 00:09:38,350
>> ΚΟΙΝΟ: Δεξιά.

231
00:09:38,350 --> 00:09:41,472
Έτσι, κατ 'ουσίαν, θα μπορούσε να ψάξει
το διαδίκτυο για κάθε χρώμα που θέλουμε,

232
00:09:41,472 --> 00:09:43,912
και να προσδιορίσει το πράγματι γνωστό
σύνθετο χρώμα του φάσματος,

233
00:09:43,912 --> 00:09:45,130
και τότε θα μπορούσαμε να το θέσω σε;

234
00:09:45,130 --> 00:09:46,380
ALLISON BUCHHOLTZ-ΑΕ: Ακριβώς.

235
00:09:46,380 --> 00:09:52,900
Έτσι, έχετε λίγο πολύ πλήρη έλεγχο
πάνω από τα χρώματα που θέλετε μέσα σε CSS.

236
00:09:52,900 --> 00:09:55,069
Θα πάμε να μιλήσουμε για
εικόνες φόντου αργότερα;

237
00:09:55,069 --> 00:09:56,110
Ή μήπως θέλουμε να το κάνουμε αυτό;

238
00:09:56,110 --> 00:09:56,240
>> ΤΟΜΑΣ Reimers: Ναι.

239
00:09:56,240 --> 00:09:57,010
Απολύτως.

240
00:09:57,010 --> 00:10:00,830
Έτσι, η πρώτη, ακριβώς για να δείξει ότι
κόκκινο και το πράσινο είναι το κίτρινο.

241
00:10:00,830 --> 00:10:03,120
Και αν χρειάζεστε κάποια
βοήθεια για την εύρεση αυτό,

242
00:10:03,120 --> 00:10:05,575
να το Google κάτι
όπως "επιλογής χρώματος."

243
00:10:05,575 --> 00:10:07,200
ALLISON BUCHHOLTZ-ΑΕ: Ω, είναι τόσο καλό.

244
00:10:07,200 --> 00:10:09,090
Αγαπώ επιλογέα χρωμάτων.

245
00:10:09,090 --> 00:10:11,360
>> ΤΟΜΑΣ Reimers: colorpicker.com
είναι ένα καλό παράδειγμα.

246
00:10:11,360 --> 00:10:14,580
Και εδώ, θα δείτε ότι έχετε
ένα πλήρες Photoshop-όπως επιλογέα χρώματος.

247
00:10:14,580 --> 00:10:14,920
>> ALLISON BUCHHOLTZ-ΑΕ: MM-HM.

248
00:10:14,920 --> 00:10:16,980
Επίσης, τα δροσερά πράγματα που είναι
μπορεί να δημιουργήσει συνδυασμούς χρωμάτων

249
00:10:16,980 --> 00:10:18,896
έτσι ώστε να μην χρειάζεται,
όπως, συγκρουσιακά χρώματα.

250
00:10:18,896 --> 00:10:22,780
ΤΟΜΑΣ Reimers: Και στη συνέχεια,
εδώ είναι το εξάγωνο αξία μέχρι εδώ.

251
00:10:22,780 --> 00:10:27,800
Έτσι, μπορείτε πάντα να βρείτε online βασικά
θέσεις για να πάρουν την δεκαεξαδική τιμή από.

252
00:10:27,800 --> 00:10:31,667
Δεν είναι το είδος του εν λόγω ακριβώς, όπως, εμείς
δείτε τα χρώματα του κόσμου σε αριθμούς.

253
00:10:31,667 --> 00:10:34,000
Είναι περισσότερο ότι πάμε σε απευθείας σύνδεση
και να βρει τι χρώμα θέλουμε,

254
00:10:34,000 --> 00:10:36,850
και στη συνέχεια να λάβει τον αριθμό προς τα κάτω.

255
00:10:36,850 --> 00:10:39,590
Επειδή είναι ακριβώς ένα πολύ εύκολο
τρόπος για αναφορά πράγματα στο CS.

256
00:10:39,590 --> 00:10:40,350
>> ALLISON BUCHHOLTZ-ΑΕ:
Και έπειτα υπάρχει also--

257
00:10:40,350 --> 00:10:41,630
Ξεχάσω το ακριβές όνομα της τοποθεσίας.

258
00:10:41,630 --> 00:10:43,838
Αλλά υπάρχει σίγουρα, εγώ
νομίζω, κάτι από την Adobe

259
00:10:43,838 --> 00:10:48,350
που δημιουργεί συνδυασμούς χρωμάτων για σας,
το οποίο είναι πραγματικά δροσερό, επειδή σας

260
00:10:48,350 --> 00:10:50,580
definitely-- είναι μερικές φορές
δύσκολο να καταλάβω,

261
00:10:50,580 --> 00:10:53,729
Ω, αν θέλετε να χρησιμοποιήσετε αυτό το χρώμα,
τι θα μπορούσε να είναι άλλη χρήσιμη

262
00:10:53,729 --> 00:10:56,395
να χρησιμοποιήσει αλλού στο site μου να,
όπως, το κάνουν όμορφο και συνεκτική.

263
00:10:56,395 --> 00:11:00,430

264
00:11:00,430 --> 00:11:04,260
>> ΤΟΜΑΣ Reimers: Allison μιλάει για
μία από την Adobe που ονομάζεται Kuler, νομίζω.

265
00:11:04,260 --> 00:11:04,885
Είναι K-U-Ε-Ε-Κ.

266
00:11:04,885 --> 00:11:06,259
ALLISON BUCHHOLTZ-ΑΕ: Νομίζω πως ναι.

267
00:11:06,259 --> 00:11:07,610
Είμαι σίγουρος ότι είναι το ένα.

268
00:11:07,610 --> 00:11:11,050
>> ΤΟΜΑΣ Reimers: Το αγαπημένο μου έχει
ανέκαθεν Συνδυασμός χρωμάτων Designer.

269
00:11:11,050 --> 00:11:13,998
>> ALLISON BUCHHOLTZ-ΑΕ: Ooh.

270
00:11:13,998 --> 00:11:16,010
>> ΤΟΜΑΣ Reimers: Ποια είναι now--

271
00:11:16,010 --> 00:11:16,860
>> ALLISON BUCHHOLTZ-ΑΕ:
Αχ, αυτό είναι όμορφο.

272
00:11:16,860 --> 00:11:18,818
>> ΤΟΜΑΣ Reimers: Και σας
μπορεί ουσιαστικά να πω, όπως,

273
00:11:18,818 --> 00:11:21,700
Θέλω τρία χρώματα το ένα δίπλα στο άλλο.

274
00:11:21,700 --> 00:11:25,030
Και τότε ας κάνουμε κάτι καλό.

275
00:11:25,030 --> 00:11:29,210
Και τότε μπορείτε να πάρετε ένα παράδειγμα
του τι μπορεί να μοιάζει.

276
00:11:29,210 --> 00:11:32,470
Και τότε, αν περνάτε πάνω από οποιοδήποτε από
τους, σας δίνει την δεκαεξαδική τιμή.

277
00:11:32,470 --> 00:11:35,010
>> Έτσι ακριβώς όπως ένας καλός τρόπος για να ξεκινήσετε
σκεφτόμαστε συνδυασμούς χρωμάτων

278
00:11:35,010 --> 00:11:39,570
ή ποια χρώματα σε μια ιστοσελίδα
θα μπορούσε να πάει καλά μαζί.

279
00:11:39,570 --> 00:11:45,655
Επειδή αυτό μπορεί να είναι εκπληκτικά
Δεν είναι τόσο εύκολο να πάρει όσο νομίζετε.

280
00:11:45,655 --> 00:11:48,280
Και τότε το άλλο δροσερό πράγμα
Έχω βρεί πάντα σχετικά με αυτό το site

281
00:11:48,280 --> 00:11:51,480
είναι αν χτυπήσει παραδείγματα, αυτό θα
δείχνουν τι ένα παράδειγμα ιστοσελίδα

282
00:11:51,480 --> 00:11:54,800
Μπορεί να μοιάζει με τη χρήση του εν λόγω συστήματος χρωμάτων.

283
00:11:54,800 --> 00:11:56,270
Τέλος πάντων.

284
00:11:56,270 --> 00:11:57,863
>> Πίσω στην πραγματική CSS.

285
00:11:57,863 --> 00:12:01,112
ALLISON BUCHHOLTZ-ΑΕ: Αλλά προφανώς, εμείς
γνωρίζουν αυτές οι αναφορές μπορεί να είναι χρήσιμο.

286
00:12:01,112 --> 00:12:03,195
ΤΟΜΑΣ Reimers: Όχι,
σίγουρα μπορεί να είναι χρήσιμη.

287
00:12:03,195 --> 00:12:04,720
Έτσι, το δεύτερο κανόνα, Allison;

288
00:12:04,720 --> 00:12:05,844
>> ALLISON BUCHHOLTZ-ΑΕ: Ναι.

289
00:12:05,844 --> 00:12:08,280
Ο δεύτερος κανόνας είναι απλά
που αντιστοιχούν σε γραμματοσειρά μας.

290
00:12:08,280 --> 00:12:11,520
Έτσι γραμματοσειράς βάρος είναι ακριβώς το είδος
of-- έτσι το βάρος θα

291
00:12:11,520 --> 00:12:15,220
είναι, αν θέλετε απλά, όπως,
κανονική ή, όπως, λεπτότερο γραμματοσειρές,

292
00:12:15,220 --> 00:12:17,251
ή στην περίπτωση αυτή, όπως, τολμηρή.

293
00:12:17,251 --> 00:12:17,750
Ξεχάσω.

294
00:12:17,750 --> 00:12:21,557
Ποιο είναι το αν ήθελε it-- υπάρχει
μια λεπτότερη από ό, τι ακριβώς, όπως, η κανονική;

295
00:12:21,557 --> 00:12:24,140
ΤΟΜΑΣ Reimers: Εγώ δεν κάνω πραγματικότητα
ξέρω αν υπάρχει μια λεπτότερη.

296
00:12:24,140 --> 00:12:24,680
ALLISON BUCHHOLTZ-ΑΕ: ξεχάσω.

297
00:12:24,680 --> 00:12:26,300
Έτσι γραμματοσειράς βάρος που συνήθως
απλά χρησιμοποιήστε για την τολμηρή.

298
00:12:26,300 --> 00:12:29,010
Αν θέλετε να πάρετε πραγματικά σε
αυτό, θα πάμε να σας δείξω.

299
00:12:29,010 --> 00:12:34,317
W3Schools διαθέτει όλες τις διαφορετικές
πράγματα που μπορείτε να κάνετε για τις γραμματοσειρές.

300
00:12:34,317 --> 00:12:36,900
Αλλά βασικά, αν θέλετε πάντα
να αλλάξει τίποτα για γραμματοσειρά,

301
00:12:36,900 --> 00:12:39,330
ότι πάντα θα είναι,
όπως, font-κάτι.

302
00:12:39,330 --> 00:12:43,450
Έτσι, θα είναι σαν, font-family αν είστε
προσπαθούν να αλλάξουν τον πραγματικό τύπο.

303
00:12:43,450 --> 00:12:47,390
Θα είναι font-style, αν
θέλουν να το κάνουν σαν καλλιγραφικά,

304
00:12:47,390 --> 00:12:49,710
ή πλάγια, ή οτιδήποτε.

305
00:12:49,710 --> 00:12:53,570
Ή ακόμα και το χρώμα της γραμματοσειράς, αν
θέλαμε να το αλλάξουμε αυτό.

306
00:12:53,570 --> 00:12:55,621
>> ΤΟΜΑΣ Reimers: Yup.

307
00:12:55,621 --> 00:12:56,925
Έτσι, μπορείτε να το αλλάξει αυτό.

308
00:12:56,925 --> 00:12:59,360
Και το είδος ακριβώς να
ανακεφαλαιώσουμε τώρα, ώστε να μπορείτε να

309
00:12:59,360 --> 00:13:01,400
να δούμε ότι έχουμε τον επιλογέα μέχρι εδώ.

310
00:13:01,400 --> 00:13:03,000
Έχουμε αυτά τα άγκιστρα.

311
00:13:03,000 --> 00:13:06,735
Και στη συνέχεια, έχουμε κανόνες
οριοθετείται με ερωτηματικά.

312
00:13:06,735 --> 00:13:08,100
Μήπως αυτό έχει νόημα;

313
00:13:08,100 --> 00:13:09,130
Ναι;

314
00:13:09,130 --> 00:13:10,500
Cool.

315
00:13:10,500 --> 00:13:13,200
Έτσι, αν αυτό είναι good--

316
00:13:13,200 --> 00:13:14,424
>> ALLISON BUCHHOLTZ-ΑΕ: Επιστροφή.

317
00:13:14,424 --> 00:13:17,590
ΤΟΜΑΣ Reimers: Ας μιλήσουμε συγκεκριμένα
για το τι είδους επιλογείς που έχουμε.

318
00:13:17,590 --> 00:13:19,790
«Αιτία τώρα έχουμε
το είδος ακριβώς φαίνεται ετικέτες.

319
00:13:19,790 --> 00:13:21,696
Αλλά εσείς θα μπορούσε να δει το εύλογο.

320
00:13:21,696 --> 00:13:23,570
Ας πούμε ότι έχετε δύο παραγράφους
σε μια σελίδα και σας

321
00:13:23,570 --> 00:13:26,087
θέλουν να είναι σε θέση να στυλ
ένα, αλλά όχι το άλλο,

322
00:13:26,087 --> 00:13:29,170
που δεν θέλουν απλά να περιορίσει τον εαυτό σας
να χρειαστεί να χρησιμοποιήσετε διαφορετικές πραγματικές HTML

323
00:13:29,170 --> 00:13:33,410
ετικέτες για να τους δώσει διαφορετικά στυλ.

324
00:13:33,410 --> 00:13:35,995
>> Έτσι, έχουμε τρεις βασικές
τύπους επιλογείς.

325
00:13:35,995 --> 00:13:37,120
ALLISON BUCHHOLTZ-ΑΕ: Ναι.

326
00:13:37,120 --> 00:13:39,828
Έτσι έχουμε ετικέτα, η οποία είναι ό, τι
έχουμε μιλήσει για το δικαίωμα τώρα.

327
00:13:39,828 --> 00:13:42,430
Έτσι, αυτό είναι το είδος του σαν σώμα ή ρ σας.

328
00:13:42,430 --> 00:13:46,280
Και τότε έχουμε τάξη, η οποία είναι
όταν το ορίζουμε στην CSS αρχείο μας,

329
00:13:46,280 --> 00:13:49,907
είναι πάντα πρόκειται να dot, ανεξαρτήτως
θέλετε το όνομα της κλάσης σας να είναι.

330
00:13:49,907 --> 00:13:51,490
Και αυτό μπορεί να ισχύει για πολλαπλές πράγματα.

331
00:13:51,490 --> 00:13:54,610

332
00:13:54,610 --> 00:13:57,610
>> Ας πούμε ότι έχετε πέντε σημεία
και δύο από τα τρία από αυτά

333
00:13:57,610 --> 00:14:00,580
πρέπει να είναι στυλ το ίδιο,
θα εφαρμόσει μια τάξη σε αυτό.

334
00:14:00,580 --> 00:14:03,040
Και αυτό είναι ακριβώς ο τρόπος που το κάνουμε.

335
00:14:03,040 --> 00:14:05,600
Θα σας δώσω ένα παράδειγμα του
όπου αυτό δείχνει πραγματικά επάνω.

336
00:14:05,600 --> 00:14:11,030
Αλλά αν είχε ίσως κάποια ετικέτα
p, μετά από αυτό, θα πρέπει να γράφεις,

337
00:14:11,030 --> 00:14:14,170
τάξη ισούται με όποιες κατηγορίες
θέλετε να ισχύουν γι 'αυτό.

338
00:14:14,170 --> 00:14:19,280
Έτσι, ό, επιλογείς κλάσης που θέλουμε
να ισχύουν για τη συγκεκριμένη παράγραφο,

339
00:14:19,280 --> 00:14:21,300
θα μπορούσαμε απλά να γράψετε κάτι σαν το.

340
00:14:21,300 --> 00:14:24,080
Φυσικά, πιστεύω ότι ένα παράδειγμα
θα είναι πολύ πιο συγκεκριμένο κάνουν.

341
00:14:24,080 --> 00:14:27,270
>> Το άλλο που έχουμε
είναι το ID, το οποίο συμβολίζουμε

342
00:14:27,270 --> 00:14:29,707
με ένα hash, ή λίρα, ή hashtag.

343
00:14:29,707 --> 00:14:30,790
ΤΟΜΑΣ Reimers: δίεσης.

344
00:14:30,790 --> 00:14:32,430
ALLISON BUCHHOLTZ-ΑΕ: δίεσης.

345
00:14:32,430 --> 00:14:34,550
Που λειτουργεί, πάρα πολύ.

346
00:14:34,550 --> 00:14:36,640
Και αυτό θα πρέπει να είναι πραγματικά μοναδική.

347
00:14:36,640 --> 00:14:39,880
Θα πρέπει να εφαρμόζεται μόνο σε
ένα πράγμα στη σελίδα σας.

348
00:14:39,880 --> 00:14:43,820
Έτσι, αν αυτό είναι μια συγκεκριμένη παράγραφο,
ή κάποιο στοιχείο σε μια λίστα, ή οτιδήποτε άλλο,

349
00:14:43,820 --> 00:14:45,090
αυτό πρέπει να είναι μοναδικό.

350
00:14:45,090 --> 00:14:48,730
Και με τον ίδιο τρόπο που εμείς
λένε, όπως, class = "Class1 Class2,"

351
00:14:48,730 --> 00:14:51,577
Αυτό μπορεί να είναι μόνο id του ό, τι έχουμε.

352
00:14:51,577 --> 00:14:52,410
ΤΟΜΑΣ Reimers: Ναι.

353
00:14:52,410 --> 00:14:54,330
Ας μιλήσουμε σίγουρα
σχετικά με παραδείγματα εδώ.

354
00:14:54,330 --> 00:14:58,170
Και είμαι απλώς πρόκειται να βουτήξει
κατ 'ευθείαν πίσω στον κώδικα.

355
00:14:58,170 --> 00:15:02,090
Ας ρίξουμε μια ματιά σε HTML μας.

356
00:15:02,090 --> 00:15:03,960
Και έτσι έχουμε το δικαίωμα να έχει τώρα μία παράγραφο.

357
00:15:03,960 --> 00:15:05,510
Αυτό είναι το κείμενο.

358
00:15:05,510 --> 00:15:09,151
Είμαι ακριβώς πρόκειται να τροποποιήσει
αυτό. "Αυτό είναι το κείμενο 1."

359
00:15:09,151 --> 00:15:11,150
Και μετά θα πάμε να
έχουν μια «Αυτό είναι το κείμενο 2."

360
00:15:11,150 --> 00:15:12,525
>> ALLISON BUCHHOLTZ-ΑΕ: δεύτερη.

361
00:15:12,525 --> 00:15:13,540
ΤΟΜΑΣ Reimers: Yup.

362
00:15:13,540 --> 00:15:16,810
Έτσι, έχουμε τώρα "Αυτό είναι το κείμενο 2," σωστά;

363
00:15:16,810 --> 00:15:21,560
Και θα πάμε να δούμε, εάν το reload
η σελίδα, τι θα πάμε να βρούμε

364
00:15:21,560 --> 00:15:23,067
Είναι είμαστε Θα find--

365
00:15:23,067 --> 00:15:24,150
ALLISON BUCHHOLTZ-ΑΕ: Ooh.

366
00:15:24,150 --> 00:15:24,983
ΤΟΜΑΣ Reimers: Ναι.

367
00:15:24,983 --> 00:15:27,570
Εμείς πάμε να βρούμε ένα "Αυτό είναι
κειμένου 1, »και« Αυτό είναι το κείμενο 2. "

368
00:15:27,570 --> 00:15:28,650
>> ALLISON BUCHHOLTZ-ΑΕ: Και
έξω υπέροχο κίτρινο χρώμα.

369
00:15:28,650 --> 00:15:31,066
>> ΤΟΜΑΣ Reimers: Και θα δείτε
ότι επιλογέα μας αυτή τη στιγμή,

370
00:15:31,066 --> 00:15:34,940
η οποία ισχύει για p του, ή
παραγράφους, επηρεάζει και τα δύο,

371
00:15:34,940 --> 00:15:38,700
γιατί και οι δύο από αυτούς πληρούν τις
προϋπόθεση ότι είναι και οι δύο μια ετικέτα σελ.

372
00:15:38,700 --> 00:15:40,360
Αυτό κάνει συνολική αίσθηση.

373
00:15:40,360 --> 00:15:43,340
Το ερώτημα λοιπόν είναι, καλά, τι
αν θέλαμε να πάρει μόνο ένα;

374
00:15:43,340 --> 00:15:46,350
Έτσι ακριβώς όπως Allison έλεγε,
έχουμε άλλους δύο τρόπους για να το κάνουμε αυτό.

375
00:15:46,350 --> 00:15:47,320
Πάω να ξεκινήσω με id.

376
00:15:47,320 --> 00:15:48,405
>> ALLISON BUCHHOLTZ-ΑΕ:
Ας ξεκινήσουμε με id.

377
00:15:48,405 --> 00:15:50,405
>> ΤΟΜΑΣ Reimers: Και τα δύο
από αυτά είναι χαρακτηριστικά.

378
00:15:50,405 --> 00:15:53,200
Έτσι, υπάρχουν χαρακτηριστικά σε μορφή HTML.

379
00:15:53,200 --> 00:15:55,600
Και τι είναι είναι
κάτι που θέλετε να προσθέσετε

380
00:15:55,600 --> 00:15:58,840
μέσα στην ετικέτα η οποία είναι
χωριστά από το όνομα ετικέτας.

381
00:15:58,840 --> 00:16:01,301
Έτσι, μπορείτε να έχετε πολλαπλές ιδιότητες.

382
00:16:01,301 --> 00:16:01,800
Ναι;

383
00:16:01,800 --> 00:16:03,950
>> ALLISON BUCHHOLTZ-ΑΕ: ήμουν απλώς πρόκειται
να πω, από το παράδειγμα σας από PSET 7,

384
00:16:03,950 --> 00:16:06,650
αν κάποιος από εσάς να προσπαθήσετε να ευθυγραμμιστεί
τα πράγματα στο κέντρο,

385
00:16:06,650 --> 00:16:08,550
μπορεί να έχετε χρησιμοποιήσει
"Κείμενο align = center."

386
00:16:08,550 --> 00:16:10,550
Και να το παρατηρήσει πιθανώς
θα έπρεπε να επικεντρώνεται

387
00:16:10,550 --> 00:16:12,650
το κείμενό σας ή μπάρα πλοήγησης σας.

388
00:16:12,650 --> 00:16:15,499
Έτσι, αυτό είναι απλά ένα χαρακτηριστικό
ότι μπορεί να είστε εξοικειωμένοι με.

389
00:16:15,499 --> 00:16:18,040
ΤΟΜΑΣ Reimers: Υπάρχει μια δέσμη
του χαρακτηριστικά που θα δείτε.

390
00:16:18,040 --> 00:16:18,539
Ναι.

391
00:16:18,539 --> 00:16:21,250
Όπως καλή αναφορά για PSET 7.

392
00:16:21,250 --> 00:16:23,150
Έχουμε ταυτότητα.

393
00:16:23,150 --> 00:16:25,080
Μπορείτε επίσης να έχετε
τάξη, τα πράγματα όπως αυτό.

394
00:16:25,080 --> 00:16:27,250
Μια ενιαία ετικέτα μπορεί να έχει πολλές ιδιότητες.

395
00:16:27,250 --> 00:16:33,140
Έτσι, ξεκινώντας με id, ας προσποιηθούμε ότι
θέλουν να έχουν ένα αναγνωριστικό of-- δεν ξέρω.

396
00:16:33,140 --> 00:16:35,140
Θα ονομάσουμε ειδική,
διότι αυτό, είμαστε

397
00:16:35,140 --> 00:16:37,867
πρόκειται να κάνει τολμηρές, και
υπογραμμίζουν, και οτιδήποτε άλλο.

398
00:16:37,867 --> 00:16:39,950
ALLISON BUCHHOLTZ-ΑΕ: Είναι
Θα είναι σούπερ ειδική.

399
00:16:39,950 --> 00:16:42,360
ΤΟΜΑΣ Reimers: Έτσι, αυτό
μία, έχουμε id ιδιαίτερο.

400
00:16:42,360 --> 00:16:48,140
Έτσι, ο τρόπος για να επιλέξετε αυτό, τότε, είναι
σε main.css, αντί να έχουν μια ετικέτα p,

401
00:16:48,140 --> 00:16:51,500
κάνετε #special, εντάξει;

402
00:16:51,500 --> 00:16:55,538
Και αυτό επιλέγει το
πράγμα με ιδιαίτερη ταυτότητα.

403
00:16:55,538 --> 00:16:57,295
Μήπως αυτό έχει νόημα για όλους;

404
00:16:57,295 --> 00:16:57,920
Κοινό: Ναι.

405
00:16:57,920 --> 00:16:59,110
ΤΟΜΑΣ Reimers: Cool.

406
00:16:59,110 --> 00:17:04,440
Έτσι τώρα, αν πάμε πίσω,
θα see-- κραυγών.

407
00:17:04,440 --> 00:17:06,240
Ναι.

408
00:17:06,240 --> 00:17:09,460
Θα δούμε ότι μόνο επιλέγει
εκείνου με id ειδικό.

409
00:17:09,460 --> 00:17:10,622
Ναι;

410
00:17:10,622 --> 00:17:11,900
Ήχοι δροσερό.

411
00:17:11,900 --> 00:17:12,570
Ναι.

412
00:17:12,570 --> 00:17:15,456
>> ΚΟΙΝΟ: Μπορεί κάτι να έχει ένα
αποδίδουν την τάξη και το ένα id?

413
00:17:15,456 --> 00:17:16,359
>> ΤΟΜΑΣ Reimers: Ναι.

414
00:17:16,359 --> 00:17:16,900
ΚΟΙΝΟ: Εντάξει.

415
00:17:16,900 --> 00:17:20,887
Και τότε τι θα συμβεί αν στη συνέχεια να δώσει
αυτό ορισμένοι κανόνες του CSS ότι η σύγκρουση;

416
00:17:20,887 --> 00:17:21,970
ΤΟΜΑΣ Reimers: Απολύτως.

417
00:17:21,970 --> 00:17:23,940
Είμαστε σίγουρα πρόκειται
να μιλήσουμε γι 'αυτό.

418
00:17:23,940 --> 00:17:31,890
Έτσι ακριβώς ό, τι ήταν να πάρει
σε, μπορείτε επίσης να έχουν τάξεις.

419
00:17:31,890 --> 00:17:36,380
Έτσι, ας προσποιηθούμε είχα
τρεις παραγράφους και εγώ

420
00:17:36,380 --> 00:17:38,730
ήθελε να στυλ Το πρώτο
δύο, αλλά όχι το τρίτο.

421
00:17:38,730 --> 00:17:42,850
Λοιπόν, η πρώτη σας ιδέα μπορεί να είναι, καλά, εγώ
θα μπορούσε να δώσει μόνο η δεύτερη ένα αναγνωριστικό.

422
00:17:42,850 --> 00:17:45,590
Αλλά δεν μπορείτε, γιατί ένα αναγνωριστικό,
ακριβώς όπως Allison έλεγε,

423
00:17:45,590 --> 00:17:47,330
πρέπει να είναι μοναδικός.

424
00:17:47,330 --> 00:17:50,860
>> Έτσι, αντί ενός αναγνωριστικού, τι
μπορεί να χρησιμοποιήσει είναι ότι μπορείτε να χρησιμοποιήσετε μια τάξη.

425
00:17:50,860 --> 00:17:57,880
Και μια class-- τι επιτρέπει
μπορείτε να κάνετε είναι βασικά λένε,

426
00:17:57,880 --> 00:17:59,610
Αυτό ανήκει ως μέρος μιας ομάδας.

427
00:17:59,610 --> 00:18:02,410
Σε αυτή την περίπτωση, η ομάδα μας
καλείται Ειδικές.

428
00:18:02,410 --> 00:18:06,500
Και τι θα πάμε να κάνουμε στη συνέχεια είναι
θα πάμε να say-- παρά λίβρα,

429
00:18:06,500 --> 00:18:08,070
θα πάμε να χρησιμοποιήσετε τελεία.

430
00:18:08,070 --> 00:18:08,740
Εντάξει;

431
00:18:08,740 --> 00:18:11,950
Και παρατηρήσετε ότι η λίρα και τελεία
υπάρχουν μόνο μέσα στο αρχείο CSS,

432
00:18:11,950 --> 00:18:12,797
όχι μέσα στο HTML.

433
00:18:12,797 --> 00:18:13,880
ALLISON BUCHHOLTZ-ΑΕ: Ναι.

434
00:18:13,880 --> 00:18:15,185
Σημαντική διάκριση.

435
00:18:15,185 --> 00:18:17,510
>> ΤΟΜΑΣ Reimers: Έχω
είχε τόσο πολύ αγώνα,

436
00:18:17,510 --> 00:18:23,990
επειδή έβαλα το χασίς στην HTML και
τότε απλά ένιωσα ηλίθια για μεγάλο χρονικό διάστημα.

437
00:18:23,990 --> 00:18:27,470
Δείτε πώς επιλέγει τα δύο
εκείνοι με την εν λόγω τάξη;

438
00:18:27,470 --> 00:18:28,210
Cool.

439
00:18:28,210 --> 00:18:29,950
>> Τώρα, τα πράγματα μπορεί να έχουν πολλαπλές κατηγορίες.

440
00:18:29,950 --> 00:18:32,790
Ας πούμε ότι ήθελε να κάνει την πρώτη
δύο έχουν ένα φόντο κίτρινο

441
00:18:32,790 --> 00:18:36,770
και το δεύτερο δύο έχουν
ένα χρώμα γραμματοσειράς του μπλε.

442
00:18:36,770 --> 00:18:37,270
ΟΚ.

443
00:18:37,270 --> 00:18:39,735
Πραγματικά, δεν ξέρω γιατί είχα
θέλω να το κάνω αυτό, αλλά μπορώ.

444
00:18:39,735 --> 00:18:42,401
>> ALLISON BUCHHOLTZ-ΑΕ: μπορεί να μην
συνέστησε την ιστοσελίδα σας.

445
00:18:42,401 --> 00:18:43,880
Αλλά για τους σκοπούς μας, αυτό θα κάνουμε.

446
00:18:43,880 --> 00:18:46,294
>> ΤΟΜΑΣ Reimers: Δεν είναι
ένα καλό συνδυασμό χρωμάτων.

447
00:18:46,294 --> 00:18:49,210
ALLISON BUCHHOLTZ-ΑΕ: Λοιπόν, κίτρινο
και το μπλε είναι τα χρώματα γυμνασίου μου.

448
00:18:49,210 --> 00:18:50,947
Δεν ξέρω, όμως.

449
00:18:50,947 --> 00:18:53,530
ΤΟΜΑΣ Reimers: Allison είναι υψηλό
σχολείο είχε μια μεγάλη χρωμάτων.

450
00:18:53,530 --> 00:18:54,520
[Γέλια]

451
00:18:54,520 --> 00:18:59,120
Και τότε τι μπορούμε να ονομάσουμε αυτό είναι
Ας το ονομάσουμε this-- έτσι έχουμε Ειδικές

452
00:18:59,120 --> 00:19:00,030
και έχουμε Αρκετά.

453
00:19:00,030 --> 00:19:02,405
Προτείνω, για αυτό, μπορείτε να χρησιμοποιήσετε
πολύ πιο περιγραφικά ονόματα.

454
00:19:02,405 --> 00:19:05,820
ALLISON BUCHHOLTZ-ΑΕ: Ναι, θα ήθελα
καλέστε αυτό, όπως, κίτρινο ή μπλε.

455
00:19:05,820 --> 00:19:08,314
>> ΤΟΜΑΣ Reimers: Δεν είμαστε
πραγματικά κάνει ένα πραγματικό δικτυακό τόπο,

456
00:19:08,314 --> 00:19:09,730
και γι 'αυτό δεν το κάνουμε αυτό.

457
00:19:09,730 --> 00:19:11,521
Αλλά αν πραγματικά
είχε μια πραγματική ιστοσελίδα,

458
00:19:11,521 --> 00:19:16,220
θα μπορούσαν να έχουν, όπως, επικεφαλίδα του άρθρου,
το περιεχόμενο του άρθρου, πρώτη λέξη,

459
00:19:16,220 --> 00:19:21,920
τα πράγματα όπως αυτό, το οποίο επιτρέπει
μπορείτε να είναι πολύ πιο περιγραφικό.

460
00:19:21,920 --> 00:19:23,550
Αυτά είναι πραγματικά ακριβώς όπως μεταβλητές.

461
00:19:23,550 --> 00:19:28,390
Θα πρέπει να ονομάζονται κατά τέτοιο τρόπο ώστε
μπορείτε, like-- ναι, ως τέτοια.

462
00:19:28,390 --> 00:19:29,470
Τέλεια.

463
00:19:29,470 --> 00:19:30,480
>> Έτσι, το χρώμα του φόντου.

464
00:19:30,480 --> 00:19:35,920
Και μετά θα πάμε να say-- έτσι η
τρόπος για να αλλάξετε το χρώμα είναι απλώς "χρώμα".

465
00:19:35,920 --> 00:19:38,412
Και θα πάμε να το μπλε.

466
00:19:38,412 --> 00:19:40,150
Αυτό είναι δροσερό.

467
00:19:40,150 --> 00:19:42,640
Έτσι τώρα έχουμε το
δύο πρώτες ειδικές.

468
00:19:42,640 --> 00:19:45,972
Επόμενο ένας πρόκειται να
έχουν "class = αρκετά."

469
00:19:45,972 --> 00:19:49,180
ALLISON BUCHHOLTZ-ΑΕ: Και τότε θα
θέλουν να προσθέσουν «αρκετά» στη μεσαία.

470
00:19:49,180 --> 00:19:49,971
ΤΟΜΑΣ Reimers: Yup.

471
00:19:49,971 --> 00:19:52,970
Και στη συνέχεια στο μεσαίο,
για να προσθέσετε το "αρκετά", τι συμβαίνει

472
00:19:52,970 --> 00:19:56,880
Είναι απλά έχουν ένα χώρο.

473
00:19:56,880 --> 00:19:59,800
Έτσι, το χαρακτηριστικό της κατηγορίας
είναι ένας χώρος λίστα διαχωρισμένη

474
00:19:59,800 --> 00:20:02,450
όλων των κατηγοριών
ότι ισχύουν για αυτήν την ετικέτα.

475
00:20:02,450 --> 00:20:02,959
Εντάξει;

476
00:20:02,959 --> 00:20:05,750
Δεν είναι σαν αυτό ανήκει
κάποια ειδική κατηγορία που ονομάζεται

477
00:20:05,750 --> 00:20:07,180
"Ειδική, το διάστημα, αρκετά."

478
00:20:07,180 --> 00:20:10,870
Ανήκει σε δύο classes--
ειδική και όμορφη.

479
00:20:10,870 --> 00:20:12,492
Ναι;

480
00:20:12,492 --> 00:20:14,360
Cool.

481
00:20:14,360 --> 00:20:17,010
>> Και τότε, αν κοιτάξουμε
σε ό, τι συμβαίνει, είμαστε

482
00:20:17,010 --> 00:20:21,850
Θα δείτε ότι η πρώτη έχει κανείς
κίτρινο φόντο, μαύρο κείμενο.

483
00:20:21,850 --> 00:20:22,450
Δεύτερη ένα--

484
00:20:22,450 --> 00:20:26,160
>> ALLISON BUCHHOLTZ-ΑΕ: --has τολμηρή
κίτρινο φόντο με μπλε κείμενο.

485
00:20:26,160 --> 00:20:29,330
Και το τελευταίο μας έχει μόνο η
μπλε κείμενο που του έχουν ανατεθεί.

486
00:20:29,330 --> 00:20:30,870
>> ΤΟΜΑΣ Reimers: Cool;

487
00:20:30,870 --> 00:20:32,491
Πώς επιλογείς δουλειά;

488
00:20:32,491 --> 00:20:32,990
Awesome.

489
00:20:32,990 --> 00:20:34,720
>> ALLISON BUCHHOLTZ-ΑΕ: Θέλουμε να
μιλάμε για τη σύγκρουση τώρα τότε;

490
00:20:34,720 --> 00:20:35,780
>> ΤΟΜΑΣ Reimers: Οπότε ναι.

491
00:20:35,780 --> 00:20:36,310
Απολύτως.

492
00:20:36,310 --> 00:20:38,380
Λοιπόν, τι θα συμβεί αν
έχουν μια σύγκρουση, σωστά;

493
00:20:38,380 --> 00:20:44,740
Ας προσποιηθούμε το πρώτο
ιδρύει κάτι like--

494
00:20:44,740 --> 00:20:47,240
ALLISON BUCHHOLTZ-ΑΕ: Ίσως
αυτό αλλάζει το φόντο;

495
00:20:47,240 --> 00:20:48,090
ΤΟΜΑΣ Reimers: Ναι.

496
00:20:48,090 --> 00:20:51,699
Έτσι θα πάμε να κάνουμε "αρκετά"
αλλάξετε το φόντο για το σολομό.

497
00:20:51,699 --> 00:20:54,740
ALLISON BUCHHOLTZ-ΑΕ: Είσαι απλά με
όλα τα υπέροχα χρώματα σήμερα, Tomas.

498
00:20:54,740 --> 00:20:55,573
ΤΟΜΑΣ Reimers: Ναι.

499
00:20:55,573 --> 00:20:58,200
Επειδή έμαθα ότι μπορώ
χρησιμοποιήσετε σολομό ως πραγματικό χρώμα.

500
00:20:58,200 --> 00:21:00,270
Γι 'αυτό και πρόκειται μόνο να το κάνουμε αυτό.

501
00:21:00,270 --> 00:21:01,770
Πιστεύω, επίσης, Sunset είναι ένα πραγματικό χρώμα.

502
00:21:01,770 --> 00:21:03,103
ΚΟΙΝΟ: Sunset είναι ένα πραγματικό χρώμα;

503
00:21:03,103 --> 00:21:04,572
ALLISON BUCHHOLTZ-ΑΕ: Ας το προσπαθήσουμε.

504
00:21:04,572 --> 00:21:07,735
ΤΟΜΑΣ Reimers: Μετά από αυτό το demo
μόνο και μόνο επειδή σε περίπτωση που βρωμίζει επάνω,

505
00:21:07,735 --> 00:21:08,943
Δεν θέλω να τον εντοπισμό σφαλμάτων.

506
00:21:08,943 --> 00:21:11,580
Γνωρίζουμε, λοιπόν, ο σολομός είναι ένα πραγματικό χρώμα.

507
00:21:11,580 --> 00:21:15,626
Έτσι, τυχόν εικασίες σχετικά με
τι πρόκειται να συμβεί;

508
00:21:15,626 --> 00:21:17,522
>> ALLISON BUCHHOLTZ-ΑΕ: Οποιαδήποτε ιδέα;

509
00:21:17,522 --> 00:21:20,002
>> ΚΟΙΝΟ: [δεν ακούγεται].

510
00:21:20,002 --> 00:21:20,920
>> ΤΟΜΑΣ Reimers: Ναι.

511
00:21:20,920 --> 00:21:22,150
Έτσι έχεις αυτό ακριβώς δεξιά.

512
00:21:22,150 --> 00:21:24,930
Βασικά, παίρνει το
τελευταίος κανόνας που δόθηκε.

513
00:21:24,930 --> 00:21:27,860
>> ALLISON BUCHHOLTZ-ΑΕ: Έτσι, αυτό είναι
όπου διαδοχικές τεθεί σε ισχύ.

514
00:21:27,860 --> 00:21:31,080
>> ΤΟΜΑΣ Reimers: Έτσι θυμηθείτε πώς
είχε ότι επικαλυπτόμενα φύλλα στυλ;

515
00:21:31,080 --> 00:21:33,660
Έτσι, με αυτό, έχουμε το είδος της μέσης
ότι έχουμε μια δέσμη των κανόνων

516
00:21:33,660 --> 00:21:37,115
οι οποίες ισχύουν για ένα πάνω στο άλλο, και
μπορούν επίσης να αντικαθιστούν το ένα το άλλο.

517
00:21:37,115 --> 00:21:39,380
>> ALLISON BUCHHOLTZ-ΑΕ: Έτσι
Ό, τι και στο κάτω μέρος

518
00:21:39,380 --> 00:21:41,540
θα αντικαταστήσει ό, τι είναι στην κορυφή.

519
00:21:41,540 --> 00:21:45,842
Θα μπορούσατε να έχετε κανόνες που εντελώς
αναιρεί κάτι εκ των προτέρων.

520
00:21:45,842 --> 00:21:48,300
Αυτός είναι και ο λόγος για τον οποίο θέλετε να
προσεκτικοί όταν είστε styling,

521
00:21:48,300 --> 00:21:51,465
έτσι δεν είστε δημιουργία κανόνων, ότι
είστε μόνο εντελώς επιτακτικό.

522
00:21:51,465 --> 00:21:53,340
>> ΤΟΜΑΣ Reimers: Ή ίσως
θέλετε να αντικαταστήσετε κανόνες.

523
00:21:53,340 --> 00:21:53,920
>> ALLISON BUCHHOLTZ-ΑΕ: Ή ίσως κάνετε.

524
00:21:53,920 --> 00:21:54,300
Ναι.

525
00:21:54,300 --> 00:21:57,175
>> ΤΟΜΑΣ Reimers: Προσποιηθείτε ότι έχετε ένα
κατηγορία που ισχύει για τα περισσότερα πράγματα,

526
00:21:57,175 --> 00:22:01,220
αλλά ας πούμε ότι θέλετε να αλλάξετε το
χρώμα του φόντου σε κόκκινο και την γραμματοσειρά

527
00:22:01,220 --> 00:22:03,140
βάρος σε τολμηρές για περισσότερα
πράγματα, αλλά για ένα,

528
00:22:03,140 --> 00:22:06,098
θέλετε μόνο το χρώμα του φόντου
να είναι κόκκινο, αλλά θέλετε όλα τα άλλα

529
00:22:06,098 --> 00:22:09,990
ιδιότητες, θα μπορούσατε να κάνετε κάτι
όπως "font-weight = κανονική,"

530
00:22:09,990 --> 00:22:12,760
η οποία στη συνέχεια θα ανατρέψει αυτή την τολμηρή αλλαγή.

531
00:22:12,760 --> 00:22:14,480
Ναι;

532
00:22:14,480 --> 00:22:17,250
Και πάλι, ο καλύτερος τρόπος, νομίζω
Allison είπε ότι, είναι ακριβώς πρακτική.

533
00:22:17,250 --> 00:22:18,080
>> ALLISON BUCHHOLTZ-ΑΕ: πειραματισμό.

534
00:22:18,080 --> 00:22:20,090
>> ΤΟΜΑΣ Reimers: Πρακτική, πρακτική,
πρακτική, και το πείραμα.

535
00:22:20,090 --> 00:22:22,950
Ξέρω πολλούς ανθρώπους που σκέφτονται
CSS είναι απλώς ένα πολύ εικασία-και-έλεγχος

536
00:22:22,950 --> 00:22:25,580
Στο τέλος της ημέρας, όπου αν
θέλετε να κάνετε something-- όπως,

537
00:22:25,580 --> 00:22:27,663
έχετε μια γενική ιδέα, αλλά
μπορείτε ακόμα ίσως χρειαστεί

538
00:22:27,663 --> 00:22:31,390
να το δοκιμάσετε για να βεβαιωθείτε ότι
Ξέρετε τι μοιάζει.

539
00:22:31,390 --> 00:22:34,482
>> ΚΟΙΝΟ: Όταν κάνεις αίτηση
τάξεις, περισσότερα από ένα

540
00:22:34,482 --> 00:22:37,339
στην ίδια παράγραφο
ή τμήμα, που κάνει

541
00:22:37,339 --> 00:22:39,505
θέμα ποια σειρά μπορείτε
το είδος τους σε εισαγωγικά;

542
00:22:39,505 --> 00:22:40,992
>> ΤΟΜΑΣ Reimers: Όχι, καθόλου.

543
00:22:40,992 --> 00:22:45,764
>> ALLISON BUCHHOLTZ-ΑΕ: Αυτό που έχει σημασία είναι
η σειρά στο φύλλο στυλ CSS σας.

544
00:22:45,764 --> 00:22:47,430
ΚΟΙΝΟ: Μπορείς να επαναλάβεις την ερώτηση;

545
00:22:47,430 --> 00:22:50,680
ΤΟΜΑΣ Reimers: Αχ.

546
00:22:50,680 --> 00:22:53,990
ALLISON BUCHHOLTZ-ΑΕ: Εντός
τάξη, όταν δίνετε μαθήματα

547
00:22:53,990 --> 00:22:56,964
σε κάτι στο HTML, κάνει
έχει σημασία με ποια σειρά θα είσαι μέσα;

548
00:22:56,964 --> 00:22:58,130
Δεν έχει σημασία η σειρά.

549
00:22:58,130 --> 00:23:02,915
Αυτό που έχει σημασία είναι η σειρά του
επιλογείς τάξη εντός CSS σας,

550
00:23:02,915 --> 00:23:04,306
στο φύλλο στυλ σας.

551
00:23:04,306 --> 00:23:06,982
>> ΤΟΜΑΣ Reimers: καλό ήχο;

552
00:23:06,982 --> 00:23:08,532
>> ALLISON BUCHHOLTZ-ΑΕ: Υπέροχο.

553
00:23:08,532 --> 00:23:11,539
>> ΤΟΜΑΣ Reimers: Και στη συνέχεια,
θα πάμε να συνεχίσουμε to--

554
00:23:11,539 --> 00:23:13,330
ALLISON BUCHHOLTZ-ΑΕ:
Τι έχουμε το επόμενο βήμα;

555
00:23:13,330 --> 00:23:14,245
Ξεχάσω.

556
00:23:14,245 --> 00:23:16,087
Ω, έχουμε μόνο παραδείγματα.

557
00:23:16,087 --> 00:23:17,295
Αλλά έχουμε το είδος της κάνει εκείνοι.

558
00:23:17,295 --> 00:23:18,990
Έχουμε κάνει παραδείγματα σχετικά με τη μύγα.

559
00:23:18,990 --> 00:23:20,540
>> ΤΟΜΑΣ Reimers: Παίρνουμε να
συνδυάζουν σύντομα τους επιλογείς.

560
00:23:20,540 --> 00:23:22,790
>> ALLISON BUCHHOLTZ-ΑΕ: Ω,
έχουμε την ευκαιρία να συνδυάσουν επιλογείς.

561
00:23:22,790 --> 00:23:25,260
ΤΟΜΑΣ Reimers: Έτσι μερικοί
παραδείγματα είναι ότι έχουμε

562
00:23:25,260 --> 00:23:29,630
# Dog-- λίρα, ή hashtag,
ή δίεσης, ή ο, τιδήποτε

563
00:23:29,630 --> 00:23:32,050
θέλετε να καλέσετε that-- απότομη.

564
00:23:32,050 --> 00:23:34,875
>> ALLISON BUCHHOLTZ-ΑΕ: Sharp σκυλί.

565
00:23:34,875 --> 00:23:36,470
>> ΤΟΜΑΣ Reimers: Τότε έχετε .pets.

566
00:23:36,470 --> 00:23:39,059

567
00:23:39,059 --> 00:23:41,600
Κάτι έχει ένα αναγνωριστικό του σκύλου,
υπάρχει μόνο ένας σκύλος στην σελίδα.

568
00:23:41,600 --> 00:23:43,870
Κάτι έχει ένα αναγνωριστικό του
γάτα, υπάρχει μόνο μία γάτα.

569
00:23:43,870 --> 00:23:45,665
Μπορεί να υπάρχουν πολλά κατοικίδια ζώα στη σελίδα.

570
00:23:45,665 --> 00:23:47,570
Αυτός είναι ο λόγος που δώσαμε ότι οι τάξεις.

571
00:23:47,570 --> 00:23:48,740
Έχετε ένα παράδειγμα του σ.

572
00:23:48,740 --> 00:23:50,490
Και τότε, έτσι ένα από τα
τελευταίο παράδειγμα, το οποίο

573
00:23:50,490 --> 00:23:53,790
είναι κάτι που δεν έχουμε μιλήσει,
είναι τι συμβαίνει όταν τα συνδυάσετε.

574
00:23:53,790 --> 00:23:54,580
Έτσι p.pets.

575
00:23:54,580 --> 00:23:57,510

576
00:23:57,510 --> 00:24:02,950
>> Έτσι, γι 'αυτό, ας πάμε πίσω στο
κώδικα και να εισαγάγει another-- ναι.

577
00:24:02,950 --> 00:24:04,290
Έτσι, πίσω εδώ.

578
00:24:04,290 --> 00:24:04,850
>> ALLISON BUCHHOLTZ-ΑΕ: Ι
αισθάνονται σαν αυτό είναι really--

579
00:24:04,850 --> 00:24:08,105
όπως ακριβώς κοιτάζει μέσα από τα παραδείγματα
είναι πραγματικά ο τρόπος για να μάθει αυτό.

580
00:24:08,105 --> 00:24:09,360
Έτσι, αυτό είναι αυτό που κάνουμε.

581
00:24:09,360 --> 00:24:14,030
>> ΤΟΜΑΣ Reimers: Ας προσποιηθούμε ότι
Το μόνο που θέλω να επιλέξετε το κείμενο 2, σωστά;

582
00:24:14,030 --> 00:24:16,530
Γι 'αυτό και σίγουρα δεν μπορεί να
το κάνουμε αυτό με ένα αναγνωριστικό.

583
00:24:16,530 --> 00:24:19,620
Λοιπόν, θα μπορούσαμε να το κάνουμε αυτό με μια
id, αλλά δεν έχει ένα αναγνωριστικό.

584
00:24:19,620 --> 00:24:22,490
Θα μπορούσα να προσθέσω ένα, αλλά ας προσποιηθούμε
ότι δεν ήθελα να προσθέσω μία

585
00:24:22,490 --> 00:24:24,910
ή έχει ήδη κάτι άλλο.

586
00:24:24,910 --> 00:24:26,516
Δεν μπορώ να το κάνω με αυτό.

587
00:24:26,516 --> 00:24:28,870
Η ετικέτα δεν είναι σίγουρα μοναδική, σωστά;

588
00:24:28,870 --> 00:24:30,670
Και δεν είναι η τάξη.

589
00:24:30,670 --> 00:24:32,314
Αλλά μπορείτε να συνδυάσετε αυτά τα πράγματα.

590
00:24:32,314 --> 00:24:35,230
Ας πούμε ότι θέλουμε να κάνουμε κάτι
η οποία ισχύει μόνο για τα πράγματα που

591
00:24:35,230 --> 00:24:39,420
έχουν την ιδιαίτερη τάξη και
τα οποία έχουν την τάξη αρκετά.

592
00:24:39,420 --> 00:24:48,150
>> Έτσι τι μπορείτε να κάνετε είναι σε main.css,
μπορείτε να πείτε, ας πρώτα να διαγράψετε αυτό.

593
00:24:48,150 --> 00:24:50,240
Μπορείτε να συνδυάσετε αυτά.

594
00:24:50,240 --> 00:24:51,430
Έτσι, μπορείτε να κάνετε από ειδικά.

595
00:24:51,430 --> 00:24:52,110
Δεν υπάρχει χώρος.

596
00:24:52,110 --> 00:24:54,770
Απλά .special.pretty.

597
00:24:54,770 --> 00:25:00,550
Αυτό σημαίνει ότι είναι κάτι
η οποία είναι τόσο ιδιαίτερο και όμορφο.

598
00:25:00,550 --> 00:25:01,900
Μήπως αυτό έχει νόημα;

599
00:25:01,900 --> 00:25:04,190
Και αν πάμε εδώ, τι
θα πάμε να δούμε

600
00:25:04,190 --> 00:25:09,734
είναι ο κανόνας αυτός ισχύει μόνο για το
δεύτερη, η οποία έχει και τα δύο από αυτά.

601
00:25:09,734 --> 00:25:11,400
Και μπορείτε να το κάνετε αυτό για πολλά πράγματα.

602
00:25:11,400 --> 00:25:13,270
Μπορείτε να say-- ας
προσποιούνται Ήθελα μόνο

603
00:25:13,270 --> 00:25:18,300
να κάνουν πράγματα που δεν έχουν την τάξη αρκετά
και τα οποία είναι επίσης ένα tag παραγράφου.

604
00:25:18,300 --> 00:25:19,920
Έτσι p.pretty.

605
00:25:19,920 --> 00:25:23,585
Ας προσποιηθούμε ότι είχα
κάτι όμορφο στο σώμα ετικέτα.

606
00:25:23,585 --> 00:25:25,850
Εντάξει;

607
00:25:25,850 --> 00:25:28,490
Μπορώ να τρέξω αυτό και εγώ
μπορεί να δει ότι αυτό είναι μόνο

608
00:25:28,490 --> 00:25:32,720
θα ισχύει για τα πράγματα που είναι
παραγράφους με την κατηγορία όμορφη.

609
00:25:32,720 --> 00:25:35,650
Και μπορείτε να συνδυάσετε αυτά,
Βασικά, όσο θέλετε.

610
00:25:35,650 --> 00:25:38,580
Έτσι, μπορείτε να τα βάλετε μόνο μαζί.

611
00:25:38,580 --> 00:25:39,604
Μήπως αυτό έχει νόημα;

612
00:25:39,604 --> 00:25:41,770
ALLISON BUCHHOLTZ-ΑΕ: Έτσι
Αυτό το είδος της είναι πιο χρήσιμο

613
00:25:41,770 --> 00:25:45,490
όταν, Τόμας έλεγε νωρίτερα, ίσως
έχετε μια πολύ περίπλοκη ιστοσελίδα,

614
00:25:45,490 --> 00:25:48,050
και έχετε ήδη πολλά
των κανόνων αυτών γραπτών,

615
00:25:48,050 --> 00:25:51,170
και το μόνο που χρειάζεται να
συνδυάζουν δύο από πριν.

616
00:25:51,170 --> 00:25:55,350
Όπως και αντί να γράφει ένα ολόκληρο
νέα επιλογέα και την αλλαγή εκεί,

617
00:25:55,350 --> 00:25:58,592
μπορείτε να συνδυάσετε μόνο
τους όπου επικαλύπτει.

618
00:25:58,592 --> 00:26:00,670
>> ΤΟΜΑΣ Reimers: Ή μπορείτε
μπορεί να βρει μερικές φορές out--

619
00:26:00,670 --> 00:26:04,290
υπάρχει μία τάξη που
κάνει το χρώμα γραμματοσειράς, όπως το μπλε,

620
00:26:04,290 --> 00:26:06,740
και υπάρχει μια άλλη κατηγορία που
κάνει το μπλε φόντο.

621
00:26:06,740 --> 00:26:07,840
Και αυτό ακριβώς δεν θα λειτουργήσει.

622
00:26:07,840 --> 00:26:10,924
Έτσι να γράψετε μια ειδική περίπτωση, όπου,
like-- αλλά αν έχει και τα δύο, αυτό που είσαι

623
00:26:10,924 --> 00:26:13,548
πρόκειται να κάνω είναι να σας πάμε να
κάνουν ίσως αυτό απόχρωση του μπλε

624
00:26:13,548 --> 00:26:15,310
και αυτό αυτή η άλλη απόχρωση του μπλε.

625
00:26:15,310 --> 00:26:15,580
Σωστά;

626
00:26:15,580 --> 00:26:17,955
>> ALLISON BUCHHOLTZ-ΑΕ: Καλή
για αυτά τα είδη των εξαιρέσεων.

627
00:26:17,955 --> 00:26:21,220
ΤΟΜΑΣ Reimers: Έτσι για να
σκεφτείτε τα προβλήματα

628
00:26:21,220 --> 00:26:25,000
ότι μπορεί να προκύψουν όταν τα συνδυάσετε.

629
00:26:25,000 --> 00:26:27,020
Cool.

630
00:26:27,020 --> 00:26:29,692
Έτσι, πίσω στην παρουσίασή μας.

631
00:26:29,692 --> 00:26:31,400
ALLISON BUCHHOLTZ-ΑΕ:
Είμαστε σχεδόν εκεί.

632
00:26:31,400 --> 00:26:34,022
ΤΟΜΑΣ Reimers: Και
έχει σταματήσει τη σύνδεση.

633
00:26:34,022 --> 00:26:36,494
ALLISON BUCHHOLTZ-ΑΕ: Ω, όχι.

634
00:26:36,494 --> 00:26:39,125
ALLISON BUCHHOLTZ-ΑΕ: CS σε
το γραφείο, internet κατεβαίνει.

635
00:26:39,125 --> 00:26:40,360
Ω, η ειρωνεία.

636
00:26:40,360 --> 00:26:45,620
>> ΤΟΜΑΣ Reimers: Έτσι Ευτυχώς, μπορούμε να
παρουσιάζουν χωρίς το διαδίκτυο, υποθέτω,

637
00:26:45,620 --> 00:26:47,380
γιατί έχουμε όλες τις διαφάνειες εδώ.

638
00:26:47,380 --> 00:26:49,304
Ας μιλήσουμε για το
σχέση των ετικετών.

639
00:26:49,304 --> 00:26:50,470
ALLISON BUCHHOLTZ-ΑΕ: Δεξιά.

640
00:26:50,470 --> 00:26:52,660
Έτσι ακριβώς το είδος της μετάβασης
εκτός από αυτά που είπε ο Tomas,

641
00:26:52,660 --> 00:26:54,180
Αυτό είναι απλά ένας άλλος τρόπος για να το κάνει.

642
00:26:54,180 --> 00:26:57,840
Έτσι έχουμε κάποια μητρική
επιλογέα με επιλογέα παιδί.

643
00:26:57,840 --> 00:27:02,815
Έτσι, σε αυτό το παράδειγμα εδώ, έχουμε κάποια
σώμα με navbar τάξη, κουμπί τάξη.

644
00:27:02,815 --> 00:27:03,315
Αχ.

645
00:27:03,315 --> 00:27:03,990
>> ΤΟΜΑΣ Reimers: Ω, συγγνώμη.

646
00:27:03,990 --> 00:27:06,180
>> ALLISON BUCHHOLTZ-ΑΕ: Και
βασικά, τι σημαίνει αυτό

647
00:27:06,180 --> 00:27:11,070
είναι να επιλέξετε όλα τα παιδιά, όπως
όλα αυτά τα είδη των επιλογείς,

648
00:27:11,070 --> 00:27:13,040
μέσα σε αυτό το γονέα επιλογέα.

649
00:27:13,040 --> 00:27:16,004
Και αυτοί είναι οι μόνοι
είναι ποτέ πρόκειται να εφαρμοστεί.

650
00:27:16,004 --> 00:27:17,755
Δεν ξέρω αν σας
έχουν έναν καλύτερο τρόπο of--

651
00:27:17,755 --> 00:27:19,504
ΤΟΜΑΣ Reimers: Γι 'αυτό
Υποθέτω ότι ο τρόπος για να σκεφτούμε

652
00:27:19,504 --> 00:27:22,440
γι 'αυτό είναι να θυμόμαστε πως πριν
εμείς είδος του αρέσει να τα βάλει μαζί.

653
00:27:22,440 --> 00:27:26,340
Και τότε αυτό σημαίνει ότι ένα στοιχείο
που ταιριάζει με όλα αυτά.

654
00:27:26,340 --> 00:27:29,530
Αυτό που λέει είναι,
θέλουν να ταιριάζει με τα πάντα

655
00:27:29,530 --> 00:27:33,220
μέσα some-- θέλω
μπορείτε να βρείτε έναν επιλογέα.

656
00:27:33,220 --> 00:27:35,670
Και στη συνέχεια, στο πλαίσιο αυτό, θέλω
που να ταιριάζει με τα νέα πράγματα.

657
00:27:35,670 --> 00:27:36,170
Σωστά;

658
00:27:36,170 --> 00:27:40,900
Έτσι, σε CSS, είναι όλα σχετικά με το είδος του
να είναι σε θέση να ταιριάζει με αυτά τα στοιχεία.

659
00:27:40,900 --> 00:27:43,050
Και μπορείτε να προσπαθήσουμε να ταιριάζει με
αντικειμένων σε άλλα αντικείμενα.

660
00:27:43,050 --> 00:27:46,510
>> Έτσι, ας κάνουμε πραγματικά ένα παράδειγμα,
και πιστεύουμε ότι θα αποσαφηνίσει.

661
00:27:46,510 --> 00:27:53,090
Ας προσποιηθούμε ότι έχουν ειδικές,
ειδικές αρκετά, οτιδήποτε.

662
00:27:53,090 --> 00:27:55,690
Και τότε έχουμε μια σύνδεση, εντάξει;

663
00:27:55,690 --> 00:27:59,780

664
00:27:59,780 --> 00:28:02,370
Έτσι θυμηθείτε, ένα είναι ένας σύνδεσμος.

665
00:28:02,370 --> 00:28:03,900
Δεν πρόκειται να πάει πουθενά.

666
00:28:03,900 --> 00:28:11,500
Και θα πάμε να δώσουμε
η σύνδεση τάξη, υποθέτω.

667
00:28:11,500 --> 00:28:13,335
Ας το δώσει
class-- μου δώσει μια ιδέα.

668
00:28:13,335 --> 00:28:14,460
ALLISON BUCHHOLTZ-ΑΕ: Cool.

669
00:28:14,460 --> 00:28:16,420
ΤΟΜΑΣ Reimers: Coo-- ας
πάει αυτό το όμορφο τάξη.

670
00:28:16,420 --> 00:28:16,930
Γιατί όχι;

671
00:28:16,930 --> 00:28:17,971
>> ALLISON BUCHHOLTZ-ΑΕ: OK.

672
00:28:17,971 --> 00:28:23,040
ΤΟΜΑΣ Reimers: Έτσι
τώρα αρκετά πράγματα

673
00:28:23,040 --> 00:28:26,000
πρόκειται να κάνει το φόντο
μπλε, το χρώμα του φόντου του σολομού.

674
00:28:26,000 --> 00:28:27,969
Αυτό έχει νόημα.

675
00:28:27,969 --> 00:28:28,760
Και αν κάνουμε this--

676
00:28:28,760 --> 00:28:29,620
>> ALLISON BUCHHOLTZ-ΑΕ:
Θέλετε να προσθέσετε κείμενο

677
00:28:29,620 --> 00:28:31,078
έτσι ώστε η υπερ-σύνδεση δείχνει πραγματικά επάνω;

678
00:28:31,078 --> 00:28:35,088
ΤΟΜΑΣ Reimers: Ότι
θα ήταν μια καλή κλήση.

679
00:28:35,088 --> 00:28:37,921
ALLISON BUCHHOLTZ-ΑΕ: «το δικαίωμα Αιτία
τώρα είμαστε απλά θα πάρει τίποτα.

680
00:28:37,921 --> 00:28:39,690
ΤΟΜΑΣ Reimers: Έτσι, αυτό είναι μια σύνδεση.

681
00:28:39,690 --> 00:28:42,202
"Αυτή είναι μια σύνδεση."

682
00:28:42,202 --> 00:28:45,820
Ω, και αυτό πρόκειται
να είναι μια άλλη σύνδεση.

683
00:28:45,820 --> 00:28:47,280
Ας δώσουμε την κατηγορία "cool".

684
00:28:47,280 --> 00:28:50,295
Έχεις δίκιο.

685
00:28:50,295 --> 00:28:50,795
Cool.

686
00:28:50,795 --> 00:28:53,590

687
00:28:53,590 --> 00:28:56,010
Έτσι, τώρα θα πάμε για να αρπάξει αυτό.

688
00:28:56,010 --> 00:28:57,269
Εμείς πάμε για να ρίξει ένα.

689
00:28:57,269 --> 00:28:59,060
Έχουμε ένα στην
ειδική ετικέτα, και εμείς επίσης

690
00:28:59,060 --> 00:29:01,150
πρόκειται να έχουν μία στην όμορφη ετικέτα.

691
00:29:01,150 --> 00:29:05,449
Και τώρα τι θα πάμε να
κάνουμε είναι να πάμε να κάνουμε cool--

692
00:29:05,449 --> 00:29:06,490
Τι θέλουμε να κάνουμε;

693
00:29:06,490 --> 00:29:10,347

694
00:29:10,347 --> 00:29:12,180
ALLISON BUCHHOLTZ-ΑΕ:
Μπορούμε να το κάνει μεγαλύτερο;

695
00:29:12,180 --> 00:29:13,800
ΤΟΜΑΣ Reimers: Ας δώσουμε ένα περίγραμμα.

696
00:29:13,800 --> 00:29:14,840
ALLISON BUCHHOLTZ-ΑΕ: Θα μπορούσαμε συνόρων.

697
00:29:14,840 --> 00:29:15,673
ΤΟΜΑΣ Reimers: Ναι.

698
00:29:15,673 --> 00:29:18,560
Έτσι θα πάμε να κάνουμε κάτι
όπως, σύνορα is-- και είμαστε

699
00:29:18,560 --> 00:29:20,971
πρόκειται να εξηγήσει όλα αυτά σε ένα δευτερόλεπτο.

700
00:29:20,971 --> 00:29:21,470
Για now--

701
00:29:21,470 --> 00:29:24,592
>> ALLISON BUCHHOLTZ-ΑΕ: Στο μοντέλο κουτί.

702
00:29:24,592 --> 00:29:27,300
ΤΟΜΑΣ Reimers: Αλλά για τώρα, είμαστε
ακριβώς πρόκειται να δώσει μια συνόρων.

703
00:29:27,300 --> 00:29:29,580
Λοιπόν, τι σημαίνει αυτό είναι ότι είστε
πρόκειται να δούμε αυτούς τους συνδέσμους.

704
00:29:29,580 --> 00:29:32,788
Και θα πάμε να δούμε ότι έχουν
αυτές, όπως, άσχημο μαύρα σύνορα, η οποία

705
00:29:32,788 --> 00:29:33,820
είναι δροσερό.

706
00:29:33,820 --> 00:29:34,500
>> ALLISON BUCHHOLTZ-ΑΕ:
Η ιστοσελίδα μας είναι τόσο όμορφη.

707
00:29:34,500 --> 00:29:35,333
>> ΤΟΜΑΣ Reimers: Ναι.

708
00:29:35,333 --> 00:29:38,930
Η ιστοσελίδα μας είναι φοβερό.

709
00:29:38,930 --> 00:29:41,585
Έτσι, αυτά τα δύο είναι συνδέσεις, και φαίνεται.

710
00:29:41,585 --> 00:29:44,160
Τώρα ας προσποιηθούμε μου
το μόνο που ήθελε να κάνει αυτό

711
00:29:44,160 --> 00:29:50,072
αν δεν ήταν μέσα κάτι
η οποία είχε ένα φόντο του σολομού.

712
00:29:50,072 --> 00:29:52,280
Έτσι, να θυμάστε ότι αυτό
έχει ένα υπόβαθρο σολομού,

713
00:29:52,280 --> 00:29:54,000
επειδή είναι της τάξης αρκετά.

714
00:29:54,000 --> 00:29:59,777
>> Αλλά θέλουμε να πούμε ότι μόνο δροσίζει
που είναι στην κατηγορία ειδικών, όχι στην τάξη

715
00:29:59,777 --> 00:30:02,890
όμορφη, θα πρέπει να έχουν αυτά τα σύνορα.

716
00:30:02,890 --> 00:30:12,549
Λοιπόν, τι μπορείτε να κάνετε είναι να σας
μπορούμε να πούμε, από ειδικά, το διάστημα, .cool.

717
00:30:12,549 --> 00:30:15,590
Και τι κάνει, όταν νομίζετε
γι 'αυτό, είναι ότι είναι σαν να λέει,

718
00:30:15,590 --> 00:30:19,530
Εντάξει, βρείτε μου τα πάντα
που ταιριάζει με το ιδιαίτερο.

719
00:30:19,530 --> 00:30:24,104
Στη συνέχεια, μέσα σε αυτές τις ετικέτες, να βρουν
με όλα αυτά που είναι δροσερό.

720
00:30:24,104 --> 00:30:27,270
ALLISON BUCHHOLTZ-ΑΕ: Έτσι, ένας άλλος τρόπος
ότι θα ήταν καλό να το σκεφτούμε αυτό,

721
00:30:27,270 --> 00:30:29,810
φέρνουν πίσω σε C, είναι
όπως ακριβώς και η ιδέα του πεδίου εφαρμογής.

722
00:30:29,810 --> 00:30:34,020
Έτσι, όταν έχετε κάποιο
επιλογέα, όπως αυτές

723
00:30:34,020 --> 00:30:38,460
ότι έχουμε εργαστεί για πριν από αυτό,
ολόκληρη την ιστοσελίδα σας, πάντα για την HTML σας

724
00:30:38,460 --> 00:30:40,180
εμπίπτει στο πεδίο εφαρμογής σας, σωστά;

725
00:30:40,180 --> 00:30:43,090
Αλλά όταν έχουμε αυτές
σχέσεις γονέα-παιδιού,

726
00:30:43,090 --> 00:30:47,130
Είναι σαν να είστε στένεμα κάτω όπου
ψάχνετε σε ένα συγκεκριμένο μέρος,

727
00:30:47,130 --> 00:30:50,540
σαν, όπως, ψάχνουμε μέσα
μια ειδική λειτουργία, αντί

728
00:30:50,540 --> 00:30:52,007
του ολόκληρο το αρχείο μας.

729
00:30:52,007 --> 00:30:55,090
ΚΟΙΝΟ: Έτσι με αυτόν στο μυαλό, θα
αυτό έχει σημασία αν είχαμε changed--

730
00:30:55,090 --> 00:30:56,423
ALLISON BUCHHOLTZ-ΑΕ: Η παραγγελία;

731
00:30:56,423 --> 00:30:59,320
ΚΟΙΝΟ: --Η τάξη σε CSS
να .cool, το διάστημα, από ειδικά;

732
00:30:59,320 --> 00:31:01,153
ALLISON BUCHHOLTZ-ΑΕ:
Ναι, γιατί τότε ότι

733
00:31:01,153 --> 00:31:04,420
θα έλεγα, το πεδίο αυτό να
οτιδήποτε έχει δροσερό,

734
00:31:04,420 --> 00:31:07,235
και στη συνέχεια να εξετάσουμε σε ποιο has--
Θέλω να πω, όπως, στην προκειμένη περίπτωση,

735
00:31:07,235 --> 00:31:08,860
Δεν νομίζω ότι θα έχουν αλλάξει.

736
00:31:08,860 --> 00:31:10,318
>> ΤΟΜΑΣ Reimers: Αν είχαμε πει τι;

737
00:31:10,318 --> 00:31:10,906
Λυπάμαι.

738
00:31:10,906 --> 00:31:12,660
>> ALLISON BUCHHOLTZ-ΑΕ: Αν εμείς
πεδίο να κρυώσει και στη συνέχεια

739
00:31:12,660 --> 00:31:14,550
ψάξουν για πράγματα έξω από ειδικούς,
θα ήταν το ίδιο, στην πραγματικότητα.

740
00:31:14,550 --> 00:31:16,260
>> ΤΟΜΑΣ Reimers: Γι 'αυτό δεν θα ήταν.

741
00:31:16,260 --> 00:31:16,590
>> ALLISON BUCHHOLTZ-ΑΕ: Δεν θα ήταν;

742
00:31:16,590 --> 00:31:17,590
OH, OH καλά.

743
00:31:17,590 --> 00:31:18,090
Είμαι λάθος.

744
00:31:18,090 --> 00:31:21,480
>> ΤΟΜΑΣ Reimers: Έτσι, ο λόγος
Είναι different-- κοινή mistake--

745
00:31:21,480 --> 00:31:27,140
είναι ότι αυτή τη στιγμή μόνο
ο σύνδεσμος έχει δροσερό, σωστά;

746
00:31:27,140 --> 00:31:32,176
Υποθέτω ότι η ερώτησή μου προς εσάς είναι παιδιά,
τι σε αυτή τη σελίδα συνοδεύεται από .cool;

747
00:31:32,176 --> 00:31:35,984

748
00:31:35,984 --> 00:31:38,340
Υπάρχουν δύο ετικέτες εδώ, σωστά;

749
00:31:38,340 --> 00:31:39,770
Ποιο είναι αυτό και αυτό.

750
00:31:39,770 --> 00:31:40,590
Και τα δύο ταιριάζουν δροσερό.

751
00:31:40,590 --> 00:31:42,200
Τίποτα άλλο δεν το κάνει.

752
00:31:42,200 --> 00:31:46,460
Έτσι, αν είπατε, .cool, το διάστημα,
από ειδικά, αυτό που πρόκειται να πω είναι,

753
00:31:46,460 --> 00:31:48,824
μέσα σε αυτές τις ετικέτες, τι το ιδιαίτερο;

754
00:31:48,824 --> 00:31:49,865
ALLISON BUCHHOLTZ-ΑΕ: Χμ.

755
00:31:49,865 --> 00:31:51,800
Αυτό είναι ό, τι it-- δεξιά.

756
00:31:51,800 --> 00:31:52,310
Επειδή είναι ακριβώς όπως κάτι εδώ.

757
00:31:52,310 --> 00:31:53,310
>> ΤΟΜΑΣ Reimers: Γι 'αυτό επιλέγει τίποτα.

758
00:31:53,310 --> 00:31:56,530
>> ALLISON BUCHHOLTZ-ΑΕ: ότι, με
ειδικά, είμαστε μέσα σε αυτές τις ετικέτες εδώ.

759
00:31:56,530 --> 00:31:57,971
>> ΤΟΜΑΣ Reimers: Αυτοί και εκείνοι.

760
00:31:57,971 --> 00:31:58,512
ΚΟΙΝΟ: Εντάξει.

761
00:31:58,512 --> 00:31:58,920
Έτσι, αυτές οι ετικέτες από το κάθετο προς τα εμπρός;

762
00:31:58,920 --> 00:31:59,740
>> ΤΟΜΑΣ Reimers: Ναι.

763
00:31:59,740 --> 00:32:01,150
Μήπως αυτό έχει νόημα;

764
00:32:01,150 --> 00:32:03,685
Πώς είναι βασικά
προσπαθούν να περιορίσετε το πεδίο εφαρμογής.

765
00:32:03,685 --> 00:32:04,810
ALLISON BUCHHOLTZ-ΑΕ: Ναι.

766
00:32:04,810 --> 00:32:06,870
Νομίζω ότι είναι ίσως η
ευκολότερος τρόπος να το σκεφτώ.

767
00:32:06,870 --> 00:32:09,270
>> ΤΟΜΑΣ Reimers: Έτσι βρήκαμε αυτό, και
βρήκαμε αυτό συνδυάζεται τόσο ιδιαίτερο.

768
00:32:09,270 --> 00:32:11,400
Και τότε ζητάμε, μέσα
αυτά τα παιδιά, τι είναι cool;

769
00:32:11,400 --> 00:32:12,941
Και μέσα σε αυτό το ένα, δροσερό Αυτό και μόνο.

770
00:32:12,941 --> 00:32:14,500
Στο πλαίσιο αυτό, τίποτα δεν είναι δροσερό.

771
00:32:14,500 --> 00:32:16,250
Έτσι, αυτό είναι το μόνο που απομένει ετικέτα.

772
00:32:16,250 --> 00:32:20,112
>> ALLISON BUCHHOLTZ-ΑΕ: Εκτιμώντας τα δροσερά
είναι μέσα σε αυτές τις ετικέτες μία εκεί.

773
00:32:20,112 --> 00:32:21,070
ΤΟΜΑΣ Reimers: Ακριβώς.

774
00:32:21,070 --> 00:32:22,403
Και τι είναι ειδική μέσα αυτά;

775
00:32:22,403 --> 00:32:22,930
Τίποτα.

776
00:32:22,930 --> 00:32:25,270
Τώρα, αυτό που θα πω είναι
αν δεν υπήρχε χώρος,

777
00:32:25,270 --> 00:32:29,880
ρωτάτε τι είναι δροσερό και special--
ή ό, τι είναι όμορφο και ιδιαίτερο, έτσι δεν είναι;

778
00:32:29,880 --> 00:32:35,370
Εάν λέτε .special.pretty, ότι είναι
το ίδιο όπως .pretty.special.

779
00:32:35,370 --> 00:32:39,220
>> Διότι τι άρση του χώρου είναι
ζητώντας είναι, όταν λέτε από ειδικά,

780
00:32:39,220 --> 00:32:40,970
ρωτάτε, εντάξει,
ποιες είναι ξεχωριστό;

781
00:32:40,970 --> 00:32:43,780
Και μετά από αυτά, τα οποία
αυτά είναι επίσης αρκετά,

782
00:32:43,780 --> 00:32:47,010
η οποία είναι η ίδια, γραμματικά,
ως ζητώντας, τι είναι όμορφο,

783
00:32:47,010 --> 00:32:49,500
και, στη συνέχεια, από αυτούς, τι είναι επίσης ξεχωριστό;

784
00:32:49,500 --> 00:32:50,000
Σωστά;

785
00:32:50,000 --> 00:32:53,099
Είναι η διαφορά του
τι είναι μέσα σε αυτό που είναι.

786
00:32:53,099 --> 00:32:53,640
ΚΟΙΝΟ: Εντάξει.

787
00:32:53,640 --> 00:32:54,473
ΤΟΜΑΣ Reimers: Ναι.

788
00:32:54,473 --> 00:32:56,670

789
00:32:56,670 --> 00:32:58,030
Awesome.

790
00:32:58,030 --> 00:33:00,426
Έτσι με αυτόν στο μυαλό then--

791
00:33:00,426 --> 00:33:01,800
>> ALLISON BUCHHOLTZ-ΑΕ: Νομίζω ότι η τελευταία μας
πράγμα είναι (σε ​​διακοσμητικές βρετανική προφορά)

792
00:33:01,800 --> 00:33:02,510
το μοντέλο κουτί.

793
00:33:02,510 --> 00:33:05,992
>> ΤΟΜΑΣ Reimers: Η box-- [chuckles]
Λατρεύω τον τρόπο με τον Allison λέει ότι.

794
00:33:05,992 --> 00:33:06,950
Έτσι, το μοντέλο κουτί πράγμα.

795
00:33:06,950 --> 00:33:09,644
>> ALLISON BUCHHOLTZ-ΑΕ: Απλά έχουν
ένα κουτί, θα είμαι μοντέλο κουτί σας.

796
00:33:09,644 --> 00:33:11,310
ΤΟΜΑΣ Reimers: Ας μιλήσουμε γι 'αυτό.

797
00:33:11,310 --> 00:33:14,070
Μέχρι τώρα έχουμε περάσει πολλά
του χρόνου να μιλάμε για επιλογείς.

798
00:33:14,070 --> 00:33:16,944
Μέχρι τώρα, εσείς είστε κατά πάσα πιθανότητα, όπως,
οι πλοίαρχοι των selectors-- ξέρετε,

799
00:33:16,944 --> 00:33:21,510
πώς να επιλέξετε ακριβώς το περιεχόμενο που
θέλετε να χειριστείτε στην οθόνη σας.

800
00:33:21,510 --> 00:33:24,740
>> Έτσι τώρα το ερώτημα είναι, πώς
ακριβώς μπορείτε να το χειριστείτε;

801
00:33:24,740 --> 00:33:27,010
Έτσι υποθέτω ότι το πιο βασικό
τρόπος για να σκεφτούμε ότι

802
00:33:27,010 --> 00:33:30,294
Είναι, επίσης, τι ακριβώς
είναι ένα στοιχείο σε CSS;

803
00:33:30,294 --> 00:33:32,585
Ξοδέψαμε πολύ χρόνο
μιλάμε, τι είναι μια ετικέτα,

804
00:33:32,585 --> 00:33:36,140
ή ποια είναι η πιο βασική
αναπαράσταση μιας ετικέτας;

805
00:33:36,140 --> 00:33:39,870

806
00:33:39,870 --> 00:33:45,170
>> Ένας καλός τρόπος για να σκεφτούμε
Δηλαδή, τι σχήμα είναι ο σολομός;

807
00:33:45,170 --> 00:33:47,295
Τι σχήμα είναι, όπως και η
σολομός, έγχρωμο φόντο;

808
00:33:47,295 --> 00:33:47,880
>> ΚΟΙΝΟ: Είναι ένα ορθογώνιο.

809
00:33:47,880 --> 00:33:49,040
>> ΤΟΜΑΣ Reimers: Είναι ένα ορθογώνιο, σωστά;

810
00:33:49,040 --> 00:33:50,956
>> ALLISON BUCHHOLTZ-ΑΕ:
Δεν ήταν μια ερώτηση παγίδα.

811
00:33:50,956 --> 00:33:51,870
[Γέλια]

812
00:33:51,870 --> 00:33:54,670
>> ΤΟΜΑΣ Reimers: Δεν προσπαθώ
να σας ξεγελάσουν παιδιά αυτό αργά.

813
00:33:54,670 --> 00:33:57,510
Έχουμε λοιπόν αυτό το ορθογώνιο.

814
00:33:57,510 --> 00:33:59,140
Και η ετικέτα είναι ένα ρ, σωστά;

815
00:33:59,140 --> 00:34:02,280
Έτσι ώστε να μας δίνει καλό
πεποίθηση ότι η παράγραφος

816
00:34:02,280 --> 00:34:07,440
παριστάνεται ως ένα ορθογώνιο, στο
τουλάχιστον στο μυαλό του προγράμματος περιήγησης, το οποίο

817
00:34:07,440 --> 00:34:08,715
είναι.

818
00:34:08,715 --> 00:34:11,423
>> ALLISON BUCHHOLTZ-ΑΕ: Θέλω να πω,
προγράμματα περιήγησης είναι συνήθως ορθογώνια,

819
00:34:11,423 --> 00:34:13,440
οπότε είναι λογικό.

820
00:34:13,440 --> 00:34:18,750
>> ΤΟΜΑΣ Reimers: Η ιδέα εδώ είναι
ότι όλες οι ετικέτες εντός CSS

821
00:34:18,750 --> 00:34:21,790
εκπροσωπούνται ως ένα ορθογώνιο.

822
00:34:21,790 --> 00:34:25,699
Και κάθε ορθογώνιο έχει τέσσερις
μέρη σύμφωνα με CSS, εντάξει;

823
00:34:25,699 --> 00:34:27,830
Έχετε το πραγματικό περιεχόμενο.

824
00:34:27,830 --> 00:34:29,644
Αυτός είναι όπου το κείμενο βρίσκεται.

825
00:34:29,644 --> 00:34:30,470
>> ALLISON BUCHHOLTZ-ΑΕ:
Ίσως η εικόνα σας.

826
00:34:30,470 --> 00:34:31,303
>> ΤΟΜΑΣ Reimers: Ναι.

827
00:34:31,303 --> 00:34:33,860
Έχετε γεμίσει, η οποία είναι
μόνο κάποια από λευκό κενό.

828
00:34:33,860 --> 00:34:35,085
Στη συνέχεια, έχετε ένα σύνορο.

829
00:34:35,085 --> 00:34:37,710
Και τότε έχετε περιθώριο, το οποίο
είναι λευκό χώρο έξω από αυτό.

830
00:34:37,710 --> 00:34:39,460
Έτσι ώστε δεν έχει κανένα νόημα
σε κανέναν, έτσι είμαστε

831
00:34:39,460 --> 00:34:42,500
πρόκειται να μιλήσω γι 'αυτό για ένα δευτερόλεπτο.

832
00:34:42,500 --> 00:34:47,570
Τόσο εδώ, τι θα πάμε να κάνουμε
είναι ότι πρόκειται να δημιουργήσει κάποια divs, εντάξει;

833
00:34:47,570 --> 00:34:48,420
Με συγχωρείτε, ενώ I--

834
00:34:48,420 --> 00:34:51,506
>> ALLISON BUCHHOLTZ-ΑΕ: νιώθω
θα πρέπει να βάλουμε ένα χαριτωμένο εικόνα.

835
00:34:51,506 --> 00:34:52,520
>> ΤΟΜΑΣ Reimers: Πρέπει σίγουρα.

836
00:34:52,520 --> 00:34:53,389
>> ALLISON BUCHHOLTZ-ΑΕ:
Νιώθω σαν όλους

837
00:34:53,389 --> 00:34:54,870
θα μπορούσαν να επωφεληθούν από μια
χαριτωμένο εικόνα, είναι όλα.

838
00:34:54,870 --> 00:34:56,774
>> ΤΟΜΑΣ Reimers: Μπορούμε
να ωφεληθούμε όλοι από a--

839
00:34:56,774 --> 00:34:57,648
>> Κοινό: Ναι, σίγουρα.

840
00:34:57,648 --> 00:34:58,790
ΤΟΜΑΣ Reimers: Εντάξει, δροσερό.

841
00:34:58,790 --> 00:35:02,254
Γι 'αυτό και πρέπει να τεθεί ένα χαριτωμένο
εικόνα κάπου.

842
00:35:02,254 --> 00:35:05,295
ALLISON BUCHHOLTZ-ΑΕ: Νιώθω σαν ένα
χαριτωμένο λαγουδάκι μπορεί να είναι χρήσιμο τώρα.

843
00:35:05,295 --> 00:35:06,190
ΤΟΜΑΣ Reimers: Σίγουρα.

844
00:35:06,190 --> 00:35:06,950
ALLISON BUCHHOLTZ-ΑΕ: τέλος της εβδομάδας.

845
00:35:06,950 --> 00:35:07,390
Έχετε κάτι adorab--

846
00:35:07,390 --> 00:35:08,520
>> ΤΟΜΑΣ Reimers: Πώς αγώνα ένα γατάκι;

847
00:35:08,520 --> 00:35:09,220
>> ALLISON BUCHHOLTZ-ΑΕ:
Ένα γατάκι λειτουργεί, πάρα πολύ.

848
00:35:09,220 --> 00:35:11,300
>> ΤΟΜΑΣ Reimers: Cool, επειδή
υπάρχει ένα site για αυτό.

849
00:35:11,300 --> 00:35:12,300
Ονομάζεται PlaceKitten.

850
00:35:12,300 --> 00:35:14,719
ALLISON BUCHHOLTZ-ΑΕ: Αυτό είναι μεγάλη.

851
00:35:14,719 --> 00:35:15,510
ΤΟΜΑΣ Reimers: Ναι.

852
00:35:15,510 --> 00:35:18,040
ALLISON BUCHHOLTZ-ΑΕ: Ακριβώς για, όπως,
εικόνων κράτησης θέσης στην ιστοσελίδα σας.

853
00:35:18,040 --> 00:35:18,914
ΤΟΜΑΣ Reimers: MM-HM.

854
00:35:18,914 --> 00:35:21,520
Υπάρχει επίσης PlacePuppy.

855
00:35:21,520 --> 00:35:22,832
Και υπάρχει PlaceBacon.

856
00:35:22,832 --> 00:35:24,340
>> ALLISON BUCHHOLTZ-ΑΕ: PlaceBacon;

857
00:35:24,340 --> 00:35:25,350
Αλήθεια;

858
00:35:25,350 --> 00:35:28,190
>> ΤΟΜΑΣ Reimers: Ω, εμείς δεν κάνουμε
έχουν πρόσβαση στο διαδίκτυο εδώ.

859
00:35:28,190 --> 00:35:29,875
>> ALLISON BUCHHOLTZ-ΑΕ: [στεναγμοί]

860
00:35:29,875 --> 00:35:30,375
Τραγική.

861
00:35:30,375 --> 00:35:32,333
ΤΟΜΑΣ Reimers: Σε αντίθετη περίπτωση,
Θα ήθελα να σας δείξω παιδιά

862
00:35:32,333 --> 00:35:33,870
πώς να βάλετε τις εικόνες στην ιστοσελίδα σας.

863
00:35:33,870 --> 00:35:36,370
Εμείς πάμε για να προσπαθήσει να πάρει αυτό
εργάζονται πριν πρέπει να πάμε.

864
00:35:36,370 --> 00:35:38,660
Αλλά για τώρα, είμαστε απλά
πρόκειται να μιλήσω σε χρώματα τότε.

865
00:35:38,660 --> 00:35:39,820
Θέλουμε να βάλουμε φωτογραφίες του kittens--

866
00:35:39,820 --> 00:35:40,210
>> ALLISON BUCHHOLTZ-ΑΕ: Κάναμε.

867
00:35:40,210 --> 00:35:43,110
>> ΤΟΜΑΣ Reimers: --Ο Διαδικτύου
προς τα κάτω, προς το παρόν είναι.

868
00:35:43,110 --> 00:35:47,820
Έτσι έχουμε δύο divs, και είμαστε
πρόκειται να τους δώσει δύο ταυτότητες.

869
00:35:47,820 --> 00:35:51,380

870
00:35:51,380 --> 00:35:56,760
Εμείς πάμε για να το αποκαλούν
«Πρώτης» και «δεύτερης».

871
00:35:56,760 --> 00:36:01,184
Έτσι id = "πρώτα."

872
00:36:01,184 --> 00:36:02,850
Και θα πάμε να τους δώσει δύο χρώματα.

873
00:36:02,850 --> 00:36:08,424
Επομένως, πώς θα επιλέξετε κάτι
με ένα αναγνωριστικό του «πρώτου»;

874
00:36:08,424 --> 00:36:09,840
ALLISON BUCHHOLTZ-ΑΕ: Dot ή κατακερματισμού;

875
00:36:09,840 --> 00:36:10,730
ΚΟΙΝΟ: Sharp.

876
00:36:10,730 --> 00:36:12,940
ΤΟΜΑΣ Reimers: Sharp, τέλεια.

877
00:36:12,940 --> 00:36:14,950
Sharp, χασίς, ανεξάρτητα από we--

878
00:36:14,950 --> 00:36:15,680
>> ALLISON BUCHHOLTZ-ΑΕ:
Πολλά πράγματα για να καλέσετε.

879
00:36:15,680 --> 00:36:16,430
>> ΤΟΜΑΣ Reimers: OK.

880
00:36:16,430 --> 00:36:19,800
Εμείς πάμε για να εγκατασταθούν σε hashtag, και
αυτό είναι που θα πάμε για να πάει με.

881
00:36:19,800 --> 00:36:20,300
Εντάξει;

882
00:36:20,300 --> 00:36:20,735
>> ALLISON BUCHHOLTZ-ΑΕ: Hashtag.

883
00:36:20,735 --> 00:36:22,340
>> ΤΟΜΑΣ Reimers: Έτσι hashtag πρώτη.

884
00:36:22,340 --> 00:36:24,506
>> ALLISON BUCHHOLTZ-ΑΕ: Έτσι
μπορείτε να τιτίβισμα την seminar--

885
00:36:24,506 --> 00:36:27,582
hashtag CSS, hashtag δροσερό.

886
00:36:27,582 --> 00:36:29,040
ΤΟΜΑΣ Reimers: Hashtag Τέλεια.

887
00:36:29,040 --> 00:36:30,730
ALLISON BUCHHOLTZ-ΑΕ:
Hashtag Τέλεια, ναι.

888
00:36:30,730 --> 00:36:31,480
ΤΟΜΑΣ Reimers: OK.

889
00:36:31,480 --> 00:36:33,660
Έτσι έχουμε «πρώτης» και «δεύτερης».

890
00:36:33,660 --> 00:36:37,697
Έτσι, πρώτα, θα πάμε να έχουν
ένα χρώμα φόντο κόκκινο.

891
00:36:37,697 --> 00:36:39,030
ALLISON BUCHHOLTZ-ΑΕ: Χμ, του παχέος εντέρου.

892
00:36:39,030 --> 00:36:40,281
ΤΟΜΑΣ Reimers: Yup.

893
00:36:40,281 --> 00:36:42,281
ALLISON BUCHHOLTZ-ΑΕ:
Θα είμαι σας spot-πούλι.

894
00:36:42,281 --> 00:36:43,960
ΤΟΜΑΣ Reimers: Allison είναι με πήρε.

895
00:36:43,960 --> 00:36:45,830
Ιστορικό-χρώμα blue--

896
00:36:45,830 --> 00:36:46,810
>> ΤΟΜΑΣ Reimers: Μωβ!

897
00:36:46,810 --> 00:36:47,726
>> ΤΟΜΑΣ Reimers: Μωβ.

898
00:36:47,726 --> 00:36:48,830
ALLISON BUCHHOLTZ-ΑΕ: Ναι.

899
00:36:48,830 --> 00:36:50,630
Μωβ είναι το αγαπημένο μου χρώμα,
και δεν έχουμε ακόμη αξιοποιήσει.

900
00:36:50,630 --> 00:36:51,546
>> ΤΟΜΑΣ Reimers: Violet.

901
00:36:51,546 --> 00:36:53,361
ALLISON BUCHHOLTZ-ΑΕ: Violet.

902
00:36:53,361 --> 00:36:53,860
Αυτό λειτουργεί.

903
00:36:53,860 --> 00:36:56,482

904
00:36:56,482 --> 00:36:59,880
>> ΤΟΜΑΣ Reimers: Έτσι είμαστε
πρόκειται να έχει δύο divs.

905
00:36:59,880 --> 00:37:01,654
Θα πάμε να είναι εντελώς άδειο.

906
00:37:01,654 --> 00:37:03,070
Θα πρέπει πιθανώς να έχουν κάποιο κείμενο.

907
00:37:03,070 --> 00:37:05,580

908
00:37:05,580 --> 00:37:09,815
Έτσι, "πρώτη" θα είναι "γεια".

909
00:37:09,815 --> 00:37:10,940
Και η "δεύτερη" θα say--

910
00:37:10,940 --> 00:37:11,110
>> ALLISON BUCHHOLTZ-ΑΕ: Αντίο.

911
00:37:11,110 --> 00:37:12,514
>> ΚΟΙΝΟ: - "κόσμο".

912
00:37:12,514 --> 00:37:14,122
Γεια σας, αντίο.

913
00:37:14,122 --> 00:37:16,580
ALLISON BUCHHOLTZ-ΑΕ: Είδα
τους συναυλία την άλλη εβδομάδα.

914
00:37:16,580 --> 00:37:17,705
ΤΟΜΑΣ Reimers: Οι Beatles;

915
00:37:17,705 --> 00:37:20,242
ALLISON BUCHHOLTZ-ΑΕ: Για ρεάλ.

916
00:37:20,242 --> 00:37:21,200
Δεν είναι τόσο μεγάλη.

917
00:37:21,200 --> 00:37:24,084

918
00:37:24,084 --> 00:37:24,750
Δεν μου αρέσει.

919
00:37:24,750 --> 00:37:26,060
>> ΤΟΜΑΣ Reimers: Έχουμε
"Γεια" και "αντίο».

920
00:37:26,060 --> 00:37:29,102
Και πάλι, CSS είναι απλά φοβερό,
επειδή αναγνωρίζει τα χρώματα μας.

921
00:37:29,102 --> 00:37:30,810
Δεν χρειάζεται να ακόμη
ανησυχούν ότι υπάρχουν.

922
00:37:30,810 --> 00:37:33,194
Κάνουν.

923
00:37:33,194 --> 00:37:35,130
>> ALLISON BUCHHOLTZ-ΑΕ: Αυτοί υπάρχουν.

924
00:37:35,130 --> 00:37:39,560
>> ΤΟΜΑΣ Reimers: Έτσι CSS νομίζω ότι έχει
255 λέξεις για να μιλήσουμε για το χρώμα.

925
00:37:39,560 --> 00:37:42,986
Εάν μπορείτε να σκεφτείτε ένα χρώμα εκτός
εκείνοι 255, όπως, θα είμαι εντυπωσιασμένος.

926
00:37:42,986 --> 00:37:44,110
ALLISON BUCHHOLTZ-ΑΕ: Ναι.

927
00:37:44,110 --> 00:37:45,560
Νομίζω ότι εσείς μπορεί να έχουν
Μόλις έρθει αμέσως μετά.

928
00:37:45,560 --> 00:37:47,727
>> ΤΟΜΑΣ Reimers: Μέχρι εδώ,
θα δείτε έχουμε δύο κουτιά

929
00:37:47,727 --> 00:37:49,143
ακριβώς πάνω από το άλλο, έτσι δεν είναι;

930
00:37:49,143 --> 00:37:50,200
Γεια σας και ΑΝΤΙΟ.

931
00:37:50,200 --> 00:37:51,460
>> ALLISON BUCHHOLTZ-ΑΕ:
Δεν υπάρχει κενό μεταξύ τους.

932
00:37:51,460 --> 00:37:53,390
Είναι απλά συντρίβονταν
ακριβώς πάνω από το άλλο.

933
00:37:53,390 --> 00:37:55,973
>> ΤΟΜΑΣ Reimers: Έτσι, το πρώτο πράγμα
Υποθέτω ότι πρέπει να μιλήσουμε για

934
00:37:55,973 --> 00:38:02,960
Είναι ας say-- επίσης ναι.

935
00:38:02,960 --> 00:38:08,020
Έτσι CSS τους εκπροσωπεί ως είδος των κιβωτίων.

936
00:38:08,020 --> 00:38:10,100
Και όπως κουτιά, έχουν περιεχόμενο.

937
00:38:10,100 --> 00:38:14,540
Και το περιεχόμενο τώρα είναι είδος
Το Hello ή αντίο και αυτό είναι όλο.

938
00:38:14,540 --> 00:38:15,040
Εντάξει;

939
00:38:15,040 --> 00:38:19,790
>> Έτσι ένα από τα πρώτα πράγματα που
μπορούμε να κάνουμε είναι ότι μπορείτε να προσθέσετε padding.

940
00:38:19,790 --> 00:38:25,610
Επένδυση λέει πόσο χώρο
δεν πρέπει να αφήνει σε κάθε πλευρά.

941
00:38:25,610 --> 00:38:29,200
Ας πούμε ότι θέλω να πω
10 εικονοστοιχεία σε κάθε πλευρά.

942
00:38:29,200 --> 00:38:31,234
Και εγώ θα τεμαχίσει ότι σε ένα δευτερόλεπτο.

943
00:38:31,234 --> 00:38:33,150
ALLISON BUCHHOLTZ-ΑΕ:
Όλα αυτά τα πράγματα εδώ

944
00:38:33,150 --> 00:38:36,980
πρόκειται να είναι ως επί το πλείστον σε pixels
για το υπόλοιπο του σεμιναρίου.

945
00:38:36,980 --> 00:38:40,980
Θα πάμε να δούμε ότι έχει
λίγο χώρο γύρω από αυτό, σωστά;

946
00:38:40,980 --> 00:38:46,360
Έτσι, ό, τι δεν μπορείτε να δείτε εδώ είναι ότι υπάρχει
αυτό το αόρατο είδος της padding

947
00:38:46,360 --> 00:38:49,600
σε κάθε πλευρά, που λέει, όπως,
Εντάξει, έχετε το κουτί των content--

948
00:38:49,600 --> 00:38:51,680
>> ALLISON BUCHHOLTZ-ΑΕ: Θέλετε
απλά να σηκώσει το στοιχείο επιθεωρεί;

949
00:38:51,680 --> 00:38:53,659
>> ΤΟΜΑΣ Reimers: Ναι, αυτό είναι μια καλή ιδέα.

950
00:38:53,659 --> 00:38:56,700
ALLISON BUCHHOLTZ-ΑΕ: Επίσης, βρίσκω
ότι το στοιχείο επιθεωρεί είναι ένας καλός τρόπος

951
00:38:56,700 --> 00:39:01,280
να καταλάβω αν κάτι πηγαίνει
λάθος, συμβαίνει κάτι αναπάντεχο,

952
00:39:01,280 --> 00:39:04,570
επιθεώρηση των ετικετών και να δει τι
είναι σαν να αντικατασταθούν είναι χρήσιμη.

953
00:39:04,570 --> 00:39:05,940
>> ΤΟΜΑΣ Reimers: Γι 'αυτό δεν είμαι σίγουρος
αν εσείς μπορείτε να δείτε αυτό το χρώμα.

954
00:39:05,940 --> 00:39:06,470
Μπορείς;

955
00:39:06,470 --> 00:39:10,120
Θα δείτε αυτό το υλικό παραγεμίσματος
για το είδος της ακμής.

956
00:39:10,120 --> 00:39:13,410
Και τότε θα δείτε το πραγματικό
περιεκτικότητα σε μπλε, σωστά;

957
00:39:13,410 --> 00:39:16,820
Έτσι, αυτό είναι το πολύ
βασικά στοιχεία του μοντέλου κουτί.

958
00:39:16,820 --> 00:39:17,674
Έχετε περιεχόμενο.

959
00:39:17,674 --> 00:39:18,590
Στη συνέχεια θα πρέπει να γεμίσει.

960
00:39:18,590 --> 00:39:20,440
>> ΚΟΙΝΟ: Γιατί δεν κάνουμε απλά
χρησιμοποιήστε το πλαίσιο μέσα the--

961
00:39:20,440 --> 00:39:21,606
>> ALLISON BUCHHOLTZ-ΑΕ: Δεξιά.

962
00:39:21,606 --> 00:39:24,745
Επειδή είναι ακριβώς επιλογή
το στοιχείο τώρα.

963
00:39:24,745 --> 00:39:26,050
>> ΤΟΜΑΣ Reimers: Yup.

964
00:39:26,050 --> 00:39:27,060
Άλλα πράγματα.

965
00:39:27,060 --> 00:39:29,780
Ας μιλήσουμε γι 'αυτό
εντολή επένδυση για ένα δευτερόλεπτο.

966
00:39:29,780 --> 00:39:36,380
Έτσι, σε CSS, μετρήσεις
πρέπει να έχουν μια μονάδα.

967
00:39:36,380 --> 00:39:39,740
Έτσι, πρώτα θα πρέπει το ποσό.

968
00:39:39,740 --> 00:39:41,460
Έτσι, σε αυτή την περίπτωση, έχουμε πει 10.

969
00:39:41,460 --> 00:39:44,780
Και στη συνέχεια το επόμενο
έχουμε πει είναι εικονοστοιχεία, px.

970
00:39:44,780 --> 00:39:49,160
Άλλες αυτά που μπορεί να έχετε είναι
πράγματα όπως εκατοστά, ίντσες.

971
00:39:49,160 --> 00:39:51,367
Μπορείτε να κάνετε πράγματα όπως,
τι είναι 10 ίντσες;

972
00:39:51,367 --> 00:39:52,700
Και αυτό πρόκειται να είναι γελοίο.

973
00:39:52,700 --> 00:39:52,990
>> ALLISON BUCHHOLTZ-ΑΕ: Ω, αγόρι.

974
00:39:52,990 --> 00:39:53,460
>> ΚΟΙΝΟ: Πω πω.

975
00:39:53,460 --> 00:39:54,460
>> ΤΟΜΑΣ & Allison: Ναι.

976
00:39:54,460 --> 00:39:57,840
ΤΟΜΑΣ Reimers: Έτσι, αυτό είναι όλο το υλικό παραγεμίσματος.

977
00:39:57,840 --> 00:39:59,255
Πάω να πάει πίσω σε pixel.

978
00:39:59,255 --> 00:40:01,754
>> ALLISON BUCHHOLTZ-ΑΕ: Pixels
τείνουν να είναι, όπως, το πρότυπο.

979
00:40:01,754 --> 00:40:04,589
Αν κοιτάξει κανείς πολλές ιστοσελίδες,
ως επί το πλείστον εργάζονται σε pixels.

980
00:40:04,589 --> 00:40:07,755
ΤΟΜΑΣ Reimers: Έτσι θα πάμε να δούμε
είτε pixels-- τα άλλα αυτά που βλέπετε

981
00:40:07,755 --> 00:40:13,952
είναι em, το οποίο είναι ένα em είναι
ίσο με το ύψος της γραμματοσειράς

982
00:40:13,952 --> 00:40:15,160
που χρησιμοποιείτε αυτήν τη στιγμή.

983
00:40:15,160 --> 00:40:16,201
>> ALLISON BUCHHOLTZ-ΑΕ: mm.

984
00:40:16,201 --> 00:40:17,574

985
00:40:17,574 --> 00:40:20,740
ΤΟΜΑΣ Reimers: Είναι ένας καλός τρόπος να πω,
όπως, θέλω όσο χώρο γραμματοσειρά μου

986
00:40:20,740 --> 00:40:21,514
Είναι λήψη.

987
00:40:21,514 --> 00:40:23,180
ALLISON BUCHHOLTZ-ΑΕ: Μήπως δεν γνωρίζουν ότι.

988
00:40:23,180 --> 00:40:25,747
Μπορείτε να μάθετε κάτι νέο κάθε μέρα.

989
00:40:25,747 --> 00:40:27,955
ΤΟΜΑΣ Reimers: Υπάρχουν
πολλές μετρήσεις στο CS.

990
00:40:27,955 --> 00:40:29,260
Σας προτείνω να τους αναζητήσετε.

991
00:40:29,260 --> 00:40:32,122
Για όλες τις περιπτώσεις σας, νομίζω
εικονοστοιχεία θα πρέπει να είναι επαρκής.

992
00:40:32,122 --> 00:40:33,830
Και είναι επίσης τι
θα πάμε να δούμε

993
00:40:33,830 --> 00:40:36,520
στην πλειονότητα των παραδειγμάτων γίνεται online.

994
00:40:36,520 --> 00:40:38,320
Γι 'αυτό και θα το αφήσει σε εικονοστοιχεία.

995
00:40:38,320 --> 00:40:42,420
>> Μπορείτε επίσης, θα say-- έτσι
padding σύνολα Όλα τα γεμίσματα.

996
00:40:42,420 --> 00:40:49,789
Μπορείτε επίσης να κάνετε κάτι σαν
"Padding-top" σε μόλις set--

997
00:40:49,789 --> 00:40:52,080
ALLISON BUCHHOLTZ-ΑΕ: Ίσως
θα πάρουμε μας "γεια" πίσω.

998
00:40:52,080 --> 00:40:55,480
ΤΟΜΑΣ Reimers: --Για μόλις οριστεί η
padding στην κορυφή και τίποτε άλλο.

999
00:40:55,480 --> 00:40:59,560
Έτσι, οι τέσσερις εντολές είναι padding-top,
padding-bottom, padding-αριστερά,

1000
00:40:59,560 --> 00:41:00,310
και να γεμίσει δεξιά.

1001
00:41:00,310 --> 00:41:02,470
>> ALLISON BUCHHOLTZ-ΑΕ: Ακριβώς όπως
θα περίμενε κανείς για ένα κουτί.

1002
00:41:02,470 --> 00:41:03,530
>> ΤΟΜΑΣ Reimers: Ναι.

1003
00:41:03,530 --> 00:41:05,240
Τίποτα δεν πάρα πολύ τρελό εκεί.

1004
00:41:05,240 --> 00:41:08,230
Μήπως αυτό έχει νόημα;

1005
00:41:08,230 --> 00:41:11,990
Έτσι ώστε να είναι παραγέμισμα.

1006
00:41:11,990 --> 00:41:14,110
Πάω να θέσει όλα
τα ένθετα πίσω στο 10.

1007
00:41:14,110 --> 00:41:17,010
Και στη συνέχεια, Πάω να προχωρήσουμε σε σύνορα.

1008
00:41:17,010 --> 00:41:21,130
>> Έτσι τι σύνορα είναι
συνόρων είναι ένα παράξενο εντολή.

1009
00:41:21,130 --> 00:41:24,450
Παίρνει το είδος του τρία πράγματα ταυτόχρονα.

1010
00:41:24,450 --> 00:41:28,930
Έτσι, το πρώτο είναι πόσο μεγάλη σας
θέλω να είναι σαν μια μέτρηση.

1011
00:41:28,930 --> 00:41:30,662
Και πάλι, είμαι μόνο με τη χρήση pixel.

1012
00:41:30,662 --> 00:41:32,620
Και το τελευταίο πράγμα που
πρέπει να προσθέσετε σε μετρήσεις

1013
00:41:32,620 --> 00:41:35,270
είναι το μόνο πράγμα που
δεν χρειάζεται μια μονάδα είναι 0.

1014
00:41:35,270 --> 00:41:37,390
Είναι πραγματικά λάθος
για να δώσει μια μονάδα 0,

1015
00:41:37,390 --> 00:41:41,940
επειδή το 0 είναι 0 σε όλη ίντσες,
pixels, εκατοστά, οτιδήποτε.

1016
00:41:41,940 --> 00:41:43,960
Είναι όλα απλά σημαίνει 0, σωστά;

1017
00:41:43,960 --> 00:41:46,710
Έτσι, πρώτα θα δώσει τη μέτρηση.

1018
00:41:46,710 --> 00:41:48,650
>> Στη συνέχεια, μπορείτε να δώσετε το στυλ.

1019
00:41:48,650 --> 00:41:49,869
Έτσι, Πάω να πω "στερεά".

1020
00:41:49,869 --> 00:41:51,410
Και θα μιλήσουμε για το τι σημαίνει αυτό.

1021
00:41:51,410 --> 00:41:54,290
Και στη συνέχεια, τέλος, να σας δώσει ένα χρώμα.

1022
00:41:54,290 --> 00:41:56,850
Έτσι, Πάω να πω "μαύρο".

1023
00:41:56,850 --> 00:41:59,637
Και όλα αυτά είναι πράγματα που έχουμε
τώρα έχουμε ξαναδεί, εκτός από το ύφος,

1024
00:41:59,637 --> 00:42:00,720
αλλά θα μιλήσουμε γι 'αυτό.

1025
00:42:00,720 --> 00:42:04,120
Έτσι, εσείς έχετε δει τις μετρήσεις,
και έχετε δει τα χρώματα.

1026
00:42:04,120 --> 00:42:10,410
Και αυτό που συμβαίνει είναι παίρνουμε αυτό
ωραίο μαύρο περίγραμμα γύρω από αυτό, σωστά;

1027
00:42:10,410 --> 00:42:11,620
Εσείς να δούμε πώς το κάναμε αυτό;

1028
00:42:11,620 --> 00:42:12,760
>> Κοινό: Ναι.

1029
00:42:12,760 --> 00:42:14,850
>> ΤΟΜΑΣ Reimers: Cool.

1030
00:42:14,850 --> 00:42:17,370
Λοιπόν, τι είναι αυτό;

1031
00:42:17,370 --> 00:42:19,160
Έτσι, πρώτα απ 'όλα, αυτό είναι ένα pixel.

1032
00:42:19,160 --> 00:42:20,880
Αυτό είναι αυτονόητο αρκετά, έτσι δεν είναι;

1033
00:42:20,880 --> 00:42:23,254
Όπως, είναι ένα εικονοστοιχείο πάχους.

1034
00:42:23,254 --> 00:42:26,170
Ή θα είναι ένα pixel, αλλά είμαι
μεγέθυνση, έτσι είναι λίγο πιο

1035
00:42:26,170 --> 00:42:26,490
από αυτό.

1036
00:42:26,490 --> 00:42:27,967
>> ALLISON BUCHHOLTZ-ΑΕ: Και έχουμε
αυτή η γελοία τηλεόραση ανάλυση.

1037
00:42:27,967 --> 00:42:29,460
>> ΤΟΜΑΣ Reimers: Ναι.

1038
00:42:29,460 --> 00:42:33,640
Μπορείτε να κάνετε το μεγαλύτερο,
μικρότερες, οτιδήποτε.

1039
00:42:33,640 --> 00:42:35,630
Έτσι, εδώ είναι ένα σύνορο δύο-pixel.

1040
00:42:35,630 --> 00:42:38,810
Θα δείτε ότι είναι δύο φορές πιο παχιά.

1041
00:42:38,810 --> 00:42:40,172
Το επόμενο πράγμα που έχετε είναι το χρώμα.

1042
00:42:40,172 --> 00:42:41,130
Αυτό δεν είναι ενδιαφέρουσα.

1043
00:42:41,130 --> 00:42:42,710
Είμαι δεν πρόκειται να μιλήσω
γι 'αυτό, πραγματικά.

1044
00:42:42,710 --> 00:42:45,110
>> ALLISON BUCHHOLTZ-ΑΕ: Αλλά το στυλ
θα μπορούσε να είναι λίγο ενδιαφέρον.

1045
00:42:45,110 --> 00:42:45,980
>> ΤΟΜΑΣ Reimers: Ναι.

1046
00:42:45,980 --> 00:42:48,560
Έτσι, το στυλ, υπάρχουν λίγοι αυτοί
ότι βλέπω χρησιμοποιούνται συνήθως.

1047
00:42:48,560 --> 00:42:55,690
Στερεά, επόμενο Πρώτη κάποιου
διακεκομμένη και διακεκομμένη και η τελευταία του.

1048
00:42:55,690 --> 00:42:59,290
Και εδώ είναι διάσπαρτη.

1049
00:42:59,290 --> 00:43:02,980
Θα δείτε ότι είναι
ένα μάτσο τελείες, σωστά;

1050
00:43:02,980 --> 00:43:09,030
Ένας καλός τρόπος για να πάρετε το είδος του ένα ωραίο περίγραμμα
πρόκειται, παύλες είναι επίσης αρκετά δημοφιλή.

1051
00:43:09,030 --> 00:43:11,580

1052
00:43:11,580 --> 00:43:13,600
>> ALLISON BUCHHOLTZ-ΑΕ:
Και τότε φυσικά, είμαι

1053
00:43:13,600 --> 00:43:16,660
βέβαιος ότι υπάρχουν πολλές άλλες
στυλ που μπορείτε να πάρετε.

1054
00:43:16,660 --> 00:43:20,000
Και έχουμε μια μεγάλη σειρά από
συνδέσμους στο τέλος για σας παιδιά

1055
00:43:20,000 --> 00:43:23,470
να λάβουν γνώση του είδους και
εξετάσουμε πιο δροσερό CSS.

1056
00:43:23,470 --> 00:43:25,954
>> ΤΟΜΑΣ Reimers: Και στη συνέχεια,
το τελευταίο πράγμα, είμαστε

1057
00:43:25,954 --> 00:43:27,870
πρόκειται να μιλήσουμε για το
μοντέλα κουτί πραγματικά γρήγορα.

1058
00:43:27,870 --> 00:43:30,070
Ω, και στη συνέχεια, στα σύνορα,
ακριβώς όπως το παραγέμισμα,

1059
00:43:30,070 --> 00:43:33,270
έχετε επίσης πράγματα όπως
σύνορα-αριστερά, στα σύνορα-δεξιά, border-top,

1060
00:43:33,270 --> 00:43:37,590
σύνορα-κάτω, τα οποία σας επιτρέπουν
να πάρετε σε μια συγκεκριμένη σύνορα.

1061
00:43:37,590 --> 00:43:40,650
Έτσι, εδώ είναι μόνο τα σύνορα αριστερό ορίζεται.

1062
00:43:40,650 --> 00:43:43,060
Μήπως αυτό έχει νόημα;

1063
00:43:43,060 --> 00:43:46,170
>> ALLISON BUCHHOLTZ-ΑΕ: Είναι ένα δροσερό
τρόπος για να τονίσει τα πράγματα ή να προσθέσετε

1064
00:43:46,170 --> 00:43:47,545
γραμμές μεταξύ των διαφόρων στοιχείων.

1065
00:43:47,545 --> 00:43:48,670
ΤΟΜΑΣ Reimers: Απολύτως.

1066
00:43:48,670 --> 00:43:50,940
Έτσι, αυτό είναι συνόρων μας.

1067
00:43:50,940 --> 00:43:52,790
Και περιθώριο της τελευταίας κάποιου.

1068
00:43:52,790 --> 00:43:55,892
Όπως το παραγέμισμα Μαργκίν
εκτός του ότι δεν είναι within--

1069
00:43:55,892 --> 00:43:57,975
ALLISON BUCHHOLTZ-ΑΕ: Είναι
όχι γύρω από το στοιχείο σας

1070
00:43:57,975 --> 00:44:00,840
αλλά στην πραγματικότητα γύρω από ολόκληρο το
κουτί που έχουμε ήδη δει.

1071
00:44:00,840 --> 00:44:02,770
>> ΤΟΜΑΣ Reimers: Ναι.

1072
00:44:02,770 --> 00:44:04,090
Allison είπε τέλεια.

1073
00:44:04,090 --> 00:44:07,550
Δεν είναι, όπως, μέσα σας
στοιχείο, είναι γύρω από ολόκληρο το κουτί.

1074
00:44:07,550 --> 00:44:10,900
Αυτό σημαίνει ότι τα πράγματα όπως
φόντο, δεν ισχύουν γι 'αυτό.

1075
00:44:10,900 --> 00:44:13,550
Και λέει βασικά,
όπως, δεν θέλω τίποτα

1076
00:44:13,550 --> 00:44:15,230
σε αυτό το πολύ χώρο για μένα.

1077
00:44:15,230 --> 00:44:17,470
Έτσι, όπως έχουμε εδώ
ένα περιθώριο 10 pixels.

1078
00:44:17,470 --> 00:44:23,100
Έτσι, τίποτα μέσα σε 10 εικονοστοιχεία
θα πρέπει να είναι δίπλα μου.

1079
00:44:23,100 --> 00:44:26,210
Αυτό είναι το είδος του του
χώρο, αλλά το είδος του όχι.

1080
00:44:26,210 --> 00:44:29,215
Έτσι, αυτό είναι το πολύ
βασικά στοιχεία του μοντέλου κουτί.

1081
00:44:29,215 --> 00:44:30,090
Μήπως αυτό έχει νόημα;

1082
00:44:30,090 --> 00:44:33,830

1083
00:44:33,830 --> 00:44:34,550
Cool, δροσερό.

1084
00:44:34,550 --> 00:44:35,800
ALLISON BUCHHOLTZ-ΑΕ: Awesome.

1085
00:44:35,800 --> 00:44:37,890
Έτσι τώρα σκεφτόμαστε μόνο
έχουν δροσερό πόρους μας

1086
00:44:37,890 --> 00:44:41,220
ότι θα σας μεταφέρουμε παιδιά
μέσω πολύ γρήγορα.

1087
00:44:41,220 --> 00:44:44,815
Και θα actually-- καλά,
έχουμε ακόμα στο διαδίκτυο;

1088
00:44:44,815 --> 00:44:47,860
>> ΤΟΜΑΣ Reimers: Ας
δω αν μπορώ να ανοίξω up--

1089
00:44:47,860 --> 00:44:50,040
επιτρέψτε μου να δω αν μπορώ
μπορεί να πάρει γρήγορα στο διαδίκτυο

1090
00:44:50,040 --> 00:44:53,317
ενώ Allison μιλά για οτιδήποτε
Allison θέλει να μιλήσει για.

1091
00:44:53,317 --> 00:44:55,150
ALLISON BUCHHOLTZ-ΑΕ:
Έτσι basically-- εγώ δεν κάνω

1092
00:44:55,150 --> 00:44:57,930
ξέρω τι άλλο μπορώ να πω σε αυτό το σημείο.

1093
00:44:57,930 --> 00:45:01,340
Αλλά αυτά είναι μερικά
πολύ καλή παραγωγή.

1094
00:45:01,340 --> 00:45:04,629
Αυτά είναι αυτοί που
Tomas και έχω χρησιμοποιήσει

1095
00:45:04,629 --> 00:45:06,420
και ότι στην πραγματικότητα
που χρησιμοποιούνται για την προετοιμασία για αυτό.

1096
00:45:06,420 --> 00:45:09,940
W3Schools είναι αυτό που σας
παιδιά πρέπει να έχουν δει πριν.

1097
00:45:09,940 --> 00:45:12,440
Σας το συνιστώ για μια
πολλά πράγματα με CSS.

1098
00:45:12,440 --> 00:45:15,060
Ξέρω ότι το συστήνω σε
τμήμα μου όλη την ώρα.

1099
00:45:15,060 --> 00:45:21,050
>> Ένα από τα μεγάλα πράγματα είναι ότι
σας επιτρέπει να το είδος της χάος με CSS

1100
00:45:21,050 --> 00:45:23,830
και να δούμε τις αλλαγές
στιγμιαία σε αυτό,

1101
00:45:23,830 --> 00:45:25,920
όπως, δείτε διπλό παράθυρο που έχει.

1102
00:45:25,920 --> 00:45:29,980
Έτσι, δεν έχετε να ανησυχείτε για
δημιουργήσετε τη δική σας ιστοσελίδα,

1103
00:45:29,980 --> 00:45:33,090
ή τη σύσταση vhost σε σας
τοπική συσκευή και την τοπική υποδοχής,

1104
00:45:33,090 --> 00:45:34,980
και να πάρει όλα αυτά τα πράγματα εργασίας.

1105
00:45:34,980 --> 00:45:36,830
Είναι ενσωματωμένη δεξιά μέσα στη σελίδα.

1106
00:45:36,830 --> 00:45:39,042
>> Και έχει αυτά τα μικρά
μαθήματα που μπορείτε να

1107
00:45:39,042 --> 00:45:40,750
να περάσει για να μάθετε
περισσότερα για επιλογείς,

1108
00:45:40,750 --> 00:45:44,610
ή να μάθουν για το χειρισμό σας
γραμματοσειρά, ή ένα υπόβαθρο, ή μια εικόνα.

1109
00:45:44,610 --> 00:45:46,990
Και έχετε αυτά
στιγμιαία αποτελέσματα που

1110
00:45:46,990 --> 00:45:49,310
Δεν χρειάζεται να κάνετε οποιαδήποτε
άλλες εργασίες προετοιμασίας για.

1111
00:45:49,310 --> 00:45:51,060
Γι 'αυτό αγαπώ W3Schools.

1112
00:45:51,060 --> 00:45:51,960
Είναι καταπληκτικά.

1113
00:45:51,960 --> 00:45:52,670
Είναι εργασίας;

1114
00:45:52,670 --> 00:45:52,950
>> ΤΟΜΑΣ Reimers: Ναι.

1115
00:45:52,950 --> 00:45:53,720
Όχι, δεν είναι.

1116
00:45:53,720 --> 00:45:55,636
Θέλεις να δοκιμάσετε
και κάντε επανεκκίνηση του υπολογιστή μου;

1117
00:45:55,636 --> 00:45:56,410
Ή θέλουμε to--

1118
00:45:56,410 --> 00:46:01,490
>> ALLISON BUCHHOLTZ-ΑΕ: Θέλω να πω,
καλά, αυτό θα είναι επίσης σε απευθείας σύνδεση.

1119
00:46:01,490 --> 00:46:02,740
Όλες οι διαφάνειες θα είναι σε απευθείας σύνδεση.

1120
00:46:02,740 --> 00:46:05,470
Γι 'αυτό ακριβώς το συνιστώ ανεπιφύλακτα κάνει αυτά.

1121
00:46:05,470 --> 00:46:07,880
>> Αυτό είναι μεγάλη, όπως ακριβώς
σαν ένα σκονάκι.

1122
00:46:07,880 --> 00:46:10,690
Είναι ακριβώς όλα τα βασικά
εντολές που έχετε.

1123
00:46:10,690 --> 00:46:13,070
Είναι ιδανικό όταν είστε πρώτα
ξεκινώντας από την ιστοσελίδα σας.

1124
00:46:13,070 --> 00:46:15,080
Επειδή ίσως δεν το κάνετε
θέλουν να μπει σε όλα

1125
00:46:15,080 --> 00:46:17,355
η πραγματική κονιδιασμένος λιθίαση
σχεδιασμού βαριά πράγματα.

1126
00:46:17,355 --> 00:46:20,230
Απλά πρέπει να το διαμορφώσετε με έναν τρόπο
Αυτό το είδος της νόημα και τη βούληση

1127
00:46:20,230 --> 00:46:21,490
κάνει προς το παρόν.

1128
00:46:21,490 --> 00:46:23,580
Και αν θέλετε πραγματικά
να μπει σε αυτό, ξέρω

1129
00:46:23,580 --> 00:46:27,240
αυτό είναι, όπως, ένα από τα
Αγαπημένες αναφορές Tomas του.

1130
00:46:27,240 --> 00:46:30,130
Ήμασταν το χρησιμοποιούν για να
προετοιμασία, και αυτό είναι υπέροχο.

1131
00:46:30,130 --> 00:46:33,030
Είναι υπεύθυνος για την ανάπτυξη από το ίδρυμα Mozilla.

1132
00:46:33,030 --> 00:46:36,490
>> ΤΟΜΑΣ Reimers: Έτσι είναι το Mozilla
οι άνθρωποι που κάνουν τον Firefox.

1133
00:46:36,490 --> 00:46:40,290
Και αυτό είναι μόνο δική τους προγραμματιστές
αναφοράς, η οποία νομίζω ότι είναι φοβερό.

1134
00:46:40,290 --> 00:46:44,870
Και αυτό έχει μια υπέροχη
Λίστα των πόρων.

1135
00:46:44,870 --> 00:46:45,530
Γι 'αυτό και have--

1136
00:46:45,530 --> 00:46:48,060
>> ALLISON BUCHHOLTZ-ΑΕ:
Και στη συνέχεια, τελευταία σημείωση είναι

1137
00:46:48,060 --> 00:46:50,120
όταν προσπαθείτε να
το σχεδιασμό την ιστοσελίδα σας,

1138
00:46:50,120 --> 00:46:53,550
αντλήσουν έμπνευση από τα πράγματα
ότι νομίζετε ότι είναι αρκετά.

1139
00:46:53,550 --> 00:46:56,340
Επιθεώρηση του στοιχείου,
επιθεώρηση του πηγαίου κώδικα

1140
00:46:56,340 --> 00:46:59,370
μπορεί να είναι εξαιρετικά χρήσιμη
για την προσπάθεια να καταλάβω

1141
00:46:59,370 --> 00:47:02,080
πώς να στυλ το δικό σας ιστότοπο.

1142
00:47:02,080 --> 00:47:04,540
>> Συχνά, νιώθω σαν το καλύτερο
Έτσι, εκτός από τον πειραματισμό,

1143
00:47:04,540 --> 00:47:06,290
Είναι μόνο για να δούμε
πράγματα που είναι αρκετά.

1144
00:47:06,290 --> 00:47:09,810
Θεωρώ ότι είναι πολύ δύσκολο να απλά
το είδος του σχεδιασμού πράγματα για τη δική σας,

1145
00:47:09,810 --> 00:47:11,090
ειδικά στην αρχή.

1146
00:47:11,090 --> 00:47:14,740
Επομένως, σας παρακαλώ δείτε ιστοσελίδες
ότι μπορείτε να απολαύσετε κοιτάζοντας.

1147
00:47:14,740 --> 00:47:16,880
Υπολογίστε τι κάνει
ελκυστικό για εσάς.

1148
00:47:16,880 --> 00:47:19,170
Και τότε μη διστάσετε να
να προσπαθήσουμε και να αναπαράγουν αυτό.

1149
00:47:19,170 --> 00:47:20,410
>> ΤΟΜΑΣ Reimers: Δεξιά.

1150
00:47:20,410 --> 00:47:23,120
Ακόμη, όπως ιστοσελίδες
όπως αυτό, μπορείτε να δείτε

1151
00:47:23,120 --> 00:47:25,460
υπάρχει σίγουρα ένα div στην κορυφή.

1152
00:47:25,460 --> 00:47:29,920
Και τότε έχετε ένα άλλο div μέσα
εδώ, το οποίο είναι το CSS Τέλεια.

1153
00:47:29,920 --> 00:47:32,480
Και τότε έχετε μια δέσμη των συνδέσεων εδώ.

1154
00:47:32,480 --> 00:47:34,770
Αν πραγματικά ακριβώς επιθεωρούν
στοιχεία, μπορείτε να ταξινομήσετε του

1155
00:47:34,770 --> 00:47:38,520
αρχίσετε να βλέπετε τι κάνουν ιστοσελίδες
μοιάζει, και πώς μπορώ να

1156
00:47:38,520 --> 00:47:40,493
αναδημιουργήσει ότι αν ήθελα να.

1157
00:47:40,493 --> 00:47:41,890
Μήπως αυτό έχει νόημα;

1158
00:47:41,890 --> 00:47:43,670
Έτσι έχουμε μόνο τρία λεπτά που απομένουν.

1159
00:47:43,670 --> 00:47:46,380
Έτσι ερωτήσεις;

1160
00:47:46,380 --> 00:47:47,650
Οποιαδήποτε από αυτές;

1161
00:47:47,650 --> 00:47:48,350
Ναι.

1162
00:47:48,350 --> 00:47:50,780
>> Κοινό: Για το χρώμα
ορθογώνιο, πώς θα

1163
00:47:50,780 --> 00:47:53,499
have-- αν δεν το θέλετε
πηγαίνει σε όλη την σελίδα, θα μπορούσε να

1164
00:47:53,499 --> 00:47:56,400
έχετε κάνει να πάει σε όλη μόνο
Η μισή σελίδα ή απλά το κείμενο;

1165
00:47:56,400 --> 00:47:59,660
>> ΤΟΜΑΣ Reimers: Ναι, απολύτως.

1166
00:47:59,660 --> 00:48:02,780
Έτσι, επιτρέψτε μου να δούμε πραγματικά.

1167
00:48:02,780 --> 00:48:04,670
Έχω δύο ιδέες.

1168
00:48:04,670 --> 00:48:07,265
Έτσι, πρώτα απ 'όλα,
μπορούν επίσης να χρησιμοποιήσουν ποσοστά.

1169
00:48:07,265 --> 00:48:08,140
>> ΚΟΙΝΟ: Αλήθεια;

1170
00:48:08,140 --> 00:48:11,260
>> ALLISON BUCHHOLTZ-ΑΕ: Οπότε κάτι
να κοιτάζω προς τα πάνω είναι σχετική τοποθέτηση.

1171
00:48:11,260 --> 00:48:13,385
Είναι κάτι που εμείς
Δεν έχω χρόνο για να μπει,

1172
00:48:13,385 --> 00:48:16,392
αλλά αυτό είναι κάτι που σίγουρα
προτείνουμε εσείς τον έλεγχο έξω.

1173
00:48:16,392 --> 00:48:17,580
>> ΤΟΜΑΣ Reimers: Έτσι ποσοστά.

1174
00:48:17,580 --> 00:48:21,524
Και να δούμε πώς θα το έκανε
μόλις το 50% του πλάτους;

1175
00:48:21,524 --> 00:48:24,190
ALLISON BUCHHOLTZ-ΑΕ: Εάν
πραγματικά γνωρίζουν τον αριθμό των pixels,

1176
00:48:24,190 --> 00:48:25,780
μπορείτε να είστε πιο ακριβείς με αυτόν τον τρόπο.

1177
00:48:25,780 --> 00:48:27,200
Μπορείτε να βιολί γύρω με αυτό.

1178
00:48:27,200 --> 00:48:27,700
Αλλά το 50%.

1179
00:48:27,700 --> 00:48:31,970
Αν επρόκειτο να αλλάξετε το μέγεθος του προγράμματος περιήγησης μας,
θα καθιστούσε μικρότερα.

1180
00:48:31,970 --> 00:48:35,250
>> ΤΟΜΑΣ Reimers: Λοιπόν, αυτό είναι
βασικά 50% τώρα, νομίζω.

1181
00:48:35,250 --> 00:48:38,820
Είναι κατά 50%, και στη συνέχεια το περιθώριο
έχει προστεθεί σε αυτό.

1182
00:48:38,820 --> 00:48:40,100
CSS έχει πολλές ιδιορρυθμίες.

1183
00:48:40,100 --> 00:48:43,195
Μέχρι τώρα αυτό είναι
Το 50% του πλάτους της σελίδας.

1184
00:48:43,195 --> 00:48:46,860
Αλλά να θυμάστε ότι έχετε 10
εικονοστοιχεία απογειωθεί από κάθε πλευρά.

1185
00:48:46,860 --> 00:48:49,700
Έτσι, αν ήταν να προχωρήσουμε ότι κατά
η αριστερή άκρη του προγράμματος περιήγησης,

1186
00:48:49,700 --> 00:48:51,550
τότε θα μοιάζουν με 50%.

1187
00:48:51,550 --> 00:48:53,884
Και πάλι, όπως είπα, CSS μπορεί
είναι πολλή εικασία-και-ελέγχου.

1188
00:48:53,884 --> 00:48:56,049
Όπως, νομίζετε ότι κάτι είναι
πρόκειται να συμπεριφέρεται με έναν τρόπο,

1189
00:48:56,049 --> 00:48:57,805
αλλά συμπεριφέρεται έναν εντελώς διαφορετικό τρόπο.

1190
00:48:57,805 --> 00:48:59,420
>> ALLISON BUCHHOLTZ-ΑΕ:
Και μπορείτε να πάρετε μόνο πιο έξυπνη,

1191
00:48:59,420 --> 00:49:02,020
και μπορείτε απλά να πάρετε μια καλύτερη
διαίσθηση για αυτό, όπως κινείστε κατά μήκος.

1192
00:49:02,020 --> 00:49:02,730
>> ΤΟΜΑΣ Reimers: Και
γίνεται όλο και χειρότερη.

1193
00:49:02,730 --> 00:49:03,496
Έτσι, είναι πραγματικά μόνο ένας αγώνας.

1194
00:49:03,496 --> 00:49:05,454
>> ALLISON BUCHHOLTZ-ΑΕ:
Αυτό είναι εξαιρετικά ενθαρρυντικά.

1195
00:49:05,454 --> 00:49:07,070
Θέλουμε να αρέσει CSS.

1196
00:49:07,070 --> 00:49:08,810
>> ΤΟΜΑΣ Reimers: CSS είναι φοβερό.

1197
00:49:08,810 --> 00:49:10,354
Να θυμάστε ότι.

1198
00:49:10,354 --> 00:49:11,020
Άλλες ερωτήσεις;

1199
00:49:11,020 --> 00:49:14,297
>> ALLISON BUCHHOLTZ-ΑΕ: Το ένα πράγμα.

1200
00:49:14,297 --> 00:49:14,880
Οτιδήποτε άλλο;

1201
00:49:14,880 --> 00:49:15,140
Cool.

1202
00:49:15,140 --> 00:49:15,690
>> ΤΟΜΑΣ Reimers: Awesome.

1203
00:49:15,690 --> 00:49:18,523
>> ALLISON BUCHHOLTZ-ΑΕ: Λοιπόν, αν
παιδιά έχουν απορίες αργότερα,

1204
00:49:18,523 --> 00:49:20,919
είμαστε πάντα στη διάθεσή σας ως συνήθως.

1205
00:49:20,919 --> 00:49:22,960
Θα δείτε πιθανόν κάποια
από εμάς για την τελική έργων

1206
00:49:22,960 --> 00:49:24,280
και σίγουρα στο hackathon.

1207
00:49:24,280 --> 00:49:25,200
>> ΤΟΜΑΣ Reimers: Απολύτως.

1208
00:49:25,200 --> 00:49:25,720
Και στην εύλογη.

1209
00:49:25,720 --> 00:49:26,560
>> ALLISON BUCHHOLTZ-ΑΕ: Και στην εύλογη.

1210
00:49:26,560 --> 00:49:26,840
Ω.

1211
00:49:26,840 --> 00:49:28,130
>> ΤΟΜΑΣ Reimers: Ανυπομονώ να
βλέποντας όλα awesome-- σας

1212
00:49:28,130 --> 00:49:29,420
>> ALLISON BUCHHOLTZ-ΑΕ: Θα δούμε
όλα φοβερό ιστοσελίδες σας

1213
00:49:29,420 --> 00:49:30,572
ότι θα είναι όμορφο.

1214
00:49:30,572 --> 00:49:32,780
ΤΟΜΑΣ Reimers: Μπορείτε πάντα να
δείτε, όπως, τις ιστοσελίδες

1215
00:49:32,780 --> 00:49:36,234
που είχαν, όπως, καλή CSS και, στη συνέχεια,
όπως και εκείνοι που δεν προσπαθώ να κάνω CSS.

1216
00:49:36,234 --> 00:49:39,150
ALLISON BUCHHOLTZ-ΑΕ: Επίσης, ένα άλλο
πράγμα, ένα ακόμη πράγμα που πρέπει να εξετάσουμε

1217
00:49:39,150 --> 00:49:40,445
είναι Bootstrapping.

1218
00:49:40,445 --> 00:49:41,805
Έτσι Bootstrap είναι μεγάλη.

1219
00:49:41,805 --> 00:49:42,240
>> ΤΟΜΑΣ Reimers: Google ότι αν you--

1220
00:49:42,240 --> 00:49:43,573
>> ALLISON BUCHHOLTZ-ΑΕ: το Google.

1221
00:49:43,573 --> 00:49:44,340
Είναι καταπληκτικά.

1222
00:49:44,340 --> 00:49:45,620
Θα το αγαπήσετε.

1223
00:49:45,620 --> 00:49:48,000
Και τώρα που έχετε μια
βασική κατανόηση της CSS,

1224
00:49:48,000 --> 00:49:50,340
αυτό θα κάνει πολύ πιο λογικό.

1225
00:49:50,340 --> 00:49:50,890
Awesome.

1226
00:49:50,890 --> 00:49:51,480
Ευχαριστώ, παιδιά.

1227
00:49:51,480 --> 00:49:53,330
>> ΤΟΜΑΣ Reimers: Σας ευχαριστώ πολύ.

1228
00:49:53,330 --> 00:49:54,219