CSS

  css属性

        1.文字属性
            font—style
                作用：规定文字样式的属性
                取值：
                    normal：正常的，默认就是正常的
                    italic：倾斜的
                快捷键
                    fsi   font—style:italic
                    fsn font—style:normal
            font—weight
                作用：规定文字粗细的属性
                取值
                    bold 加粗
                    bolder  比加粗还要粗
                    lighter  细线，默认就是细线
                    100~900之间的整数
                快捷键
                    fw  
                    fwb
                    fwbr
            font—size
                作用：规定文字大小的属性
                取任意像素值
                快捷键
                    fz
                    fz30   font—size:30px
                注意！通过该属性设置大小，一定要带单位：px
            font—family
                作用：规定文字的属性
                取值：电脑中任意的字体
                快捷键：ff
                注意点:
                    如果设置的为中文，需要用双引号或者单引号括起来
                    设置的字体必须是电脑里面已经安装好的字体
            font—family补充
                1.如果设置的字体不存在，那么系统会使用默认的字体来显示
                2.可以设置备用字体   格式为：font—family：”字体1“，”备选方案一“，.....
                3.如何想给中文好英文分别单独的设置字体   如果想给界面里面的英文单独设置字体，界面的英文字体必须要在中文字体前面
                企业开发中最常见的字体
                    中文：宋体、黑体、微软雅黑
                    英文：“Times new roman“、arial
                4.注意：
                    并不是名称为英文就一定是英文字体
                    宋体 SimSun
                    黑体 SimHei
                    微软雅黑 Microsoft YaHei
            文字属性连写：
                格式：font：style weight size family；
                例如：font：italic bold 10px "楷体"；
                注意点
                    1.在这种缩写格式中有的属性值可以省略
                        style可以
                        weight可以
                    2.在这种所写的格式里面style和weight的位置可以交换
                    3.在这种缩写格式里面有的属性值不能省略：
                        size
                        family
                    4.size和family的位置不能随便乱放，size一定要在family前面，并且两者都要写在所有属性的后面
        2.文本属性
            文本装饰的属性
                作用：给文本添加装饰
                格式：text—decoration:underline;
                取值
                    underline  下划线
                    line—throuth 删除线
                    overline 上划线
                    none 什么都没有，最常见的用途就是用于去掉超链接的下划线
                快捷键
                    td
                    tdu
                    tdl
                    tdo
            文本水平对齐的属性
                作用：设置文本水平对齐方式
                格式：text—align：right；
                取值（默认为left）
                    left
                    right
                    center
                快捷键
                    ta
                    tar
                    tac
            文本缩进的属性
                作用：设置文本缩进
                格式：text—indent：2em
                取值：2em，em是一个单位，一个em代表缩进一个文字的宽度
                快捷键：
                    ti
                    ti2e
        3.颜色属性
            作用：设置文字的颜色
            格式：color：值
            取值：
                英文单词
                    一般情况下，常见的颜色都有对应的英文单词，但是英文单词并不能表达出所有的颜色
                rgb
                    rgb其实就是三原色，r  red    g  green  b  blue
                    
                        格式：rgb（0,0,0）
                    范围：0~255
                    规律：三者值一样则为灰色，如rgb（100,100，100）
                rgba
                    跟rgb一样，只不过多了一个透明度a
                    a代表透明度，取值0—1，值越小越透明
                十六进制
                    1.十六进制表示颜色本质也是rgb
                    2.十六进制中每两位表示一个颜色，#FFEE00 FF为 r   EE为 g     00为b
                    转换公式：十六进制第一位 x 16     加上   十六进制第二位
                十六进制缩写
                    在css中只要十六进制的颜色每两位值一样，那么就可以简写为一位
                    例如：#FFEE00 ==  #FE0
                    注意点：
                        1.如果当前颜色对应的两位不一样，则不能缩写
                        2.如果相同的两位数字不是同属于一个颜色的，也不能缩写
    css选择器
        1.标签选择器
            作用：根据指定的标签名称，在当前界面中找到该名称的标签，然后设置属性
            格式：
 标签名称{
   属性：值
}
            注意点：
                标签选择器选中的是当前界面中所有的标签，二不能单独选中某一个标签
                标签选择器无论标签藏得多深狗能选中
                只要是html中的标签就可以作为标签选择器
        2.id选择器
            作用：根据指定的id名称找到对应的标签，然后设置属性值
            格式：
 #id名称{
   属性：值
}
            注意点：
                1.每一个标签都有一个属性叫做id
                2.在同一个界面中id的名称是不可以重复的
                3.在编写id选择器时，要在前面添加#
                4.id的名称要有一定的规范
                    1.id的名称只能是字母、数字、下划线
                    2.不能以数字开头
                    3.不能是html标签的名称
        3.类选择器
            作用：根据指定的类名称找到指定对应的标签，然后设置属性
            格式：
 .类名{
  属性：值
}
            注意点：
                1.每一个标签都有一个属性叫做class
                2.同一个界面中，class的名称是可以重复的
                3.在编写类选择器时一定要在class名称前面加上.
                4.类名的命名规范跟id命名规范一样
                5.类名就是专门用来给css设置样式的
                6.每一个标签可以同时绑定多个类名
                    写法：
