CSS复习大纲

CSS大纲
    1.简介
         CSS（Cascading Style Sheets的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表
    2.书写方式
        属性:值
        嵌入式、外链式、行内式
        <style  type=”text/css”>
        /*书写CSS代码*/
        选择器{属性:值;属性:值;}
</style>
    3.注释
        /* 注释的内容  */
    4.选择器
        选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
        基本选择器
            
        复合选择器
            
        伪类选择器
            
        属性选择器
            
    5.尺寸样式属性
        
    6.文本与字体属性
        文本
            
        字体
            
    7.列表样式属性
        
    8.列表样式属性案例
    9.伪类选择器案例
    10.继承性
        特点
            1.外层元素身上的样式会被内层元素所继承
            2.如果内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素所覆盖
            3.并不是所有的样式都能够被继承。只有文本与字体样式属性能够被继承。其它的样式属性都不可以被继承
        注意
            在实际工作中，我们往往会给body标签设置字体大小以及字体颜色、字体。因为body标签是最外层的元素，内层的元素会继承外层的元素的样式。
    11.优先级
        行内样式>ID选择器>类选择器>标签选择器
        权重
            标签选择器        1
            类选择器        10
            ID选择器        100
            行内样式        1000
    12.！important属性
        作用
            它主要是用来提升属性的权重。其属性的权重值无穷大
        格式
            属性:值 !important;
        注意
            ?    正确的写法
            ?    属性:值 !important;
            ?    错误的写法
            ?    属性:值;!important;   不能将!important写在分号的外面  一定要写在分号的里面
            ?    属性:值 important;   不能将!给忘记了
        要注意的事项
            1、!important它是提升的属性的权重，而不是提升选择器的权重！
            2、!important它不能提升继承过来的权重！
    13.一个标签内可以携带多个类名
        <标签名  class=”值1  值2   值3”></标签名>
        优点
            1.    减少CSS的代码量
            2.    多个类名的样式会叠加到当前元素上面
    14.背景样式属性
        
        ?    background:简写属性 它可以同时设置多个样式  比如背景颜色、背景图片、背景图片是否平铺  水平位置 垂直位置   
        ?    background：简写属性 其值的个数不定 顺序也不定 每一个值之前使用空格分隔
        注意
            空白折叠
    15.背景样式属性综合案例
    16.标准文档流
        从左到右从上而下
    17.浮动
        特点
            脱标，并且会压盖住标准流，层级要比标准流要高
            能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度！
    18.浮动案例
        注意
            只要有浮动，就要清除浮动
            原因
                ?    因为经过浮动了元素 它会影响到它下面的元素的排版布局  
                ?    还有浮动元素的父元素没有将浮动元素包裹着
    19.清除浮动
        只有清除了浮动 不会影响到浮动元素的下面进行排版布局  浮动元素的父元素会将浮动元素从视觉上包裹着
        清除浮动三种方法
            给浮动元素的父元素设置一个固定的高度   但是这个方法不建议使用  因为一个元素的高度一般情况下不是手动设置的 它应该是由其自身的内容来撑高的！
            使用清除浮动的样式属性  clear   clear这个属性是专用于来清除浮动的  这个属性有三个值  clear:left;清除左浮动  clear:right; 清除右浮动   clear:both;两者都清除
这个属性一般是用在最后 一个浮动元素的下面  在最后一个浮动元素的下面新建一个空白的div 这个div什么都要放 不要给这个div里面放置内容  它只做一件事件就是清除浮动
            使用overflow:hidden 这个属性来清除浮动  overflow是一个属性   
