[Musikwiedergabe] 

DOUG LLOYD: Werfen wir also einen weiteren Video über eine weitere Sprache zu sprechen. Dieses Mal werden wir über CSS zu sprechen. So CSS, kurz für ist Cascading Style Sheets, ist eine andere Sprache, die wir verwenden, beim Bau von Websites. Denken Sie darüber nach wie diese. Wenn HTML ist, was wir verwenden, um das zu organisieren Inhalt auf unserer Seite stellen wir wollen, CSS ist das Werkzeug, das wir verwenden in der Regel anpassen, wie unsere Webseiten suchen, und wie das Benutzererlebnis wirklich ist, die Interaktion mit unserer Website. 

Ähnlich wie HTML, CSS keine Programmiersprache. Es muss nicht logisch. Es muss nicht Variablen. Es muss nicht jede Art von, dass fließen bezogene Dinge, die C tut. Es ist eine Formensprache. Und seine Syntax ist ziemlich einfach, und nur beschreibt, wie die Elemente unserer Seite haben bestimmte HTML Elemente sollten geändert werden. Zu diesem Zweck, wenn Sie nicht haben noch sah unser Video auf HTML, oder nicht vertraut sind HTML Allgemeinen, die Sie Vielleicht möchten Sie einen Blick auf, dass zu nehmen erstens, weil diese Diskussion von CSS wird am abhängen einige HTML-Kenntnisse. 

Also hier ist ein wirklich einfache CSS-Stylesheet. Selbst wenn Sie nie haben bevor mit CSS programmiert, Ich bin mir ziemlich sicher, dass Sie herausfinden können, genau das, was diese Sheet tut. Was tut es? Nun, mit dem Körper unserer Bahn aufgebracht Seite, alles, was zwischen den Body-Tags unserem HTML, und es setzt das Hintergrundfarbe für die Seite zu blau. Nun, es ist ein sehr einfaches Stylesheet. Es ist eigentlich sehr menschlich freundliche Sprache, CSS. Also selbst wenn Sie habe es nie benutzt, bevor, Sie könnten wahrscheinlich erraten, was das war. In der Tat, wenn wir eine Seite, wo geladen Dieses Stylesheet irgendwie eingebettet ist, die Hintergrundfarbe von unserer Seite wäre ist blau, und nicht die Standard-Weiß. 

So, wie wir bauen Sheets? Nun zunächst müssen wir uns identifizieren einen Selektor. Im letzten Beispiel, dass Wahl war Körper. Dann haben wir einen offenen geschweifte Klammer, und wir sind geht die Definition der zu beginnen Stylesheet für die Wahl. In zwischen den geschweiften Klammern, die wir einfach nur eine Liste von Schlüsselwertpaaren. Der vorherige Wert Paar fand Hintergrundfarbe blau Semikolon, aber wir konnten mehr und mehr von ihnen zu tun. Sie könnten mehrere Dinge, die Anwendung zu diesem Tag, dieser Wahl Körper. Jedes von ihnen wird durch ein Semikolon, und wir rufen Sie jeder von ihnen eine Erklärung, eine CSS-Deklaration. Wenn wir mit der ganzen Styling wir getan möchte zu dieser bestimmten Tag gelten, Wir haben gerade eine schließende geschweifte Klammer, um die Stylesheet zu beenden, und wir sind fertig Definition der Stylesheet für diese bestimmte Auswahl. 

Was sind einige gemeinsame CSS Eigenschaften? Na ja, vielleicht Sie setzen wollen ein Rahmen um etwas. So kann man sagen, Grenze, das wäre Ihr Schlüssel zu sein, und dann Ihre Werte wäre, was Stil, Farbe und Breite Sie wollen, dass es sein. So konnte der Stil eine solide sein Linie, eine gepunktete Linie, eine gestrichelte Linie, eine Kammlinie, die Wellenlinie wäre. Vielleicht haben Sie es wollen sein, blau oder schwarz oder grün. Vielleicht haben Sie es haben wollen 1 oder 2 oder 10 Pixel breit. Sie können all diese Dinge geben. Vielleicht, um den Hintergrund einstellen möchten Sie Farbe Ihrer Seite in einer bestimmten Weise. Wir haben bereits gesehen, dass die Einstellung der Hintergrund des Körpers blau zu sein. 

