In den vorherigen Kapiteln haben wir eine grundlegende Vorlage für HTML-Dokumente zusammengestellt, festgestellt, was HTML-Tags sind, gelernt, wie man HTML-Dateien speichert und bearbeitet, und in diesem Kapitel haben wir Machen wir uns mit Tag-Attributen vertraut und ändern Sie die Farbe des Textes und des Hintergrunds der Seite.

Lasst uns unsere öffnen index.html, zum Bearbeiten: Es gelang mir!!! Und lass es uns ein wenig ändern, Attribute hinzufügen: text="#000000" bgcolor="#ffffff"> Ich habe es geschafft!!! Attribut ist ein Tag-Parameter, der als „Paar“ (Parametername + Parameterwert) in das Tag eingefügt wird.
Tag-Attributwerte werden eingefügt:
1) text=#000000 ohne Anführungszeichen;
2) text="#000000" in einfachen Anführungszeichen;
3) text="#000000" in doppelten Anführungszeichen.
Jede dieser Optionen ist richtig, aber wenn Ihnen die Codeethik am Herzen liegt, ist es besser, doppelte Anführungszeichen zu verwenden, wie in meinem Beispiel oben.

Attribut "Text" Steuert die Textfarbe auf der gesamten Seite und „bgcolor“ Steuert die Hintergrundfarbe der Seite.

Jetzt schlage ich vor, über Farben für HTML-Dokumente zu sprechen. Farbe ist eingestellt:
1) text="Gold"- Wörter auf Englisch, zum Beispiel: gold (golden), rot (rot), grün (grün) und so weiter...
Eine Farbe kann aber auch nur aus einem Wort bestehen, zum Beispiel „rot“, aber wenn man „grün-rot“ schreibt, versteht der Browser sie nicht und ignoriert sie einfach.
2) text="#000000"- RBG-Farbschema (Rot, Grün, Blau). "#" Dieses Symbol zeigt an, dass es sich um eine Farbzahl handelt. Die ersten beiden Symbole (in meinem Beispiel Nullen) sagen uns, wie viele „rote“ Farben wir genommen haben, die zweiten sind grün und die letzten beiden sind blau.
Jede Farbe wird von 00 bis FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F) angegeben, zum Beispiel #000000-schwarz, #ffffff-weiß, #ff0000-rot, # 00ff00-grün #0000ff-blau

Als Bonus von der Website empfehle ich Ihnen, die Farbpalette (2 KB) herunterzuladen, die im Bild oben gezeigt wird. Sie müssen das Archiv entpacken und die Datei ausführen color.html, dann platzieren Sie den Mauszeiger auf dem großen Feld auf der gewünschten Farbe, die in einem kleinen Fenster angezeigt wird, und wenn Sie zu diesem Zeitpunkt mit der Maus klicken, erscheint der Farbcode im kleinen Fenster auf der rechten Seite.

Kommen wir nun zurück zu unserer Akte index.html und speichern Sie es unter tsvet.html, jetzt wollen wir sehen, was passiert ist. Wie war er und wie ist er geblieben? Und Sie haben völlig Recht, denn Weiß ist für den Hintergrund und Schwarz für den Text ist die Standardfarbe. Um den Unterschied zu bemerken, ändern wir die Attributwerte:

text=gold" bgcolor="#0900b8"> Ich habe es geschafft!!! Lasst uns speichern und ansehen (öffnet sich in einem neuen Tab)

Es gibt andere Möglichkeiten, Text in HTML-Dateien festzulegen, diese beiden gelten jedoch als die wichtigsten.

Im nächsten Kapitel erfahren Sie, wie Sie Text mit BR-Tags manipulieren und Text in eine andere Zeile umbrechen.

Der Hintergrund einer HTML-Site kann mithilfe beider Tag-Attribute geändert werden Körper und die Verwendung von CSS-Stilen, die auch auf das Tag angewendet werden Körper. Betrachten wir beide Optionen zum Erstellen eines Hintergrunds für eine Website.

Ändern der Hintergrundfarbe mit HTML

Etikett Körper hat, wie fast jedes HTML-Tag, seine eigenen Attribute. Um Attribute zu kennzeichnen Körper betreffen:

