[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Dies ist CS50. - CS50.TV] 

Heute sprechen wir über CSS zu sprechen oder Cascading Style Sheets. 

Also was genau ist CSS? Nun, lasst uns den Begriff CSS unten in 2 Teile zu brechen: Cascading Style Sheets und. Kaskadierung ist ein wenig komplexer, und es ist etwas, das wir in einem anderen Video behandeln werde. Aber für den Anfang, Style Sheets sehr viel Hinweise auf das, was CSS tut. Es fügt Stile zu den HTML-Code einer Web-Seite, ändern, wie die Web-Seite ästhetisch aussieht. Das bedeutet, alles aus der Schriftart des Textes auf die Positionierung der Inhalte auf der Seite auf andere coole Sachen machen wie die Ecken eines Box abgerundet oder Hinzufügen von Schatten zum Text. Sie können auch verrückte Dinge tun wie die Dinge auf dem Bildschirm zu animieren. 

So wie verwenden wir CSS mit HTML? Nehmen Sie dieses ärmlich aussehende Seite, die ich gerade geschrieben habe. Wenn Rob waren an diesem Standort jetzt aussehen, würde er wahrscheinlich etwas sagen wie: "Wow! Mein Einführung sieht schrecklich aus. Joseph, du bist ein schrecklich Designer sind." "Mit dem Standard-Schriftart Times? Helvetica ist so viel besser." 

Also, was vielleicht der einfachste Weg, um das Styling Rob will anzuwenden? Die naheliegendste Möglichkeit, viele Leute anfangs schrieb CSS war, das, was wir Stildeklarationen rechts rufen in das Element selbst mit dem HTML-Attribut style. Ein Stylesheet besteht einfach aus der HTML-Element CSS-Eigenschaft, die wir ändern wollen gefolgt von einem Doppelpunkt durch den neuen Wert der Immobilie und ein Semikolon am Ende gefolgt. Zum Beispiel, sagen wir Rob will einen schwarzen Rand um seine Einführung. Wir setzen zunächst das style-Attribut auf Robs div hier dann in doppelte Anführungszeichen setzen eine CSS-Deklaration: "Border: 1px solid black;" Die 1 Pixel bezieht sich auf die Breite des Rahmens, bezieht sich der festen in den Stil der Grenze, und die Farbe am Ende bestimmt, welche die Grenze der Farbe ist. 

Wenn wir mehrere Stile auf ein Element möchten, schreiben Sie diese Erklärungen in Folge. Zum Beispiel, wenn Rob will seine Überschrift in Helvetica mit einem blauen Hintergrund und mehr Platz um den Text, können wir dies tun: style = "font-family: Helvetica; background-color: blue; padding: 5px;" Der letzte Semikolon ist eigentlich optional, aber die Menschen in der Regel halten sie in der Kohärenz willen. 

Wir speichern erklären einige der Kühler und komplexer CSS-Eigenschaften für ein anderes Video. Wenn Sie etwas im Sinn haben, nur googeln Sie den gewünschten Effekt mit CSS gefolgt wird wahrscheinlich geben Ihnen recht gute Ergebnisse. Das Coole daran ist, dass CSS ziemlich breit ist, so Chancen sind, wenn es etwas gibt, was Sie tun möchten - im Rahmen des Zumutbaren - CSS kann wohl tun. Wir nennen diese Art von Styling-Inline-Styling. Das Element Stil ist, na ja, im Einklang mit dem Start-Tag. 

Für Leute, die wirklich gerne organisiert werden, Sie könnten anfangen, ein wenig an, wie chaotisch das alles sieht verärgert. Stellen Sie sich vor, wenn Sie dies für jedes Element auf der Seite zu tun hatte, zzgl. jetzt Ihren HTML und CSS sind alle gemischt und unübersichtlich. Gross, nicht wahr? Um dies zu beheben, die Menschen schließlich begann ihn auf die Trennung ihrer HTML-Markup aus ihrer CSS-Styling mit etwas namens CSS-Selektoren. CSS-Selektoren werden verwendet, um Elemente zu denen Erklärungen angewendet werden wählen. Ein Wähler mit einer Liste von CSS-Deklarationen kombiniert wird oft als eine CSS-Regel bezeichnet. Diese Regeln würden zwischen Öffnen und Schließen von HTML-Style-Tags gesetzt werden, oft im Kopf des Dokuments. 

