关于css学习

1.css
    什么是CSS？
        层叠样式表（cascading style sheet），也叫作级联样式表
        
        层叠？
            多个样式可以施加到同一个标签的上面
        
        样式？
            设置大小，颜色等等
            
    css的作用是什么？
        1.美化页面，给页面化妆
        2.可以使样式代码和结构代码进行分离
            a.提高了代码的复用性
            b.提高了代码的维护性
            c.提高了开发效率
            
    css的引入方式？
        方式一：
            在标签的里面，加上一个属性style
            style="属性名:属性值; 属性名:属性值;..."
            
            只能针对一个标签设置样式，一般用的不多
        
        方式二：
            在head标签中，写一个子标签style，在style标签里面写选择器
                <style>
                    div {
                    
                    }
                </style>
                
            在一个页面中，如果给多个标签施加相同的样式的时候，就可以选择方式二
        
        方式三：
            新建一个css为后缀名的文件，在该文件中写选择器
                style.css：
                    div {
                    
                    }
                    
            在html文件中的head标签中写一个子标签link
                <link rel="stylesheet" href="css文件的路径"/>
                    
                    rel属性：就是说引入文件是一个样式文件
                    href属性：设置样式文件的路径
                    
            在多个页面中，如果给多个标签施加相同的样式的时候，就可以选择方式三
            
        推荐使用方式二和方式三
    
        注意：如果三个引入方式同时施加相同的效果，就近原则
        
    css的选择器？
        什么是选择器？
            可能快速帮助我们定位到具体的哪个标签或者哪几个标签的东西，就称为选择器
            
        选择器的格式？
            选择器类型 {
                属性名:属性值;
                属性名:属性值;
                ... ...
            }
            
        常见的选择器？
            1.元素(标签)选择器：
                元素的名字 {
                    属性名:属性值;
                    属性名:属性值;
                    ... ...
                }
            
            2.id选择器：
                #id属性值 {
                    属性名:属性值;
                    属性名:属性值;
                    ... ...
                }
            
            3.类选择器：
                .class属性值 {
                    属性名:属性值;
                    属性名:属性值;
                    ... ...
                }
                
                优先级：id选择器 > 类选择器 > 元素选择器
            
            4.通配符选择器：
                * {
                    属性名:属性值;
                    属性名:属性值;
                    ... ...
                }
                
            5.组合选择器：
                选择期1,选择器2,... {
                    属性名:属性值;
                    属性名:属性值;
                    ... ...
                }
            
            6.包含(后代)选择器：
                父标签名 子标签名 {
                    属性名:属性值;
                    属性名:属性值;
                    ... ...
                }
            
            7.子元素选择器：
                父标签名>子标签名 {
                    属性名:属性值;
                    属性名:属性值;
                    ... ...
                }
            
            8.属性选择器：
                格式一：
                    标签名[属性名] {
                        属性名:属性值;
                        属性名:属性值;
                        ... ...
                    }
                
                格式二：
                    标签名[属性名='属性值'] {
                        属性名:属性值;
                        属性名:属性值;
                        ... ...
                    }
            
            9.伪类选择器：
                标签名:伪类 {
                    属性名:属性值;
                    属性名:属性值;
                    ... ...
                }
                
                主要针对的是超链接：
                    :link
                        设置元素在未被访问前的样式
                        
                    :hover
                        设置元素在其鼠标悬停时的样式
                        
                    :active
                        设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式
                    
                    :visited
                        设置元素在其链接地址已被访问过时的样式
                    
                主要针对的是文本框：
                    :focus
                        选择获得焦点的输入字段
            
    常见的属性？
        字体属性：
            font-family：设置文本的字体
            font-style：设置指定斜体文本
            font-weight：设置字体的粗细
            font-size：设置字体的大小
            font：复合属性
                主要：font-style font-weight font-size font-family
                注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。
            
        文本属性：
            color：设置文本的颜色
            text-align：设置文本的水平对齐方式
            text-decoration：用于设置或删除文本装饰
            text-indent：用于指定文本第一行的缩进
            line-height：用于指定行之间的间距
        
        背景属性：
            background-color：指定元素的背景色
            background-image：指定用作元素背景的图像
            background-repeat：设置在水平和垂直方向上是否重复
            
        边框属性：
            border-style：指定要显示的边框类型
            border-width：指定四个边框的宽度
            border-color：用于设置四个边框的颜色
            border：复合属性
                border-width border-style(必需) border-color
            border-radius：用于向元素添加圆角边框
            
    盒子模型：使用div + css对页面进行布局
        外边距属性：
            margin：复合属性
                margin-top margin-right margin-bottom margin-left
            margin-top：设置上外边距
            margin-left：设置左外边距
            margin-right：设置右外边距
            margin-bottom：设置下外边距
        
        内边距数据：
            padding：复合属性
            padding-top：设置上内边距
            padding-right：设置右内边距
            padding-bottom：设置下内边距
            padding-left：设置左内边距
            
            注意：默认情况下，我们在设置内边距的时候，是会影响盒子的大小的，这个时候就要使用：
                box-sizing: border-box;
                
                默认情况下，元素的宽度和高度是这样计算的：
                    width + padding + border = 元素的实际宽度
                    height + padding + border = 元素的实际高度
                    
    浮动：
        使用浮动，可以解决多个div可以放在同一行
        
        float：设置浮动
            left：左浮动
            right：右浮动
        
        clear：清除浮动
            left：清除左浮动
            right：清除右浮动
            both：清除左右浮动
            
            注意：清除浮动并不是把设置浮动标签给清除掉，而是清除的是浮动标签对其他标签的影响
    
    定位：
        position：设置定位
            relative：相对定义
                元素相对于其正常位置进行定位
                
                注意：如果设置的是相对定位，那不会对其他的标签元素造成影响
                
            absolute：绝对定位
                元素相对于最近的定位祖先元素进行定位
                
                注意：如果设置的是绝对定位，那会对其他的标签元素造成影响
            
        top：设置上边距
        left：设置左边距
        right：设置右边距
        bottom：设置下边距