[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 sich in 2 Teile zu brechen: Kaskadierung und Style Sheets. Cascading ist ein wenig komplizierter, und es ist etwas, das wir in einem anderen Video behandeln werde. Aber für den Anfang, Style Sheets sehr viel erahnen, was CSS tut. Es fügt Stile auf die HTML-Code einer Web-Seite, verändern, wie die Web-Seite ästhetisch aussieht. Das bedeutet, alles aus der Schriftart des Textes auf die Positionierung der Inhalte auf der Seite andere coole Dinge wie machen die Ecken eines Rechtecks ​​abgerundet oder Hinzufügen von Schatten zum Text. Sie können sogar 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 dieser Seite im Moment aussehen, würde er wahrscheinlich etwas sagen wie: "Wow! Meine Einführung sieht schrecklich aus. Joseph, du bist ein schreckliches Designer sind." "Mit der Standard-Schriftart Times? Helvetica ist so viel besser." 

Also, was könnte der einfachste Weg, um das Styling Rob will anzuwenden? Die naheliegendste Möglichkeit viele Leute zunächst schrieb CSS war zu setzen, was wir Stildeklarationen rechten rufen im Element selbst Verwendung HTML Stilattribut. Ein Stylesheet besteht einfach aus dem 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 zuerst 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 Feststoff an den Stil des Rahmens, und die Farbe am Ende bestimmt, was 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 sein Kopfball Text 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 Leute in der Regel halten sie in Konsistenz 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 style ist gut, im Einklang mit dem Starttag. 

Für Leute, die wirklich gerne organisiert werden, Sie könnten anfangen, ein wenig an, wie chaotisch das alles sieht sauer. Stellen Sie sich vor, wenn Sie dies für jedes Element auf der Seite zu tun hatte, plus jetzt Ihren HTML und CSS sind alle vermischt und unübersichtlich. Gross, richtig? Um dies zu beheben, die Menschen schließlich begann fangen an die Trennung ihrer HTML-Markup von ihren CSS-Styling mit Hilfe sogenannter CSS-Selektoren. CSS-Selektoren werden verwendet, um Elemente, auf die Erklärungen angewendet werden wählen. Ein Selektor mit einer Liste von CSS-Deklarationen kombiniert wird oft als einer CSS-Regel bezeichnet. Diese Regeln würden zwischen öffnen und schließen HTML-Tags gesetzt werden, oft im Kopf des Dokuments. 

Es ist viel einfacher, mit einem Beispiel zu sehen, also lasst uns beginnen mit der Erstellung einer einfachen CSS-Regel. Zunächst lassen wir style-Tags im Kopf-Bereich unserer HTML. Als nächstes wird der Selektor. Wir beginnen, indem Sie eine der einfachsten Selektoren, die Raute, was wählt ein HTML-Element durch seine ID-Attribut. In diesem Fall werden wir wählen Sie die div, dass Rob die 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 Zahnspangen und verlagern unseren früheren inline Erklärungen über Robs div innerhalb dieser Klammern, refresh, und, cool, Robs intro hat noch einen schwarzen Rand um es minus die chaotisch inline Hässlichkeit. 

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

All diese Arbeit geht zu zeigen, dass unter Verwendung von Regeln anstelle von 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 überhaupt. 

Um diese neue Datei als CSS in diesem Dokument gehören werde ich nur HTML benutzen die Link-Tag. Hier sage ich es, dass ich in ein externes Stylesheet verknüpfen, das rel-Attribut, und den Pfad zu der Datei mit meinem href-Attribut. Jetzt ist meine HTML und CSS sind hübsch in völlig getrennte Dateien zu organisieren, was fast immer der Weg Designer bevorzugen die Arbeit mit HTML und CSS. 

Falls Sie sich fragen, gehören zu den einfachen Selektoren ID-Selektoren und Tag-Selektoren, wie wir sie gerade gesehen 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 Tastereingänge und pseudoselectors wie schweben und konzentrieren zur Angabe Styling, wenn Wechselwirkungen über einem Element auftreten mag mousing. 

Die gemeinsamen Kombinatoren beinhalten Leerzeichen für alle Kinder und Kommas zu unterscheiden Selektoren. Andere, die auftreten können sind Sie 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 1 Geschwister, die kommt sofort nach dem Element. 

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

Ich bin Joseph, und dies ist CS50. 

[CS50.TV] 

Uh, wo soll ich anfangen? Lass es mich tun, dass es ohne - [lacht] Okay. Hinzufügen - Lassen Sie mich ändern, dass Wortlaut. Ooh. Entschuldigung.