Die Anleitung zu HTML Styles

HTML Styles
Inline Style
CSS Class
Die FIle CSS

1. HTML Styles

Das Geschicht über HTML Styles beginnt seit 1994 wenn website dabei als eine Plattform für die elektronischen Verlagswesen starteten. die Leute fanden, es ist sehr schwierig, eine Website mit dem Layout und Stil wie die traditionelle Papier-Zeitung zu erstellen. Das erstellt eine Nachfrage von einer ''style sheet language'' und so wurde die Sprache CSS (Cascading Style Sheets) geboren.

CSS ist ein interessantes Thema und hat viele Dinge zu sagen. Es soll detailiert in einen eigenen Artikel vorgestellt, einschließend die Geschichte und die Vorteile von CSS . Es ist prima, meinen Artikel über CSS in die folgenden Link zu lesen:
Lich su cua CSS

Im Grunde definiert CSS die Stile, die für die Elemente von HTML angewendet werden können, z.B das Lineal, die Farbe, die Schriftsart...

In dieser Unterricht werde ich Sie vorstellen, wie Style in HTML zu verwenden, und einige grundlegenden Properties von CSS. Wir haben einen getrennten Thema über CSS und Sie können mehr detailiert hier lernen.

Anleitungen CSS

2. Inline Style

Der einfachste Weg zur Anwendung des Stil für ein Element ist die Verwendung von Attribut style.

<tagname style="property1:value1; property2: value2">

Zum Beispiel:

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue; font-weight:bold">I am blue and bold</p>

<p style="font-size:35px; font-style:italic">I am big and italic</p>

color, font-size, font-style, font-weight sind die Properties von CSS. Jedes Property von CSS reguliert einen Aspekt vom Stil für das Element.

OK, Wir werden die einigen üblichen Properties von CSS durch die folgenden Beispiele kennenlernen

CSS background-color

Das Property CSS background-color wird benutzt um die Hintergrundsfarbe für das Element festzulegen. Es ist nützlich für die Sub-Elementen des aktuellen Element.

background-color-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Style</title>
    <meta charset="UTF-8"/>
</head>
<body style="background-color: AliceBlue;">
     <h1>CSS background-color</h1>

     <p style="background-color:yellow">My Background Color is yellow!</p>
</body>
</html>

CSS color

Das Property CSS color wird benutzt um die Texte-Farbe des Element festzulegen. Es ist nützlich für die Sub-Elementen vom aktuellen Element.

<p style="color:red;">I am red</p>

CSS font-family

Das Property CSS font-family wird benutzt um die Schriftart eines Element festzulegen. Es ist nützlich für die Sub-Elemente vom aktuellen Element.

font-family-example.html

<h1>CSS font-family</h1>
<hr/>
<div style="font-family: 'Comic Sans MS';">
  <h3>This is a Heading h3</h3>
  <p>This is a Paragraph</p>
</div>
<hr/>
<p style="font-family: Arial;">
  This is a Paragraph
</p>

CSS font-size

Das Property CSS font-size wird benutzt um die Größe der Schriftart des Element festzulegen. Es funktioniert mit den Sub-Elementen für das aktuelle Element.

font-size-example.html

<p>
    This is a Paragraph (Default font-size)
</p> 
<p style="font-size: 150%">
    This is a Paragraph (font-size: 150%)
</p>
<p style="font-size: 35px">
    This is a Paragraph (font-size: 35px)
</p>

CSS text-align

Das Property CSS text-align wird benutzt um die horizontale Textsausrichtung festzulegen. Es hat drei Werte: left, center, right.

text-align-example.html

<p style="background-color:AliceBlue;text-align:left;">
    This is a Paragraph (text-align:left;)
</p>
<p style="background-color:AliceBlue;text-align:center;">
    This is a Paragraph (text-align:center)
</p>
<p style="background-color:AliceBlue;text-align:right;">
    This is a Paragraph (text-align:right)
</p>

3. CSS Class

CSS erlaubt Sie, eine Klasse zu erstellen. Es ist eine Gruppe der Properties und Sie können diese Klasse für ein oder mehreren Element anwenden. Die Klassen werden in einem öffenen Tag <style> und einem schließenden Tag </style>.

Das Tag <style> kann in das Dokument HTML gesetzt werden aber es wird empfohlen, im Tag <head> gesetzt zu werden.

Zum Beispiel: Definieren Sie eine Klasse mit dem Name von "app-note" innerhalb des Tag <style></style>. Achtung: Eine Punkt ( . ) soll gleich vor dem Name der Klasse gesetzt werden.

<style>
    .app-note  {
        font-size:90%;
        font-style: italic;
        color: red;
    }
</style>

Danach können Sie diese Klasse für die Elemente HTML anwenden:

<p class="app-note">
    This is a Paragraph
</p>
<div class="app-note">
  This is a Div
</div>

Die Kode des Beispiel hier sehen

css-class-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Class</title>
    <meta charset="UTF-8"/>
    <style>
        .app-note  {
            font-size:90%;
            font-style: italic;
            color: red;
        }
    </style>
</head>
<body>
<h3>CSS Class</h3>
<hr/>
<p class="app-note">
    This is a Paragraph
</p>
<div class="app-note">
  This is a Div
</div>
</body>
</html>

Zum Beispiel: Definieren Sie eine Gruppe der Properties, die ein bestimmtes Tag anwendet werden.

<style>
    div  {
        font-size:120%;
        color: CadetBlue;
    }
    code {
       font-weight: bold;
       font-style: italic;
       background-color: yellow;
       color: blue;
    }
</style>

<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>

Xem code đầy đủ của ví dụ trên:

styles-for-tag-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Styles for a Tag</title>
    <meta charset="UTF-8"/>
    <style>
        div  {
            font-size:120%;
            color: CadetBlue;
        }
        code {
           font-weight: bold;
           font-style: italic;
           background-color: yellow;
           color: blue;
        }
    </style>
</head>
<body>
<h3>Styles for a Tag</h3>
<hr/>
<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>
</body>
</html>

4. Die FIle CSS

Regelmäßig schreiben Sie die style in einer eigenen File CSS , das die File verwendbar durch die vielen unterschiedlichen Dokumenten HTML macht.

Zum Beispiel: Ich erstelle eine File mit dem Name von main.css:

main.css

div  {
    font-size:120%;
    color: CadetBlue;
}

code {
   font-weight: bold;
   font-style: italic;
   background-color: yellow;
   color: blue;
}

.app-note  {
    font-size:90%;
    font-style: italic;
}

und Sie melden an, die obengemeinte File CSS in das Dokument HTML zu verwenden:

using-css-file-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Using CSS File</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="main.css" />
</head>
<body>
<h3>Using CSS File</h3>
<hr/>
<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>
<br/> <br/>
<div class="app-note">
    This is a DIV with class 'app-note'
</div>
</body>
</html>