<!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、链接完成后,在浏览器中预览它以查看链接是否成功。