Dann können Sie ein Schlüsselwort zu verwenden, so CSS hat bestimmte Farben die in sie eingebaut sind, blau, grün, schwarz, eine sehr einfache Farben, die wir kennen. Aber Sie können auch festlegen, jede Hex-Farbe, die Sie möchten. Recall, die Farben identifiziert werden können durch einen Satz von drei Hex-Zahlen 0-255, RG und B, die Rot, Grün und Blau-Komponente. Und so können wir angeben, jede Farbe wollen wir durch, anstatt blau oder grün oder schwarz, mit Pfund und dann sechs Ziffern der hex, und das würde uns die sechsstellige Farbe. Also das ist die Hintergrundfarbe. 

Wir haben auch den Vordergrund Farbe, die in der Regel gehen, um den Text Ihrer Seite sein. Und man konnte in ähnlicher Weise zu tun, dass mit Schlüsselwort und oder sechsstellige Hex. So können Sie jede mögliche Farbe, die Sie angeben, will für den Text Ihrer Seite gegen einen bestimmten Hintergrundfarbe, da oben. Sie können auch ändern und befassen mit Schriftart, und die Art und Weise Text wird auf der Seite dargestellt. 

So können Sie Ihre Schriftgröße zu ändern. Sie können Schlüsselwörter, wie zusätzliche zu verwenden, extra klein oder xx klein oder mittel, groß ist, und so weiter. Sie können feste Punkte zu verwenden, 10 Punkt, 12 Punkt, und so weiter. Sie können Prozentsätze, 80%, 20% verwenden, wobei 100% ist die Standardschriftart Größe, die in der Regel gehen, um so etwas wie 11 oder 12 Punkte. Oder Sie können sogar stützen sie ab des letzten Schriftgröße. Wenn Sie gerade schrieb etwas und Sie wissen, was Sie wollen, ist für sie kleiner zu sein, aber du weißt nicht, was genau Größe, die Sie es haben wollen, nun, man nur sagen kann, Schriftgröße kleiner. Und es wird aus der Basis, gerade oben, es ist Schriftgröße. Und Sie können kleinere oder größere. So gibt es eine Menge verschiedener Möglichkeiten, um die Schriftgröße angeben. 

Sie können auch angeben, was Schriftfamilie Sie wollen. Wenn Sie ein bestimmtes haben Name, es gibt einen Weg in CSS-- wir werden nicht, darüber zu sprechen hier--, eine sehr bestimmte Schriftart festlegen und betten Sie ihn auf Ihrer Seite. Sie können auch generische Namen. Es gibt eine Menge von Web-Safe-Fonts die in CSS-pre definiert sind. Und wenn Sie ein Benutzer von Microsoft Büro in den letzten 20 Jahren, sind Sie wahrscheinlich vertraut eine Menge von diesen Web-Safe-Fonts bereits, Times New Roman, Arial, Courier New Georgia, Tahoma, Verdana, und so weiter. Diejenigen, werden alle als Web-Safe-Fonts. Und tatsächlich, ein Teil der Grund, warum sie kam zu sein wurde zu verwendenden web--, um jede Seite hatte Zugang zu diesen Standardsatz von Schriftarten mit verschiedenen Serifen und alles font Sachen, die wir nicht in zu bekommen, diese sind jedoch in der Regel in Ihrem CSS zugänglich, auch wenn Sie nicht tun, die Schriften anders definieren. Schließlich können Sie Ihren Text auszurichten, statt wobei standardmäßig ausgerichtet auf der linken Seite, könnten Sie richten sie nach rechts, oder du könntest ausrichten zentriert oder gerechtfertigt, so dass es zu treffen beide Margen. So sind alle Optionen, die Sie verwenden können, zu ändern, was Ihren Text sieht so aus, und wie es auf Ihrer Seite angezeigt. 

