Web前端开发css基础样式总结.doc

Web前端开发css基础样式总结
颜色
用颜色的名字表示颜色，比如:red
用16进制表示演示比如:#FFOOOO
用rgb数值表示颜色,rgb （红，绿，蓝），每个值都在0-255之间
一般都用16进制表示颜色
单位
px:条边框
border-top/bottom/left/right-width/style/color
简写形式：border-top {width, style, color}
应用圆角边框(x半径,y半径,xy相同时写一个就好了)
border-top/bottom-1eft/right-radius
简写:border-radius
设置元素背景
margin-right:Opx;margin-bottom:Opx;padding-
top :Opx;padding-right:Opx;padding-bottom:Opx;pst-
style: disc ; ^background-image: (url ("")}背景图片地址
background-repeat :背景图重复方式，一般 no-repeat
background-size :背景图尺寸
background-position:背景图位置
简写:background: color imagerepeatposition,尺寸不写，会冲
创建盒子阴影
box-shadow:水平偏移量垂直偏移量模糊值阴影的延伸半径阴
影颜色 10pxl0px5px0pxred:
添加多个阴影，直接第一个之后用逗号继续写第二个，第一个设 置成整数，第二个阴影设置成负数
设置轮廓
边框和轮廓的区别：轮廓不属于页面，不会因为应用轮廓而调
整页面的布局
边框占有实际大小，轮廓不占有
当设置hover悬停时，轮廓修饰的div不会发生位移，边框修饰
时位移
outpne-color:轮廓颜色
outpne-style:轮廓样式
outpne-width:轮廓宽度
outpne-offset:轮廓距元素边框偏移量
简写:outpne
其他样式（表格，列表，透明度,光标）
表格
border-collapse相邻单元格边框处理，合并表格=collapse
border-spacing:相邻单元格间距
caption-side:标题位置
empty-cells:空单元格是否显示
列表
pst-style-tyle:列表前边的标记样式圆点，方点等等
pst-style-image:列表图像标记
简写:pst-style:none取消列表的所有属性一般用于导航
横向导航:P{display: inpne}
透明度
opacity:设置透明度（0T之间取值）
光标形状
cursor:设置光标形状，当光标放在某个div上边,设置等待状, 手形状等等.
盒子模型
盒子模型分为元素，内边距，边框，外边距，
设置一定尺寸的元素
1） . width:设置元素宽度
2） . height:设置元素高度
设置内边距
padding-top/bottom/right/left
padding:简写形式
设置外边距（边框到浏览器边缘或者到下一个盒子的距离）
margin-top/bottom/lef