HTML中怎么导入css？

html-css023

HTML中怎么导入css？,第1张

(1).行内样式(在标签后面直接写样式)

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<title>行内样式</title>

</head>

<body>

<pstyle="font-famliy:宋体text-align:centerfont-style:italictext-transform:uppercasefont-size:22pxtext-decoration:underlinefont-weight:boldletter-spacing:13px">html中插入css样式的方法:</br>1行内样式；2内部样式；<br/>3外部样式；4导入样式；</p>

</body>

</html>

(2)嵌入式（将样式和html语言分开写）

<!doctypehtml><html><head>

<metacharset="utf-8">

<title>行内样式</title>

<styletype="text/css">

p{text-decoration:underlinetext-align:centerfont-size:26pxfont-family:宋体font-weight:boldertext-transform:lowercaseletter-spacing:4pxcolor:pinkbackground-color:green}

</style></head><body>

<p>HTML中插入CSS样式的方法:</br>

1行内样式；2内部样式；<br/>

3外部样式；4导入样式；</p></body></html>

3.外部样式（链接式：将CSS和HTML分开写）！！！！最常用

first.html

<!doctypehtml><html><head>

<metacharset="utf-8">

<title>行内样式</title>

<linkhref="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

<!doctypehtml><html><head>

<metacharset="utf-8">

<title>行内样式</title>

<styletype="text/css">

@importurl(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}

我们在HTML中经常需要引入CSS和JS文件，那么如何引入呢？下面我给大家演示一下。

工具/材料

Sublime Text

01

首先新建一个文件夹，在文件夹下面建立如下图所示的文件

02

接下来用Sublime Text打开HTML文件，写入HTML结构，如下图所示

03

然后我们在Head标签内用link标签引入CSS文件，如下图所示

04

最后用Script标签引入JS文件即可，如下图所示