Ihre Wähler nicht müssen nur Schlagworte zu sein. Wir haben vorher sah einen Body-Tag Wahl und Tag-Selektor sieht wirklich einfach so. Sie nennen einen Tag, und dann definieren ein Stylesheet für dieses Tag. Sie können aber auch etwas zu tun rief ein ID-Selektor. Ein ID-Selektor sieht ziemlich ähnlich. Aber beachten Sie, dass jetzt ich bin nicht mit ein HTML-Tag, ich bin mit, in diesem Fall, #unique oder hash einzigartig. Wenn Sie von unserem erinnern Video auf HTML, sprachen wir darüber, wie Tags können Attribute haben. 

Und ein Attribut, das gilt so ziemlich alle HTML-Tags, aber wir haben nicht darüber zu sprechen, so etwas wie eine ID-Tag. Also diese besondere CSS würde gelten nur für HTML-Tag, hat eine sehr spezifische ID, die Sie benannt haben. Also, wenn Sie irgendwo in Ihrem Code irgendwo in Ihren HTML-Datei, einem Tag, und Sie geben Sie als Attribut für dieses Tag, ID ist gleich einzigartig, diese insbesondere Sheet hier gelten nur zwischen dass Tag mit der ID einzigartig. 

Sie können auch etwas tun, genannt Klassenauswahl. So zusätzlich zu den mit ID-Attribute, können Sie auch fügen Sie ein Klassenattribut, um HTML-Tags. Und wenn Sie ein class-Attribut zu verwenden, es können mehrere Markierungen verwendet werden. Also, wenn Sie ein paar Dinge, dass sind ähnlich, vielleicht Sie sagen wollen, Open-Tag blah, blah, blah, blah, Klasse gleich Studenten. Und dann diese besondere Sheet gelten würde auf jeden Tag, dessen Klasse Schüler. In diesem Fall würden wir die eingestellt Hintergrundfarbe auf gelb, und wir würden Deckkraft, die ist ein Tag haben wir nicht darüber reden, sondern nur behandelt, wie transparent etwas ist, bis 70%, in diesem Fall. 

Es gibt zwei Möglichkeiten, Schreiben Stylesheets. Sie können sie zu schreiben direkt in Ihr HTML indem Sie die Stylesheets dazwischen Stil-Tags. Und diese Stil-Tags gehen Innenseite die Kopf-Tags Ihrer Webseite. Die vielleicht mehr bevorzugte Art und Weise zu tun, es ist, eine separate CSS-Datei zu schreiben, und verknüpfen Sie ihn auf Ihrer Dokument mit Link-Tags. Link-Tags sind wieder verschieden von Hyperlinks, Wenn Sie sich erinnern aus unserem Video einen HTML. Und Link-Tags sind, wie wir Ziehen Sie in separaten Dateien. Es Art wie das Äquivalent von die # include für Web-Programmierung. 

Werfen wir also einen Blick auf table.html. Wenn Sie von unserem erinnern HTML-Video habe ich gezeigt, ein Beispiel für eine sehr einfache Multiplikation Tabelle, die ziemlich sah hässlich, und vielleicht gibt es ein Weg, es besser zu machen mit CSS, um sie tatsächlich aussehen eher wie eine Multiplikation Tisch, oder etwas Das ist nicht nur zusammengeklebt ohne wirkliche Teilung zwischen den Zeilen und Spalten. Lassen Sie uns also über Kopf zu CS50 IDE, und werfen Sie einen Blick an, wie CSS können, Art, zwicken was wir vorher begann mit, und machen es zu etwas viel besser. 

