HTML5知识点（第三节）

常用的样式属性，背景及阴影
     字体及文本属性
     边距和填充
     边框属性
     列表属性
     背景属性
     背景的渐变
     阴影属性

字体及文本属性
    字体属性

<style type="text/css">
        font：设置字体是所有样式
        font-family：设置字体类型
        font-size：设置字体大小
        font-weight：设置字体粗细
        color：设置字体颜色
font-family 和  font-size都是font的子属性，一般常用字体属性的缩写形式，如：    font:bold 12px 宋体 ;注意三个属性的顺序依次为字体粗细，大小，样式
</style>

    文本属性

<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>

边距和填充
    边距：页面中元素与元素直接的距离

<style type="text/css">
         margin：
             设置一个值：上、下、左、右边距
             设置两个值：上下，左右边距
             设置三个值：上，左右，下边距
             设置四个值，上，右，下，左顺序分别对应边距
         margin-bottom：下边距
        margin-left：左边距
        margin-right：右边距
        margin-top：上边距
        margin: 0 auto；局中
</style>

    填充：元素内容与边框之间的距离
 

<style type="text/css">
        padding：
             设置一个值：上、下、左、右边距
             设置两个值：上下，左右边距
             设置三个值：上，左右，下边距
             设置四个值，上，右，下，左顺序分别对应边距
         padding-bottom：下边距
        padding-left：左边距
        padding-right：右边距
        padding-top：上边距
        padding: 0 auto；局中
</style>

边框属性
    border属性

<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属性：圆角边框（ 半径像素越大，圆角越明显）
 

<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>        

列表属性

<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>

背景属性

<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>        

背景的渐变
    线向渐变

<style type="text/css">                    
        background: radial-gradient(形状，起点位置，起始颜色，（过渡颜色），终止颜色);
        
    圆形渐变，以中心点为圆心默认大小，颜色红色过渡到白色在过渡到黑色：
        background: radial-gradient(circle at center ,red,white,black)
                 
</style>      

    径向渐变

<style type="text/css">                    
        background: radial-gradient(形状，起点位置，起始颜色，（过渡颜色），终止颜色);
        
    圆形渐变，以中心点为圆心默认大小，颜色红色过渡到白色在过渡到黑色：
        background: radial-gradient(circle at center ,red,white,black)
                 
</style>      

     

阴影属性
    文字阴影 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 >