css样式基础总结

CSS的写法：
选择器名{
属性名1: 属性值1;
属性名2: 属性值2;
}
如：
table.biaoge{
width: 200px;
height: 80px;
}

文字格式：

• font-family 字体
• font-size 字号，常用单位是px或em
• color 字体颜色
• font-weight 字体粗细，从细到粗依次为 lighter/normal/bold/bolder，或者用数字表示100~900依次变粗，但一般是整百出现
• font-style 字体斜体 normal/italic/oblique
• text-decoration 字体样式 none(无)/overline(上划线)/underline(下划线)/line-through(删除线)
• text-align 字体水平对齐方式 left(左)/right(右)/center(居中)/justify(两端对齐)
• vertical-align 字体垂直对齐方式 top(顶部)/middle(居中)/bottom(底部)
• line-height 行高，normal或是以px为单位的数字，如12px

网页背景：

• background-color 背景色，可以是red, blue, yellow这些单词，也可以是#000, #F00, #FFFF00,#000000这样的颜色值
• background-image 背景图，使用url('图片地址')的形式，如url('./images/1.jpg')
• background-repeat 背景图重复或平铺方式，一般情况下网页背景是一小块图片进行横向和纵向平铺形成的。
• repeat(全部平铺)/no-repeat(不平埔，只出现一次)/repeat-x(横向平铺)/repeat-y(纵向平铺)
• background-position 背景图位置，从容器左上角开始计算，可以是百分比，数字（以px为单位），或者left, center, right, top, center, bottom
• 当出现一个值时表示横向和纵向的位置，如background-position: 100px;指的是距离左侧边距和上侧边距的距离都是100px
• 当出现两个值时分别表示横向和纵向的位置，如background-position: 50px 80px;指的是距离左侧边距50px，距离上侧边距80px
• background-attachment 背景图是否固定，scroll(背景图跟随页面滚动)/fixed(背景图固定，不受页面滚动影响)
• background 背景图综合样式，顺序是 background: 背景颜色 背景图片 平铺样式 是否固定 图片位置;如 background: #F00 url('./tupian/2.jpg') repeat-x fixed 30px 50px;表示的是 背景红色，图片地址为./tupian/2.jpg，横向平铺，固定不滚动，距离左边距30px，上边距50px

其它样式汇总

• width 宽度，一般单位是百分比或px，如12px
• height 高度，一般单位是百分比或px，如14px
• list-style-type 修改列表编号，用于ul和ol，可以是none(无)/disc(默认，实心圆)/circle(空心圆)/square(实心方块)/decimal(数字)等
• list-style-image 列表图片符号，替换编号，格式是url('图片位置')，如 list-style-image: url('./tupian/123.jpg');
• margin 外边距，是元素距离容器边界的距离，一般有4个值，px为单位，按上、右、下、左的顺序顺时针排列，如 margin: 2px 3px 4px 5px.
• 有时只有一个值，如 margin: 5px; 是 margin: 5px 5px 5px 5px; 的简写形式
• 有时只有两个值，如 margin: 5px 10px; 是 margin: 5px 10px 5px 10px; 的简写形式
• 注意：margin: 0 auto;是设置上下边距为0，左右边距自动，也就是把元素居中显示
• margin-top 上外边距
• margin-right 右外边距
• margin-bottom 下外边距
• margin-left 左外边距
• padding 内边距，区别于margin，是容器内部元素距离容器边界的距离，使用方法同margin
• padding-top 上内边距
• padding-right 右内边距
• padding-bottom 下内边距
• padding-left 左内边距
• border 边框，一般有3个值，顺序是 粗细 类型 颜色，如 border: 1px solid #F00; 表示粗细为1px的红色实线边框
• border-top 上边框
• border-bottom 下边框
• border-left 左边框
• border-right 右边框
• float 元素浮动，一般div使用居多，也可用于其它元素，可以是left/right
• display 显示方式，如 display: block; 可以把一些没有宽度和高度的元素如a链接变成区块显示，然后再设置高度和宽度
• position 定位方式，static/fixed/relative/absolute 和 top/left/right/bottom 搭配使用，单位一般是px