1
00:00:00,000 --> 00:00:05,660
>> [Musikwiedergabe]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Werfen wir also einen weiteren
Video über eine weitere Sprache zu sprechen.

3
00:00:08,740 --> 00:00:10,800
Dieses Mal werden wir über CSS zu sprechen.

4
00:00:10,800 --> 00:00:13,460
So CSS, kurz für ist
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
ist eine andere Sprache, die wir verwenden,
beim Bau von Websites.

6
00:00:16,149 --> 00:00:17,190
Denken Sie darüber nach wie diese.

7
00:00:17,190 --> 00:00:20,900
Wenn HTML ist, was wir verwenden, um das zu organisieren
Inhalt auf unserer Seite stellen wir wollen,

8
00:00:20,900 --> 00:00:25,390
CSS ist das Werkzeug, das wir verwenden in der Regel
anpassen, wie unsere Webseiten suchen,

9
00:00:25,390 --> 00:00:30,410
und wie das Benutzererlebnis wirklich
ist, die Interaktion mit unserer Website.

10
00:00:30,410 --> 00:00:32,535
>> Ähnlich wie HTML, CSS
keine Programmiersprache.

11
00:00:32,535 --> 00:00:33,451
Es muss nicht logisch.

12
00:00:33,451 --> 00:00:34,595
Es muss nicht Variablen.

13
00:00:34,595 --> 00:00:38,890
Es muss nicht jede Art von, dass
fließen bezogene Dinge, die C tut.

14
00:00:38,890 --> 00:00:40,150
Es ist eine Formensprache.

15
00:00:40,150 --> 00:00:42,810
Und seine Syntax ist ziemlich
einfach, und nur beschreibt,

16
00:00:42,810 --> 00:00:46,240
wie die Elemente unserer
Seite haben bestimmte HTML

17
00:00:46,240 --> 00:00:48,190
Elemente sollten geändert werden.

18
00:00:48,190 --> 00:00:51,170
Zu diesem Zweck, wenn Sie nicht haben
noch sah unser Video auf HTML,

19
00:00:51,170 --> 00:00:53,290
oder nicht vertraut sind
HTML Allgemeinen, die Sie

20
00:00:53,290 --> 00:00:57,430
Vielleicht möchten Sie einen Blick auf, dass zu nehmen
erstens, weil diese Diskussion von CSS

21
00:00:57,430 --> 00:01:00,700
wird am abhängen
einige HTML-Kenntnisse.

22
00:01:00,700 --> 00:01:03,740
>> Also hier ist ein wirklich
einfache CSS-Stylesheet.

23
00:01:03,740 --> 00:01:06,480
Selbst wenn Sie nie haben
bevor mit CSS programmiert,

24
00:01:06,480 --> 00:01:10,624
Ich bin mir ziemlich sicher, dass Sie herausfinden können,
genau das, was diese Sheet tut.

25
00:01:10,624 --> 00:01:11,290
Was tut es?

26
00:01:11,290 --> 00:01:15,470
Nun, mit dem Körper unserer Bahn aufgebracht
Seite, alles, was zwischen den Body-Tags

27
00:01:15,470 --> 00:01:19,631
unserem HTML, und es setzt das
Hintergrundfarbe für die Seite zu blau.

28
00:01:19,631 --> 00:01:21,130
Nun, es ist ein sehr einfaches Stylesheet.

29
00:01:21,130 --> 00:01:23,269
Es ist eigentlich sehr menschlich
freundliche Sprache, CSS.

30
00:01:23,269 --> 00:01:26,560
Also selbst wenn Sie habe es nie benutzt, bevor,
Sie könnten wahrscheinlich erraten, was das war.

31
00:01:26,560 --> 00:01:30,140
In der Tat, wenn wir eine Seite, wo geladen
Dieses Stylesheet irgendwie eingebettet ist,

32
00:01:30,140 --> 00:01:36,240
die Hintergrundfarbe von unserer Seite wäre
ist blau, und nicht die Standard-Weiß.

33
00:01:36,240 --> 00:01:37,670
>> So, wie wir bauen Sheets?

34
00:01:37,670 --> 00:01:39,700
Nun zunächst müssen wir uns
identifizieren einen Selektor.

35
00:01:39,700 --> 00:01:42,970
Im letzten Beispiel,
dass Wahl war Körper.

36
00:01:42,970 --> 00:01:45,050
Dann haben wir einen offenen
geschweifte Klammer, und wir sind

37
00:01:45,050 --> 00:01:48,410
geht die Definition der zu beginnen
Stylesheet für die Wahl.

