So fügen Sie Farbe auf Ihre Website auf dem Raspberry Pi

Ihre Website wird nicht sehr ansprechend sein, ohne etwas Farbe. CSS können Sie Farbe auf Ihre Website auf dem Raspberry Pi hinzuzufügen. Der schnellste Weg, um zu sehen, wie CSS funktioniert, ist ein Beispiel, um zu versuchen. In Ihrer main.css Datei, geben Sie diese Zeile und speichern Sie es dann:

h1 {color: rot-}

Wenn Sie Ihre Web-Seite (drücken Sie F5 in Midori, wenn es dort bereits geöffnet ist) neu zu laden, der Text Ihrer h1 Überschrift ist jetzt rot.

Das einfache Beispiel verkörpert wie CSS funktioniert. Sie beginnen mit dem Browser zu sagen, die Sie einen Stil anwenden Tags wollen (die h1 Tag in diesem Fall), und dann in geschweiften Klammern, listen Sie die Style-Anweisungen.

Jeder Befehl beginnt mit den Worten, was Aspekt der Stil sollte (auch bekannt als die geändert werden Eigentum, und in diesem Fall ist es die Farbe). Als nächstes ist ein Doppelpunkt, und dann, was der Stil (auch bekannt als das geändert werden soll Wert, welches ist rot in diesem Beispiel). Schließlich muss jede Anweisung mit einem Semikolon enden.

Achten Sie darauf, mit, wie Sie Ihre CSS Zeichensetzung. Selbst in diesem kurzen Beispiel könnte ein paar Dinge schief gehen. Es wird nicht funktionieren, wenn Sie normale geschweiften Klammern (Klammern) verwenden oder die spitzen Winkel Klammern Sie in HTML verwenden, so stellen Sie sicher, dass Sie die geschweiften Klammern verwenden.

Achten Sie auf den Doppelpunkt und auch das Semikolon. Sie müssen die richtigen an den richtigen Stellen zu bekommen, damit es funktioniert. Wenn etwas nicht richtig funktioniert, ist ein fehlendes Semikolon oft der Schuldige!

Wir können eine Hintergrundfarbe auch wie folgt aus:

h1 {color: red-background-color: gelb-}

Auch wenn Sie ein Brite sind, müssen Sie zu buchstabieren Farbe die amerikanische Art und Weise in Ihrem CSS!

Wie in HTML, spielt es keine Rolle, wie Sie Raum aus Ihrem CSS, aber Sie können sich selbst einen Gefallen tun und es einfacher machen, indem etwas Platz und beginnen eine neue Zeile für jede Anweisung zu lesen.

Es gibt eine Reihe von Farben, die Sie nach dem Namen verweisen können (einschließlich schwarz, weiß, rot, grün, blau, grau, lila und gelb), aber auch andere als schwarz und weiß, sie sind zu hell und cartoonish für den Einsatz in den meisten Fälle. Der beste Weg, Farben zu spezifizieren ist durch eine Farbzahl zu geben, anstelle eines Farbnamen.

Das ermöglicht es Ihnen, eine subtilere Farbpalette zu bedienen und bietet Ihnen zu Farben zugreifen, für die es wahrscheinlich nicht einmal Namen (es sei denn, Sie zu einem besonders umfassenden Lackfabrik arbeiten, vielleicht). Hier sind einige Beispiele Farbnummern:

• #FFFFFF: Weiß

• #000000: Schwarz

• #FF0000: Rot

• #0000FF: Blau

• #FFFF00: Gelb

• #008000: Grün

Sie könnten überrascht sein, Briefe zu sehen, in den Farbnummern verwechselt, aber das ist, weil die Farben ein Zahlensystem ausgedrückt werden unter Verwendung genannt hexadezimal dass geht über die Ziffern 0 bis 9 und verwendet die Buchstaben A, B, C, D, E und F zu.

Wenn Sie in hexadezimale zählen, gehen Sie: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10. Die 10 steht für 16 in unserem normalen Zählsystem und 11 repräsentiert 17. Hier sind die drei Dinge, die Sie über hexadezimale wissen müssen:

• Wie in der normalen Zählsystem, Zahlen auf der linken Seite größer sind. Zum Beispiel unsere normalen Zählsystem Verwendung der Zahl 39, hat der 3 einen höheren Wert als die 9, weil es in der Spalte Zehn ist. In hexadezimal, ist es das gleiche. In der Hexadezimalzahl 7F ist die 7 mehr wert als die F, weil die 7 in der 16s-Säule ist.

• Die höchste zweistellige hexadezimale Zahl ist FF.

• Wenn Sie irgendwelche Buchstaben anders als A bis F verwenden, haben Sie einen Fehler gemacht.

Die sechsstellige Farbnummer besteht aus drei kleinen Zahlen zerquetscht tatsächlich zusammen, die jeweils zwei Ziffern zu sein. Diese drei Zahlen stellen die Menge an Rot, Grün und Blau, die von links nach rechts in der Farbe, genommen werden sollte.

So schwarz ist # 000000 da kein Rot, Grün oder Blau. Blau ist # 0000FF da gibt es keine rot oder grün, aber es gibt die maximale Menge an Blau. gelb ist # FFFF00 weil gelb gemacht wird, wenn Sie die maximale Menge von Rot und Grün mischen, ohne Blau.

Sie können Ihre eigenen Farben mischen. Für marineblau, verwenden Sie nur ein bisschen weniger blau als reines Blau und versuchen # 000080. Für lebendige lindgrün, nehmen Sie die Nummer für grün (# 00800) Und die Menge der grünen auf maximale pumpen, die Farbnummer geben # 00FF00. Sie können alle gültigen Nummern verwenden. # 767676 ist in Ordnung (und eine Art von Silber), und so ist # 543ABC (A fetching Schatten der lila).

Sie müssen nicht zu viel experimentieren. Viele Ressourcen stehen zur Verfügung, um Sie Farben finden, den Sie verwenden können, einschließlich Farbwähler, das funktioniert gut auf dem Raspberry Pi und kann eine ganze Farbschema aus dem gewählten Farbe erzeugen. Der Farbcode für die gewählte Farbe wird oben auf dem Bildschirm angezeigt.

Sie benutzen den Farbcodes anstelle der Farbnamen in Ihrem CSS, wie folgt aus:

h1 {color: # FF0000-background-color: # FFFF00-}