CSS基础 样式属性

1、大小

width  　　　 　// 宽                
height　　　  　// 高                                               
min-width 　　 // 设定页面最小宽度  min-1200px; 

2、背景

background-color 　　　　　　　 // 背景色
background-image :url(地址)　　//背景图
background-repeat 　　　　　　  //背景图的平铺方式 ( repert平铺，no-repert不平铺，repert-x  x 轴平铺，repert-y  y 轴平铺       
background-position　　　　　　 //背景图片位置（center居中，right top 右上角，left 100px top 200px  距左侧100像素，距离上200像素）
background-size               //背景图的大小(像素/百分比)
background-attachment　　　   //背景图片是否浮动（fixed 背景固定锁住，scroll 背景随字体浮动）

3、字体

font-family　　　　 //字体，一般默认为“微软雅黑” 
font-size　　　　　 //字号
font-style　　　　  //字体是否倾斜（italic 倾斜， normal 不倾斜）
font-weight　　　　 //字体是否加粗（ bold 加粗，normal 不加粗）
font-decoration　　//设置下划线（underline 下划线，overline 上划线，line-trough 删除线，none 去掉超链接的下划线）
color   　　　　　　//字体颜色

4、对齐方式

line-height//行高
text-indent// 缩进 
text-align// 水平对齐方式 （ center 居中对齐， left 左对齐，right 右对齐）
vertical-align//垂直对齐方式（ top 顶部对齐， bottom 底部对齐， middle  居中）             

//垂直对齐 ,需要两者配合 
vertical-align：middle
display:table-cell         

5、边界边框

margin //外边距，四周边框与外部的距离
 //margin:10px; 　　　　　　　　   四个方向的边距都是10像素，
 //margin:50px 0 ;  　　　　　　  上下 50 像素，左右0
 //margin-top:10px; 　　　　　　  上边框与其他元素的距离
 //margin:10px  0 10px  0 ; 　　 按 上、右、下、左 的顺序与其他元素的距离/
 
padding //内边距，内容与边框的距离
 //padding:10px;   　　　　　　　　　　内容与边框最短的距离是10像素， 文字所占的空间大小不变，将四个边框向外延伸10像素
 //padding: 20px  0  20px  0 ;      上、右、下、左的边距 

border 　　　　　//边框   border: 2px  solid  red;
border-width　　//边框的粗细  
border-style　　//边框的样式（虚，实等） 
border-color　　//边框的颜色 // ; （简写）

6、列表方块

list-style:none 　　　　　　　　　　 //将序列的序号图案去掉
list-style-image:url( 图片地址 )　　//将序号变为图片

7、隐藏与显示

display　　    // none 隐藏、位置不保留,  block 显示

visibility　　// hidden 隐藏后位置保留， visible 显示

overflow　　　// hidden 超出部分隐藏，   scroll 加滚动条

8、透明

opacity:0.5;                  // 对谷歌，360等高等浏览器有用
-moz-opacity:0.5;             //针对火狐浏览器
flter:alpha (opacity=50);     //针对 IE 浏览器

                  

9、圆角                                                        

border-radius // 圆角，无法用于IE浏览器  

　//border-radius:5px;   将边框的角削去5个像素

10、阴影                                                  

 box-shadow  //阴影，无法用于IE浏览器

  //box-shadow: 50px 0 30px black;  左右偏移（右正左负）、上下偏移（上正下负）、阴影扩散成度、阴影颜色