CSS笔记

一.css入门

1) 什么是css?
 
   CSS 指层叠样式表 (Cascading Style Sheets)
   样式定义如何显示 HTML 元素
   样式通常存储在样式表中
   把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
   外部样式表可以极大提高工作效率
   外部样式表通常存储在 CSS 文件中
   多个样式定义可层叠为一

    样式表
        {
            color:'red';
        }
        let obj = {} 对象
        if(){}  
        {
            let a = 1; // 代码块
        }
        暂时性死区

2) css语法
    选择器 {
        样式名:样式值;
        样式名:样式值;
    }

3) css可读性
    1. 留空白(空格、tab字符和换行)
        div {
            color:'red';
        }

        div{color:'red';}
    2. 注释
        /* 注释 */
    3. 选取器组
        多个元素都需要同一个样式
        .one {
            color: red;
        }
        .three {
            color:red;
        } 
        等价于
        .one,.three {
            color:red;
        }
    4. 速写
        padding:5px 10px 15px 20px;
        等价于
        padding-top:5px;
        padding-right:10px;
        padding-bottom:15px;
        padding-left:20px;

4) css如何作用于html元素?
    1. 外部link导入【外部样式表】
        将样式表通过head标签内部的link标签引入
    2. 内部style标签【内部样式表】
        在style标签内部书写样式
        <style>

        </style>
    3. 内联style属性【内联样式表】
        <div style='样式名:样式值;样式名:样式值;'></div>
    4. @import
        @import '样式表的路径';
        <style>
            @import './1-style.css';
        </style>

    link和@import的区别?
        1) 所属范围
            link 是html中标签,不仅仅可以导入样式表,还可以设置rel属性
                rel="stylesheet" 表示导入外部样式表
            @import 是css的语法,只能够导入样式表
        2) 加载顺序  
            link 导入的样式文件是在浏览器加载html文件的同时被加载
            @import 导入的样式文件,是在浏览器加载完html文件之后,再去加载
        3) 兼容性问题
            link是一个标签,不存在兼容性问题
            @import存在兼容性问题,IE低版本无法支持该语法

二、css选择器

1) 基本选择器
    1. 标签选择器
        标签名 {
            样式名:样式值;
        }
        
        注意:
            1、标签选择器可以选中当前文件中所有具有该标签名的元素,而不是某一个
            2. 元素不论嵌套多少层,都可以被选中
            3. 只要是html的标签,都可以用于标签选择器
    2. 类名选择器
        .类名 {
            样式名:样式值;
        }
        注意:
            1、同一个文件中类名允许重复
            2、类名选择器在使用时,需要在类名前加上.
            3、类名选择器存在命名规范问题
                数字、字母、下划线
                不能以数字开头
                不能以其他标签名作为类名
            4、同一个元素可以同时存在多个类名
                错误:<div class='one' class='two'></div>
                正确:<div class='one two ...'></div>

    3. id选择器
        含义:选中当前文件中具有该id的元素,设置样式
        语法:
            #id {
                样式名:样式值;
            }
        注意:
            1、id选择器在使用的时候,需要在id前面加上#,并且不能有空格
                错误: # id {}
                正确: #id {}
            2、在同一个文件中id不允许重复
            3、id的命名规范与类名的一致

    4. 通配选择器
        含义:用于选中当前文件中的所有元素
        语法:
            * {
                样式名:样式值;
            }
        注意:
            通配选择器一般用于网页样式的初始化

    5. 逗号选择器
        含义:给多个选择器选中的元素设置样式
        语法:
            选择器一,选择器二,选择器三 {
                样式名:样式值;
            }
        
    6. 组合选择器【了解】
        div.one

