codestory

Die Anleitung zu HTML Styles

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

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

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>

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.