Heim > Artikel > Web-Frontend > Wie füge ich CSS in HTML ein? Einführung in vier Methoden zum Einfügen von CSS in HTML (mit Code)

Wie füge ich CSS in HTML ein? Einführung in vier Methoden zum Einfügen von CSS in HTML (mit Code)

不言Original: 2018-08-18 14:47:188699Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man CSS in HTML einfügt. Eine Einführung in die vier Methoden zum Einfügen von CSS in HTML (mit angehängtem Code) hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

1. HTML-Kommentare:
(2). CSS-Kommentare: /* *

2 Stylesheet)-Methode

(1). Inline-Stil (schreiben Sie den Stil direkt nach dem Tag)

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>行内样式</title>
   </head>
   <body>
    <p style="font-famliy:宋体; text-align:center;font-style:italic; text-transform:uppercase; font-size:22px;  text-decoration:underline; font-weight:bold; letter-spacing:13px">html中插入css样式的方法:</br>1 行内样式；2 内部样式； <br/>3 外部样式； 4 导入样式；</p>
    </body>
    </html>

(2) Eingebettet (schreiben Sie den Stil und die HTML-Sprache separat)

<!doctype html><html><head>
   <meta charset="utf-8">
   <title>行内样式</title>
   <style type="text/css">
   p{    text-decoration:underline;    text-align:center;    font-size:26px;    font-family:宋体;    font-weight:bolder;    text-transform:lowercase;    letter-spacing:4px;    color:pink;    background-color:green;   }

   </style></head><body>
    <p >HTML中插入CSS样式的方法:</br>
        1 行内样式；2 内部样式； <br/>
        3 外部样式； 4 导入样式；    </p></body></html>

3 . Externer Stil (Linkstil: CSS und HTML separat schreiben)! ! ! ! Das am häufigsten verwendete

first.html

<!doctype html><html><head>
   <meta charset="utf-8">
   <title>行内样式</title>
   <link href="first.css" type="text/css" rel="stylesheet"></head><body>
    <p >HTML中插入CSS样式的方法:</br>
        1 行内样式；2 内部样式； <br/>
        3 外部样式； 4 导入样式；    </p></body></html>

first.css

p{    text-decoration:underline;/*加下划线*/
    text-transform:lowercase;/*大写字母全部小写*/
    text-align:center;/*居中*/
    font-size:23px;/*字体大小*/
    font-family:黑体;/*设置字体*/
    font-style:italic;/*设置字倾斜*/
    text-indent:3px;/*设置首行缩进*/
    color:red;/*设置字体颜色*/
    background-color:#ddd;/*设置背景颜色*/
    letter-spacing:4px;}

Importiert

first.html

<!doctype html><html><head>
   <meta charset="utf-8">
   <title>行内样式</title>

   <style type="text/css">
    @import url(first.css);   </style></head><body>
    <p >HTML中插入CSS样式的方法:</br>
        1 行内样式；2 内部样式； <br/>
        3 外部样式； 4 导入样式；    </p></body></html>

first.css

p{    text-decoration:underline;/*加下划线*/
    text-transform:lowercase;/*大写字母全部小写*/
    text-align:center;/*居中*/
    font-size:33px;/*字体大小*/
    font-family:黑体;/*设置字体*/
    font-style:italic;/*设置字倾斜*/
    text-indent:3px;/*设置首行缩进*/
    color:red;/*设置字体颜色*/
    background-color:#ddd;/*设置背景颜色*/
    letter-spacing:4px;}

Verwandte Empfehlungen:

JavaScript-Methode zum dynamischen Einfügen von CSS_Javascript-Kenntnissen

So führen Sie CSS in HTML ein

Das obige ist der detaillierte Inhalt vonWie füge ich CSS in HTML ein? Einführung in vier Methoden zum Einfügen von CSS in HTML (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 样式表

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind die CSS-Selektoren? Zusammenfassung der Verwendung von CSS-SelektorenNächster Artikel：Was sind die CSS-Selektoren? Zusammenfassung der Verwendung von CSS-Selektoren

In Verbindung stehende Artikel

Mehr sehen