前端Day10笔记

一、字体样式
    1、color            字体颜色
        1）取值：
            十六进制表示
            rgba
            rgb
            颜色的英文表示
        
    2、font-size        字号（字的大小）
        1）取值：像素单位px
        2）注意：在chrome浏览器中默认是16px，最小12px（设置小于12px时显示为12px），设置为0时不显示
        
    3、font-weight     字体粗细
        1）取值：
            normal标准（也可写400）
            bold加粗（也可写700）
        
    4、font-style    字体倾斜
        1）取值：
            normal    标准
            italic    倾斜
        
    5、font-family    字体种族（字体风格）
        1）取值：
            字体的名称，例如微软雅黑、宋体、隶书、KaiTi...
        2）注意：chrome默认为微软雅黑，可以多设置几个，中间用逗号隔开，浏览器会按顺序匹配，如果都匹配不上就用默认字体微软雅黑
        
        
二、文本样式
    1、text-indent 文本首行缩进
        1）取值：
            em（em是响应式单位，1em相当于1个字体大小的像素值）
            像素单位px
        2）注意：如果没有设置字体大小，会从最近的祖先元素查找设置的字体大小，如果祖先都没有设置，那就是浏览器默认的字体大小16px作为1em
    
    2、text-decoration 文本装饰（复合属性）
        1）text-decoration-line    文本装饰线的位置
            a.取值：
                overline        上划线
                underline        下划线
                line-through    删除线
                none            无装饰
        2）text-decoration-style 文本装饰线的类型
            a.取值：
                wavy            波浪线
                solid            实线
                dashed            虚线
                dotted            点线
        3）text-decoration-color 文本装饰线的颜色
            a.取值：
                十六进制表示
                rgba
                rgb
                颜色的英文表示
        4）text-decoration 复合属性写法
            a.语法举例：
                text-decoration：overline wavy red
                表示文本装饰线的位置是上划线，类型是波浪线，颜色为红色
            b.注意：我们常用text-decoration：none；来去除元素自带的装饰效果【重要】
        3、text-align 文本的排版
            1）取值：
                left        左对齐
                center        居中对齐【常用】
                right        右对齐
                justify        两端对齐
            2）注意：
                该属性可以排版内部的除了块级元素以外的元素，如果内部是块元素，块元素是无效的，但是该块元素内部的元素同样会继承这个属性，内部的元素又会对自己内部的元素或者文本进行排版
        4、text-tansform 文本的转换
            1）取值：
                uppercase    将字母转换成全大写
                lowercase    将字母转换成全小写
                capitalize    首字母大写（以空格作为区分单位）
        5、letter-spacing 字符间距
            1）取值：像素单位px
            2）注意：
                这个间距指字符（包含中文英文字母标点符号数字）之间的间距
        6、word-spacing 单词间距
            1）取值：像素单位px
            2）注意：这个间距以空格作为区分单位
        7、white-space 文本处理方式（是否需要保留换行和缩进）
            1）取值：
                pre            保留换行，保留缩进
                pre-line    保留换行，不保留缩进
                nowrap        不保留换行，不保留缩进
                
                
三、列表样式
    1、list-style 列表前面的符号（复合属性）
        1）list-style-type 列表符号类型
            a.取值：
                square        实体正方形
                circle        空心圆
                ...            （还有很多）
        2）list-style-position 列表符号的位置
            a.取值：
                inside        符号在li的内部
                outside        符号在li的外部
        3）list-style-image 用图片作为列表符号
            a.取值：
                url()        括号中存放图片的地址
        4）list-style复合写法
            a.去除列表默认的前面的符号：
                list-style: none;【常用】
                
                
四、伪类选择器
    1、什么是伪类选择器？
        鼠标和当前元素互动时所展现的样式
    2、语法格式：
        a.选择器:hover{css样式}
            当鼠标移动到对应元素的时候触发的样式
        b.选择器:active{css样式}
            当鼠标点击对应元素的时候触发的样式
        c.选择器:link{css样式}
            该超链接未被访问时所展现的样式
        d.选择器:visited{css样式}
            该超链接被访问之后所展现的样式
    3、注意：
        :hover{css样式}以及:active{css样式}可以在任意的标签中使用；
        :link{css样式}以及:visited{css样式}只能在超链接标签中使用

五、鼠标样式
    1、cursor 鼠标展示的效果
        1）取值：
            pointer        手型
            url(),wait    将图片作为鼠标的样式
                        括号内存放图片的地址，逗号后面可以放任意的cursor值，比如pointer

六、元素显示模式之间的转换
    1、block 块元素
    2、inline-block 行内块元素
    3、inline 行内块
    1、display 切换元素的显示模式
        1）取值：
            block            以块元素方式展现
            inline-block    以行内块元素方式展现
            inline            以行内元素方式展现

七、补充：元素的宽高问题
    块级元素不设置宽高：
        width: auto;
        height: auto;
        可以暂时理解成width相当于父元素宽度的100%，也可以设置成其他值比如50%，height是由内容撑开的