本篇文章給大家帶來的內容是關於html中怎麼插入CSS？css插入html的四種方法介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。
1.注釋：
(1).HTML的注釋:
(2).CSS的注釋：/* *
2.HTML中插入CSS（層疊樣式表）的方法
(1).行內樣式 (在標籤後面直接寫樣式)
<!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)嵌入式（將樣式和html語言分開寫）
<!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.外部樣式（連結式：將CSS和HTML分開寫）！！！！最常用
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;}
4.匯入式
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;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
