css笔记

1，对块的布局用
<style>
#文件名{
width:300px;
……
}
</style>
浮动 float:left;
浮动清除：clear:left;
2，盒子之间的距离用margin
margin:10px,10px,10px,10px;(上右下左)
或者：margin-top:10px;
实现水平居中：margin : 0,auto;
普通元素上下边距不是想加而是取最大的
3,盒子内的文字缩进用padding，内边距
padding:10px,10px,10px,10px;(上右下左)
或者：padding-top:10px;
4,盒子边界用border
border:dashed/solid 10px green;(虚线/实线)
border-style:
Border-width:
border-color:
可以一次性定义，例：border:solid 10px green
Border-top/right/bottom/left 来分别指定 边界厚度
5,内联元素,span
竖直方向不能设置缩进，不独占一行
与快状元素的转换：Display:inline/block
6,引入css文件
1.平时使用的，在head中声明<style>，在里面写
2.写在专门的css文件里面
<link rel=” ” href=”xxx.css” type=””/>
*css选择器
1.#id 2.div 3.类.classid 4.派生 #main img
5.群,同时两个生效 #main,div
6.伪类 链接没被点击过 :link  
链接被点击过 : visited  
鼠标放在链接上 :hover  
鼠标点击的瞬间 :activ
7.ol,ul,table
List-style-type : 列表项的显示标志 ,通常none
List-style-image: 用于替换显示标志的图片. 
List-style-postion:inside/outside ,显示标志与列表内容的位置关系


<table>
<tr>
<td colsspan=”4”> 1 </td> //横着占四列
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Border-collapse: 边框是否融合.separate(独立的边框) Collapse,(共用).  
Border-spacing: xps,ypx;边框间距 ,分别代表单元格在x,y轴的距离)  
Empty-cells: 空表格是否显示. 可选值: hide, show ,默认是hide  
注意: 如果border-collapse值为 collapse时, border-spacing,和empty-cells 自动失效.  
想让空表格显示的处理方式: 
1:在空单元格里加一个空白符" "; 
2:让表格边框融合 collapse  
表格的适用范围: 显示格式化数据 不适用于页面布局
8.文本控制
text-indent  :20px;首行的缩进距离. 
text-align:center;文字在水平方向上的对齐方式 
text-decoration : none,underline,overline,line-through,blink修饰线的效果. 
 letter-spacing :20px;字符之间的距离  
word-spacing :20px;单词与单词之间的距离   
text-transform :uppercase, lowercase,capitalize; 一定规则转换字母的大小写字体：
Color: red ;
Font-style ::italic/normal/oblique ;  斜体显示或正常显示
Font-weight: normal/bold  字体粗细 
Font-size: 10px;字体大小  
Line-height: 10px;文字所占的高度,(特点:在一行内,文字总是相对于行居中显示,所以可以利用这个特性让文字相对于容器居中)   
Font-family: 设置字体 
写在一行里: Font: style weight size/line-height family
11.超链接标签
<a href=” ” target=” “> 可以点击哦 </a>
锚点：点击到达某个位置
<a href=”#123”>锚点</a> //点击这个锚点会跳到名字是123的地方。
<p name=”123” id=”123” >跳到这里</p>
12.a标签伪类
a :link{Color:red;} //未访问，变颜色
a:visited{Color:red;}//已访问，变颜色
a:hover{Color:red;}//鼠标移动到连接上
a:active{Color:red;}//选定的链接

13.图片
背景图片：background:url(./image/~.jpg);
<img src=” .jpg” alt=”” id=”logo”/ >
14.色彩的表示
1：#FFA083//红 绿 蓝 16进制
2：rgb(34,45,89) //10进制
3：red,green //通过颜色名称
15.尺寸的表示
1：像素px
2：百分比 50% 占父元素的百分比
3：字体大小可以用 px
1em相对大小，相当于一倍的父元素大小。
16.画圆角
方形的角是圆的
Width:100px;
Height:100px;
Border:1px solid blue;//画出边框
Border-radius:5px;//半径
在某一方向圆角：
Border-radius-top:5px;
17.相对定位与绝对定位
相对定位：元素偏离自己正常位置。（原本的位置别的还是不能占用）
position:relative;//相对
top:20px;//与上边有20距离
left:20px;

绝对定位：相对于父元素定位（父元素要求有position属性，否则找父的父，直到body）（没有占实际位置，在空中覆盖）
position:absolute;
top:20px;//距离父元素上边
**z-index:1000;//飞的高度，越高越能覆盖其他的
18. overflow溢出处理
溢出父类时：
1：overflow:visible;//默认
2：overflow:hidden;//隐藏溢出的部分
3：overflow:scrol;//有滚动条
4：overflow:auto;//多啦加滚动条，不溢出则不处理l
有时清除浮动的时候会用到。
19.表单（登录注册~~~）
1：格式，默认值
<form action=”http://www.” method=”post”>//action控制往什么地方法。方式。
用户名<input type=”text” name=”username”/>//name用于后台区分
</form>
普通文本框: <input type="text" name="xx" value="董子敬" /> 
密码框: <input type="password"  name="xxx" value="123456" /> 
单选按钮:<input type="radio" name="xxx" value="男" checked="checked" /> 
复选: <input type="checkbox" name="xxx" value="足球"  checked="checked" />  
提交:<input type="submit" value="提示文字" /> (一般不要加name) 
重置:<input type="reset" value="提示文字" />  
下拉列表: 
<select name="xxx"> 
<option value="大学" selected="selected">大学</option> 
<option value="高中">高中</option> 
</select>  

文本域: 
<textarea name="xxx"></textarea>
文件域: 
上传头像：<input type="file" name="xxx" />
隐藏域：//根本看不见
<input type=”hidden” name=”xxx” value=”192.168.1.100”/>

 
框架集:framset 
不写body
1：拆成两行：
<framset rows=”200px,*>
<frame src="源网页1" name="xxx" /> 
<frame src="源网页2" name="yyy" />  
</framset>
2：拆成两列
<frameset cols="20%,*"> 
<frame src="源网页1" name="xxx" />
<frame src="源网页2" name="yyy" />  
</frameset>  

3：品字形
<frameset rows="150px , *"> 
<frame src="源网页1" name="xxx" />   
<frameset cols="20%,*"> 
<frame src="源网页1" name="yyy" /> 
<frame src="源网页2" name="zzz" /> 
</frameset> 
</frameset>  


典型问题: 左侧的导航链接点击时,页面如何在右侧区域显示?  
曾经target的作用是填blank，点击后开启一个新页面。

<framset rows=”200px,*>
<frame src="源网页1" name="在这里显示" /> 
<frame src="源网页2" name="yyy" />  
</framset>


在源网页2中
<body>
<a href=”网页3” target=”在这里显示”>连接</>
</body>