2) 层次选择器
    1. 子代选择器
        含义:
            先选中具有标签名一的元素,再在该元素的第一代子元素中选中具有标签名二的元素
        语法:
            标签名一 > 标签名二 {
                样式名:样式值;
            }

    2. 后代选择器
        含义:
            先选中具有标签名一的元素,再在该元素的所有子元素中选中具有标签名二的元素
        语法:
            标签名一 标签名二 {
                样式名:样式值;
            }

    3. 兄弟选择器
        1、相邻兄弟选择器
            含义:先找具有标签名一的元素,然后选中该元素后面紧跟的元素,设置属性
            语法:
                标签名一 + 标签名二 {
                    样式名:样式值;
                }
            注意:  
                1、标签名的取值不仅仅可以实标签名,还可以是类名、id
                2、标签名一和标签名二的元素之间不能有其他元素
        2、通用兄弟选择器
            含义:先找具有标签名一的元素,然后选中该元素后面所有具有标签名二的元素,设置属性
            语法:
                标签名一 ~ 标签名二 {
                    样式名:样式值;
                }

3) 属性选择器
    一般用于区分input框
    语法:
        [attr]        包含该属性的元素都可以被选中  
        [attr=value]  属性值等于value的元素
        [atrr^=value] 以value属性值开始

4) 伪类选择器
    在其他选择器的后面使用: ,添加特殊的效果
    1、与子元素相关
        :first-child 第一个孩子
        :last-child  最后一个孩子
        :nth-child(n) 第n个孩子
            n的取值
                数字(整数)
                    1、2、3...
                英文字符
                    odd、even
    2、与状态相关
        :link   未被访问的链接
        :hover  光标悬浮
        :active 激活时的链接
        :visited 访问过的链接
        :focus  聚焦

5) 伪元素选择器
    1、清除浮动
    2、创建伪元素
    在其他选择器的后面使用:: ,添加伪元素
    ::after
    ::before

2、css选择器的优先级

1) !important
    width: 100px !important;
    具有!important的样式优先级最高
2) 选择器的权重
    1000
        <div style=''></div>
    100
        id选择器
    10
        类名选择器、伪类选择器、属性选择器
    1
        标签选择器、伪元素选择器

    div.test {} 10 + 1 = 11
    .test {} 10 
    #one {} 100
    <div id='one' class='test'></div>

3) 代码顺序
    就近原则:谁的选择器离选中的元素近,谁的样式生效

3、布局

1) 默认文档流
    1. 元素在网页中显示的顺序与元素在代码中出现的顺序一致
    2. 块级元素独占一行空间
    3. 行内元素与其他元素共享一行空间

2) 改变默认布局
    1. float
        浮动布局,采用浮动布局的元素会向左或者向右移动
        取值:
            left/right
                float:left/right;
1) 使用了浮动的元素失去对父元素的支撑
2) 使用了浮动的元素的宽高由内容撑开
3) 使用了浮动的元素在网页中原来的位置由其他块级元素所替代
4) 使用了浮动的元素会在浏览器中从右向左布局,如果当前行的宽度不够,会自动换行

清除浮动的方式:
    1. 
        浮动元素的父元素::after {
            clear:both;
            content:'';
            display:block;
        }
    2. 
        浮动元素的父元素 {
            overflow:hidden;
        }
    3. 
        浮动元素的兄弟元素 {
            clear:both;
            content:'';
        }

        注意:
            1、元素使用了浮动之后,会脱离文档流
            2、使用了浮动之后的元素,宽高由内容决定
            3、元素在网页中原本的位置会被其他块级元素替代
            4、使用了浮动之后的元素,其父元素的高度由于失去了支撑,所以变为0
        案例:
            1、全部浮动
            2、左侧浮动,右侧不浮动
            3、左右浮动、中间不浮动

    2. position
    3. display

4、样式规则