38
00:01:48,410 --> 00:01:51,800
In zwischen den geschweiften Klammern, die wir
einfach nur eine Liste von Schlüsselwertpaaren.

39
00:01:51,800 --> 00:01:56,205
Der vorherige Wert Paar fand
Hintergrundfarbe blau Semikolon,

40
00:01:56,205 --> 00:01:57,830
aber wir konnten mehr und mehr von ihnen zu tun.

41
00:01:57,830 --> 00:02:02,330
Sie könnten mehrere Dinge, die Anwendung
zu diesem Tag, dieser Wahl Körper.

42
00:02:02,330 --> 00:02:05,960
Jedes von ihnen wird durch ein
Semikolon, und wir rufen Sie jeder von ihnen

43
00:02:05,960 --> 00:02:08,949
eine Erklärung, eine CSS-Deklaration.

44
00:02:08,949 --> 00:02:12,410
Wenn wir mit der ganzen Styling wir getan
möchte zu dieser bestimmten Tag gelten,

45
00:02:12,410 --> 00:02:15,300
Wir haben gerade eine schließende geschweifte
Klammer, um die Stylesheet zu beenden,

46
00:02:15,300 --> 00:02:19,640
und wir sind fertig Definition der Stylesheet
für diese bestimmte Auswahl.

47
00:02:19,640 --> 00:02:21,341
>> Was sind einige gemeinsame CSS Eigenschaften?

48
00:02:21,341 --> 00:02:23,590
Na ja, vielleicht Sie setzen wollen
ein Rahmen um etwas.

49
00:02:23,590 --> 00:02:26,850
So kann man sagen, Grenze,
das wäre Ihr Schlüssel zu sein,

50
00:02:26,850 --> 00:02:29,460
und dann Ihre Werte wäre,
was Stil, Farbe und Breite

51
00:02:29,460 --> 00:02:30,209
Sie wollen, dass es sein.

52
00:02:30,209 --> 00:02:33,530
So konnte der Stil eine solide sein
Linie, eine gepunktete Linie, eine gestrichelte Linie,

53
00:02:33,530 --> 00:02:36,020
eine Kammlinie, die Wellenlinie wäre.

54
00:02:36,020 --> 00:02:38,790
Vielleicht haben Sie es wollen
sein, blau oder schwarz oder grün.

55
00:02:38,790 --> 00:02:41,490
Vielleicht haben Sie es haben wollen
1 oder 2 oder 10 Pixel breit.

56
00:02:41,490 --> 00:02:43,254
Sie können all diese Dinge geben.

57
00:02:43,254 --> 00:02:46,420
Vielleicht, um den Hintergrund einstellen möchten Sie
Farbe Ihrer Seite in einer bestimmten Weise.

58
00:02:46,420 --> 00:02:49,215
Wir haben bereits gesehen, dass die Einstellung der
Hintergrund des Körpers blau zu sein.

59
00:02:49,215 --> 00:02:52,080
>> Dann können Sie ein Schlüsselwort zu verwenden,
so CSS hat bestimmte Farben

60
00:02:52,080 --> 00:02:55,950
die in sie eingebaut sind, blau, grün,
schwarz, eine sehr einfache Farben, die wir kennen.

61
00:02:55,950 --> 00:02:59,110
Aber Sie können auch festlegen, jede
Hex-Farbe, die Sie möchten.

62
00:02:59,110 --> 00:03:05,190
Recall, die Farben identifiziert werden können
durch einen Satz von drei Hex-Zahlen

63
00:03:05,190 --> 00:03:08,500
0-255, RG und B, die
Rot, Grün und Blau-Komponente.

64
00:03:08,500 --> 00:03:10,590
Und so können wir angeben,
jede Farbe wollen wir durch,

65
00:03:10,590 --> 00:03:15,520
anstatt blau oder grün oder schwarz,
mit Pfund und dann sechs Ziffern der hex,

66
00:03:15,520 --> 00:03:18,310
und das würde uns
die sechsstellige Farbe.

67
00:03:18,310 --> 00:03:19,850
Also das ist die Hintergrundfarbe.

68
00:03:19,850 --> 00:03:21,975
>> Wir haben auch den Vordergrund
Farbe, die in der Regel

69
00:03:21,975 --> 00:03:24,140
gehen, um den Text Ihrer Seite sein.

70
00:03:24,140 --> 00:03:28,850
Und man konnte in ähnlicher Weise zu tun, dass
mit Schlüsselwort und oder sechsstellige Hex.

71
00:03:28,850 --> 00:03:32,140
So können Sie jede mögliche Farbe, die Sie angeben,
will für den Text Ihrer Seite