overflow:hidden 它原意是用来将溢出的部分进行隐藏  但是它还可以用于清除浮动
overflow:hidden 它一般主要是用来将列表的浮动给清除。给li标签的父元素设置overlfow:hidden这个属性。
    20.盒子模型
        
        注意
            width：指“宽度”的意思  但是这里的宽度指的盒子里面的内容的宽度  而不是盒子的宽度
            hegiht：指“高度”的意思  但是这里的高度指的盒子里面的内容的高度  而不是盒子的高度
            padding：是“内填充”的意思，指的盒子里面的内容到盒子边框的距离  
            border：是“外边框”的意思  指的盒子的边框
            margin：是“外边距”的意思  指的是盒子与盒子之间的间距
    21.padding
        小属性
            padding-top：上内填充
            padding-right：右内填充
            padding-bottom：下内填充
            padding-left：左内填充
        简写属性
            ?    padding：这个属性是有方向的  可以同时表示四个方向  这个属性的方向是有顺序的  顺序是顺时针方向  也就是：上、右、下、左  这个顺序
            ?    padding:20px  表示上右下左这四个方向的内填充都为20像素 
            ?    padding:10px 20px; 表示上下为10像素  左右为20像素 
            ?    padding:10px 20px 30px;表示上为10 左右为20  下为30
            ?    padding:10px 20px 30px 40px;表示上为10 左为20 右为30 下为40
    22.margin
        小属性
            margin-top：上外边距
            margin-right：右外边距
            margin-bottom：下外边距
            margin-left：左外边距
        简写属性
            ?    margin：简写属性它是有方向的 这里的方向是一个顺时针的方向  它的方向是的顺序是：上、右、下、左
            ?    margin:10px;表示上右下左这四个方向的外边距都是10像素
            ?    margin:10px 20px;表示上下这两个方向的外边距为10像素  左右两个方向的外边距为20像素
            ?    margin:10px 20px 30px;表示上外边距为10像素 左右外边距为20像素 下外边距为30像素 
            ?    margin:10px 20px 30px 40p;表示上外边距为10像素 右外边距为20像素 下外边距为30像素 左外边距为40像素 
    23.margin注意事件
        margin有塌陷现象
            在标准的文档流中 竖直方向的margin值不会叠加 它会取较大的值
            横着方向是没有margin的塌陷现象
            浮动元素它是没有margin的塌陷现象的
        margin居中
            margin的值可以是auto   auto表示“自动”的意思  当左外边距与右外边距的值都是auto时那么这个盒子在其父元素中水平居中的效果
            ?    使用margin来实现水平居中时 一定要有当前的元素固定的宽度(给这个盒子设置一个宽度)  只有块元素可以实现水平居中  行内元素是不能实现居中的 
            ?    只有标准文档流中的盒子才可以使用margin来实现水平居中
            ?    margin属性是用来实现盒子的水平居中 而不是文本的水平居中  
            ?    text-align这个属性它是用于实现文本的对齐方式  如果其值为center就表示文本水平居中  但是它不能实现盒子的水平居中
        善于使用父元素的padding而不是使用子元素的margin
        说明
            margin这个属性它本意是用于来描述兄弟与兄弟元素之间的关系  不是用于描述父子元素之间的关系的。如果是父子元素的关系  就最好使用给其父元素设置padding属性
    24.border
        语法格式
            border：粗细 线型 颜色;
        小属性
            border-top:上边框
            border-right:右边框
            border-bottom:下边框
            border-left:左边框
    25.display
        介绍
            display  它是“显示”的意思，它就是用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者是将显示的元素进行隐藏。它主要是给JavaScript来使用。
            display  这个属性取值：inline(行内)、block(块级)、none(无)
        元素转换
            将display这个属性的值设置为block 这个行内元素就会强制的转换为了块级元素。转换为块级元素后，当前的行内元素就会拥有块级元素的特点。
            当我们将一个行内元素的display属性的值设置为block以后 那么这个元素就会被转换为块级元素 
    26.position
        定位
                position:fixed    固定定位
                ?    固定定位元素它脱离了标准文档流
                ?    固定定位元素的的层级比标准文档流里面的元素要高 所以固定定位元素它会压盖住标准文档流里面的元素
                ?    固定定位元素它不再占用空间
                ?    固定定位元素它显示的位置不会随着浏览器滚动而滚动
                position:absolute 绝对定位
                ?    相对定位元素它没有脱离标准文档流
                ?    相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
                ?    相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
                ?    相对定位元素它会将标准文档流中的元素压盖住。
                ?    相对定位元素的定位坐标值可以是负数
            position:relative        相对定位
                ?    绝对定位元素它脱离了标准文档流
                ?    绝对定位元素它不再占用空间
                ?    绝对定位元素它会压盖住标准文档流中的元素
                ?    绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位 但是我们一般只会给其实祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位父元素设置相对定位
        注意
            在使用定位属性时，一定要配合定位的坐标来使用！
                left：表示定位的元素离左边多远
                right：表示定位的元素离右边多远
                top：表示定位的元素离上边多远
                bottom：表示定位的元素离下边多远
    27.z-index
        ?    z-index表示谁压盖着谁，数值大的会压盖住数值小的
        ?    只有定位的元素才有z-index值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index
        ?    z-index的值是没有单位的 值是一个正整数 默认的z-index的值是0
        ?    如果多个定位元素没有设置z-index属性 或者z-index值设置一样 那么写在HTML后面的定位元素就会压盖住前面的定位元素
    28.CSS3
        与CSS2区别
            css3=css2+新语法+新的属性
            就是对css2进行扩充 删减 优化
        结构伪类
            E:first-child    匹配第一个孩子
            E:last-child    匹配最后一个孩子
            E:nth-child(n)    匹配第n个孩子
            E:nth-child(2n)或
            E:nth-child(even)    匹配偶数的孩子  如：2、4、6…..
            E:nth-child(2n+1)
                E:nth-child(odd)    匹配奇数的孩子  如：1、3、5…..
            E:only-child    匹配有且只有一个孩子 (独生子女)
        border-collapse
            这个属性主要是用于来合并表格的边框线 其值为：collapse
            border-collapse:collapse;
        伪元素
            :first-letter    操作当前元素中第一个字
            :first-line    操作当前元素中第一行文字
            ::before    在之前插入，在一个盒子内部的最前面
            ::after    在之后插入，在一个盒子内部的最后面
        文本阴影
            
            描述
                ?    文字阴影可以有多组值，多组之间用逗号隔开就可以 
                ?    水平阴影正值阴影在右边 负值在左边
                ?    垂直阴影正值在下边，负值在上边
                ?    模糊强度，值越大越模糊
        盒子阴影
            水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸  阴影颜色 内/外阴影
            水平阴影和垂直阴影必须的写，其余的是可以省略不写
            
        圆角矩形
            border-radius:左上 右上 右下 左下;
        CSS透明度
            ?    背景颜色透明
                Background-color:rgba(255,255,255,0.3)
            ?    文本颜色透明
                Color:rgba(255,255,255,0.3)
            ?    边框颜色透明
                Border:1px solid rgba(255,255,255,0.5)
