CSS学习笔记

Css(层叠样式表）用于装饰html，指定样式，比如字体，行间距，背景色等等
1.标记选择器
<style type="text/css">
p{


}
</style>
2.类型选择器
<style type="text/css">
.r{

}
</style>

<p class="r">
3.id选择器
<style type=""text/css">
#p1{

}</style>
<p id="p1">
4.段内样式
<p style="color:red;font-size:20px">
5.链接样式
创建一个a.css文件
<link href="a.css" type="text/css" rel="stylesheet">
6.导入样式
创建一个a.css文件
<style type="text/css">
@import url(a.css);
</style>

交集选择器
p.r{

}
即当同时存在p，r两个选择器时，允许添加其公共的样式，交集选择器
并集选择器
p,r,#id{

}
即当存在p或者r或则id任意一个选择器时，允许添加的新样式
继承选择器p为span的父节点
p span{

}
子选择器，即仅仅适合于div是p的直接父类
div>p{

}
选择器的继承  ,子序列会继承父类样式
<ul>
<li class="e">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
选择器的层叠
段内选择器>id>类型>标记

Css常见文本编辑样式
font-family  设置字体类型如 黑体，宋体
font-style   设置斜体
font-size    设置字体大小
font-weight   设置字体加粗
text-align    设置字体居中或靠右
text-transform  设置字母大小写
text-decoration  设置下划线，删除线，上划线
text-indent   设置段落缩进
word-spacing   单词之间距离
letter-spacing  字母之间距离
border  设置边框
margin 设置边框之间距离
padding 设置距离上下边框距离

Css图片编辑
border-color 设置图片边框颜色
border-style 设置图片边框样式 实线还是虚线
border-width 设置边框宽度
float 设置图片的位置
margin 设置节点与节点间的距离
vertical-align 设置图片的对齐方式，剧中，头，底等对齐

Css背景设置
background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置背景的图片平铺方式  repeat-x水平平铺
background-attachment  设置背景图片是否一起移动


Css盒模型
由内向外分别是
内容-》padding-》border-》margin
border 分别设置宽度 颜色 样式
padding 顺时针设置填充距离
margin  顺时针设置填充距离

Css行类元素与块类元素的区别
行类元素 一字排开不独占一行
块类元素  独占一行

行内元素的margin设置
<span style="margin-right:20px;">span1</span>
<span style="margin-left:20px">span2</span>

块内元素的margin设置
<div style="margin-bottom:20px">div1</div>
<div style="margin-top:20px">div2</div>

当行内元素设置负值margin时左右元素可能重叠

Css盒子浮动
float:lef;    盒子向左浮动
clear:both     清除所有浮动

Css  z-index设置默认为0

Css盒子定位
position:fixed   随着划滚条一起移动
position:static  默认定位
position:relative  相对定位
left:10px;    相对向右移动
top:10px;     相对向下移动

Css display元素
display:inline   行内元素   s1 s2 s3
display:block     块内元素   s1
s2
s3


Css  表格编辑
<table class="t">
<caption>表头信息</caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</tfoot>


</table>
.t{
border:1px red solid;
border-spacing:    //设置格线距离
border-collapse:collapse   //设置格线合并
table-layout:fixed;      //设置格的尺寸是固定的
}


Css实现超链接设置
a:Link{    //当超链接地址未被访问时样式
}
a:VISETED{   //当超链接地址被访问后样式

}
a:hover{     //当鼠标移到超链接时样式
}


Css设置列表样式
list-style-type:       //设置列表前面符号
list-style-image:url('')  //符号用特定图片代替


Css布局
head
content     side
foot

一般用浮动法：
<div id="head">head</div>
<div id="content">content</div>
<div id="side">side</div>
<div id="foot">foot</div>

设置content  float:left
设置side      float:right
设置foot      clear:both