72
00:03:32,140 --> 00:03:36,370
gegen einen bestimmten
Hintergrundfarbe, da oben.

73
00:03:36,370 --> 00:03:39,100
Sie können auch ändern und befassen
mit Schriftart, und die Art und Weise Text

74
00:03:39,100 --> 00:03:40,400
wird auf der Seite dargestellt.

75
00:03:40,400 --> 00:03:42,010
>> So können Sie Ihre Schriftgröße zu ändern.

76
00:03:42,010 --> 00:03:46,320
Sie können Schlüsselwörter, wie zusätzliche zu verwenden,
extra klein oder xx klein oder mittel,

77
00:03:46,320 --> 00:03:47,660
groß ist, und so weiter.

78
00:03:47,660 --> 00:03:50,750
Sie können feste Punkte zu verwenden, 10
Punkt, 12 Punkt, und so weiter.

79
00:03:50,750 --> 00:03:55,850
Sie können Prozentsätze, 80%, 20% verwenden,
wobei 100% ist die Standardschriftart

80
00:03:55,850 --> 00:03:59,220
Größe, die in der Regel gehen, um
so etwas wie 11 oder 12 Punkte.

81
00:03:59,220 --> 00:04:01,659
Oder Sie können sogar stützen sie ab
des letzten Schriftgröße.

82
00:04:01,659 --> 00:04:04,950
Wenn Sie gerade schrieb etwas und Sie wissen,
was Sie wollen, ist für sie kleiner zu sein,

83
00:04:04,950 --> 00:04:08,241
aber du weißt nicht, was genau Größe, die Sie
es haben wollen, nun, man nur sagen kann,

84
00:04:08,241 --> 00:04:09,330
Schriftgröße kleiner.

85
00:04:09,330 --> 00:04:14,344
Und es wird aus der Basis,
gerade oben, es ist Schriftgröße.

86
00:04:14,344 --> 00:04:15,760
Und Sie können kleinere oder größere.

87
00:04:15,760 --> 00:04:18,390
So gibt es eine Menge verschiedener
Möglichkeiten, um die Schriftgröße angeben.

88
00:04:18,390 --> 00:04:20,690
>> Sie können auch angeben, was
Schriftfamilie Sie wollen.

89
00:04:20,690 --> 00:04:23,360
Wenn Sie ein bestimmtes haben
Name, es gibt einen Weg in CSS--

90
00:04:23,360 --> 00:04:27,270
wir werden nicht, darüber zu sprechen
hier--, eine sehr bestimmte Schriftart festlegen

91
00:04:27,270 --> 00:04:28,980
und betten Sie ihn auf Ihrer Seite.

92
00:04:28,980 --> 00:04:30,620
Sie können auch generische Namen.

93
00:04:30,620 --> 00:04:33,540
Es gibt eine Menge von Web-Safe-Fonts
die in CSS-pre definiert sind.

94
00:04:33,540 --> 00:04:36,352
Und wenn Sie ein Benutzer von Microsoft
Büro in den letzten 20 Jahren,

95
00:04:36,352 --> 00:04:38,810
sind Sie wahrscheinlich vertraut
eine Menge von diesen Web-Safe-Fonts

96
00:04:38,810 --> 00:04:44,640
bereits, Times New Roman, Arial,
Courier New Georgia, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
und so weiter.

98
00:04:45,470 --> 00:04:47,170
Diejenigen, werden alle als Web-Safe-Fonts.

99
00:04:47,170 --> 00:04:49,169
Und tatsächlich, ein Teil der
Grund, warum sie kam zu sein

100
00:04:49,169 --> 00:04:54,140
wurde zu verwendenden web--, um jede Seite
hatte Zugang zu diesen Standardsatz von Schriftarten

101
00:04:54,140 --> 00:04:58,480
mit verschiedenen Serifen und alles
font Sachen, die wir nicht in zu bekommen,

102
00:04:58,480 --> 00:05:01,130
diese sind jedoch in der Regel
in Ihrem CSS zugänglich,

103
00:05:01,130 --> 00:05:04,029
auch wenn Sie nicht tun,
die Schriften anders definieren.

104
00:05:04,029 --> 00:05:07,070
Schließlich können Sie Ihren Text auszurichten,
statt wobei standardmäßig ausgerichtet

105
00:05:07,070 --> 00:05:09,310
auf der linken Seite, könnten Sie
richten sie nach rechts,

106
00:05:09,310 --> 00:05:13,740
oder du könntest ausrichten zentriert oder
gerechtfertigt, so dass es zu treffen beide Margen.

