分别如下:
1--行间样式表(内联样式)
<div style="……"></div>
2--内部样式表
<style>
选择器{属性:属性值}
</style>
3--外部样式表
<link href="style.css" rel="stylesheet“ type=“text/css”/>
1.行内样式 行内样式只能影响它所在的标签,而且总会覆盖嵌入样式和链接样式。<p style="font-size: 12pxfont-weight:boldfont-style:italiccolor:red">By adding inline CSS styling to the></p>
2.嵌入样式 嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式,但会被行内样式覆盖。
<head>
<style type="text/css">
h1 {font-size:16px}
p {color:blue}
</style>
</head>
3.链接样式
<link href="styles.css" rel="stylesheet" type="text/css" />
样式的写法
例子如下
1 ) p {color:redfont-size:12pxfont-weight:bold}
2 ) h1 {color:bluefont-weight:bold}
h2 {color:bluefont-weight:bold}
h3 {color:bluefont-weight:bold}
3)假设,你在写完前面那条规则后,又想只把h3变成斜体,那可以再为h3写一条规则:
h1, h2, h3 {color:bluefont-weight:bold}
h3 {font-style:italic}
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样式方法。