Also haben wir in CS50 IDE sind jetzt, und wenn nicht vertraut, wir werden in diesem Pull- Tisch, dass HTML-Seite. Table.html Grunde nur definiert den Inhalt eines multiple-- es sein sollte eine vier mal vier Multiplikationstabelle. Es ist ziemlich einfach. Und wir würden, dass es würde denken, sehen ziemlich gut organisiert. Aber in der Tat, wenn wir diese Seite anzuzeigen, wir sehen, dass es ein bisschen hässlich, ist richtig? Offensichtlich müssen wir Zeilen und Spalten Sie hier. Es irgendeine Art von Trennung. Aber es ist nicht eine sinnvolle Trennung. Wir sind nicht eigentlich immer zu viele Informationen hier. Und es gibt keine Trennung zwischen die Zeilen und Spalten in Form der horizontalen oder vertikalen Regeln. Wir könnten wahrscheinlich machen diese schauen ein bisschen besser. Also lassen Sie uns versuchen. Also werde ich diese Registerkarte hier oben zu schließen. Und ich werde meine table.html zu schließen, und ich habe eine andere Version hier genannt table2.HTML. Wir werden, dass zu öffnen. Der Hauptteil der Seite ist in etwa das Gleiche, aber ich habe mich verändert ein etwas an der Spitze. Und ich werde hier nach oben. Beachten Sie, dass dieses Mal bin ich mit eingebetteten Stil-Tags. Ich habe eine Art Tag geöffnet, und ich bin jetzt Definieren eines CSS-Stylesheet nur im Inneren davon. Ich habe ein Stylesheet, das sagt, Tisch. Das ist mein Tag-Selektor. Ich bin nicht mit Punkt oder Hash, was würde ich tun, wenn ich sein wurde unter Verwendung einer ID oder ein Klassenauswahl. Ich habe einen Tag-Selektor hier-- Tisch. Dieser Stil wird auf geht gelten für jedes table-Tag. Anscheinend Ich möchte einen einen setzen Pixel breite, solide blauen Rand, in meinem Tisch. Das klingt wie wäre es wahrscheinlich helfen, die Situation, nicht wahr? Wir gehen zu müssen sieht es viel besser. Also das ist in Ordnung. Stilistisch, ich habe gerade hier eingebettet meinem Stylesheet. Es ist sicherlich ein akzeptabler Weg, es zu tun. Mal sehen, wie das aussieht. Also werde ich hier unten zurückgehen, und Ich werde meine table2.HTML Vorschau. Nun, das ist nicht ganz das, was ich wollte, aber es ist genau das, was wir gefragt. Wir sagten, dass dieser Stil gehen, um zu unserem Tisch anzuwenden. Unsere Tabelle hat jetzt eine ein Pixel breite, solide blauen Rand um ihn herum. Wir sind nicht eigentlich immer an den Tabellenzellen. Wir sind noch ganz am Tisch. So arbeitete CSS. Es wurde angewandt a Stylesheet zu unserem Tisch. Aber nicht ganz tun was wir wollten, es zu tun. Wie kommen wir zu tun bekommen was wir wollen, es zu tun? 

Nun, lassen Sie uns einen Blick auf eine weitere Version davon in table3.HTML. Also ich bin gerade dabei, diese Registerkarten zu schließen. Ich werde mehr als zurück zu gehen, hier meine Dateibaum, und eröffnen table3.HTML. Auch es wird hübsch aussehen Ähnliche hier am Anfang. Aber Ankündigung, diesmal anstelle der Verwendung ein Stylesheet direkt dort eingebettet, Ich werde in einem Link Stylesheet mit dem Link-Tag. Also bin ich anscheinend die Verknüpfung in eine Stylesheet aufgerufen tables.CSS, und dies auch gleich Stylesheet nur gut means--, was ist diese Datei in Bezug auf das, was Ich bin doing-- ist ein Stylesheet, das bin ich Hilfe für meine Seite. Also, wenn ich wirklich wollen, um zu sehen, was Ich bin mit der CSS zu tun hier, Ich muss offen, dass zu gehen table.CSS Datei als gut. So kommen wir wieder hierher gehen wieder zu unserem Dateibaum. Es gibt table.CSS. Wir werden es aufspringen. Nun sehen wir ein wenig von der CSS. Anscheinend habe ich ein paar Dinge, die sich hier. Ich möchte offenbar eine fünf setzen Pixel breite, solide rotem Rand, um meinen Tisch. Wir wissen bereits, dass das wird , sich nur auf den Umfang zu gehen. Wir sahen, dass in table2.HTML. Mit jeder Zeile, Ich anscheinend wollen angeben dass die Zeilenhöhe ist 50 Pixel hoch. Also für jede Zeile, daran erinnern, das ist, was die tr-Tag tut, Ich mache es 50 Pixel hoch. 

