Inhalt
- Was ist CSS?
- HTML zu CSS Datei zu Bildschirm
- Weiterführende Literatur
- HTML mit externem Stylesheet
- Grundlegende HTML- und CSS-Tags, Elemente, Eigenschaften für eine Webseite
- Grundlagen zu HTML-Elementen
- Einfaches HTML-Dokument
- Tags definiert
- Erstellen Sie eine CSS-Datei
- Verknüpfen Sie das Stylesheet
- HTML mit Link zum Stylesheet
- Überprüfen Sie die Ergebnisse
- Abkürzung für Website-Entwicklung!
- HTML-Frame
- Fragen & Antworten
Frau Millar ist seit über acht Jahren Online-Autorin. Sie ist mit der Entwicklung von Websites vertraut und hat mehrere Websites erstellt.
Was ist CSS?
CSS steht für Cascading Style Sheet. Ein CSS-Code wird zum Gestalten eines HTML-Dokuments verwendet. Wenn Sie eine Website erstellen, liest ein Browser die HTML-Datei und alle im HTML geschriebenen CSS-Codes, Javascript usw. Es zeigt es dann entsprechend den Anweisungen dieser Codes an.
Manchmal wird der CSS-Code direkt in den HTML-Code geschrieben. Dies nennt man ein intern Stylesheet. Der Code wird zwischen den Tags head> und / head> mit dem Tag style> geschrieben.
In anderen Fällen wirkt sich der CSS-Code nur auf eine bestimmte Phrase, ein bestimmtes Wort oder einen bestimmten Absatz aus. Dies nennt man ein im Einklang Stylesheet. Es wird in dieselbe Zeile geschrieben, auf die es sich auswirken soll, indem das style> -Tag und das Attribut verwendet werden, das angewendet werden soll.
Wenn die Website mehrere Seiten enthält externes CSS wird eingesetzt. Dies ist die Art von Stylesheet, die wir heute behandeln werden. Das externe Stylesheet kann auf mehrere HTML-Dokumente angewendet werden. Wenn der CSS-Code geändert wird, wirkt sich dies auf alle Seiten aus. Eine gesamte Website kann aus einem Stylesheet formatiert werden. Dies spart viel Zeit, da Sie sonst jede einzelne Seite einer Website ändern müssten.
Durch Eingabe des Links> -Tags liest der Browser die Datei, zu der Sie einen Link eingegeben haben, und wendet sie auf alle Seiten der Website an.
Das Link> -Tag ist ein Zeiger, der innerhalb der Tags head> und / head> des HTML-Dokuments platziert wird.
Jeder Texteditor kann zum Schreiben eines CSS-Stylesheets verwendet werden. Heute werden wir Notepad verwenden.
HTML zu CSS Datei zu Bildschirm
Weiterführende Literatur
Lesen Sie weiter über die internes Stylesheet.
Lesen Sie weiter über die Inline-Stylesheet.
HTML mit externem Stylesheet
Grundlegende HTML- und CSS-Tags, Elemente, Eigenschaften für eine Webseite
| NOTATION | WAS WIRD AUF IHRER WEBSEITE TUN? | BEISPIEL |
|---|---|---|
>, /> | Die offenen und geschlossenen Klammern, die für Elemente verwendet werden, um dem Browser anzuzeigen, dass dies der Anfang ist und /> dies das Ende der angegebenen Elemente ist. IE, was Sie auf Ihrer Webseite sehen möchten und wie Sie es sehen möchten. Das> startet die Anweisung und /> schließt sie. | body> Hier haben Sie dem Browser mitgeteilt, dass dies der Anfang des Körpers ist. Wenn Sie im Body-Bereich eingegeben haben, was Sie wollen, MÜSSEN Sie mit / body> schließen. |
p>, / p> | Die Tags zum Öffnen und Schließen von Absätzen. Dies wird als Absatzabschnitt angezeigt. | p> Schreiben Sie Ihren Inhalt in diese Klammern ./> |
h1>, h2>, h3> bis h10> | Verwenden Sie diese Tags, um anzugeben, welche Überschrift angezeigt werden soll. Die Zahl 1-10 gibt an, welche Größenüberschrift Sie wünschen. h1> am größten sein. | h1> Ist die größte Überschrift / h1>. h2> Ist die nächste Größe kleiner./h2>. h3> Ist noch kleiner./h3> Und so weiter. |
{Eigentumswert;} | Eine Deklaration gibt die Eigenschaft und den Wert eines Elements an, wie es angezeigt werden soll. | {Farbe: Rot: Schriftgröße: 12px;} oder {Schriftstil: Kursiv:} |
Doppelpunkt: und das Semikolon; | Ihre Deklarationseigenschaft MUSS ein: (Doppelpunkt) hinter sich haben. Der Wert MUSS das haben; (Semikolon) danach wie gezeigt. | {Farbe Rot; Schriftgröße: 12px;} |
Stil> / Stil> | Dies sind die Start- und Schließstil-Tags. Sie teilen den Browsern mit, wie die HTML-Anzeige aussehen soll. Hier würden Sie einen internen oder Inline-Stil verwenden. | Kopf> Stil> h1 {Farbe: rot; Schriftgröße: 12px;} p {Farbe: blau; Schriftfamilie: Georgia; Schriftgröße: 12px;} / style / head> |
link> / link> | Dies sind die Start- und Schließlink-Tags. Sie würden Ihren Link zu einem externen Stylesheet zwischen diesen Tags platzieren. | head> link rel = "stylesheet" type = "text / css" href = "mystyle.css"> / head>. Dieser Link führt zu einem externen Stylesheet mit dem Namen und der Erweiterung "mystyle.css". |
Grundlagen zu HTML-Elementen
Wie Sie sich vorstellen können, gibt es eine Vielzahl von Möglichkeiten, Ihre Webseite hinzuzufügen, zu ändern und zu personalisieren. Der Punkt, den ich hier ansprechen möchte, besteht darin, Ihnen genügend Informationen zu geben, damit Sie etwas, das Sie erstellt haben, wie eine Webseite in Ihrem Internet Explorer anzeigen können. Sobald Sie gelernt haben, wie es angezeigt wird, können Sie es so bearbeiten, dass es so aussieht, wie Sie es möchten.
Um eine von Ihnen erstellte Seite der Welt im World Wide Web zu präsentieren, müssten Sie eine Website kaufen, auf der Ihre Seite platziert werden soll, und ein Hosting beauftragen, um sie anzuzeigen, wenn jemand Ihre Webadresse in die Suchleiste eingibt. Aber das ist uns weit voraus. Lassen Sie uns zuerst die Grundlagen der HTML-Elemente zum Laufen bringen!
In der obigen Tabelle wird das angezeigt und erläutert Basic HTML- und CSS-Elemente und etwas der Eigenschaftselemente, die Sie sehen möchten, wenn Sie Ihre Webseite anzeigen.
Wenn ein externer Link platziert ist nach dem das interne Stylesheet im Abschnitt HTML-Kopf> Das Äußere hat Vorrang vor dem Inneren Stylesheet.
Zuerst erstellen wir das grundlegende HTML-Dokument und zeigen es in Ihrem Browser an.
Das folgende HTML-Dokument enthält einige der häufigsten Elemente, die Sie finden. Sie werden sie im Laufe der Zeit sehr gut kennenlernen, da sie die Grundlage der HTML-Seite bilden. Mit Notepad erstellen wir eine Webseite und verknüpfen ein externes CSS damit.
Klicken Sie auf Start -> Alle Programme -> Editor
Geben Sie den folgenden Code ein:
Einfaches HTML-Dokument
! DOCTYPE html> html> head> h1> Das Erstellen einer eigenen Webseite ist Inspiringh1> body> Wenn Sie Ihren Browser öffnen und den Speicherort Ihres HTML-Dokuments eingeben, wird Ihre Seite wie eine Webseite angezeigt, da es sich um eine Webseite handelt! / Body > p> Die verschiedenen Tags, die Sie in Ihr HTML-Dokument einfügen, wirken sich auf die Anzeige Ihrer Webseite aus. Es liegt ganz bei Ihnen, wie kreativ Sie sein möchten. / P> / body> / html>
Tags definiert
Nachdem Sie den HTML-Code geschrieben haben, speichern Sie ihn zum einfachen Abrufen an einem Ort wie Ihrem Desktop. Verwenden Sie die Dateierweiterung .htm oder .html.
Der soeben eingegebene Code teilt dem Browser Zeile für Zeile mit, was angezeigt werden soll.
Die erste Zeile ist wichtig, da sie dem Browser mitteilt, welche Art von Dokument er liest.
Wenn Sie! DOCTYPE html> eingeben, wird dem Browser mitgeteilt, dass es sich um ein HTML-Dokument handelt.
Das HTML> teilt dem Browser mit, hier ist der Beginn der Webseite. / html> sagt es, dies ist das Ende der Webseite.
Das body> -Tag teilt dem Browser mit, dass dies auf dem Bildschirm angezeigt werden soll. Das Body-Tag endet mit / body> tag.
Durch Eingabe von h1> wird dem Browser mitgeteilt, dass dies die erste Überschrift ist. Wenn Sie die Nummer eins angeben, wird die Überschrift größer als der Rest des Textes. H2 ist kleiner als h1, h3 ist kleiner, h4 ist noch kleiner und so weiter.
Absätze beginnen mit p> und enden mit / p>.
Öffnen Sie nun Ihren Browser. Ich werde Internet Explorer verwenden.
Klicken Sie oben links auf der Seite auf -> Datei -> Durchsuchen und navigieren Sie zu dem Ort, an dem Sie das HTML-Dokument gespeichert haben. Klicken Sie auf das Dokument und drücken Sie OK.Die Seite wird jetzt in Ihrem Browser angezeigt!
Erstellen Sie eine CSS-Datei
Öffnen Sie nun ein neues Editor-Dokument. Klicken Sie auf Start -> Alle Programme -> Editor. Dies wird die CSS-Datei sein, zu der wir einen Link setzen.
Geben Sie den folgenden Code ein:
Körper
{
Hintergrundfarbe: gelb
}
{
Schriftfamilie: "Georgia";
Schriftgröße: 30px;
}
Klicken Sie auf Speichern und nennen Sie es so etwas wie "Mystyle" (abzüglich der Anführungszeichen). Speichern Sie es als CSS-Dateityp.
Verknüpfen Sie das Stylesheet
Ändern Sie die Farbe des Textes
Jetzt fügen wir der soeben im HTML-Dokument erstellten CSS-Datei einen Link hinzu, der die Hintergrundfarbe, den Schrifttyp und die Größe der angezeigten Schrift ändert.
Suchen Sie Ihr HTML-Dokument und öffnen Sie es.
Fügen Sie den folgenden Link> zum HTML-Code nach dem Abschnitt head> hinzu. (Geben Sie den Namen ein, unter dem Sie Ihre CSS-Datei gespeichert haben, wenn sie sich von der vorgeschlagenen mystyle.css unterscheidet.) link rel = "stylesheet" type = "text / css" href = "mystyle.css">
Dies teilt dem Browser mit, dass Sie ein Stylesheet verwenden, das im Format text / css vorliegt und in "mystyle.css" abgerufen werden soll.
Jetzt sieht Ihr HTML wie der folgende Code aus.
HTML mit Link zum Stylesheet
! DOCTYPE html> html> head> link rel = "stylesheet" type = "text / css" href = "mystyle.css"> / head> h1> Das Erstellen einer eigenen Webseite ist Inspiringh1> body> Wenn Sie Ihren Browser öffnen und eingeben An der Position Ihres HTML-Dokuments wird Ihre Seite wie eine Webseite angezeigt, da es sich um eine Webseite handelt! / body> p> Die verschiedenen Tags, die Sie in Ihr HTML-Dokument einfügen, wirken sich auf die Anzeige Ihrer Webseite aus. Es liegt ganz bei Ihnen, wie kreativ Sie sein möchten. / P> / body> / html>
Überprüfen Sie die Ergebnisse
Speichern Sie Ihren HTML-Code unter demselben Namen wie zuvor und klicken Sie auf OK wenn Sie aufgefordert werden, den aktuellen zu überschreiben.
Öffnen Sie Ihren Browser, klicken Sie auf Datei -> Öffnen -> Durchsuchen-> und navigieren Sie zu Ihrer HTML-Datei und klicken Sie darauf. Klicken Sie auf OK, und Ihre Seite sollte angezeigt werden. Es sollte ähnlich wie auf dem Bild unten aussehen.
Wenn Sie nur den Namen der Farbe in Ihrer CSS-Datei ändern, wird die Ausgabe geändert. Gleiches gilt für die Schriftart und die Schriftgröße.
Abkürzung für Website-Entwicklung!
Wie Sie gelernt haben, ist das Schreiben von HTML akribisch. Jedes Semikolon, jede Klammer, jedes Schließen / muss vorhanden sein, sonst zeigt der Browser es nicht richtig oder überhaupt nicht an. Dies kann sehr frustrierend sein, wenn Ihre Seite nicht oder falsch angezeigt wird und Sie Zeile für Zeile Ihres Codes nach dem suchen müssen, was Sie verpasst haben (Ja, was Sie verpasst haben. Browser lesen nicht falsch.)
Wenn Sie mehr als eine HTML-Seite schreiben oder einfach nicht vergessen möchten, wie diese geschrieben wird, können Sie den Vorgang vereinfachen, indem Sie eine Vorlage speichern, die allgemein als a bezeichnet wird Rahmen des HTML-Codes, von dem Sie wissen, dass er funktioniert. Wenn Sie dann eine HTML-Seite schreiben müssen, müssen Sie nur Ihren Rahmen öffnen und die Details eingeben! Unten sehen Sie ein Beispiel für einen Frame (Sie können den folgenden Frame kopieren, wenn Sie möchten).
HTML-Frame
! DOCTYPE html> html> body> h1> / h1> p> / p> / body> / html>
Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.
Fragen & Antworten
Frage: Wie erstelle ich ein internes Stylesheet mit HTML auf einem Notizbuch?
Antworten: Mit einem Notebook würden Sie den Editor öffnen (falls installiert) und die HTML-Seite wie geschrieben erstellen. Jedes Textverarbeitungsprogramm kann zum Schreiben von HTML verwendet werden. Der wichtige Teil ist das Speichern des von Ihnen geschriebenen Codes. Verwenden Sie beim Speichern unbedingt die Erweiterung .html
