CSS属性

1.导入外联式：<link rel="stylesheet" type="text/css" href="../common.css"/>

2.宽高度属性： 像素（绝对） 百分比（根据窗口伸缩，相对上一级）

3.优先级：行内样式>内联样式>外联样式 （后定先用，若有重复则先用最后面的样式）

4.选择器
 关联选择器：标签下的标签关联设置 .nav| .nav-wrap p{}|.nav .wrap a{}
 组合选择器：多个标签一起定义 p a h1{}
 伪元素选择器：例如a标签 a:hover{font-size:14px;color:red;}
  p:first-line:red;p标记的第一行 第一个字母设置样式
  p:first-letter:red
  
5.文本： text-align:right left center;水平对齐
 text-decoration:underline overline line-through 下划线 上划线 删除线
 text-indent:10px;首行文本缩进
 line-height:20px 行高
 text-transform:capitalize 每个单词首字母大写 uppercase 全部大写 lowercase全小写
 direction:文本方向 ltr左  rtl右
 letter-spacing:10px字符间距
 word-spacing:单词间距

字体： font-size:10px;
 font-family:‘黑体‘;(字体使用：要保证别的电脑也有你用的字体，所以用一般电脑都有的字体，如果想用特殊字体，用图片代替)
 font-size:14px;
 font-weight:400（normal） 700(bold) 900(bolder)
段落对齐方式：
 vertical-align:middle top bottom sub下标 super上标
 例如设置表格里的字体显示方式<td style="vertical-align:middle/top/bottom">

排版方式设置：
 white-space:normal pre 原样输出 nowrap 不换行

6.背景：
 background-color:#fff 颜色
 background-image:url() 图片
 background-repeat:repeat-y;repeat-x;no-repeat 平铺
 background-position:center(center center) top(top center)bottom(bottom center)right(right center) left(left center)
 background-attachment:fixed固定或scroll(默认)滚动背景设置
组合写法：{background:#00ccff url(logo.png) no-repeat bottom right;}

7.定位： 

position:relative;top:20px;left:30px; 相对偏移，相对于文档流
 position:absolute;top:20px;left:30px; 绝对偏移 从文档流中分离出去
 例如：注册弹出窗口等 好处，不影响原有文档流
 z-index 深度改变显示层

8.鼠标样式
 cursor:url("m.ani") 加载自己的样式文件
 cursor:move 移动样式
 text 光标样式
 pointer 小手
 crosshair 十字焦点光标
 wait;等待

9.列表样式 ul li(无序) ol(有序)
 list-style-type:disc(实心圆) circle(空心圆) square(方块) none无
 list-style-image 列表图片符号
 list-style-position inside内部与所有文本同行 outside 外部与多行文本隔离

10.滚动条样式设置(若文本超出标签，内容溢出，则使用滚动条显示)
 overflow:visible(默认溢出) hidden scroll auto
 overflow:hidden 隐藏 scroll滚动条
 overflow-x：hidden scroll水平滚动条
 overflow-y:hidden scroll垂直滚动条
 div{overflow:scroll;} 为一个div设置滚动条

11.表格：
 table-layout:automatic;表格会根据内容改变宽度
       fixed;不根据内容长短改变宽度 

 caption-side：top left| bottom设置表格标题的位置

 border-spacing:10px 20px td单元格离表格左右10px 上下20px
 border-collapse:collapse td单元格和表格边框合并(忽略 border-spacing:20px 100px;)
 td:hover{color:red;} 鼠标放到td里文本变色
 

12.边框：

border:solid 1px #ccff66;
 border:none 隐藏边框
 border-width:1px
 border-style:solid 实线 dotted 点虚线 dashed 块虚线
 border-color:
 border-top-width:

13.为元素选择器
 a:link{} 默认样式
 a:hover{} 鼠标放上后样式
 a:visited{} 访问后样式
 a:active{} 按下时样式

 p:first-letter{}p标记中第一个字符的样式
 p:first-line{}p标记中第一个字符的样式

 h1:first-child{color:red;} 文档中的第一个h1标签字体为红色
 div.lt>h1:first-child{color:red;}  class为lt的div中的第一个h1标签的字体为红色
代码：
 <div class="lt"> <h1>111111</h1><h1>456987</h1></div>
 <div class="lt"> <h1>222222</h1><h1>456987</h1></div>
效果：111111和222222变为红色

14.文本框
 {border:#00F solid 2px; background:#fff color:red;}边框 背景色 输入的文本的显示颜色

一条线的文本输入框 {border:none;border-bottom:#ccc solid 1px;}只显示底部一条边框

15.按钮样式定义
 {width:100px;height:50px;background:#930 ;background-image:url()border:none;color:#6F0;}

 宽 高 背景色 边框 字体颜色
.ip{width:242px;height:38px;background-image:url(login-btn.png);border:none;color:#6F0;}
.ip_hover{border:solid 2px #900;width:242px;height:38px;background-image:url(login-btn.png);color:#6F0;cursor:pointer;}
cursor:pointer;鼠标放上去后显示一个手型
cursor:crosshair;十字焦点型
<input class="ip" type="submit" value="" onmousemove="this.className=‘ip_hover‘" onmouseout="this.className=‘ip‘"/>

16.矩形剪裁：对图片进行裁切显示
clip：rect(top right bottom left) auto 上 右下左
 clip:rect(10px 30px 50px 20px);

17.显示隐藏属性
 visibility:visible hidden(不隐藏空间位)
 display:none 同时隐藏空间位

18.display属性
 display：block inline inline-block 行内块元素 list-item(转换为列表级样式如:转换h1) none(隐藏)
 float:left right none

 例如：分页a超链接转换成块元素 设置间距

CSS属性,古老的榕树,5-wow.com