107
00:05:13,740 --> 00:05:16,800
So sind alle Optionen, die Sie verwenden können,
zu ändern, was Ihren Text sieht so aus,

108
00:05:16,800 --> 00:05:20,120
und wie es auf Ihrer Seite angezeigt.

109
00:05:20,120 --> 00:05:22,180
>> Ihre Wähler nicht
müssen nur Schlagworte zu sein.

110
00:05:22,180 --> 00:05:25,539
Wir haben vorher sah einen Body-Tag
Wahl und Tag-Selektor

111
00:05:25,539 --> 00:05:26,580
sieht wirklich einfach so.

112
00:05:26,580 --> 00:05:30,020
Sie nennen einen Tag, und dann
definieren ein Stylesheet für dieses Tag.

113
00:05:30,020 --> 00:05:32,660
Sie können aber auch etwas zu tun
rief ein ID-Selektor.

114
00:05:32,660 --> 00:05:34,390
Ein ID-Selektor sieht ziemlich ähnlich.

115
00:05:34,390 --> 00:05:38,100
Aber beachten Sie, dass jetzt ich bin nicht mit
ein HTML-Tag, ich bin mit, in diesem Fall,

116
00:05:38,100 --> 00:05:40,720
#unique oder hash einzigartig.

117
00:05:40,720 --> 00:05:42,930
Wenn Sie von unserem erinnern
Video auf HTML, sprachen wir

118
00:05:42,930 --> 00:05:45,620
darüber, wie Tags können Attribute haben.

119
00:05:45,620 --> 00:05:48,340
>> Und ein Attribut, das gilt
so ziemlich alle HTML-Tags,

120
00:05:48,340 --> 00:05:51,440
aber wir haben nicht darüber zu sprechen,
so etwas wie eine ID-Tag.

121
00:05:51,440 --> 00:05:55,250
Also diese besondere CSS würde
gelten nur für HTML-Tag, hat

122
00:05:55,250 --> 00:05:58,530
eine sehr spezifische ID, die Sie benannt haben.

123
00:05:58,530 --> 00:06:01,000
Also, wenn Sie irgendwo
in Ihrem Code irgendwo

124
00:06:01,000 --> 00:06:06,090
in Ihren HTML-Datei, einem Tag, und Sie
geben Sie als Attribut für dieses Tag,

125
00:06:06,090 --> 00:06:09,060
ID ist gleich einzigartig, diese
insbesondere Sheet

126
00:06:09,060 --> 00:06:15,030
hier gelten nur zwischen
dass Tag mit der ID einzigartig.

127
00:06:15,030 --> 00:06:17,180
>> Sie können auch etwas tun,
genannt Klassenauswahl.

128
00:06:17,180 --> 00:06:19,920
So zusätzlich zu den mit
ID-Attribute, können Sie auch

129
00:06:19,920 --> 00:06:23,130
fügen Sie ein Klassenattribut, um HTML-Tags.

130
00:06:23,130 --> 00:06:27,140
Und wenn Sie ein class-Attribut zu verwenden,
es können mehrere Markierungen verwendet werden.

131
00:06:27,140 --> 00:06:31,880
Also, wenn Sie ein paar Dinge, dass
sind ähnlich, vielleicht Sie sagen wollen,

132
00:06:31,880 --> 00:06:35,890
Open-Tag blah, blah, blah,
blah, Klasse gleich Studenten.

133
00:06:35,890 --> 00:06:38,190
Und dann diese besondere
Sheet gelten würde

134
00:06:38,190 --> 00:06:42,041
auf jeden Tag, dessen Klasse Schüler.

135
00:06:42,041 --> 00:06:44,290
In diesem Fall würden wir die eingestellt
Hintergrundfarbe auf gelb,

136
00:06:44,290 --> 00:06:46,706
und wir würden Deckkraft, die
ist ein Tag haben wir nicht darüber reden,

137
00:06:46,706 --> 00:06:52,510
sondern nur behandelt, wie transparent
etwas ist, bis 70%, in diesem Fall.

138
00:06:52,510 --> 00:06:54,430
>> Es gibt zwei Möglichkeiten,
Schreiben Stylesheets.

139
00:06:54,430 --> 00:06:56,680
Sie können sie zu schreiben
direkt in Ihr HTML

140
00:06:56,680 --> 00:06:59,690
indem Sie die Stylesheets
dazwischen Stil-Tags.

141
00:06:59,690 --> 00:07:03,850
Und diese Stil-Tags gehen Innenseite
die Kopf-Tags Ihrer Webseite.