1.简介
     CSS（Cascading Style Sheets的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表
2.书写方式
    属性:值
    嵌入式、外链式、行内式
    <style  type=”text/css”>
        /*书写CSS代码*/
        选择器{属性:值;属性:值;}
</style>
3.注释
    /* 注释的内容  */
4.选择器
    选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
    基本选择器
        
    复合选择器
        
    伪类选择器
        
    属性选择器
        
5.尺寸样式属性
    
6.文本与字体属性
    文本
        
    字体
        
7.列表样式属性
    
8.列表样式属性案例
9.伪类选择器案例
10.继承性
    特点
        1.外层元素身上的样式会被内层元素所继承
        2.如果内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素所覆盖
        3.并不是所有的样式都能够被继承。只有文本与字体样式属性能够被继承。其它的样式属性都不可以被继承
    注意
        在实际工作中，我们往往会给body标签设置字体大小以及字体颜色、字体。因为body标签是最外层的元素，内层的元素会继承外层的元素的样式。
11.优先级
    行内样式>ID选择器>类选择器>标签选择器
    权重
        标签选择器        1
        类选择器        10
        ID选择器        100
        行内样式        1000
12.！important属性
    作用
        它主要是用来提升属性的权重。其属性的权重值无穷大
    格式
        属性:值 !important;
    注意
        ?    正确的写法
        ?    属性:值 !important;
        ?    错误的写法
        ?    属性:值;!important;   不能将!important写在分号的外面  一定要写在分号的里面
        ?    属性:值 important;   不能将!给忘记了
    要注意的事项
        1、!important它是提升的属性的权重，而不是提升选择器的权重！
        2、!important它不能提升继承过来的权重！
13.一个标签内可以携带多个类名
    <标签名  class=”值1  值2   值3”></标签名>
    优点
        1.    减少CSS的代码量
        2.    多个类名的样式会叠加到当前元素上面
14.背景样式属性
    
    ?    background:简写属性 它可以同时设置多个样式  比如背景颜色、背景图片、背景图片是否平铺  水平位置 垂直位置   
    ?    background：简写属性 其值的个数不定 顺序也不定 每一个值之前使用空格分隔
    注意
        空白折叠