1) 字体样式 font-
    color 字体颜色
    font-style 字体样式
        italic 斜体
        normal 正常字体【默认】
    font-weight 字体粗细
        bold    粗体
        lighter 更细的字体
        normal  正常字体【默认】
        100 ~ 900   数值越大,字体越粗
            400 normal
            800 bold
    font-size 字体大小
        px
        浏览器的默认字体大小是16px
    line-height 行高
        取值是包裹该字体的元素高度,即可垂直居中
    font-family 字体族
        '微软雅黑'
        'Microsoft YaHei'
        serif 衬线
        sans-serif 没有衬线
        fangsong 政府文件
    速写
        font:font-style, font-weight, font-size, fonnt-family
        1. 必须包含font-size、font-family
        2. font-style和font-weight必须在font-size之前
        3. font-family必须放在最后

    webfont
        @font-face
            1. 下载ttf字体文件
            2. 放到相对应的目录(项目的目录)
            3. 通过@font-face引入
                @font-face {
                    font-family: 'test';
                    src: url('./HanyiSentyFlorCalligraphy.ttf');
                }
            4. 在需要字体的地方使用
                div {
                    font-family:'test';
                }
                
        字体图表库iconfont、fontawesome
            iconfont
                1. 更改图标的大小的时候,要使用font-size
                2. 选中需要更改的图标时,需要通过类名选中
            fontawesome

2) 文本样式 text-
    text-align 文本在当前元素中的对齐方式
        left
        center
        right
        justify
    text-decoration 
        underline   下划线
        overline    上划线
        line-through 删除线
    text-shadow 文本阴影
        px  x轴偏移
        px  y轴偏移
        blur 模糊距离
        color 颜色
    text-transform 文本变形
        lowercase   小写
        uppercase   大写
        capitalize  首字母大写

3) 列表样式
    list-style:none;将li标签的默认的样式消除

4) 拓展
    1. 文字的水平垂直居中
        水平:text-align:center;
        垂直:line-height:父元素的高度;
    2. 消除a标签的默认样式
        color:#333;
        text-decoration:none;
        cursor:default;
            pointer
            wait
            help
    3. 子元素在父元素中水平垂直居中
        父元素:
        display:table-cell;
        vertical-align: middle;
        align-items: center;
        子元素
        display:inline-block;

4、单位

1) 颜色
    1. 关键字
        red、yellow...
        color:red;
    2. 十六进制颜色
        color:#333333 ==> color:#333;
    3. rgb函数
        r red
        g green
        b blue
        color:rgb(0,0,0);
        0 ~ 255
    4. rgba函数
        r red
        g green
        b blue
        a 颜色透明度
        color:rgba(0,0,0,0.5);
        0 ~ 255 / 0 ~ 1
    
        opacity与rgba函数的区别
            opacity 父元素的透明度会影响到子元素,且子元素无法设置为正常透明度
            rgba函数 透明度仅仅会作用于父元素,不会影响子元素
    5. 渐变色
        background-image: linear-gradient(to right,red,yellow);
        从左向右,从红色渐变到黄色

2) 长度
    绝对单位
        px
    相对单位
        em  
            当前文本的包裹元素上的font-size
            <div style='font-size:18px;'>123321</div>
            1em = 18px
            2em = 36px;
        %
            相对于父元素
        rem 
            相对于根元素html

5、盒子模型

文档中的每个元素都可以被看作是一个矩形盒子
1) 盒子的属性
    width
    height
    margin 外边距 盒子与其他盒子之间的距离
        margin-top 上外边距
        margin-right 右外边距
        margin-bottom 下外边距
        margin-left 左外边距

        margin:10px;    上下左右都是10px
        margin:5px 10px;    上下为5px,左右为10px
        margin:5px 10px 15px;  上为5px,左右为10px,下为15px
        margin:5px 10px 15px 20px; 上5px,右10px,下15px,左20px

    border 边框
        border-width 边框线的宽度
            px
        border-style 边框线的样式
            solid   实线
            dotted  点状线
            dashed  虚线
            double  双实线
        border-color 边框线的颜色

        速写
            border:10px double #333;
        border-radius 边框圆角
            border-radius:100%; 圆
            border-radius:10px; 10px的圆角

    padding 内边距

    background-color
    background-image
    background-position
    background-repeat
        no-repeat 不重复
        repeat-x x轴重复
        repeat-y y轴重复
    background-size 背景图的尺寸
        background-size:100% 100%;

2) 盒子的组成
    width、padding、border、margin

3) 盒子的分类
    通过box-sizing设置盒子的类型
    1) box-sizing:content-box;
        内容盒子【W3C盒子】【默认】

        width = 内容width
        所占的宽 = width + padding + border + margin 

    2) box-sizing:border-box;
        边框盒子【IE盒子】
        
        width = 内容width + padding + border
        所占的宽 = width + margin
    
    盒子的属性的取值如下:
        margin:20px;border:10px;padding:10px;width:200px;