142
00:07:03,850 --> 00:07:08,240
Die vielleicht mehr bevorzugte Art und Weise zu tun,
es ist, eine separate CSS-Datei zu schreiben,

143
00:07:08,240 --> 00:07:12,360
und verknüpfen Sie ihn auf Ihrer
Dokument mit Link-Tags.

144
00:07:12,360 --> 00:07:14,690
Link-Tags sind wieder
verschieden von Hyperlinks,

145
00:07:14,690 --> 00:07:16,760
Wenn Sie sich erinnern aus unserem Video einen HTML.

146
00:07:16,760 --> 00:07:19,030
Und Link-Tags sind, wie wir
Ziehen Sie in separaten Dateien.

147
00:07:19,030 --> 00:07:23,900
Es Art wie das Äquivalent von
die # include für Web-Programmierung.

148
00:07:23,900 --> 00:07:27,140
>> Werfen wir also einen Blick auf table.html.

149
00:07:27,140 --> 00:07:29,380
Wenn Sie von unserem erinnern
HTML-Video habe ich gezeigt,

150
00:07:29,380 --> 00:07:32,000
ein Beispiel für eine sehr
einfache Multiplikation

151
00:07:32,000 --> 00:07:35,160
Tabelle, die ziemlich sah
hässlich, und vielleicht gibt es

152
00:07:35,160 --> 00:07:38,650
ein Weg, es besser zu machen mit
CSS, um sie tatsächlich aussehen

153
00:07:38,650 --> 00:07:41,120
eher wie eine Multiplikation
Tisch, oder etwas

154
00:07:41,120 --> 00:07:43,730
Das ist nicht nur zusammengeklebt
ohne wirkliche Teilung

155
00:07:43,730 --> 00:07:45,532
zwischen den Zeilen und Spalten.

156
00:07:45,532 --> 00:07:47,490
Lassen Sie uns also über Kopf zu
CS50 IDE, und werfen Sie einen Blick

157
00:07:47,490 --> 00:07:50,780
an, wie CSS können, Art, zwicken
was wir vorher begann mit,

158
00:07:50,780 --> 00:07:53,290
und machen es zu etwas viel besser.

159
00:07:53,290 --> 00:07:55,650
>> Also haben wir in CS50 IDE sind
jetzt, und wenn nicht vertraut,

160
00:07:55,650 --> 00:07:58,710
wir werden in diesem Pull-
Tisch, dass HTML-Seite.

161
00:07:58,710 --> 00:08:01,090
Table.html Grunde
nur definiert den Inhalt

162
00:08:01,090 --> 00:08:05,044
eines multiple-- es sein sollte
eine vier mal vier Multiplikationstabelle.

163
00:08:05,044 --> 00:08:06,210
Es ist ziemlich einfach.

164
00:08:06,210 --> 00:08:09,410
Und wir würden, dass es würde denken,
sehen ziemlich gut organisiert.

165
00:08:09,410 --> 00:08:15,277
Aber in der Tat, wenn wir diese Seite anzuzeigen,
wir sehen, dass es ein bisschen hässlich, ist richtig?

166
00:08:15,277 --> 00:08:16,860
Offensichtlich müssen wir Zeilen und Spalten Sie hier.

167
00:08:16,860 --> 00:08:18,350
Es irgendeine Art von Trennung.

168
00:08:18,350 --> 00:08:20,040
Aber es ist nicht eine sinnvolle Trennung.

169
00:08:20,040 --> 00:08:23,105
Wir sind nicht eigentlich immer
zu viele Informationen hier.

170
00:08:23,105 --> 00:08:25,730
Und es gibt keine Trennung zwischen
die Zeilen und Spalten in Form

171
00:08:25,730 --> 00:08:28,460
der horizontalen oder vertikalen Regeln.

172
00:08:28,460 --> 00:08:31,530
Wir könnten wahrscheinlich machen diese
schauen ein bisschen besser.

173
00:08:31,530 --> 00:08:32,934
Also lassen Sie uns versuchen.

174
00:08:32,934 --> 00:08:34,559
Also werde ich diese Registerkarte hier oben zu schließen.

175
00:08:34,559 --> 00:08:37,434
Und ich werde meine table.html zu schließen,
und ich habe eine andere Version hier

176
00:08:37,434 --> 00:08:39,490
genannt table2.HTML.

177
00:08:39,490 --> 00:08:40,655
Wir werden, dass zu öffnen.

178
00:08:40,655 --> 00:08:42,530
Der Hauptteil der Seite ist
in etwa das Gleiche,