正确写法：<p class = "类名1  类名2"><p/>
错误的写法：<p class = "类名1" class = "类名2"><p/>

        类选择器和id选择器的比较:
            id和class的本质：
                id相当于人的身份证不可以重复，class相当于人的昵称，可以重复
                一个html标签只能一个id名称，一个html标签可以绑定多个class名称
            使用区别：
                id选择器是以#开头
                class选择器是以.开头
            在企业里面该使用谁？
                id一般情况下是给js使用的，除非特殊情况，否则不要用id去设置样式
            在企业开发过程中，学会抽取公共类，将带有样式的类绑定给需要的标签
        4.后代选择器
            作用：找到指定的标签的所有特定的后代标签，设置属性
            格式：
 父类标签  后代标签{
    属性：值
}
            注意点：
                1.后代选择器必须用空格隔开
                2.后代不仅仅是儿子，也可能是孙子/重孙子等，只要是放在指定标签中的都是后代
                3.后代选择器不仅仅可以使用标签名称，还可以使用其他选择器
                4.后代选择器可以通过空格一直延续下去
        5.子元素选择器
            作用：找到指定标签中所有特定的直接子元素，然设置属性
            格式：
 标签名称1>标签名称2{
  属性：值
}
            注意：
                1.子元素选择器只会查找儿子，不会查找其他被嵌套的标签
                2.子元素选择器之间要用>符号连接，并且不能有空格
                3.子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
                4.子元素选择器可以通过>一直延续下去
        后代选择器与子元素选择器比较
            区别
                1.后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号
                2.后代选择器会选中指定标签中所有指定的后代标签，子元素标签选择器只会选中指定标签中，所有特定的儿子标签
            共同点
                后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
                后代选择器和子元素选择器可以通过各自的连接符号一致连接下去

例如：
选择器1  选择器2  选择器3
选择器1 >选择器2> 选择器3

        8.交集选择器
            作用：给多个选择器选择的标签中相交的那部分标签设置属性
            格式：
选择器1选择器2{
  属性：值
}
            注意：
                1.没有任何连接符号
                2.选择器可以使用标签名称/id名称/class名称
                3.作为了解，企业用得不多
        9.并集选择器
            作用：给多个选择器选中的标签同时设置属性
            格式：
选择器1，选择器2{
 属性：值
}
            注意：
                1.必须使用，来连接
                2.选择器名称可以使用标签名称/id名称/class名称
        10.兄弟选择器
            1.相邻兄弟选择器
                作用：给选择器选中的后面紧跟的那个标签设置属性
                格式：
选择器1+选择器2{
 属性：值
}
                注意点：
                    1.相邻兄弟选择器必须通过+连接
                    2.相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
            2.通用兄弟选择器
                作用：给选择器选中后面所有的特定的标签设置属性
                格式：
选择器1~选择器2{
 属性：值
}
                注意点：
                    1.通用兄弟选择器必须用~连接
                    2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中
        11.序选择器
            同级别的第几个
                ：first-child    选中同级别的第一个标签
                ：last-child    选中同级别的最后一个标签
                ：nth-child（n）    选中同级别的第n个标签
                格式：