1、定位布局

1) 通过position来设置定位的类型
2) 通过left、top、right、bottom来描述元素的位置
3) 取值:
    static  静态布局(默认值)
    relative    相对定位
        1. 不脱离文档流
        2. 相对于当前元素原本的位置
    absolute    绝对定位
        1. 脱离文档流
        2. 相对于当前元素的父定位元素,如果父元素不是定位元素,则相对于浏览器视口
    fixed   固定定位
        1. 脱离文档流
        2. 相对于浏览器视口
    sticky  粘滞定位
        1. 不脱离文档流
        2. relative与fixed结合

拓展:
    1、overflow的取值
        auto    浏览器会自动的根据内容的宽高,来自适应的加上滚动条
        scroll  浏览器会直接加上滚动条,不论内容是否超过宽高
        hidden  浏览器会将内容超出的部分隐藏,不显示

        overflow-x:auto/scroll/hidden;
        overflow-y:auto/scroll/hidden;
    2、浮动的脱离文档流和定位的脱离文档流的区别?
        文本的位置
        浮动:
           使用float:left的元素,其他盒子会无视它,从浏览器左上角开始布局,而盒子内的文本依旧会为浮动的元素让出位置
        定位:
            使用绝对定位的元素,其他盒子会忽视它,而其他盒子内的文本同样也会忽视它,从左上角开始布局

2、伸缩盒布局

1) 作用:将子元素在父元素中列/行排布,与float的用法类似。一般用于响应式布局(手机app)
2) 属性:
伸缩盒布局
手机端开发
响应式布局
属性
    display:flex;   将盒子设置为伸缩盒
    flex-direction 主轴的方向
        row     x轴【默认】
        column  y轴
        不是主轴的轴就是交叉轴
    flex-wrap  设置换行
        nowrap 不换行
        wrap    换行
    flex
        flex-basis  初始大小

    width:100px;    
                    == flex-basis:100px;
    height:100px;

        flex-grow   对于父元素剩余空间的分配
            flex-grow:1;    1/5
            flex-grow:4;    4/5
        
        flex-shrink 收缩的规则
            收缩的快慢
            flex-shrink:1;    1/5
            flex-shrink:4;    4/5
    justify-content 主轴的对齐方式
        center
        flex-end
        flex-start
        ...  
    align-items     交叉轴的对齐方式
        center
        flex-end
        flex-start
        ...
    ==>
    水平垂直居中

    display:flex;   将当前盒子设置为伸缩盒
    flex-direction  设置伸缩盒的主轴
        column  行布局
        row     列布局
    flex-wrap   当子元素的宽或者高超出父元素主轴方向的宽或者高时,设置换行
        wrap    超出时换行
        nowrap  超出时不换行 【默认值】
    flex    速写
        flex-grow   指定了flex容器中剩余空间的多少应该分配给项目
        flex-shrink 指定了 flex 元素的收缩规则
        flex-basis  指定了 flex 元素在主轴方向上的初始大小

    align-items 交叉轴上对齐方式
        center  在交叉轴的中间显示
        stretch 在交叉轴上拉伸
        flex-start  【默认值】在交叉轴的开始显示
        flex-end    在交叉轴的结束显示

    justify-content 主轴上的对齐方式
        center  在主轴的中间显示
        flex-start  【默认值】在主轴的开始显示
        flex-end    在主轴的结束显示
3) 注意:
    1. 父元素在主轴方向上一定要有固定的宽/高,供子元素分配
    2. 子元素在交叉轴上默认的宽/高会占满父元素
        如果交叉轴为x轴,子元素默认的高会占满父元素
        如果交叉轴为y轴,子元素默认的宽会占满父元素
网页开发
    pc端    浮动、定位
        前台    网易严选首页、学校官网首页...
        *后台   网易严选管理员...
    手机端  响应式开发 伸缩盒
        app
    技术选型
        vue、vuex
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页