CSS快速入门基础知识（二）

CSS属性

CSS 边框线属性

        border 边框线 (复写)
            border-width:   边框线的宽度
            border-style:   边框线的类型
                          solid  实线
                            dashed   虚线
                            dotted     点划线
                            double     双线
            border-color:   边框线的颜色
                            
        单边框设置 :
                    left right top bottom
                    border-left   左边框        border-left:5px solid tomato; (左边框)
       
       
        border-width: 10px 5px 8px 11px; 
        （注）顺时针   上边框 右边框  下边框 左边框
                      10px 5px 8px
        （注）顺时针   上边框 左右边框  下边框 
                      10px 11px
        （注）顺时针   上下边框 左右边框  

        border-style: solid;
        border-color: tomato red yellow blue;

        transparent  用来指定全透明

背景属性:

background（复写（简写）属性）
            background-color ： pink ; 背景颜色
            background-image: url();
                    网页中的图片有两种引入方式： 1. img src   2.背景图
            background-repeat: no-repeat; 
                   background-repeat: 背景图是否平铺
                        no-repeat： 不平铺
                        repeat-x   水平平铺
                        repeat-y   垂直平铺
                        repeat     默认平铺
            background-position:  背景图定位
                    属性值  ：
                            第一个值：水平方向的位置
                            第二给值：垂直方向的位置
                            1.关键字：  left  center right
                                        top   center  bottom 
                            2.单位 :  -100px -100px 支持负数
                                        100% 100%   右下角
                            3.left 100px  top 40px   指 left:100px  top:40px 
            background(简写):
                background: url(../images/image1.jpg) no-repeat left 40px top 40px ;
                
                背景色(background-color)写在复写后面
            background-attachment : 背景图是否固定
                    fixed  固定
                    scroll  跟随浏览器滚动条(默认值)

CSS列表属性：

            list-style-type:    改变列表符号类型
                            disc （实心圆）
                            cricle  （空心圆） 
                            square  （实心方块）
                            none     （去掉列表符号）
            list-style-image:url();  图片替换列表符号
            list-style-position:inside     列表符号在li 的里面
                                outside  默认在外面

            list-style: none;    将所有的列表属性去掉

CSS 文本 属性

    字体属性 : 
            font 
                font-family : 设置字体 类型
                    默认 ： 电脑系统的字体
                        注意：   中文字体类型必须加双引号 
                                多个字体用逗号隔开 。
                                英语字体 ，一个单词时不需要加双引号 
                                英语的字体，两个单词以上需要加双引号
                font-size : 字体大小
                    属性值： 数字 + px  
                        关键字： xx-small  x-small small medium large  x-large  xx-large
                        medium == 16px
                        默认字体 ： 16px
                        浏览器默认最小字体 ： 谷歌： 12px  , 火狐：9px  
                    常用单位： px pt em % rem vm vh .....
                color : 设置字体颜色
                    属性值：
                            直接用单词
                            十六进制颜色值 ： #efc24f
                                            # 99 99 99  = # 9 9 9 
                             三原色  red  green blue 
                            rgb( 18, 55,66)  (颜色值方法)
                            rgba(247,202,77)  颜色加透明 a : 0-1之间的值（包含0和1 ） 0 是全透明 1 是不透明
                     
                font-weight:  设置字体是否加粗
                            bold   加粗 
                            bolder  更粗的
                            100 - 900  数值 ， 数值不加单位  只能整百加 。
                                                移动端 600-900 分阶段显示  
                                                PC端 100-500 不加粗  600-900 加粗
                            normal  不加粗
                font-style:   设置字体是否倾斜
                            italic   斜体字
                            oblique    倾斜
                            normal    不倾斜  
                font:   简写（复写）
                     font : 30px "楷体"  ；     字体大小 字体类型
                     font : 30px/60px "楷体"  ；   字体大小/字体行高  字体类型
                     font : bolder italic 30px/60px "楷体"  ；  字体加粗 字体倾斜  字体大小/字体行高 字体类型
                        注意： 顺序不能错 。 
                
                字体行高  
                        line-height 设置字体行高  数值 + 单位
                                    多行文本设置行高
                                    单行文本设置行高  实现垂直居中 ，属性值与容器的height相同

                text  文本属性 
                        text-align: 水平对齐方式
                                    left center right justify(两端对齐)

                        text-decoration:  文本修饰（线条）
                                        none： 没有修饰
                                        underline: 添加下划线
                                        overline： 添加上 划线
                                        line-through: 添加删除线
                        text-indent:  首行缩进   数字 + 单位  支持负数 
                        letter-spacing:value;  控制字间距  文字与文字
                        word-spacing:value;   控制字间距  单词与单词
                        text-transform:   设置英文字母大小
                                        caoitalize 英文拼音的首字母大写
                                        uppercase 英文拼音的首字母小写
                                        lwercase 英文拼音字母全小写