css笔记
CSS笔记：
1、CSS：层叠样式表，用来美化页面，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色，背景颜色，边框等。
2、行内样式表：style的值为键值对 style="color:red;font-size:50px;"
<div
style="color:red;font-size:50px;font-family:微软雅黑;background-color:blue;width:300px;border-style:dashed;border-color:red;border-width:10px;cursor:pointer;"></div>
其中边框如果四条边框都一样也可以直接写为borde:10px dashed red;
如果分别设置的话则 border-top:10px dashed red;border-right:10px solid red;border-left:10px dotted red;border-bottom:10px double red;
cursor:pointer;鼠标移入div会光标变为小手
overflow:auto 当内容溢出的时候自动有滚动条，scroll一直有滚动条，visible正常显示，hiden隐藏
background-image:url(背景图片地址) 加背景图
background-repeat:repeat-x 背景图x轴平铺，repeat-y 背景图y轴平铺 repeat 背景图xy轴平铺
display:none 不显示 block 块级显示
3、margin:边距与外边框的距离 段落于段落间的距离
4、padding:填充，内部内容距离内边框的距离
5、标签选择器:给页面上所有p标签加样式
<style type="text/css">
p{
border:1px solid red;
}
</style>
6、css注释方法：/**/
7、id选择器：给id="div1" 的标签设置样式，id选择器前面必须加#
<style type="text/css">
#div1{
border:1px solid red;
}
</style>
8、类选择器：给class="cls"的标签设置样式 ，类选择器前面必须加.
<style type="text/css">
.cls{
border:1px solid red;
}
</style>
9、选择器的优先级：id选择器>类选择器>标签选择器；同等优先级情况下，哪个最后定义，就以哪个为准
10、组合选择器:给p标签以及id="div1"的标签设置样式
<style type="text/css">
p,#div1{
border:1px solid red;
}
</style>
11、标签+类选择器：给class="cls"的p标签设置样式
<style type="text/css">
p.cls{
border:1px solid red;
}
</style>
12、层次选择器：给div下的所有p标签设置样式
<style type="text/css">
div p{
border:1px solid red;
}
</style>
13、内嵌样式表：
给a标签设置样式：lvha
<style type="text/css">
a：link <!--超链接未被访问时的样式-->
{
font:14 宋体;
color:blue;
text-decoration:none; <!--超链接不显示下划线-->
}
a:visited <!--超链接点击过的样式-->
{
color:black;
font-size:50px;
font-family:微软雅黑;
}
a:hover <!--鼠标移到链接上的时候的样式-->
{
color:yellow;
text-decoration:underline;
}
a:active <!--选中超链接时的样式-->
{
color:red;
text-decoration:line-through;
}
</style>
14、引用外部样式表到html页：新建一个StyleSheet.css样式表，将上面的代码拷贝到样式表，然后在<head></head>标签内加如下代码就可以将样式表引用到html页。
<link href="StyleSheet.css" rel="stylesheet" />
15、引用外部样式表的好处：1）方便重用，便于分工合作 2）方便代码维护 3）减少页面的大小，更好的下载网页。
16、样式表的优先级：行内样式表>内嵌样式表=外部样式表。如果即有内嵌样式表又有外部样式表，则谁执行顺序靠后谁的优先级高。
17、文档流：html的排布遵循流式排列（即一个紧跟着一个排列）。
要想脱离流式排列可以在样式表中如下设置
position:absolute 相对于整个大页面绝对定位，必须要指定坐标 left:10px;top:10px；bottom:10px;right:10px; 原本其后的元素会占有其原来的位置
position:fixed 相对于可视页面的绝对定位（看起来），必须要指定坐标，原本其后的元素会占有其原来的位置
position:relative 相对定位，相对于其本身所在位置进行偏离，必须要指定坐标，并且一直占有原来的位置
position:inherit 继承自父元素，父元素怎样其就怎样
z-index 需要设置position:absolute;z-index大的显示在最上面
18、浮动：
向左浮动 float：left; 向右浮动 float:right;
<style type="text/css">
#dvhead{
background-color:blue;
height:150px;
}
#dvcontent{
background-color:red;
height:600px;
}
#dvbottom{
background-color:black;
height:100px;
}
#dvleft{
width:30%;
height:100%;
background-color:yellow;
float:left
}
#dvcenter{
width:50%;
height:100%;
background-color:green;
float:left;
}
#dvright{
width:20%;
height:100%;
background-color:purple;
float:left;
}
#dvcontenttop{
width:100%;
height:40%;
background-color:pink;
}
#dvcontentbottom{
width:100%;
height:60%;
background-color:orange;
}
</style>
<body>
<div id="dvhead"></div>
<div id="dvcontent">
<div id="dvleft">
<div id="dvcontenttop"></div>
<div id="dvcontentbottom"></div>
</div>
<div id="dvcenter"></div>
<div id="dvright"></div>
</div>
<div id="dvbottom"></div>
</body>
19、层居中：margin:0 auto;
内容居中：text-align:center;
20、改变css优先级:
1）、css优先级：行间的优先级>id选择器>类选择器>标签选择器
2）、如果要改变css的优先级，例如始终以标签选择器优先级最高，则在标签选择器的属性后面加 !important字段。
21、在样式表中引用别的样式表：@important url(别的样式表地址);
22、盒子模型：每个元素都有盒子模型，设置元素大小的时候会用到盒子模型。
border:10px solid red;padding:30px;margin:30px;
考虑元素大小不能只考虑元素的width，height，还要考虑border，padding,margin的大小。
23、框架：
1）、frameset （将整个页面分成多少块）
没有<body></body>标签，
把页面分成四块：
<frameset rows="50%,*" cols="50%,*">
<frame id="f1" src="1.html" />
<frame id="f2" src="2.html" />
<frame id="f3" src="3.html" />
<frame id="f4" src="4.html" />
</frameset>
把页面分成三块：先上下分成各两块，然后下面在分成两块
<frameset rows="30%,*">
<frame id="ftop" src="1.html" />
<frameset rows="30%,*">
<frame id="f2" src="2.html" />
<frame id="f3" src="3.html" />
</frameset>
</frameset>
2）、iframe （在同一个页面的任何一个地方嵌入另外一个页面）
<td style="padding:0;vertical-align:top;">
<iframe frameborder="0" src="*" scrolling="no" style="margin:0;width:100%;height:100%;"></iframe>
</td>