179
00:08:42,530 --> 00:08:44,238
aber ich habe mich verändert ein
etwas an der Spitze.

180
00:08:44,238 --> 00:08:47,132
Und ich werde hier nach oben.

181
00:08:47,132 --> 00:08:49,340
Beachten Sie, dass dieses Mal bin ich
mit eingebetteten Stil-Tags.

182
00:08:49,340 --> 00:08:53,550
Ich habe eine Art Tag geöffnet, und ich bin jetzt
Definieren eines CSS-Stylesheet nur im Inneren

183
00:08:53,550 --> 00:08:54,310
davon.

184
00:08:54,310 --> 00:08:56,310
Ich habe ein Stylesheet, das sagt, Tisch.

185
00:08:56,310 --> 00:08:58,170
Das ist mein Tag-Selektor.

186
00:08:58,170 --> 00:09:01,340
Ich bin nicht mit Punkt oder Hash,
was würde ich tun, wenn ich sein

187
00:09:01,340 --> 00:09:03,710
wurde unter Verwendung einer ID oder ein Klassenauswahl.

188
00:09:03,710 --> 00:09:06,190
Ich habe einen Tag-Selektor hier-- Tisch.

189
00:09:06,190 --> 00:09:10,090
Dieser Stil wird auf geht
gelten für jedes table-Tag.

190
00:09:10,090 --> 00:09:14,950
Anscheinend Ich möchte einen einen setzen
Pixel breite, solide blauen Rand,

191
00:09:14,950 --> 00:09:15,779
in meinem Tisch.

192
00:09:15,779 --> 00:09:18,320
Das klingt wie wäre es wahrscheinlich
helfen, die Situation, nicht wahr?

193
00:09:18,320 --> 00:09:20,320
Wir gehen zu müssen
sieht es viel besser.

194
00:09:20,320 --> 00:09:21,190
Also das ist in Ordnung.

195
00:09:21,190 --> 00:09:23,540
Stilistisch, ich habe gerade
hier eingebettet meinem Stylesheet.

196
00:09:23,540 --> 00:09:25,100
Es ist sicherlich ein
akzeptabler Weg, es zu tun.

197
00:09:25,100 --> 00:09:26,391
Mal sehen, wie das aussieht.

198
00:09:26,391 --> 00:09:29,790
Also werde ich hier unten zurückgehen, und
Ich werde meine table2.HTML Vorschau.

199
00:09:29,790 --> 00:09:32,430

200
00:09:32,430 --> 00:09:36,470
Nun, das ist nicht ganz das, was ich wollte,
aber es ist genau das, was wir gefragt.

201
00:09:36,470 --> 00:09:39,530
Wir sagten, dass dieser Stil
gehen, um zu unserem Tisch anzuwenden.

202
00:09:39,530 --> 00:09:43,810
Unsere Tabelle hat jetzt eine ein Pixel
breite, solide blauen Rand um ihn herum.

203
00:09:43,810 --> 00:09:46,237
Wir sind nicht eigentlich immer
an den Tabellenzellen.

204
00:09:46,237 --> 00:09:47,570
Wir sind noch ganz am Tisch.

205
00:09:47,570 --> 00:09:49,310
So arbeitete CSS.

206
00:09:49,310 --> 00:09:51,890
Es wurde angewandt a
Stylesheet zu unserem Tisch.

207
00:09:51,890 --> 00:09:53,981
Aber nicht ganz tun
was wir wollten, es zu tun.

208
00:09:53,981 --> 00:09:55,730
Wie kommen wir zu tun bekommen
was wir wollen, es zu tun?

209
00:09:55,730 --> 00:09:59,287
>> Nun, lassen Sie uns einen Blick auf eine weitere
Version davon in table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Also ich bin gerade dabei, diese Registerkarten zu schließen.

211
00:10:00,870 --> 00:10:03,890
Ich werde mehr als zurück zu gehen, hier meine
Dateibaum, und eröffnen table3.HTML.

212
00:10:03,890 --> 00:10:07,680

213
00:10:07,680 --> 00:10:10,350
Auch es wird hübsch aussehen
Ähnliche hier am Anfang.

214
00:10:10,350 --> 00:10:14,460
Aber Ankündigung, diesmal anstelle der Verwendung
ein Stylesheet direkt dort eingebettet,

215
00:10:14,460 --> 00:10:18,870
Ich werde in einem Link
Stylesheet mit dem Link-Tag.

216
00:10:18,870 --> 00:10:22,480
Also bin ich anscheinend die Verknüpfung in eine
Stylesheet aufgerufen tables.CSS,