选择器：xxx-child{
  属性：值；
}
                ：nth-last-child(n)    选中同级别倒数的第n个标签
                ：only-child    选中父元素中唯一的某个标签
            同级别的同类型的第几个
                ：first-of-type   选中同级别同类型的第一个标签
                ：last-of-type   选中同级别同类型的最后一个标签
                ：nth-of-type（n）   选中同级别同类型的第n个标签
                ：nth-last-of-type(n)   选中同级别同类型的倒数第n个标签
                格式：
选择器：xxx-of-type{
 属性：值；
}
            其他取值
                odd   选中奇数标签
                even  选中偶数标签
                xn+y  选中满足公式的标签
        12.属性选择器
            [attribute]
                作用：根据指定的属性名称找到对应的标签，然后设置属性
                格式：
选择器[属性]{
属性：值；
}
            [attribute=value]
                作用：找到具有指定属性并且取值为value的标签，然后设置属性
                格式：
选择器[属性=value]{
属性：值；
}
                应用场景
                    用于区别input属性
                    inpu[type = password]{
 
}
<input type= "text" name="" id=""/>
<input type= "password" name="" id=""/>
            [attribute|=value]  css2
[attribute^=value]  css3
                作用：找到属性的取值是以vlaue开头的标签，然后设置属性
                格式：
选择器[属性|=value]{
属性：值；
}

格式：
选择器[属性^=value]{
属性：值；
}
                两者之间的区别：
                    css2中只能找到value开头，并且value以-与其他内容隔开的
                    css3中只要以value开头都可以被找到，无论有没有隔开的
            [attribute$=value] css3

                作用：找到属性的取值是以value结尾的标签，然后设置属性
                格式：
选择器[属性$=value]{
属性：值；
}
            [attribute~=value] css2
[attribute*=value]  css3
                作用：找到属性的取值包含value的标签，然后设置属性
                格式：
选择器[属性~=value]{
属性：值；
}

格式：
选择器[属性*=value]{
属性：值；
}
                两者之间的区别：
                    css2中只能找到独立的单词，也就是value是被空格隔开
                    css3中只要包含value既可以找到，无论有没有被隔开
        13.通配符选择器
            作用：给当前界面上所有的标签设置属性
            格式：
*{
 属性：值；
}
            注意点：
                由于通配符选择器是设置及诶按上所有的标签的属性，所以在设置之前会遍历所有的标签，如果当前界面的标签比较多的时候，那么性能会比较差
    css显示模式：
        1.div和span标签
            div标签
                作用：一般用于配合css完成网页的基本布局
            span标签
                作用：一般会配合css修改网页中的一些局部的信息
            div和span的区别？
                1.div会单独的占有一行。而span不会单独的占有一行
                2.div是一个容器级的标签，二span是一个文本级的标签
            容器级的标签和文本级的标签区别是什么？
                01.容器级的 标签中可以嵌套其他所有的标签
                常见的容器及标签:div   h   ul  ol  li  dt  dd...
                02.文本级的标签只能嵌套文字 ，图片，超链接
                常见的文本级的标签：span p  buis strong em ins del..
        2.块级元素和行内元素
            在html中标签分为两类：分别是容器级和文本级；在css中则分为两类：块级元素和行内元素
            什么叫块级元素，什么叫行内元素？
                块级元素会单独占一行
                行内元素不会独占一行
                所有容器级标签都是块级，文本级标签除了p其他大部分都是行内元素。p是块级元素
            块级元素和行内元素的区别
                
                    1.块级元素
                        单独占一行
                        如果没有设置宽度，那么默认和父元素一样宽
                        可以设置宽高
                    2.行内元素
                        不会独占一行
                        如果没有设置宽，那么默认和内容一样宽
                        行内元素不可以设置宽度和高度
                    3.行内块级元素
                        不会独占一行
                        可以设置宽 高
        3.元素显示模式的转换
            通过设置元素的display属性修改元素的显示模式
            格式：        div{                                                display:inline;    }
            取值
                block  块级
                inline    行内
                inline—block 行内块级