CSS预处理器

初识CSS预处理器

本节主要讲解CSS的发展历史、四种布局方式、以及CSS预处理器主要功能,介绍了常见的三种CSS预处理器。

01-20侠课岛    初级拔高       

前端/前端/前端系列课程P2 20     0     456

(一)初识CSS预处理器

1:课程须知

1:认真看视频,最好跟着老师一步一步完成上课的每一步操作

2:每一节课后,同学们必须自己不看视频或文档自己独立完成视频中的所有的操作

3:对每一节课的学习内容知识点能够课后反复回顾,最好做到举一反三,发散性思考

4:如果课后知识点回顾时,有不懂或不记得的知识点,根据老师所给的视频知识点说明,找到对应的知识点在视频中的时间点,再次看视频学习

5:每节课后,完成本课程的练习题,最好是看完视频,独立完成操作后,立即完成课后练习

6:每一个章节结束后,完成对应的章节的挑战题目

7:每一章都需要自己整理思维导图,将知识点融会贯通

2:传统CSS的局限性

  • css发展史

    • 初代table布局:结构跟表现混合在一起
    <MULTICOLCOLS="3"GUTTER="25">
    
    <P><FONTSIZE="4"COLOR="RED">This would be some font broken up into columns</FONT></P>
    
    </MULTICOL>
    • CSS+div布局:目前最流行的布局方式
    html { margin-left: 2cm; font-family: "Times", serif;}h1 { font-size: 24px;}
    • Flex布局:移动端主流布局技术、单一维度的布局
    .flex {
            height: calc(100% - 120px);
            display: flex;
        }
    • grid布局:拓宽了CSS布局的维度
    .container {
            height: 100%;
            display: grid;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: 80px auto 40px;
        }
  • 特点

    • 只有一个全局的命名空间,所以是无法避免出现选择器冲突的
    • 模块化做的不够好,所以造成嵌套和覆盖混乱,容易产生一大堆乱糟糟的样式

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

20

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引

本文标签


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?