217
00:10:22,480 --> 00:10:25,090
und dies auch gleich
Stylesheet nur gut means--,

218
00:10:25,090 --> 00:10:28,645
was ist diese Datei in Bezug auf das, was
Ich bin doing-- ist ein Stylesheet, das bin ich

219
00:10:28,645 --> 00:10:29,821
Hilfe für meine Seite.

220
00:10:29,821 --> 00:10:32,320
Also, wenn ich wirklich wollen, um zu sehen, was
Ich bin mit der CSS zu tun hier,

221
00:10:32,320 --> 00:10:35,010
Ich muss offen, dass zu gehen
table.CSS Datei als gut.

222
00:10:35,010 --> 00:10:37,490
So kommen wir wieder hierher gehen
wieder zu unserem Dateibaum.

223
00:10:37,490 --> 00:10:38,660
Es gibt table.CSS.

224
00:10:38,660 --> 00:10:40,490
Wir werden es aufspringen.

225
00:10:40,490 --> 00:10:43,070
Nun sehen wir ein wenig von der CSS.

226
00:10:43,070 --> 00:10:45,630
Anscheinend habe ich ein paar
Dinge, die sich hier.

227
00:10:45,630 --> 00:10:48,950
Ich möchte offenbar eine fünf setzen
Pixel breite, solide rotem Rand,

228
00:10:48,950 --> 00:10:50,287
um meinen Tisch.

229
00:10:50,287 --> 00:10:52,870
Wir wissen bereits, dass das wird
, sich nur auf den Umfang zu gehen.

230
00:10:52,870 --> 00:10:56,180
Wir sahen, dass in table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Mit jeder Zeile, Ich
anscheinend wollen angeben

232
00:10:58,770 --> 00:11:01,950
dass die Zeilenhöhe ist 50 Pixel hoch.

233
00:11:01,950 --> 00:11:05,680
Also für jede Zeile, daran erinnern,
das ist, was die tr-Tag tut,

234
00:11:05,680 --> 00:11:08,550
Ich mache es 50 Pixel hoch.

235
00:11:08,550 --> 00:11:09,804
>> Schließlich habe ich diesen Kommentar.

236
00:11:09,804 --> 00:11:11,470
Und das ist, wie wir Kommentare in CSS zu machen.

237
00:11:11,470 --> 00:11:16,174
Es ist sehr ähnlich zu Block zu ergreifen
Kommentare Syntax Schrägstrich Stern.

238
00:11:16,174 --> 00:11:17,090
Der gesamte Text Sie wollen.

239
00:11:17,090 --> 00:11:19,470
Es gibt keinen Schrägstrich Schrägstrich aber in CSS.

240
00:11:19,470 --> 00:11:23,400
Für kurze Inline-Kommentare, haben wir
um dieses spezielle Format hier verwenden.

241
00:11:23,400 --> 00:11:26,830
Es sieht aus wie ich tue ein
Menge Dinge in meinem td-Tags.

242
00:11:26,830 --> 00:11:29,710
Denken Sie daran, td-Tags oder Tisch
Daten, die wirklich nur

243
00:11:29,710 --> 00:11:32,210
die Spalten Innenseite
unseren Reihen, und anscheinend

244
00:11:32,210 --> 00:11:35,090
für jedes Daten
in meinem Tisch, ich will

245
00:11:35,090 --> 00:11:38,850
die Hintergrundfarbe zu setzen
schwarz sein, um die Farbe Weiß zu sein,

246
00:11:38,850 --> 00:11:40,320
Farbe Vordergrundfarbe.

247
00:11:40,320 --> 00:11:42,360
Also das sein wird,
der Text auf meiner Seite.

248
00:11:42,360 --> 00:11:45,140
Ich möchte große Schrift, 22
Punkt-Schrift, und ich möchte,

249
00:11:45,140 --> 00:11:47,001
es an der Schriftfamilie sein, Georgia.

250
00:11:47,001 --> 00:11:48,750
So bin ich nicht zu gehen
haben die Standard-Schriftart.

251
00:11:48,750 --> 00:11:51,820
Ich werde Georgien, geben Sie die
ist eine jener Web-Safe-Fonts

252
00:11:51,820 --> 00:11:53,830
dass wir bisher gesehen haben.

253
00:11:53,830 --> 00:11:57,284
Ich möchte meinen Text ausgerichtet werden
zentral in der Mitte des Kastens,

254
00:11:57,284 --> 00:11:59,450
Ich will nicht, es zu gelassen werden
ausgerichtet oder rechts ausgerichtet.

