Gestaltung unserer Inhalte

Einführung in das Styling

In den letzten Wochen haben wir darüber diskutiert, wie man alle benötigten Informationen auf eine Webseite bringt. Wenn Sie jedoch mitverfolgt und dabei programmiert haben, ist Ihnen wahrscheinlich aufgefallen, dass Ihre Seiten nicht sehr ansprechend aussehen. Sie könnten sogar ziemlich schlecht aussehen …

Bisher haben wir unseren Webseiten keine Stile hinzugefügt. Stile sind Regeln, die wir unserem Browser vorgeben, um ihm mitzuteilen, wie unsere HTML-Elemente auf der Seite aussehen sollen. Wir können Größe, Schriftart, Farbe, Position, Ausrichtung und viele andere Dinge ändern! Aber wie?

Hinzufügen unserer ersten Stile

<p style="color: blue;">This text is blue now!</p>

Das ist es! Wenn Sie neugierig sind, kopieren Sie es, fügen Sie es in ein Dokument ein und öffnen Sie es in Ihrem Browser. Was hast du gesehen? Der Text ist jetzt blau! Schön!

Also, was ist hier los? Wir haben unseren Textinhalt mit einem Absatzelement umgeben und diesem Absatzelement ein Stilattribut gegeben. Beachten Sie das style= in der Eröffnungszeile

Etikett. Im Wert des Attributs haben wir den Farbstil einem Wert von Blau zugewiesen: „color: blue;“.

Das ist ja cool, aber was wäre, wenn wir den Text auf der Seite zentrieren wollten?

<p style="color: blue; text-align: center;">This text is blue and centered!</p>

Alles, was wir ändern mussten, war der Wert im Stilattribut! Kraftvoll! Aber was passiert in diesem Wertattribut? Diese Syntax haben wir noch nie gesehen! Das ist CSS! Aber warten Sie, warum ist es hier, wenn wir HTML schreiben?

Das sind wir! Aber HTML ist nicht für die Gestaltung konzipiert; Es ist auf Struktur und Semantik ausgelegt (auf die wir in einem späteren Beitrag eingehen werden). Wenn wir das Erscheinungsbild der Seite ändern möchten, müssen wir das Stylesheet ändern. Standardmäßig entscheidet unser Browser mithilfe des sogenannten „User-Agent-Stylesheets“, wie die Informationen in unserem HTML interpretiert werden. Die Schriftgrößen und Farben, die Sie bisher gesehen haben, basieren darauf! Wenn wir CSS zu unserem Stilattribut hinzufügen, überschreiben die von uns definierten Stile das User-Agent-Stylesheet und alle Stile, die wir nicht definiert haben, greifen auf dieses Blatt zurück. CSS steht für Cascading Style Sheets, und das ist der Grund!

Das ist großartig. Da wir nun das Aussehen unserer Seite ändern können, sind die Möglichkeiten endlos. Aber stellen Sie sich vor, wir wollten mehr Individualität:

<h1 style="font-size: 36px; 
    font-weight: 500; 
    text-align: center;
    text-decoration: underline;
    padding-bottom: 16px;
    color: #b0b1b2;
    opacity: 0.7;">Welcome to My Website!</h1>
<p style="font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding-left: 100px;
    background-color: yellow;">I hope you're having a great day!</p>

Wow… das ist eine Menge Code für nur zwei Textzeilen… und es ist so schwer, schnell zu erkennen, was los ist! Das stellt ein Problem dar, denn wenn Sie versuchen würden, diese Informationen später noch einmal zu bearbeiten, würde es viel länger dauern, als wenn es so aussehen würde:

<h1>Welcome to My Website</h1>
<p>I hope you're having a great day!</p>

Wie können wir dieses Problem lösen?

Einführung in CSS

Damit unser HTML nicht unübersichtlich wird, verschieben wir unser gesamtes Styling in eine CSS-Datei! Für kleine Projekte nennen wir dies normalerweise style.css. Über das bloße Aufräumen unseres Codes hinaus erfüllt das Verschieben von Stilen in eine neue Datei auch ein Programmierkonzept namens Separation of Concerns. Das bedeutet, dass wir möchten, dass unser Code in seine Funktionskomponenten segmentiert wird. Unser Code sollte nicht versuchen, alles zu können, sondern in kleinere Teile zerlegt werden, die eine Sache gut machen!

In diesem Beispiel haben wir statt einer Datei, die unseren Inhalt strukturiert und formatiert, zwei Dateien: eine zum Strukturieren und eine zum Formatieren. Anliegen getrennt! Wie könnte das also aussehen?

