Heim >Web-Frontend >CSS-Tutorial >Was ist Vererbung in CSS? Wie verwende ich CSS?
Was ist Vererbung in CSS? Wie verwende ich CSS?
- 青灯夜游nach vorne
- 2018-10-20 16:43:262695Durchsuche
Der Inhalt dieses Artikels soll Ihnen vorstellen, was CSS-Vererbung ist. Wie verwende ich CSS? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Vererbung von CSS
Vererbung von CSS bedeutet, dass, wenn Tags eine verschachtelte Beziehung haben, das innere Tag automatisch das äußere Tag ohne Konfliktstil besitzt der Natur.
Einige Eigenschaften in CSS dürfen nicht vererbt werden. Beispielsweise verfügt die Border-Eigenschaft über keine Vererbung. Keine der Eigenschaften der Multi-Border-Klasse wird vererbt, wie z. B. Innenabstand, Rand, Hintergrund usw.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="GB2312">
<title>css使用实例</title>
<style type="text/css" >
div{
color: red;
font-size: 10pt;
font-weight: bold;
font-family: 黑体;
border: 1px solid #000;
}
p{
color: blue;
font-size: 12pt;
font-style: italic;
}
em{
color: green;
}
</style>
</head>
<body>
<p>这是蓝色，12pt，斜体，默认宋体</p>
<div>
<p>这是蓝色，12pt，斜体加粗，黑体</p>
</div>
<br>
<div>这是红色，10pt，加粗，黑体，有边框</div><br>
<div>
这是红色，10pt，黑体<br>
<em>我是em元素的文字，绿色文字周边无边框</em>
</div>
</body>
</html>
So verwenden Sie CSS
Es gibt drei Hauptmöglichkeiten, CSS in HTML-Seiten zu verwenden: Eingebettet Modus, internes Stylesheet, verwenden Sie das Tag , um auf ein externes Stylesheet zu verlinken.
1. Eingebettete Methode (CSS-Code in HTML-Tags schreiben.)
Beispiel:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>内嵌方式</title> </head> <body> <p align="center" style="color: red;">内嵌方式</p> </body></html>
2. Internes Stylesheet
Ähnlich wie Inline-Stylesheets , CSS-Codes werden in HTML-Dokumenten geschrieben; der Unterschied besteht darin, dass interne Stylesheets nicht in Tags geschrieben sind und ein bestimmtes Format haben.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表示例</title>
<style type="text/css">
p{
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>
3. Verwenden Sie den -Tag, um externe Stylesheets zu verlinken.
ähneln internen Stylesheets, da sie ein bestimmtes Format haben Das liegt daran, dass sein CSS-Code in der Datei .css außerhalb des HTML-Dokuments geschrieben ist und bei der Verwendung in Anführungszeichen gesetzt werden muss.
Beispiel:
html1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>外部样式表示例</title> <link rel="stylesheet" href="css/css1.css" /> </head> <body> <p>外部样式表</p> </body> </html>
CSS1.css
p {
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
Zusammenfassung : Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter CSS-Basis-Video-Tutorial , CSS3-Video-Tutorial , Bootstrap-Video-Tutorial !
Das obige ist der detaillierte Inhalt vonWas ist Vererbung in CSS? Wie verwende ich CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!