css:cascading style sheet:层叠样式表
做什么用:设置网页的样式 超文本标签语言
css将网页的显示效果和内容分离(耦合性)
HTML只需要把文本内容封装起来，不用属性，用css的代码再控制显示效果
如果开发了多套css的代码，都不用改变HTML代码
1再html的标签上，提供了一个属性，style=“CSS代码”
2在HTML的文件，提供一个（标签） ,这个标签放在的中间
3引入外部文件的方式(引入CSS的文件，定义一个css文件（后缀名demo.css）) (经常使用的方式) *@import url(“css文件的地址”);属性必须要写在内部。大写小写都没问题，必须有;
4引入外部文件的方式，通过 写在中间，不要放在中间 (经常使用)
* rel:代表当前和引入文件之间的关系 * type:切换成某种模式 * href:引入css文件的地址例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="zong.css" /> <!--第二种结合方式--> <style type="text/css"> /*div{ background-color: fuchsia; color: yellow; }*/ /*@import url("div.css"); @import url("span.css");*/ /*@import url("zong.css");*/ </style> </head> <body> <!-- *CSS与HTML的结合方式（4种） *再html的标签上，提供了一个属性，style="CSS代码" *在HTML的文件，提供一个（标签） <style type="text/css">CSS代码</style>,这个标签放在<head></head>的中间 * 引入外部文件的方式(引入CSS的文件，定义一个css文件（后缀名demo.css）) (经常使用的方式) *@import url("css文件的地址");属性必须要写在<style></style>内部。大写小写都没问题，必须有; *引入外部文件的方式，通过<link> 写在<head></head>中间，不要放在<style></style>中间 (经常使用) *rel:代表当前和引入文件之间的关系 * type:切换成某种模式 * href:引入css文件的地址 --> <div style="background-color: red;color: lime;">这是div的区域1</div> <div>这是div的区域2</div> <span>这是span的区域1</span> <span>这是span的区域2</span> <p>这是p的区域1</p> <p>这是p的区域2</p> </body> </html>从上到下，从左到右，由外到内，优先级从低到高（一般情况）
规范
css的写法: div{css的属性名:值;css的属性名:值;...} 如果一个属性有多个值，值与值之间用空格隔开 例子： div{xx: aa bb cc}飘起来
#div1{ background-color: #FF00FF; float: left;/*飘起来*/ }绝对定位
#div3{ background-color:aqua; position: absolute;/*绝对定位*/ top: 100px; left: 50px; }告诉css的代码作用在哪个标签上
在html的标签上，提供了属性class，定位标签
写法：.class的名称(.hehe{CSS代码})(美工经常使用)设置不同的标签，具有相同的样式
在HTML的标签上，提供的属性 设置样式
#id的名称(#haha{css的代码})一般情况下给js语言使用
标签可以嵌套，标签与标签之间的关系中间用空格隔开
div font{}对多个不同的选择器进行相同的样式
在多个不同的选择器之间用 , 隔开
.hehe,#haha{}定义好的选择器，我们可以直接用
input:FOCUS{}如果使用超链接伪元素选择器：使用顺序L V H A
/*未访问*/ a:link{ text-decoration: none; color: blue; } /*访问完成*/ a:visited{ color: yellow; font-size: 25px; } /*悬停*/ a:hover{ color: red; font-size: 25px; } /*点击*/ a:active{ color: green; font-size: 30px; }