h1 {
  font-size: 36px; 
  font-weight: 500; 
  text-align: center;
  text-decoration: underline;
  padding-bottom: 16px;
  color: #b0b1b2;
  opacity: 0.7;
}

p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  padding-left: 100px;
  background-color: yellow;
}

Ah, viel besser! Jetzt ist unsere HTML-Datei nicht mit all diesem Stil überladen! Was Sie oben sehen, sind zwei CSS-Regelsätze. Ein Regelsatz besteht aus einem Selektor und zwei geschweiften Klammern, die alle Informationen zum Stil des Selektors enthalten. In diesem Beispiel sind die beiden Selektoren, die wir sehen, h1 und p. Dies bedeutet, dass alle hier aufgeführten Stile auf alle HTML-

-Dateien angewendet werden. oder

Element bzw.!

Wir können dies für jede Art von Element tun! Tatsächlich gibt es viele Möglichkeiten, Objekte mit CSS-Selektoren auszuwählen, aber das heben wir uns für eine weitere Woche auf. Beachten Sie vorerst nur, dass Sie durch die Eingabe des Elementtyps Stile innerhalb der geschweiften Klammern hinzufügen können!

Wir haben einige Stile definiert, aber wie stellen wir sicher, dass unser Browser weiß, auf welche Datei er sie anwenden soll?

Das Link-Element

Der erste Element, das wir lernen werden, ist das Element. Es gibt einige Anwendungsfälle dafür, aber für unsere Zwecke werden wir es verwenden, um unsere style.css mit unserer index.html zu verknüpfen. Mit anderen Worten: Dieses Element teilt unserem Browser mit, welches Stylesheet er für die Seite verwenden soll. In der Praxis wird es so aussehen:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link href="./style.css" rel="stylesheet"/>
  </head>
  <body>
    ...
  </body>
</html>

Und das ist es! Unsere style.css ist mit unserem HTML-Dokument verknüpft und die Stile werden angewendet.

Lassen Sie uns dieses Linkelement aufschlüsseln. Erstens ist es ein selbstschließendes Element, wir benötigen also kein schließendes Tag und es nimmt keinen Inhalt auf. Für dieses Element sind zwei Attribute erforderlich: href und rel. Diese sind erforderlich, da der Das Element verknüpft externe Ressourcen mit dem HTML-Dokument. Wir müssen unserem Browser also mitteilen, 1) wo sich diese Ressource befindet und 2) wofür diese Ressource verwendet werden soll. Das href, das für „Hypertext-Referenz“ steht, bestimmt das Wo, während rel oder die Beziehung die Verwendung bestimmt!

Es ist wichtig zu beachten, dass der von Ihnen angegebene Pfad mit dem href-Attribut entweder absolut oder relativ sein kann. Dies bedeutet, dass Sie den Speicherort eines Dateipfads vom Stammverzeichnis aus angeben können, z. B. /Benutzer/Benutzername/Dokumente/Projekt/style.css (absolut). Oder Sie können dies relativ zum Speicherort der Datei tun, an der Sie arbeiten, wie oben beschrieben. Das ./ vor dem Dateinamen gibt an, dass der Browser im selben Ordner (oder Verzeichnis) wie die HTML-Datei für style.css suchen sollte. Sie können hier auch eine URL hinzufügen; In vielen Content-Delivery-Netzwerken können Sie vorgefertigte Stylesheets verwenden, die Sie über den Link Element auch!

Herausforderung

Okay, wir haben heute viel besprochen. Jetzt ist es an der Zeit, es in die Tat umzusetzen. Nehmen Sie die Seite „Über mich“, die Sie in der Challenge der letzten Woche erstellt haben, und es in eine neue Datei namens style.css. (Stellen Sie sicher, dass Sie es im selben Ordner wie Ihre HTML-Datei ablegen!)

Erstellen Sie dann Stile für jedes Ihrer Elemente. Spielen Sie mit den verschiedenen Stilen, die Sie zuweisen können, bis Ihre „Über mich“-Seite ansehnlicher aussieht! (Hinweis: Sie können auch auf die Elemente und abzielen!)

Eine vollständige Liste der Stile, die Sie anwenden können, finden Sie im Mozilla Developer Network. Sie hosten eine vollständige Dokumentation für Webentwicklungssprachen: HTML, CSS und JS! Hier ist ein Link zu ihrer Website. Nutzen Sie die Liste der Eigenschaften unter „Referenz“ in der Seitenleiste, um zu sehen, was möglich ist!

Bis nächste Woche!

Das obige ist der detaillierte Inhalt vonGestaltung unserer Inhalte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!