Es ist viel einfacher, mit einem Beispiel sehen, so lassen Sie uns beginnen, indem Sie eine einfache CSS-Regel. Erstens, lassen wir Style-Tags in den Head-Abschnitt unseres HTML. Als nächstes wird der Wähler. Wir beginnen mit einem der einfachsten Selektoren, die Raute, was wählt ein HTML-Element durch seine ID-Attribut. In diesem Fall wählen wir die div, die Rob-Einführung stellt indem Sie die Raute durch die div ID, rob gefolgt. Jetzt sind die Erklärungen. Wir fügen öffnen und schließen Hosenträger und verlagern unseren früheren Erklärungen über Inline Robs div innerhalb dieser Klammern, erneuern, und, cool, Robs intro hat noch einen schwarzen Rand um das es minus chaotisch Inline Hässlichkeit. 

Nun, was ist, wenn wir die h1 innerhalb von Robs intro wählen wollte? Man könnte denken, "Lasst uns eine ID darauf und bewegen Sie dann unseren früheren Stile." Das funktioniert, aber CSS hat andere Möglichkeiten, so dass Sie die Elemente auswählen durch das, was wir combinators einfache Selektoren mischen nennen. Zum Beispiel kann ein Leerzeichen als combinator verwendet werden alle Instanzen 1 Wahlschalter, dass im Inneren eines anderen Wähler leben anzugeben. Das klingt viel komplizierter als es tatsächlich ist. Hier ist ein Beispiel. Wir geben # rauben, fügen Sie ein Leerzeichen ein, und folgen Sie ihm mit einem h1, weitere einfache Wähler genannt tag Selektor, der Arten von Elementen wählt wie divs oder Absätze. Der Raum kombiniert unsere 2 einfache Selektoren, die Anwendung alle CSS-Deklarationen und die geschweiften Klammern zu h1 Tags, die innerhalb des Elements mit id = "rob" leben. Nur um Sie zu überzeugen, dass es funktioniert, werde ich die Schriftfarbe auf weiß, erneuern zu ändern, und siehe, Rob Kopfball jetzt weiß. 

All diese Arbeit geht zu zeigen, dass mithilfe von Regeln statt Inline-Styles können wir viel sauberer Code. In der Tat, wenn dieser Stil Block beginnt immer ein wenig groß, Ich kann sogar ziehen diese Stile in eine andere Datei zusammen. 

Um diese neue Datei als CSS in diesem Dokument umfassen werde ich einfach den HTML-Link-Tag. Hier sage ich es, dass ich in einem externen Stylesheet Verknüpfung, die rel-Attribut, und den Pfad zu der Datei mit meinem href-Attribut. Nun meine HTML Markup und CSS sind schön in völlig getrennte Dateien organisiert, das ist fast immer der Weg Designer bevorzugen die Arbeit mit HTML und CSS. 

Falls Sie sich fragen,, sind die einfachen Selektoren ID-Selektoren und Tag-Selektoren wie die, die wir gerade gesehen haben sowie Klassen-Selektoren zur Auswahl von Elementen mit einer bestimmten Klasse, Attribut-Selektoren zur Auswahl von Elementen durch andere Attribute wie type = "radio" für Radio-Button Eingänge und pseudoselectors wie schweben und konzentrieren Styling für die Angabe, wenn Wechselwirkungen über einem Element auftreten mag mousing. 

Die gemeinsamen combinators gehören Leerzeichen für alle Kinder und Kommas zu unterscheiden Selektoren. Andere, die auftreten können gehören auf den Pfeil für die direkte Kinder nur, die Tilde für alle Geschwister, die nach dem Element auftreten, und das Pluszeichen für die Geschwister, die 1 kommt sofort nach dem Element. 

Durch die Kombination dieser Selektoren und combinators, Sie erweitern das Spektrum der Styling Sie auf einer bestimmten Web-Seite erreichen können und CSS schreiben effizienter. Mit nur ein paar Zeilen CSS sehen Sie mich hier eingeben, Ich kann schnell zu machen in etwa so aussehen wie etwas wie dieses. 

Ich bin Joseph, und dies ist CS50. 

[CS50.TV] 

Äh, wo soll ich anfangen? Lassen Sie mich das tun, ohne - [lacht] Ok. In a - Lassen Sie mich zu ändern, dass die Formulierung. Ooh. Entschuldigung.