15.背景样式属性综合案例
16.标准文档流
    从左到右从上而下
17.浮动
    特点
        脱标，并且会压盖住标准流，层级要比标准流要高
        能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度！
18.浮动案例
    注意
        只要有浮动，就要清除浮动
        原因
            ?    因为经过浮动了元素 它会影响到它下面的元素的排版布局  
            ?    还有浮动元素的父元素没有将浮动元素包裹着
19.清除浮动
    只有清除了浮动 不会影响到浮动元素的下面进行排版布局  浮动元素的父元素会将浮动元素从视觉上包裹着
    清除浮动三种方法
        给浮动元素的父元素设置一个固定的高度   但是这个方法不建议使用  因为一个元素的高度一般情况下不是手动设置的 它应该是由其自身的内容来撑高的！
        使用清除浮动的样式属性  clear   clear这个属性是专用于来清除浮动的  这个属性有三个值  clear:left;清除左浮动  clear:right; 清除右浮动   clear:both;两者都清除
这个属性一般是用在最后 一个浮动元素的下面  在最后一个浮动元素的下面新建一个空白的div 这个div什么都要放 不要给这个div里面放置内容  它只做一件事件就是清除浮动
        使用overflow:hidden 这个属性来清除浮动  overflow是一个属性   
overflow:hidden 它原意是用来将溢出的部分进行隐藏  但是它还可以用于清除浮动
overflow:hidden 它一般主要是用来将列表的浮动给清除。给li标签的父元素设置overlfow:hidden这个属性。
20.盒子模型
    
    注意
        width：指“宽度”的意思  但是这里的宽度指的盒子里面的内容的宽度  而不是盒子的宽度
        hegiht：指“高度”的意思  但是这里的高度指的盒子里面的内容的高度  而不是盒子的高度
        padding：是“内填充”的意思，指的盒子里面的内容到盒子边框的距离  
        border：是“外边框”的意思  指的盒子的边框
        margin：是“外边距”的意思  指的是盒子与盒子之间的间距
21.padding
    小属性
        padding-top：上内填充
        padding-right：右内填充
        padding-bottom：下内填充
        padding-left：左内填充
    简写属性
        ?    padding：这个属性是有方向的  可以同时表示四个方向  这个属性的方向是有顺序的  顺序是顺时针方向  也就是：上、右、下、左  这个顺序
        ?    padding:20px  表示上右下左这四个方向的内填充都为20像素 
        ?    padding:10px 20px; 表示上下为10像素  左右为20像素 
        ?    padding:10px 20px 30px;表示上为10 左右为20  下为30
        ?    padding:10px 20px 30px 40px;表示上为10 左为20 右为30 下为40
22.margin
    小属性
        margin-top：上外边距
        margin-right：右外边距
        margin-bottom：下外边距
        margin-left：左外边距
    简写属性
        ?    margin：简写属性它是有方向的 这里的方向是一个顺时针的方向  它的方向是的顺序是：上、右、下、左
        ?    margin:10px;表示上右下左这四个方向的外边距都是10像素
        ?    margin:10px 20px;表示上下这两个方向的外边距为10像素  左右两个方向的外边距为20像素
        ?    margin:10px 20px 30px;表示上外边距为10像素 左右外边距为20像素 下外边距为30像素 
        ?    margin:10px 20px 30px 40p;表示上外边距为10像素 右外边距为20像素 下外边距为30像素 左外边距为40像素 
23.margin注意事件
    margin有塌陷现象
        在标准的文档流中 竖直方向的margin值不会叠加 它会取较大的值
        横着方向是没有margin的塌陷现象
        浮动元素它是没有margin的塌陷现象的
    margin居中
        margin的值可以是auto   auto表示“自动”的意思  当左外边距与右外边距的值都是auto时那么这个盒子在其父元素中水平居中的效果
        ?    使用margin来实现水平居中时 一定要有当前的元素固定的宽度(给这个盒子设置一个宽度)  只有块元素可以实现水平居中  行内元素是不能实现居中的 
        ?    只有标准文档流中的盒子才可以使用margin来实现水平居中
        ?    margin属性是用来实现盒子的水平居中 而不是文本的水平居中  
        ?    text-align这个属性它是用于实现文本的对齐方式  如果其值为center就表示文本水平居中  但是它不能实现盒子的水平居中
    善于使用父元素的padding而不是使用子元素的margin
    说明
        margin这个属性它本意是用于来描述兄弟与兄弟元素之间的关系  不是用于描述父子元素之间的关系的。如果是父子元素的关系  就最好使用给其父元素设置padding属性