255
00:11:59,450 --> 00:12:03,461
Und ich möchte, dass meine Spaltenbreite
auf 50 Pixel in der Breite als auch.

256
00:12:03,461 --> 00:12:05,210
Werfen wir einen Blick auf
wie das aussieht,

257
00:12:05,210 --> 00:12:07,470
und sehen, ob dies vielleicht eine Verbesserung.

258
00:12:07,470 --> 00:12:12,890
So werde ich zu table3.HTML, gehen die
Rückruf umfasst table.CSS als Bindeglied,

259
00:12:12,890 --> 00:12:14,830
und wir werden es in der Vorschau.

260
00:12:14,830 --> 00:12:16,800
Das ist viel besser, oder?

261
00:12:16,800 --> 00:12:20,004
Dies wird tatsächlich beginnen, um einen Blick
viel mehr wie eine Multiplikationstabelle.

262
00:12:20,004 --> 00:12:21,920
Ich habe, dass die roten Rand
um meinen Tisch, aber jetzt

263
00:12:21,920 --> 00:12:26,700
Ich habe auch, dass angegebenen
jede Zeile 50 Pixel breit,

264
00:12:26,700 --> 00:12:30,220
oder es ist 50 Pixel tall-- Entschuldigung
mich- jede Spalte ist 50 Pixel breit.

265
00:12:30,220 --> 00:12:34,251
Die Daten in jeder Spalte, und erst
die Daten, hat einen schwarzen Hintergrund.

266
00:12:34,251 --> 00:12:36,000
Also das ist, warum diejenigen,
weiße Linien sind da.

267
00:12:36,000 --> 00:12:38,836
Da der Raum in
zwischen allen jenen Zellen,

268
00:12:38,836 --> 00:12:40,710
es ist nicht eine Grenze in
und für sich, es ist einfach

269
00:12:40,710 --> 00:12:43,170
Ich bin nur in der Füllung
Zellen, die eigentlich

270
00:12:43,170 --> 00:12:46,310
macht die Grenzen der Tabelle, die
anscheinend die ganze Zeit existiert,

271
00:12:46,310 --> 00:12:47,887
war nur dünne weiße Linien.

272
00:12:47,887 --> 00:12:48,720
Jetzt sind sie sichtbar.

273
00:12:48,720 --> 00:12:50,380
Jetzt haben sie Pop weg auf dem Bildschirm.

274
00:12:50,380 --> 00:12:52,920
Und so ist dies eine sehr einfache
Stylesheet, die ich angelegt habe,

275
00:12:52,920 --> 00:12:56,850
und jetzt ist mein Tisch sieht viel mehr wie
eine vier mal vier Multiplikationstabelle,

276
00:12:56,850 --> 00:13:00,950
statt einer nur wirre Durcheinander, in dem
alles klar Zeilen und Spalten,

277
00:13:00,950 --> 00:13:03,717
aber nicht super gut organisiert.

278
00:13:03,717 --> 00:13:06,800
Wir sind wirklich nur die Spitze des Eisbergs
was man mit CSS hier tun.

279
00:13:06,800 --> 00:13:10,330
Glücklicherweise ist die CSS-Dokumentation
ist ziemlich einfach.

280
00:13:10,330 --> 00:13:14,000
Hier finden Sie einige der Verwendung ihrer
Attribute, ziemlich häufig.

281
00:13:14,000 --> 00:13:16,087
Die, die wir gesprochen
weiter oben in diesem Video.

282
00:13:16,087 --> 00:13:18,170
Es gibt einige, dass Sie
Wahrscheinlich werden nicht alle.

283
00:13:18,170 --> 00:13:19,469
Und das ist auch in Ordnung.

284
00:13:19,469 --> 00:13:22,010
Aber genau wissen, dass es eine
Menge an Dokumentation gibt.

285
00:13:22,010 --> 00:13:25,110
Also selbst wenn wir nicht alles abdecken,
Sie sind sicherlich nicht allein gelassen.

286
00:13:25,110 --> 00:13:26,780
Aber CSS macht wirklich Spaß
zu experimentieren.

287
00:13:26,780 --> 00:13:29,040
Und ich würde empfehlen Ihnen dringend,
spielen, um mit Ihrer Web-Seiten,

288
00:13:29,040 --> 00:13:32,180
und sehen, wie können Sie sie zu machen
sehen und fühlen, um den Benutzer zu verbessern

289
00:13:32,180 --> 00:13:34,790
Erfahrung der Besuch Ihrer Seite.

290
00:13:34,790 --> 00:13:35,710
Ich bin Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
Dies ist CS50.

292
00:13:37,980 --> 00:13:40,151