css 常用属性

1.width 设置宽度

width  : 100px；

2. 设置高度

height: 10px;

3. display

display: none  隐藏元素
display:block; 行元素转块元素
display:inline;块元素转行元素
display:inline-block; 行内块元素 ：让行元素有块的属性-例如a、span，可以设置行高
display:list-item;  此元素会作为列表显示。列表没有黑点而且可以自定义宽高

4. text-indent: 1em; 文字首行缩进字符

   text-indent: 10%  也可以用百分比设置缩进距离

5. text-align:right 文字右对齐 text-align:left 文字左对齐

     text-align:center     文字居中

6. word-spacing: 50px; 调整文字之间的间距

    word-spacing: -0.5em;  也可以是负值

7. text-transform 字母大写小写转换

text-transform: capitalize 首字母变为大写   text-transform: uppercase  把所有字母转为大写
text-transform: lowercase把所有字母转为小写     text-transform:none   不变

8.text-decoration 给文字加线

text-decoration: underline   给文字加下划线  text-decoration: overline   给文字加上划线
text-decoration: line-through  给文字中间加线（在文字上） text-decoration: none   不改变文本样式 （可以给a标签去下滑线）

9.white-space 空格合并与保留

white-space: pre  每有一个空格就显示一个空格    white-space:  nowrap  防止文字换行
white-space:  pre-wrap  显示空格和换行      white-space: pre-line    合并空格保留换行

10.font-style 文字字体

font-style:italic;    倾斜体文字          font-style:oblique  倾斜体文字

11.font-weight 文字粗细

font-weight:normal 文字回复正常粗细400      font-weight:bold   文字加粗7000       font-weight:900    文字加粗100-900 分为9 个等级

12. a 标签 时段颜色

        a:link {color:#FF0000;}      未被访问的链接 
        a:visited {color:#00FF00;}  已被访问的链接
        a:hover {color:#FF00FF;}   鼠标指针移动到链接上 
        a:active {color:#0000FF;}  正在被点击的链接 
        连接加背景色
        a:link {background-color:#B2FF99;}
       a:visited {background-color:#FFFF85;}
        a:hover {background-color:#FF704D;}
        a:active {background-color:#FF704D;}

13. table 表格

border-collapse:collapse;    合并表格单线   border: 1px solid red;  设置边框厚度和颜色   vertical-align:bottom;   设置对齐上下左右
padding:15px;  设置内边距    background-color:green; 设置背景色  color:red;   设置文字颜色

14. 轮廓

outline:#00FF00 dotted thick;   轮廓参数1 颜色 2 样式 3 宽度

15. 内边距 padding: 10px 0.25em 2ex 20%; 上 右 下 左 可以设百分比 10%

16. 边框 border

border: 3px double blue;  参数1边框厚度  10px   2边框样式   solid 实线   dotted 点 dashed  虚线  double  双实线  3颜色
border-left-style: none; 左   border-right-style:solid 右  border-bottom-style:dotted 下  border-top-style:double 上  
border-width: 15px 5px 15px 5px;   设置单边宽度  上 右 下 左    thin 、medium 、thick
 border-top-width: 15px;   border-right-width: 5px;   border-bottom-width: 15px;    border-left-width: 5px;

17. 外边距 margin

margin : 10px 0px 15px 5px;  外边距上右下左   margin: 1px;   等价于 1px 1px 1px 1px     margin: auto auto auto 20px;  可以使用auto

18. position 定位

position: relative; 相对于之前位置移动位置，占用之前的位置    left 、top、right、bottom    
position: absolute;  绝对定位相对于页面的绝对位置，不占用之前前位置  left 、top、right、bottom

19.float 浮动

float: left; 左浮动 float: right;    右浮动    clear: both;   清除浮动   

20.选择器

元素选择器（html 标签）  选择器分组：多个选择器共用一个{ 方法 }   通配符 *  所有的元素都识别*下的{方法}  

多类选择器  .aa{方法1} .cc {方法2}   .aa.cc{方法3}   每个类选择器都自己的方法还能多个类选择器共用一个方法

ID 选择器 id 区分大小写   

属性选择器  例如      a[href] {color:red;}   只要标签中有href属性 就会变成红色  属性可以自定义 例如 aa 、dd  、cc

后代选择器  div  p{color: red;}   嵌套多少层都可以   格多少层都可以

子元素选择器   h1 > strong {color:red;}   只能改变h1 下直属的strong 标签如果嵌套多层则无效

21. 伪类选择器

a:link {color: red}    标签+事件变色     a.one:link {color: red}  标签+css+事件 =变色
更多属性
:active 向被激活的元素添加样式。
:focus  向拥有键盘输入焦点的元素添加样式。
:hover  当鼠标悬浮在元素上方时，向元素添加样式。
:link   向未被访问的链接添加样式。
:visited    向已被访问的链接添加样式。
 :first-child   向元素的第一个子元素添加样式。
:lang   向带有指定 lang 属性的元素添加样式。
------------------------------------------------------------------
伪类元素   p:first-line    更多元素
 :first-letter  向文本的第一个字母添加特殊样式。    
 :first-line    向文本的首行添加特殊样式。
 :before    在元素之前添加内容。
 :after 在元素之后添加内容。

22.其他

line-height: 200%  文字行间距   visibility:hidden 隐藏元素