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

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

不言

Freigeben： 2018-08-18 14:47:18

Original

8736 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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!