Schließlich habe ich diesen Kommentar. Und das ist, wie wir Kommentare in CSS zu machen. Es ist sehr ähnlich zu Block zu ergreifen Kommentare Syntax Schrägstrich Stern. Der gesamte Text Sie wollen. Es gibt keinen Schrägstrich Schrägstrich aber in CSS. Für kurze Inline-Kommentare, haben wir um dieses spezielle Format hier verwenden. Es sieht aus wie ich tue ein Menge Dinge in meinem td-Tags. Denken Sie daran, td-Tags oder Tisch Daten, die wirklich nur die Spalten Innenseite unseren Reihen, und anscheinend für jedes Daten in meinem Tisch, ich will die Hintergrundfarbe zu setzen schwarz sein, um die Farbe Weiß zu sein, Farbe Vordergrundfarbe. Also das sein wird, der Text auf meiner Seite. Ich möchte große Schrift, 22 Punkt-Schrift, und ich möchte, es an der Schriftfamilie sein, Georgia. So bin ich nicht zu gehen haben die Standard-Schriftart. Ich werde Georgien, geben Sie die ist eine jener Web-Safe-Fonts dass wir bisher gesehen haben. Ich möchte meinen Text ausgerichtet werden zentral in der Mitte des Kastens, Ich will nicht, es zu gelassen werden ausgerichtet oder rechts ausgerichtet. Und ich möchte, dass meine Spaltenbreite auf 50 Pixel in der Breite als auch. Werfen wir einen Blick auf wie das aussieht, und sehen, ob dies vielleicht eine Verbesserung. So werde ich zu table3.HTML, gehen die Rückruf umfasst table.CSS als Bindeglied, und wir werden es in der Vorschau. Das ist viel besser, oder? Dies wird tatsächlich beginnen, um einen Blick viel mehr wie eine Multiplikationstabelle. Ich habe, dass die roten Rand um meinen Tisch, aber jetzt Ich habe auch, dass angegebenen jede Zeile 50 Pixel breit, oder es ist 50 Pixel tall-- Entschuldigung mich- jede Spalte ist 50 Pixel breit. Die Daten in jeder Spalte, und erst die Daten, hat einen schwarzen Hintergrund. Also das ist, warum diejenigen, weiße Linien sind da. Da der Raum in zwischen allen jenen Zellen, es ist nicht eine Grenze in und für sich, es ist einfach Ich bin nur in der Füllung Zellen, die eigentlich macht die Grenzen der Tabelle, die anscheinend die ganze Zeit existiert, war nur dünne weiße Linien. Jetzt sind sie sichtbar. Jetzt haben sie Pop weg auf dem Bildschirm. Und so ist dies eine sehr einfache Stylesheet, die ich angelegt habe, und jetzt ist mein Tisch sieht viel mehr wie eine vier mal vier Multiplikationstabelle, statt einer nur wirre Durcheinander, in dem alles klar Zeilen und Spalten, aber nicht super gut organisiert. Wir sind wirklich nur die Spitze des Eisbergs was man mit CSS hier tun. Glücklicherweise ist die CSS-Dokumentation ist ziemlich einfach. Hier finden Sie einige der Verwendung ihrer Attribute, ziemlich häufig. Die, die wir gesprochen weiter oben in diesem Video. Es gibt einige, dass Sie Wahrscheinlich werden nicht alle. Und das ist auch in Ordnung. Aber genau wissen, dass es eine Menge an Dokumentation gibt. Also selbst wenn wir nicht alles abdecken, Sie sind sicherlich nicht allein gelassen. Aber CSS macht wirklich Spaß zu experimentieren. Und ich würde empfehlen Ihnen dringend, spielen, um mit Ihrer Web-Seiten, und sehen, wie können Sie sie zu machen sehen und fühlen, um den Benutzer zu verbessern Erfahrung der Besuch Ihrer Seite. Ich bin Doug Lloyd. Dies ist CS50.