>> SPRECHER: Es stellt sich heraus, dass HTML nicht die einzige Sprache, die Sie verwenden können, innerhalb
einer Web-Seite.
Sie können etwas namens CSS zu verwenden, oder Cascading Style Sheets, wie gut.
CSS können Sie viel mehr angeben Gerade die Ästhetik eines Web-
Seite, inklusive Layout und Größen und Farben und Schriften und vieles mehr.
Zum Beispiel erstellen wir eine Web-Seite hier genannt css0 dass A für
Startseite für, sagen wir, John Harvard.
>> Auf dieser Seite, wir haben John Harvard Name, unter dem sein
eine schöne Nachricht für die Besucher, unter das wird eine Fußzeile zu sein, mit
sagen, einige Copyright-Informationen.
Dazu definieren wir drei Geschäftsbereiche für die Seite mit einem Tag
div genannt.
Klammer auf div, John Harvard, in der Nähe Halterung div, weitere offene Klammer div,
und jetzt werden wir etwas angeben wie, herzlich willkommen auf meiner Homepage!
Und lassen Sie uns diese zu schließen div, wie gut.
>> Und nun eine dritte und letzte div, Urheberrecht.
Nur kunstvoll zu sein, lassen Sie mich nun ein HTML- Einheit, ein Symbol, das für
ein Zeichen, dass man nicht anders Geben Sie auf Ihrer Tastatur.
Insbesondere werde ich tun Et-Zeichen, Pfund, 169, Semikolon.
Stellt sich heraus, das ist der Zahlencode für das Copyright-Symbol.
Dann lassen Sie uns angeben, John Harvard hier an der Unterseite.
Schließen wir das div und speichern Sie die Datei.
>> Nun, was ist das div-Tag?
Das div-Tag definiert einfach eine Division von der Seite, die im Wesentlichen eine
rechteckigen Bereich.
Also in diesem Moment in der Zeit, ich habe drei rechteckige Bereiche, eine auf
des anderen.
So jetzt, ist der Effekt fast so, als obwohl ich drei Absätze.
Aber wir werden nicht ganz so viel zu sehen Leerraum zwischen ihnen.
>> Lassen Sie diese Datei speichern, ändern Sie den Berechtigungen und werfen Sie einen Blick für ein
Moment in Chrome.
Chmod a + r CSS0.html.
Lassen Sie uns nun öffnen Chrome und Besuch http://localhost.CSS0.html.
In der Tat, hier ist eine Homepage für John Harvard.
Lassen Sie uns nun zu stilisieren es ein wenig mehr genau mit etwas CSS.
>> Zurück in gedit, mal in diese gehen erste div-Tag und fügen Sie einen Stil
Attribut angeben, dass ich möchte ein Schriftgröße von, sagen wir, 36 Pixel oder Pixel.
Und ich möchte das Gewicht dieser Schriftart fett statt der Standard zu sein,
Das ist normal.
Für das zweite div, lassen Sie uns angeben ein anderer Stil-Attribut, das eine hat
Schriftgröße von 24 Pixeln, so ein wenig kleiner.
Schließen Zitate nach dem Semikolon.
>> Schließlich, in dieser dritten div, wir tun Stil entspricht Zitat, Schriftgröße, und
sagen wir mal 12 Pixel dieser Zeit.
Close quote nach dem Semikolon.
Beachten Sie dann, dass ich zu haben scheinen, angegeben ein bisschen Stilisierung für
Jede dieser drei divs Verwendung, es stellt sich heraus, CSS.
In der Tat, die Syntax, die Sie sehen in zwischen den Anführungszeichen ist CSS,
speziell CSS-Eigenschaften mit Werten.
Und für den ersten Tag, wo ich zwei solche Eigenschaften, Schriftgröße und
Schriftschnitt, habe ich einfach getrennt sie mit einem Semikolon.
>> Jetzt, nur für Stil willen, ich ebenfalls enthalten Semikolons an
das Ende jeder Zeile.
Aber sie sind nicht unbedingt notwendig, insbesondere dann, wenn Sie nur eine
Eigenschaft definiert.
Lassen Sie uns nun die Datei speichern und laden in Chrome, und sehen, was
der Nettoeffekt ist.
Zurück in Chrome hier wir klicken auf Neu laden.
>> Jetzt haben wir ein wenig mehr interessant Homepage für John
Harvard, wobei die erste Leitung mit seinen Namen, der im Inneren von dem ist
erste div ist 36 Pixel hoch und auch Fettdruck, wobei die zweite Zeile,
die in dieser zweiten div ist, ist 24 Pixel hoch, aber nicht fett.
Und wobei die dritte Zeile in diesem Dritt div ist 12 Pixel hoch und auch
nicht fett gedruckt.
Aber angenommen, jetzt möchte ich zu verschieben all dieser Text über
so dass es zentriert.
>> Ich konnte jedes der einzelnen ausrichten divs als zentriert.
Aber leichter, konnte ich wickeln die drei divs innerhalb eines vierten div ein
Mutter div, so zu sprechen, und geben Sie daß die div und alle ihre
Nachkommen sein sollte Text ausgerichtet Zentrum?
Lassen Sie uns einen Blick.
>> Innerhalb von gedit, gehen wir zurück zu meinem Körper und einen neuen div bis oben mit
div, Stil entspricht Zitat unquote Textausrichtung Zentrum, in der Nähe
zitieren, nach dem Semikolon.
Und nun lassen Sie uns weiter und gehen den ganzen Gedankenstrich jener Linien, die wir eingegeben vor.
Und unter diesem dritten div, lassen schließen Sie dieses neue div.
>> Mit anderen Worten, weil die drei Original divs sind jetzt Kinder, so zu
zu sprechen, eines neuen Mutter div und ich habe angegeben, dass ich gerne ausrichten
Text der Mutter div in der Mitte von der Seite, wird diese Eigenschaft sein
durch alle diese Kinder vererbt.
In der Tat, wir die Datei speichern und Schauen Sie in einem Browser.
Lassen Sie uns in Chrome neu zu laden.
Und da haben wir es, eine noch schönere haben Startseite für John Harvard.