24.border
    语法格式
        border：粗细 线型 颜色;
    小属性
        border-top:上边框
        border-right:右边框
        border-bottom:下边框
        border-left:左边框
25.display
    介绍
        display  它是“显示”的意思，它就是用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者是将显示的元素进行隐藏。它主要是给JavaScript来使用。
        display  这个属性取值：inline(行内)、block(块级)、none(无)
    元素转换
        将display这个属性的值设置为block 这个行内元素就会强制的转换为了块级元素。转换为块级元素后，当前的行内元素就会拥有块级元素的特点。
        当我们将一个行内元素的display属性的值设置为block以后 那么这个元素就会被转换为块级元素 
26.position
    定位
            position:fixed    固定定位
            ?    固定定位元素它脱离了标准文档流
            ?    固定定位元素的的层级比标准文档流里面的元素要高 所以固定定位元素它会压盖住标准文档流里面的元素
            ?    固定定位元素它不再占用空间
            ?    固定定位元素它显示的位置不会随着浏览器滚动而滚动
            position:absolute 绝对定位
            ?    相对定位元素它没有脱离标准文档流
            ?    相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
            ?    相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
            ?    相对定位元素它会将标准文档流中的元素压盖住。
            ?    相对定位元素的定位坐标值可以是负数
        position:relative        相对定位
            ?    绝对定位元素它脱离了标准文档流
            ?    绝对定位元素它不再占用空间
            ?    绝对定位元素它会压盖住标准文档流中的元素
            ?    绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位 但是我们一般只会给其实祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位父元素设置相对定位
    注意
        在使用定位属性时，一定要配合定位的坐标来使用！
            left：表示定位的元素离左边多远
            right：表示定位的元素离右边多远
            top：表示定位的元素离上边多远
            bottom：表示定位的元素离下边多远
27.z-index
    ?    z-index表示谁压盖着谁，数值大的会压盖住数值小的
    ?    只有定位的元素才有z-index值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index
    ?    z-index的值是没有单位的 值是一个正整数 默认的z-index的值是0
    ?    如果多个定位元素没有设置z-index属性 或者z-index值设置一样 那么写在HTML后面的定位元素就会压盖住前面的定位元素
28.CSS3
    与CSS2区别
        css3=css2+新语法+新的属性
        就是对css2进行扩充 删减 优化
    结构伪类
        E:first-child    匹配第一个孩子
        E:last-child    匹配最后一个孩子
        E:nth-child(n)    匹配第n个孩子
        E:nth-child(2n)或
        E:nth-child(even)    匹配偶数的孩子  如：2、4、6…..
        E:nth-child(2n+1)
            E:nth-child(odd)    匹配奇数的孩子  如：1、3、5…..
        E:only-child    匹配有且只有一个孩子 (独生子女)
    border-collapse
        这个属性主要是用于来合并表格的边框线 其值为：collapse
        border-collapse:collapse;
    伪元素
        :first-letter    操作当前元素中第一个字
        :first-line    操作当前元素中第一行文字
        ::before    在之前插入，在一个盒子内部的最前面
        ::after    在之后插入，在一个盒子内部的最后面
    文本阴影
        
        描述
            ?    文字阴影可以有多组值，多组之间用逗号隔开就可以 
            ?    水平阴影正值阴影在右边 负值在左边
            ?    垂直阴影正值在下边，负值在上边
            ?    模糊强度，值越大越模糊
    盒子阴影
        水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸  阴影颜色 内/外阴影
        水平阴影和垂直阴影必须的写，其余的是可以省略不写
        
    圆角矩形
        border-radius:左上 右上 右下 左下;
    CSS透明度
        ?    背景颜色透明
            Background-color:rgba(255,255,255,0.3)
        ?    文本颜色透明
            Color:rgba(255,255,255,0.3)
        ?    边框颜色透明
            Border:1px solid rgba(255,255,255,0.5)