1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> SPRECHER: Es stellt sich heraus, dass HTML nicht
die einzige Sprache, die Sie verwenden können, innerhalb

3
00:00:03,310 --> 00:00:03,895
einer Web-Seite.

4
00:00:03,895 --> 00:00:08,100
Sie können etwas namens CSS zu verwenden, oder
Cascading Style Sheets, wie gut.

5
00:00:08,100 --> 00:00:12,120
CSS können Sie viel mehr angeben
Gerade die Ästhetik eines Web-

6
00:00:12,120 --> 00:00:16,930
Seite, inklusive Layout und Größen und
Farben und Schriften und vieles mehr.

7
00:00:16,930 --> 00:00:20,820
Zum Beispiel erstellen wir eine Web-Seite
hier genannt css0 dass A für

8
00:00:20,820 --> 00:00:22,740
Startseite für, sagen wir, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Auf dieser Seite, wir haben John Harvard
Name, unter dem sein

10
00:00:25,480 --> 00:00:28,500
eine schöne Nachricht für die Besucher, unter
das wird eine Fußzeile zu sein, mit

11
00:00:28,500 --> 00:00:30,590
sagen, einige Copyright-Informationen.

12
00:00:30,590 --> 00:00:34,650
Dazu definieren wir drei Geschäftsbereiche
für die Seite mit einem Tag

13
00:00:34,650 --> 00:00:35,670
div genannt.

14
00:00:35,670 --> 00:00:43,880
Klammer auf div, John Harvard, in der Nähe
Halterung div, weitere offene Klammer div,

15
00:00:43,880 --> 00:00:48,330
und jetzt werden wir etwas angeben
wie, herzlich willkommen auf meiner Homepage!

16
00:00:48,330 --> 00:00:50,420
Und lassen Sie uns diese zu schließen div, wie gut.

17
00:00:50,420 --> 00:00:53,700
>> Und nun eine dritte und letzte
div, Urheberrecht.

18
00:00:53,700 --> 00:00:58,250
Nur kunstvoll zu sein, lassen Sie mich nun ein HTML-
Einheit, ein Symbol, das für

19
00:00:58,250 --> 00:01:01,140
ein Zeichen, dass man nicht anders
Geben Sie auf Ihrer Tastatur.

20
00:01:01,140 --> 00:01:07,490
Insbesondere werde ich tun
Et-Zeichen, Pfund, 169, Semikolon.

21
00:01:07,490 --> 00:01:10,620
Stellt sich heraus, das ist der Zahlencode
für das Copyright-Symbol.

22
00:01:10,620 --> 00:01:14,260
Dann lassen Sie uns angeben, John Harvard
hier an der Unterseite.

23
00:01:14,260 --> 00:01:17,180
Schließen wir das div und speichern Sie die Datei.

24
00:01:17,180 --> 00:01:18,910
>> Nun, was ist das div-Tag?

25
00:01:18,910 --> 00:01:21,970
Das div-Tag definiert einfach eine Division
von der Seite, die im Wesentlichen eine

26
00:01:21,970 --> 00:01:23,310
rechteckigen Bereich.

27
00:01:23,310 --> 00:01:26,850
Also in diesem Moment in der Zeit, ich habe drei
rechteckige Bereiche, eine auf

28
00:01:26,850 --> 00:01:27,620
des anderen.

29
00:01:27,620 --> 00:01:30,610
So jetzt, ist der Effekt fast so, als
obwohl ich drei Absätze.

30
00:01:30,610 --> 00:01:33,490
Aber wir werden nicht ganz so viel zu sehen
Leerraum zwischen ihnen.

31
00:01:33,490 --> 00:01:36,170
>> Lassen Sie diese Datei speichern, ändern Sie den
Berechtigungen und werfen Sie einen Blick für ein

32
00:01:36,170 --> 00:01:37,990
Moment in Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Lassen Sie uns nun öffnen Chrome und Besuch
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
In der Tat, hier ist eine Homepage
für John Harvard.

36
00:01:54,630 --> 00:01:59,370
Lassen Sie uns nun zu stilisieren es ein wenig mehr
genau mit etwas CSS.

37
00:01:59,370 --> 00:02:03,510
>> Zurück in gedit, mal in diese gehen
erste div-Tag und fügen Sie einen Stil

38
00:02:03,510 --> 00:02:11,060
Attribut angeben, dass ich möchte ein
Schriftgröße von, sagen wir, 36 Pixel oder Pixel.

39
00:02:11,060 --> 00:02:15,650
Und ich möchte das Gewicht dieser Schriftart
fett statt der Standard zu sein,

40
00:02:15,650 --> 00:02:16,980
Das ist normal.

41
00:02:16,980 --> 00:02:21,170
Für das zweite div, lassen Sie uns angeben
ein anderer Stil-Attribut, das eine hat

42
00:02:21,170 --> 00:02:25,550
Schriftgröße von 24 Pixeln, so
ein wenig kleiner.

43
00:02:25,550 --> 00:02:28,410
Schließen Zitate nach dem Semikolon.

44
00:02:28,410 --> 00:02:33,255
>> Schließlich, in dieser dritten div, wir tun
Stil entspricht Zitat, Schriftgröße, und