• bgcolor- definiert die Hintergrundfarbe für die Seite;
• Hintergrund- ermöglicht Ihnen, ein Bild als Hintergrund einer Webseite festzulegen (dieses Problem wird im Artikel ausführlich besprochen);
• scrollen- steuert die Anzeige der Bildlaufleiste auf der Seite;
• Text- legt die Grundfarbe des Textes fest, der auf der Webseite angezeigt wird;
• bgproperties– gibt an, ob der Hintergrund mit der Seite scrollt;
• Verknüpfung- steuert die Standardfarbe der Links auf der Seite;
• eine Verbindung- legt die Farbe für den aktiven Link fest;
• vlink- definiert die Farbe für den besuchten Link auf der Seite;
• linker Rand/rechter Rand- legt die Einrückung des Inhalts vom linken oder rechten Rand des Browserfensters fest;
• Oberer Rand/Unterer Rand– legt die Einrückung des Inhalts vom oberen oder unteren Rand des Browserfensters fest;

Um die Hintergrundfarbe mithilfe von HTML zu ändern, verwenden wir das Attribut bgcolor:

Dies ist ein Beispiel für weißen Text, der mithilfe des Textattributs des Body-Tags angegeben wird.

Notiz: Es wird empfohlen, eine Seitenhintergrundfarbe anzugeben, auch wenn der Hintergrund weiß ist. Dies liegt daran, dass einige Benutzer möglicherweise eine nicht standardmäßige Hintergrundfarbe in ihrem Browser verwenden, was dazu führen kann, dass der Text auf Ihrer Website nicht lesbar ist.

Ändern der Hintergrundfarbe der Seite mithilfe von CSS

Dies ist ein Beispiel für einen weißen Text, der mithilfe von Hintergrund-CSS festgelegt wurde. Auch der Seitenhintergrund wird per CSS festgelegt.

Im Nubex-Website-Builder können Sie für jede Website einen vorgefertigten Hintergrund aus einer großen Bildbibliothek auswählen oder Ihren eigenen hinzufügen.

Vom Autor: Willkommen bei webformyself und heute möchte ich Ihnen erklären, wie Sie den Hintergrund der Website ändern können. Die Hintergrundfarbe oder das Bild im Hintergrund kann eine große Rolle für das Erscheinungsbild einer Website spielen. Daher müssen Sie wissen, wie Sie sie einstellen.

So ändern Sie den Hintergrund in WordPress

Auch hier gilt: Wenn Sie über eine WordPress-Engine verfügen, wird es nicht schwierig sein, den allgemeinen Hintergrund der Seite zu ändern. Sie müssen lediglich auf der Registerkarte „Darstellung“ auf die Schaltfläche „Anpassen“ klicken. Hier müssen Sie „Farben“ auswählen. Abhängig von der von Ihnen gewählten Vorlage können Sie möglicherweise Farben für verschiedene Elemente auswählen. Sie können aber auf jeden Fall die Farbe der Seite wählen – vor Ihnen öffnet sich ein praktisches Farbfeld.

Die Anzahl der Einstellungen hier hängt davon ab, welche Vorlage Sie haben. In jedem Fall sollte es auf jeden Fall möglich sein, die Farbe für die gesamte Seite festzulegen; in verschiedenen Vorlagen können Sie auch den Hintergrund und die Farbe für Überschriften, Links usw. festlegen.

Eigentlich ist das alles, was Sie wissen müssen. Wenn Sie ein Hintergrundbild herunterladen müssen, wählen Sie das entsprechende Element aus und suchen Sie die erforderliche Datei auf Ihrem Computer.

JavaScript. Schneller Start

Positiv ist, dass das Bild nicht zu schwer sein sollte, da dies die Ladegeschwindigkeit der Website stark beeinträchtigt. Ideal ist es, sogenannte nahtlose Hintergrundbilder zu verwenden, die sich horizontal und vertikal wiederholen und so den gesamten Raum ausfüllen.

Nach dem Laden des Bildes werden Ihnen einige nützliche Einstellungen zum Konfigurieren angezeigt. Der Vorteil von WordPress besteht darin, dass Sie Änderungen sofort sehen, je nachdem, welche Einstellungen Sie wählen.

