Die Anleitung zu HTML Styles

View more Tutorials:

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:
  • TODO Link!
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.
  • TODO Link

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.
<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.
<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>

View more Tutorials: