Common style attributes, background and shadow
Font and text properties
Margin and fill
border properties
list properties
background properties
background gradient
shadow properties
Font and text attributes
Font attributes
<style type="text/css">
font：设置字体是所有样式
font-family：设置字体类型
font-size：设置字体大小
font-weight：设置字体粗细
color：设置字体颜色
font-family 和 font-size都是font的子属性，一般常用字体属性的缩写形式，如： font:bold 12px 宋体 ;注意三个属性的顺序依次为字体粗细，大小，样式
</style>
Text attributes
<style type="text/css">
line-height：设置行高
常用属性值：3px,8px，设置 line-height 与 heigh值一直时，样式为垂直中
text-align：设置对齐方式，
常用属性值：left,right，center
letter-spacing：设置字符间距
常用属性值：3px,8px
text-decoration：设置文本修饰
常用属性值：none，underline，line-through
</style>
Margin and padding
Margin: the direct distance between elements on the page
<style type="text/css">
margin：
设置一个值：上、下、左、右边距
设置两个值：上下，左右边距
设置三个值：上，左右，下边距
设置四个值，上，右，下，左顺序分别对应边距
margin-bottom：下边距
margin-left：左边距
margin-right：右边距
margin-top：上边距
margin: 0 auto；局中
</style>
Fill: the distance between the element content and the border
<style type="text/css">
padding：
设置一个值：上、下、左、右边距
设置两个值：上下，左右边距
设置三个值：上，左右，下边距
设置四个值，上，右，下，左顺序分别对应边距
padding-bottom：下边距
padding-left：左边距
padding-right：右边距
padding-top：上边距
padding: 0 auto；局中
</style>
Border properties
border property
<style type="text/css">
border-style：边框样式
常用属性值：none，soild，dashed
border-width：边框宽度
常用属性值：1px ，5px
border-color：边框颜色
常用属性值：red，black
border：符合属性，用于设置边框宽度，样式，颜色
常用属性值：border:1px solid red ;
也可单独设置某个方向的值：
border-bottom：下边框
border-left：左边框
border-right：右边框
border-top：上边框
</style>
border-radius property: rounded border (the larger the radius of pixels, the more obvious the rounded corners)
<style type="text/css">
border-radius：
设置一个参数：四个角
设置两个参数：参数1：左上和右下角 ，参数2：右上和左下角
设置三个参数：参数1：左上角 ，参数2：左下和右上角，参数3：右下角
设置四个参数：顺序依次为：左上，右上，右下，左下
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
</style>
List attributes
<style type="text/css">
list-style-image：图片作为列表项的符号，其值为对象对应的url
list-style-type：设定列表项的符号
常用属性值：none（无），disc（实心圆），circle（空心圆） ，square（实心方块）
list-style-position：符号在列表项的位置
常用属性：inside（内），outside（外）
list-style：符合属性，顺序为：符号，位置，图片符号
list-style:circle inside url() ;
</style>
Background attributes
<style type="text/css">
background：符合属性
background-image：背景图片
常用属性值：background-image:url(图片名称) ;
background-repeat：背景图片重复方式
常用属性值：repeat：水平和垂直反向平铺
no-repeat：不平铺
repeat-x：只在水平方向上平铺
repeat-y：只在水垂直方向上平铺
background-position：背景图片位置
常用属性值：关键字：水平方向：left，center，right
垂直方向：top，center，bottom
百分比：水平方向：0%(左) 50%(中) 100%(右)
垂直方向：0%(上) 50%(中) 100%(下)
像素值： 水平方向：正数向右偏移，负数向左偏移
垂直方向：正数向下偏移，负数向上偏移
background-size：背景图片大小
background-color：背景图片颜色
</style>
Background gradient
Linear gradient
<style type="text/css">
background: linear-gradient(起点位置或方向，起始颜色，（过渡颜色），终止颜色);
向右，颜色红色过渡到白色在过渡到黑色：
background: linear-gradient(to right,red,white,black);
</style>
Radial gradient
<style type="text/css">
background: radial-gradient(形状，起点位置，起始颜色，（过渡颜色），终止颜色);
圆形渐变，以中心点为圆心默认大小，颜色红色过渡到白色在过渡到黑色：
background: radial-gradient(circle at center ,red,white,black)
</style>
Shadow attributes
Text-shadow
<style type="text/css">
text-shadow: h-shadow v-shadow blur color;
h-shadow：必须存在：阴影的水平距离
v-shadow：必须存在：阴影的垂直距离
blur：可有可无：阴影的模糊半径
color：可有可无：阴影的颜色
</style>
Box-shadow
<style type="text/css">
box-shadow: h-shadow v-shadow blur spread color;
h-shadow：必须存在：阴影的水平距离
v-shadow：必须存在：阴影的垂直距离
blur：可有可无：阴影的模糊半径
spread：可有可无：阴影的大小
color：可有可无：阴影的颜色
</style >
Box-shadow
<style type="text/css">
box-shadow: [投影方式] x-offset y-offset 阴影模糊半径 阴影扩展半径 阴影颜色
x-offset：阴影水平偏移量，正值在对象右边，负值，在对象左边
y-offset：阴影垂直偏移量，正值在对象底部，负值，在对象顶部
阴影模糊半径：正值，值为 0 时，没有模糊效果，值越大，边缘越模糊
阴影扩展半径：正值，阴影扩大，负值，阴影缩小
阴影颜色：不设定，浏览器会默认取色
</style >