Zunächst werden Sie aufgefordert, eine Wiederholungsmethode auszuwählen. Es gibt bereits 4 Möglichkeiten: nur horizontal wiederholen, nur vertikal, auf beiden Seiten und nicht wiederholen. Je nachdem, welches Bild Sie verwenden, müssen Sie eine Auswahl treffen.

Durch die Wiederholung können Sie die Größe des Bildes erheblich einsparen, wenn es klein ist und wiederholt werden kann, sodass scharfe Übergänge zwischen Wiederholungen nicht sichtbar sind. Auf diese Weise können Sie im Vergleich zu der Methode, bei der ein Bild in voller Größe mit großer Größe geladen wird, Dutzende Kilobyte einsparen.

Position. Hier gibt es nichts zu erklären, schauen Sie sich einfach an, wie sich das Erscheinungsbild der Seite mit unterschiedlichen Hintergrundpositionen ändert. Wählen Sie die Option, die Ihnen am besten gefällt.

Bindung. Dies ist eine sehr interessante Einstellung, mit der Sie wählen können, ob das Hintergrundbild zusammen mit dem Inhalt gescrollt oder an einer Stelle eingefroren werden soll. Persönlich wähle ich immer gerne die feste Option, da sich beim Scrollen nach unten nur die Inhaltsblöcke verschieben.

Wenn Ihr Hintergrundbild beispielsweise eine Höhe von 1000 Pixeln hat und Sie es nicht wiederholen oder erfassen, verschwindet es beim Scrollen nach unten einfach aus der Ansicht. Durch die Fixierung des Hintergrunds bleibt das Bild jederzeit sichtbar. Manchmal ist dies eine sehr effektive Lösung.

JavaScript. Schneller Start

Lernen Sie die Grundlagen von JavaScript anhand eines praktischen Beispiels für die Erstellung einer Webanwendung.

Eigentlich ist das alles, um den Hintergrund in WordPress zu ändern. Wie Sie sehen, ist alles so einfach wie möglich.

So ändern Sie den Hintergrund einer Website in HTML

Okay, wir haben uns eine rein visuelle Version angesehen, bei der Sie nicht in den Code gehen und dort etwas schreiben müssen. Lassen Sie uns nun herausfinden, wie Sie den Hintergrund über HTML und CSS ändern können. Welche Vorteile bietet dies? Sie können Hintergrundbilder nicht nur für die Site allgemein, sondern auch für jedes Element einzeln festlegen. Zum Beispiel für ein Widget, ein Menü, eine Kopfzeile usw. Dies bietet viel mehr Möglichkeiten beim Website-Design und bei der Änderung seines Designs.

Um auf all diese Stile zugreifen zu können, müssen Sie das Haupt-Stylesheet Ihrer Vorlage finden. Normalerweise befindet es sich im Stammverzeichnis oder im CSS-Ordner und heißt style.css oder main.css.

Darin sehen Sie den Code, der verschiedene Elemente Ihrer Website gestaltet. Wenn Sie den Hintergrund global festlegen möchten, können Sie dies tun, indem Sie dem Body-Selektor, also dem Hauptteil der Seite, einen Hintergrund zuweisen.

Wie wird der Hintergrund eingestellt?

Denken Sie daran – die Hintergrundeigenschaft. Heutzutage ist es besser, die Kurzfassung dieser Eigenschaft zu verwenden. Zum Beispiel:

body( Hintergrund: #ccc url(bg.png) no-repeat 50 % 50 % behoben; )

Was bedeutet das alles? Der erste Parameter ist normalerweise eine Volltonfarbe. Nehmen wir an, wir stellen es auf Grau. Die Farbe darf nicht angegeben werden, wenn ein Hintergrundbild angegeben wird. Wie Sie sehen können, wird das Bild mithilfe des URL-Konstrukts (Dateipfad) angegeben. Dementsprechend müssen Sie den Pfad zur Datei korrekt notieren und auch deren Erweiterung angeben.

Alle Parameter, die ich mir danach notiert habe, sind optional und können beliebig angegeben werden. Deshalb habe ich festgelegt, dass das Hintergrundbild nicht wiederholt werden soll, sowohl horizontal als auch vertikal in der Mitte positioniert werden soll und außerdem an einer Stelle fixiert sein soll, damit es beim Scrollen nicht verschwindet.

Wie Sie sehen, sind hier alle die gleichen Parameter vorhanden, die Sie visuell konfiguriert haben, aber hier werden sie als Werte der Hintergrundeigenschaft registriert.

In diesem Beispiel habe ich eine abgekürzte Eigenschaftsnotation verwendet, das ist einfach bequemer, aber tatsächlich hat jeder einzelne Parameter seine eigene Eigenschaft: background-color für Farbe, background-image für ein Bild, background-position zum Festlegen einer Position.

Um diese Eigenschaften fließend zu beherrschen, empfehle ich Ihnen natürlich, zuerst unseren Kurs zu belegen, und wenn Sie ein fortgeschrittener Benutzer der CSS-Sprache werden möchten, dann. Dort erfahren Sie, wie Sie mehrere Hintergründe gleichzeitig festlegen, deren Wiederholung einrichten, Farbverläufe verwenden usw. Die Informationen sind für Website-Ersteller sehr interessant und nützlich.

Nun, ich habe Ihnen die Grundlagen der Arbeit mit dem Hintergrund erklärt. Abonnieren Sie unser Portal, um Neuigkeiten zu erhalten und mehr über die Website-Erstellung zu erfahren.

JavaScript. Schneller Start

Lernen Sie die Grundlagen von JavaScript anhand eines praktischen Beispiels für die Erstellung einer Webanwendung.

Sie können Ihren Blog oder Ihre Website ganz einfach vollständig anpassen. Dieser Artikel zeigt Ihnen, wie einfach es ist, die Schriftart der Kopfzeile und das Hintergrundbild Ihrer Seite zu ändern.

Blogger und Websitebesitzer ändern normalerweise den Hintergrund, um ihre Website für Besucher optisch ansprechender zu gestalten. Allerdings kann ein falsch hinzugefügtes Hintergrundbild den Besucher verwirren und sogar dazu führen, dass er Ihrer Website oder Ihrem Blog misstraut und sie nicht erneut besuchen möchte. Um den Hintergrund korrekt hinzuzufügen, ist es wichtig, die entsprechenden HTML-Codes zu verwenden.

Es gibt nur ein paar einfache Möglichkeiten, wie Sie das Aussehen Ihrer bestehenden Website ändern können. Viele Benutzer wissen gar nicht, wie einfach es ist.

So passen Sie die Schriftart an

Zunächst müssen Sie an beliebiger Stelle vier Meta-Tags hinzufügen< head >. Sie können einfach die folgenden Symbole kopieren und in Ihre Ressource einfügen, wobei Sie zuerst die Leerzeichen entfernen.

So passen Sie die Hintergrundfarbe an

Öffnen Sie die HTML-Seite Ihres Blogs oder Ihrer Website. Wenn Sie eine Seite bearbeiten, können Sie sie in Dreamweaver öffnen, um Ihre Arbeit zu erleichtern. Wenn Ihre Website mit einem Website-Builder erstellt wurde, können Sie bei einigen Diensten die HTML-Einstellungen online ändern, indem Sie auf der Seite „Design“ die Registerkarte „HTML bearbeiten“ auswählen. In jedem Fall sollten Sie auf die HTML-Codes für Ihr Blog oder Ihre Website zugreifen können. Der Einrichtungsprozess kann stark variieren, je nachdem, welche Dienste Ihnen zur Verfügung stehen und welche Engine Sie verwenden.

Es macht keinen Sinn, ein separates Bild mit einer anderen Farbe zu finden, wenn Sie lediglich die Hintergrundfarbe ändern müssen. Stattdessen können Sie einfach den HTML-Code bearbeiten und die vorhandene Farbe in die Farbe ändern, die Sie beibehalten möchten.

HTML-Farbtabellen finden Sie problemlos in Fachpublikationen. Jede Farbe wird im Markup als sechsstelliger Code angezeigt. Beispielsweise wird ein weißer Hintergrund als #FFFFFF angezeigt.

Finden Sie also den Farbcode, der auf Ihrer Website als Hintergrundfarbe erscheinen soll. Im Markup sieht es so aus:

Hintergrundfarbe:#XXXXXX; (

Sobald Sie die Hintergrundfarbe in HTML gespeichert haben, werden Sie feststellen, dass sich das Erscheinungsbild Ihrer Seite geändert hat.

Hinzufügen eines Hintergrundbilds

Wählen Sie das Bild aus, das Sie als Hintergrund hinzufügen möchten. Es gibt viele Websites, auf denen Sie solche Hintergründe herunterladen können. Alternativ können Sie ein Bild verwenden, das bereits auf Ihrem Computer gespeichert ist.

Laden Sie das Bild ins Internet hoch. Bei vielen können Sie Bilder kostenlos hochladen. Holen Sie sich den URL-Link zu Ihrem Hintergrundbild. Dazu müssen Sie das Bild in Ihrem Browser öffnen und die URL kopieren.

Fügen Sie den Code ein, um ein Bild als Hintergrund hinzuzufügen. In HTML sieht es so aus:

Hintergrundbild: URL(Bild-URL);

Sie müssen Code dort hinzufügen, wo der Hauptteil der Seite im HTML beginnt. Speichern Sie die Änderungen nach der Bearbeitung und laden Sie Ihre Website. Sie werden sehen, dass das Bild die Hintergrundfarbe vollständig ersetzt hat.

Bedenken Sie jedoch, dass das Laden zu großer Bilder sehr lange dauern kann, was für viele Besucher unangenehm sein wird. Versuchen Sie daher, für diesen Zweck kleine Bilder auszuwählen.

Mittels CSS-Farbe und Hintergrund Sie können es fast jedem Element einer Webseite zuweisen, das Hintergrundbild und seine Wiederholung horizontal und vertikal frei steuern. Darüber hinaus können Sie mithilfe von CSS mithilfe der Positionierung ein Hintergrundbild an einer beliebigen Stelle auf dem Bildschirm platzieren. Lassen Sie uns vorerst nicht zu weit gehen, sondern der Reihe nach vorgehen.

COLOR-Eigenschaft

Diese Eigenschaft gibt die Farbe des Elements an, oder genauer gesagt, die Farbe des Textes innerhalb des Elements. Der Wert wird in einer der möglichen Formen angegeben:

• Farbname (GRÜN, SCHWARZ, ROT...);
• Hexadezimaler Farbcode (008000, 000000, FF0000...);
• dezimaler Farbcode in RGB (Farbe: RGB (40, 175, 250));

Die COLOR-Eigenschaft wird vererbt, und wenn für kein Element ein Wert festgelegt ist, wird der Wert von seinem Vorfahren geerbt. Es kann jedoch vorkommen, dass es auch beim Vorfahren nicht gesetzt ist – dann wird das Browser-Stylesheet mit den Standardwerten angewendet. Die Farbe des Elements wird in diesem Fall höchstwahrscheinlich schwarz sein.

Wie ich bereits erwähnt habe, kann man für fast alle Elemente eine Farbe festlegen, das können (H1... H6), (strong, em) und sogar ganze Zahlen (p) und sogar Tabellenränder sein, aber dazu später mehr.

Schauen wir uns ein Beispiel für das Festlegen der Textfarbe mithilfe von CSS an:

h1 (Farbe: Blau)

In diesem Beispiel sind alle Überschriften der ersten Ebene der Webseite blau:

stark (Farbe: rot)

In diesem Fall wird alles, was im Text der Seite steht, mit dem Tag hervorgehoben stark, wird rot.

Sie können es so schreiben:

h1, p, stark (Farbe: grün)

Dann werden die Überschriften der ersten Ebene, alle Absätze und alles, was mit einem Tag hervorgehoben ist, grün angezeigt.

Wenn es erforderlich ist, Überschriften in verschiedenen Farben hervorzuheben, werden Klassenselektoren verwendet. Um eine Klasse in HTML zu definieren, wird das Attribut verwendet Klasse, die auf beliebige Elemente angewendet werden kann. In den HTML-Code müssen Sie schreiben:

class="Blau" > Die Kopffarbe dieser Klasse ist blau

In diesem Fall schreiben wir im CSS-Stylesheet eine Regel, bei der der Selektor das H1-Element ist und durch den Punkt ( . ) Klassenname:

h1.Blau (Farbe: Blau)

In HTML-Dokumenten werden auch Selektoren nach Bezeichnern verwendet; sie werden durch das Attribut bestimmt Ausweis. Ein Bezeichner ist ein wichtigeres oder prioritäres Attribut als eine Klasse. Und wenn für ein Element im HTML-Code sowohl eine Klasse als auch ein Bezeichner angegeben sind, wird der Bezeichnerstil angewendet. Die Kennung wird durch ein Rautezeichen ( # ). Um den Bezeichner im HTML-Code zu verwenden, müssen Sie Folgendes schreiben:

id="Blau" > Die Kopffarbe dieser ID ist blau

Im Stylesheet wiederum:

h1#Blau (Farbe: Blau)

BACKGROUND-COLOR-Eigenschaft

Mit dieser Eigenschaft können Sie die Hintergrundfarbe für die gesamte Seite, einen Absatz, einen Link oder allgemein für jedes HTML-Element festlegen. Dazu gibt der Eigenschaftswert eine Farbe oder einen Wert an transparent(transparent). Der Code für den Seitenhintergrund lautet:

Körper (Hintergrundfarbe: Aqua)

In diesem Fall ist der Hintergrund der Seite türkis, und um der Kopfzeile den Hintergrund zu geben, schreiben wir:

h1 (Hintergrundfarbe: gelb)

Wir erhalten einen gelben Hintergrund für die Überschriften der ersten Ebene.

Farbe und Hintergrund in CSS

BACKGROUND-REPEAT-Eigenschaft

Diese Eigenschaft wird verwendet, wenn sie festgelegt ist, um zu bestimmen, ob sie horizontal und vertikal wiederholt wird. Gültige Werte:

• wiederholen- das Bild wird vertikal und horizontal wiederholt;
• wiederholen-x- das Bild wird nur horizontal wiederholt;
• wiederholen-y- das Bild wird nur vertikal wiederholt;
• keine Wiederholung- Das Bild wiederholt sich nicht.

Der Code ist wie folgt geschrieben:

P(
Hintergrundbild: URL( Adresse der Bilddatei) ;
Hintergrundwiederholung: Wiederholung-x
}

Der Text dieses Absatzes wird über dem Hintergrundbild angezeigt, das horizontal positioniert wird.

BACKGROUND-ATTACHMENT-Eigenschaft

Diese Eigenschaft wird verwendet, um dem Browser anzugeben, ob das Hintergrundbild der Seite mit Text scrollen soll ( scrollen) oder regungslos bleiben ( Fest).

Körper (
Hintergrundbild: URL( Adresse der Bilddatei) ;
Hintergrundwiederholung: Wiederholung-x;
Hintergrundanhang: behoben
}

In diesem Fall bleibt das Hintergrundbild bewegungslos.

BACKGROUND-POSITION-Eigenschaft

Diese Eigenschaft wird verwendet, um das Bild relativ zu zu positionieren. Werte werden in Prozentsätzen (%), in Längeneinheiten (cm, px) mit Schlüsselwörtern angegeben:

• Vertikal:
• Spitze- der obere Rand des Bildes wird am oberen Rand der Seite oder des Blocks ausgerichtet;
• Center
• unten- Der untere Rand des Bildes wird am unteren Rand der Seite oder des Blocks ausgerichtet.
• Waagerecht:
• links- der linke Rand des Bildes wird am linken Rand der Seite oder des Blocks ausgerichtet;
• Center- Die Mitte des Bildes wird an der Mitte der Seite oder des Blocks ausgerichtet.
• Rechts- Der rechte Rand des Bildes wird am rechten Rand der Seite oder des Blocks ausgerichtet.

Wir schreiben einen Beispielcode in Prozentsätzen, Längeneinheiten und Schlüsselwörtern:

Körper (
Hintergrundbild: URL( Adresse der Bilddatei) ;
Hintergrundposition: 0 % 0 %
}

Körper (
Hintergrundbild: URL( Adresse der Bilddatei) ;
Hintergrundposition: 10px 25cm
}

Körper (
Hintergrundbild: URL( Adresse der Bilddatei) ;
Hintergrundposition: oben in der Mitte
}