CSS要点札记
CSS(Cascading Style Sheet) 层叠样式表:控制布局和显示效果。
1、行内样式
直接写在标签里面，使用style属性提供的样式
style属性的语法
style = "样式名字1:值1;样式2...;样式名字n:值n";
示例：
(1)层的样式
<div style = "
border-color:green;
border-weight:1px;
border-left-style:solid;
border-right-style:dashed;
border-top-style:dotted;
border-bottom-style:double;
width:150px;
height:50;
display:outline
">这是一个文本</div><br/>
(2)字体的样式
<div style = "
border:5px solid red;
background-color:pink;
font-family:微软雅黑;
font-size:28;
color:red;
">这是一个文本</div>
2、内嵌样式
直接写在head标签中使用的样式,直接作用所有标签里面的样式
语法：
<style type="text/css">
样式名1{
样式内容1；
样式内容2；
}
样式名2{
样式内容1；
样式内容2；
}
</style>
示例：
<head>
<title></title>
<style type="text/css">
ul{list-style-type:none}
li{
margin-right:10px;
float:left;
color:blue;
font-family:华文彩云;
font-size:20px;
}
</style>
</head>
<body style = "margin:0px padding:0px" >
<ul>
<li>主页1</li>
<li>>>网购1</li>
</ul>
<ul>
<li>主页2</li>
<li>>>网购2</li>
</ul>
</body>
3、外部样式
-> 可以将样式单独的写在一个style.css中
-> 使用link将其链接过来
<link type = "text/css" href = "./style.css" rel = "stylesheet"/>
示例：
<head>
<title></title>
<link type = "text/css" href = "./mystyle.css" rel = "stylesheet"/>
</head>
4、常见的样式
4.1、边框样式
边框方向：
->border-top
->border-top
->border-right
->border-bottom
边框属性：
-> 颜色border-color
-> 样式border-style
-> 粗细border-weight
语法格式：
<style type="text/css">
.test{
border:2px solid red;
}
</style>
细边框：
<style type="text/css">
.t{
border-collapse:collapse;
}
</style>
示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.test,tr,td{
border:2px solid red ;
border-collapse:collapse;
}
</style>
</head>
<body>
<table class ="test">
<tr>
<td>djflkdsaj</td>
<td>djflkdsaj</td>
</tr>
<tr>
<td>djflkdsaj</td>
<td>djflkdsaj</td>
</tr>
</table>
</body>
</html>
4.2、margin与padding
margin设置元素的外边距 padding设置元素的内边距
-> 如果是单值
margin:0px 表示上下左右均为0
-> 如果是两个值
margin:10px 20px 表示上下边距均为10px，而左右均为20px
-> 如果是三个值
margin:10px 20px 30px
表示上边距为10px
下边距为30px
左右均是20px
-> 如果是四个值
顺序为：top right bottom left
4.3、使用选择器
(1)标签选择器 作用于整个页面中的所有标签
标签名 { 样式名 : 值; }
(2)id选择器 规范id唯一性
#id名 { 样式名 : 值; }
使用处添加属性id="id名"
(3)类选择器
.类名 { 样式名 : 值; }
使用处添加属性class="类名"
(4)伪选择器：设定标签样式的时候，根据状态设置不同的样式
<style>
a:link{
color:blue;
font-size:16px
}
a:hover{
color:yellow;
font-size:24px
}
a:active{
color:red;
font-size:36px
}
a:visited{
color:#9f365f;
}
tr:hover{
background-color:yellow;
}
</style>
<body>
<a href="#"><u>百度一下</u></a>
<a ><u>百度一下</u></a>
</body>
5、 Position 及脱离文档流
文档流就是堆砌如果需要控制其位置，需要考虑position属性设置其定位方式
（1）默认值 static
-> 按顺序的文档流堆砌
（2）相对定位 relative
-> 原来所在文档流中的位置一直占据
-> 设定left等参数的时候，相当于在原有文档流的位置基础之上左边偏移量
会由于偏移遮盖文本，但元素的位置与在文档流原本的位置是相对固定的
（*3）绝对定位 absolute
->该元素就脱离了文档流，可以设置其在浏览器窗体中的绝对位置；
->位置随滚动条滚动而改变(在浏览器窗体的位置固定了) ；
->当浏览器窗体不断缩小，最后导致元素位置会重叠，位置互换等情形的发生。
（*4）可视区固定 fixed
->该元素就脱离了文档流，可以设置其在浏览器可视区的绝对位置；
->位置不随滚动条滚动而改变；
->当浏览器窗体不断缩小，最后导致元素位置会重叠，位置互换等情形的发生。当可视区过小，元素可能"消失"。
以上几种定位的示例：
<head>
<style>
.d1{
border:2px solid black;
background-color:silver;
width:200px;
height:150px;
position:
bottom:30px;
right:30px;
}
.d21{
border:2px solid black ;
background-color:green;
width:100px;
height:50px;
position:relative;
top:20px;
left:20px;
}
.d22{
border:2px solid black ;
background-color:green;
width:100px;
height:50px;
position:relative;
top:20px;
left:20px;
}
.d31{
border:1px solid black ;
background-color:blue;
width:100px;
height:50px;
position:absolute;
top:5px;
left:5px;
z-index:50;
}
.d32{
border:1px solid black ;
background-color:green;
width:100px;
height:50px;
position:absolute;
top:5px;
right:5px;
z-index:100;
}
.d41{
border:1px solid black ;
background-color:red;
width:100px;
height:50px;
position:fixed;--不受滚动条影响，相对于浏览器可视区
top:200px;
left:200px;
}
.d42{
border:1px solid black ;
background-color:red;
width:100px;
height:50px;
position:fixed;--不受滚动条影响，相对于浏览器可视区
top:200px;
right:200px;
}
</style>
</head>
<body>
<br/>
文文文文文文文文文文文文文文文d1<div class="d1">d1</div>d1文文文文文文文文文文文文文文文<br/>
文文文文文文文文文文文文文文文d1<div class="d1">d1</div>d1文文文文文文文文文文文文文文文<br/>
<br/>
文文文文文文文文文文文文文文文d21<div class="d21">d21</div>d21文文文文文文文文文文文文文文文<br/>
文文文文文文文文文文文文文文文d22<div class="d22">d22</div>d22文文文文文文文文文文文文文文文<br/>
<br/>
文文文文文文文文文文文文文文文d31<div class="d31">d31</div>d31文文文文文文文文文文文文文文文<br/>
文文文文文文文文文文文文文文文d32<div class="d32">d32</div>d32文文文文文文文文文文文文文文文<br/>
<br/>
文文文文文文文文文文文文文文文d41<div class="d41">d41</div>d41文文文文文文文文文文文文文文文<br/>
文文文文文文文文文文文文文文文d42<div class="d42">d42</div>d42文文文文文文文文文文文文文文文<br/>
</body>
