HTML中怎么导入css?

html-css021

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方法如下

1、直接在HTML标签中内嵌css样式

2、html中使用style自带式

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件 推荐此方法

方法说明:

1、直接在html标签元素内嵌入css样式

我是div css测试内容

效果如下图

1.jpg

2、在html头部head部分内style声明插入

代码如下:

<!--

.ceshi {font-size:14pxcolor:#FF0000}/*这里是设置CSS的样式内容*/

-->

我是div css测试内容

效果同上。

3、使用@import引用外部CSS文件方法

HTML代码:

css引用方法实例

<!--

@import url(wcss.css)/*这里是通过@import引用CSS的样式内容*/

-->

我是div css测试内容

Wcss.css文件内代码.ceshi {font-size:14pxcolor:#FF0000}

4、使用link来调用外部的css文件

在head放置

来调用外部的wcss.css文件来实现html引用css文件

此方法就不需要style标签,而是直接通过link一个样式来引用外部样式,一般推荐使用link来引用外部的css样式方法。

1、在图像页面中,我们可以看到样式中的样式列表以及显示的渲染图。

2、选择样式中的所有CSS样式,然后复制或剪切。

3、然后ctrl+N创建一个新的CSS样式文件,如图所示,然后创建。

4、在创建的css样式文件中,粘贴刚刚复制到此处的文件。

5、导出时,您需要将其放在与上一个网页相同的文件夹位置。您可以创建一个新的css文件夹以便于导入。

6、然后返回到html文件,删除所有以前的样式,然后输入链接链接标记,链接以前保存的CSS样式,然后保存。

7、链接完成后,在浏览器中预览它以查看链接是否成功。