English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML-Grundlagenanleitung

HTML媒体

HTML参考手册

HTML5 Grundlegende Anleitung

HTML5 API

HTML5 媒体

HTML-CSS

CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式。

在线更多示例

HTML使用样式
本示例演示如何使用添加到<head>部分的样式信息对HTML进行格式化。

演示如何使用样式属性做一个没有下划线的链接。
如何使用style属性制作一个没有下划线的链接。

链接到一个外部样式表
本示例演示如何 标签链接到一个外部样式表。

如何使用CSS

CSS是在HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性

  • Internes Stylesheet -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS

  • 外部引用 - 使用外部CSS文件

最好的方式是通过外部引用CSS文件.

在本站的HTML教程中我们使用了内联CSS样式来介绍示例,这是为了简化的示例,也使得你能更容易在线编辑代码并在线运行示例。

你可以通过本站的 CSS教程 学习更多的CSS知识。

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下示例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

学习更多样式,请访问 CSS教程.

HTML样式示例 - 背景颜色

背景色属性(background-color)定义一个元素的背景颜色:

Beispiel

!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8> 
<title>Grund教程(oldtoolbag.com)</title> 
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Das ist ein Titel</h2>
<p style="background-color:green;">Das ist ein Absatz.</p>
</body>
</html>
Testen Sie, um zu sehen, ob ‹/

Frühere Hintergrundfarbeigenschaft (background-color) wird mit der Eigenschaft bgcolor definiert.

Testen Sie, um zu sehen, ob ‹/›

Wird derzeit in der Regel verwendet font-family (Schriftart), color (Farbe) und font-size (Zeichengröße) Eigenschaft, um den Textstil zu definieren, anstatt das <font>-Tag zu verwenden.

HTML-Formatierungsbeispiel - Textausrichtung

Verwenden Sie text-Die Eigenschaft align (Textausrichtung) bestimmt die horizontale und vertikale Ausrichtung des Texts:

Online-Beispiel

!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8> 
<title>Grund教程(oldtoolbag.com)</title> 
</head>
<body>
<h1 style="text-align:center;">Zentriert ausgerichteter Titel</h1>
<p>Das ist ein Absatz.</p>
</body>
</html>
Testen Sie, um zu sehen, ob ‹/›

Textausrichtungseigenschaft text-align hat den alten Tag <center> ersetzt.

Internes Stylesheet

Wenn ein einzelnes Dokument einen speziellen Stil benötigt, kann ein internes Stylesheet verwendet werden. Sie können ein internes Stylesheet durch das <style>-Tag im <head>-Teil definieren:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

Externe Stylesheet

Wenn der Stil auf vielen Seiten angewendet werden muss, ist eine externe Stylesheet die ideale Wahl. Mit einem externen Stylesheet können Sie durch Ändern einer Datei das Erscheinungsbild der gesamten Website ändern.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML-Formatierungs-Tags

TagBeschreibung
<style>Definieren Sie den Textstil
<link>Definieren Sie die Adresse der Ressourcenreferenz

Veraltete Tags und Attribute

In HTML 4Die Tags und Attribute, die ursprünglich zur Definition von HTML-Element-Stilen verwendet wurden, sind nicht mehr unterstützt. Diese Tags werden in der neuen Version der HTML-Tags nicht unterstützt.

Nicht empfohlene Tags sind: <font>, <center>, <strike>

Nicht empfohlene Attribute: color und bgcolor.