45
00:02:33,255 --> 00:02:35,340
sagen wir mal 12 Pixel dieser Zeit.

46
00:02:35,340 --> 00:02:37,280
Close quote nach dem Semikolon.

47
00:02:37,280 --> 00:02:40,200
Beachten Sie dann, dass ich zu haben scheinen,
angegeben ein bisschen Stilisierung für

48
00:02:40,200 --> 00:02:43,770
Jede dieser drei divs Verwendung,
es stellt sich heraus, CSS.

49
00:02:43,770 --> 00:02:47,820
In der Tat, die Syntax, die Sie sehen in
zwischen den Anführungszeichen ist CSS,

50
00:02:47,820 --> 00:02:50,620
speziell CSS-Eigenschaften
mit Werten.

51
00:02:50,620 --> 00:02:53,910
Und für den ersten Tag, wo ich
zwei solche Eigenschaften, Schriftgröße und

52
00:02:53,910 --> 00:02:57,290
Schriftschnitt, habe ich einfach getrennt
sie mit einem Semikolon.

53
00:02:57,290 --> 00:02:59,940
>> Jetzt, nur für Stil willen, ich
ebenfalls enthalten Semikolons an

54
00:02:59,940 --> 00:03:00,880
das Ende jeder Zeile.

55
00:03:00,880 --> 00:03:04,270
Aber sie sind nicht unbedingt notwendig,
insbesondere dann, wenn Sie nur eine

56
00:03:04,270 --> 00:03:05,580
Eigenschaft definiert.

57
00:03:05,580 --> 00:03:08,370
Lassen Sie uns nun die Datei speichern und laden
in Chrome, und sehen, was

58
00:03:08,370 --> 00:03:11,000
der Nettoeffekt ist.

59
00:03:11,000 --> 00:03:13,470
Zurück in Chrome hier
wir klicken auf Neu laden.

60
00:03:13,470 --> 00:03:15,800
>> Jetzt haben wir ein wenig mehr interessant
Homepage für John

61
00:03:15,800 --> 00:03:19,000
Harvard, wobei die erste Leitung mit
seinen Namen, der im Inneren von dem ist

62
00:03:19,000 --> 00:03:23,470
erste div ist 36 Pixel hoch und auch
Fettdruck, wobei die zweite Zeile,

63
00:03:23,470 --> 00:03:27,340
die in dieser zweiten div ist, ist 24
Pixel hoch, aber nicht fett.

64
00:03:27,340 --> 00:03:31,500
Und wobei die dritte Zeile in diesem Dritt
div ist 12 Pixel hoch und auch

65
00:03:31,500 --> 00:03:32,610
nicht fett gedruckt.

66
00:03:32,610 --> 00:03:35,380
Aber angenommen, jetzt möchte ich zu verschieben
all dieser Text über

67
00:03:35,380 --> 00:03:36,650
so dass es zentriert.

68
00:03:36,650 --> 00:03:40,480
>> Ich konnte jedes der einzelnen ausrichten
divs als zentriert.

69
00:03:40,480 --> 00:03:45,330
Aber leichter, konnte ich wickeln die
drei divs innerhalb eines vierten div ein

70
00:03:45,330 --> 00:03:49,360
Mutter div, so zu sprechen, und geben Sie
daß die div und alle ihre

71
00:03:49,360 --> 00:03:52,610
Nachkommen sein sollte
Text ausgerichtet Zentrum?

72
00:03:52,610 --> 00:03:54,120
Lassen Sie uns einen Blick.

73
00:03:54,120 --> 00:03:58,510
>> Innerhalb von gedit, gehen wir zurück zu meinem
Körper und einen neuen div bis oben mit

74
00:03:58,510 --> 00:04:04,460
div, Stil entspricht Zitat unquote
Textausrichtung Zentrum, in der Nähe

75
00:04:04,460 --> 00:04:06,250
zitieren, nach dem Semikolon.

76
00:04:06,250 --> 00:04:10,280
Und nun lassen Sie uns weiter und gehen den ganzen Gedankenstrich
jener Linien, die wir eingegeben vor.

77
00:04:10,280 --> 00:04:15,040
Und unter diesem dritten div, lassen
schließen Sie dieses neue div.

78
00:04:15,040 --> 00:04:18,829
>> Mit anderen Worten, weil die drei
Original divs sind jetzt Kinder, so zu

79
00:04:18,829 --> 00:04:22,110
zu sprechen, eines neuen Mutter div und ich habe
angegeben, dass ich gerne ausrichten

80
00:04:22,110 --> 00:04:26,140
Text der Mutter div in der Mitte
von der Seite, wird diese Eigenschaft sein

81
00:04:26,140 --> 00:04:28,290
durch alle diese Kinder vererbt.

82
00:04:28,290 --> 00:04:32,370
In der Tat, wir die Datei speichern und
Schauen Sie in einem Browser.

83
00:04:32,370 --> 00:04:34,650
Lassen Sie uns in Chrome neu zu laden.

84
00:04:34,650 --> 00:04:37,540
Und da haben wir es, eine noch schönere haben
Startseite für John Harvard.

85
00:04:37,540 --> 00:04:39,872