css层叠样式表总结
一.css
css里注释只有一种 /* */
二.css与HTML四种结合方式
1.行内样式
在标签中加入style属性 内部的写法：key1:value;key2:value;
<div style="font-size:4cm">css</div>
2.内嵌样式
<style type="text/css">
div{
font-size:4cm;
}
</style>
作用于当前页面中所有具有相同选择器的标签
3.外部样式引入（主流）
<link rel="stylesheet" type="text/css" href="demo1.css"></link>
href指定的是样式文件的样式；必须一个个引入，多个link。
4. <style>
@import url(demon2.css); //分号一定要加
</style>
后三种引入方式一般都写在<head></head>中
优先级总结：就近原则
三.六种选择器
1.HTML选择器
div{
font-size:4cm;
}
2.id选择器 #定义css选择器
#mydiv{
color:red;
}
3. class选择器 .开始--------->引入时在标签中用class属性
.myclass{
font-weight:bold;
}
4.关联选择器
选择器1 选择器2 p div{
font-family:"黑体";
}
5.组合选择器
选择器1,选择器2{}
6.伪元素选择器
a:link 超链接未点击的状态
a:visited 被访问后的状态
a:hover 光标移到超链接上的状态（未点击）
a:active 点击超链接时的状态
<style>
a{
font-size:20px;
color:blue;
}
a:hover{
font-size:50px;
color:yellow;
}
a:visited{
font-size:10px;
color:green;
}
a:active{
font-size:100px;
color:red;
}
</style>
四.
1.字体样式
font-style:italic; 斜体
font-weight:bold; 粗体
font-size:36px; 字号
font-family:"黑体"; 字体
text-indent:2em; 首行缩进
2.文本样式
text-align:right; 右边输入
3.背景样式
background:red url('photo.jpg') 150px 40px no-repeat;
background-color:red;
background-image:url('photo.jpg');
background-position-x:150px;
background-position-y:40px;
background-repeat:no-repeat;(repeat-x 水平平铺;repeat-y 垂直平铺)
4.定位
div{
width:150px;
height:60px;
border:1px solid red; /*边框 宽度 实线 边框颜色*/
margin:2px; /*div与div之间的间距*/
margin:2px 3px 5px 上2px 左右3px 下5px
margin：2px 3px 上下2px 左右3px
padding:10px; /*边框与文字的距离*/
}
5.布局
float:right; /*漂浮效果 left center right*/
clear:both; /*清除 left right both*/
