• CSS由李爵士的同事赖先生与1996年发明：https://www.w3.org/People/howcome/p/cascade.html
  • CSS全称Cascading Style Sheets，特点是层叠：
    • 样式层叠
    • 选择器层
    • 文件层叠
  • CSS使用最广泛的版本为CSS2.1，从CSS4开始进行分模块升级
  • 查看浏览器支持CSS特性情况：caniuse.com
  • CSS标准：当字典查即可

at语法

at语法

  • @charset “UTF-8”; 必须放在第一行，必须加分号，定义当前文件使用的字符编码（或字符集），charset是字符集的意思，UTF-8是字符编码，字符编码有：ASCII（英语），GB2312（简体中文），GBK（中日韩语言），Unicode（UTF-8,UTF-16,UTF-32）
  • @import url(2.css); 必须加分号，告诉 CSS 引擎引入一个外部样式表.
  • @media (min-width: 100px) and (max-width:200px) {
    color: red;
    }

检查代码是否错误

  • W3C验证器：css validation service 网站，太麻烦不用
  • VSCode
  • WebStorm
  • 开发者工具：chrome网页按F12，看对应标签的style是否被划掉

代码调式方法

  • border调试法：
    1. 给怀疑出错的元素的css style上加border
    2. 若元素的border没有出现，则css选择器或者语法错误
    3. 若border出现，则将border往下移动一行，如果border不出现则说明border样式之前的句子出错
    4. 反复第3步
    • 一句话总结：元素的border没有出现则说明border样式前的句子出错，相当于js的log调试法，python的print调试法
      1. div {
      2. background-color: red
      3. border: 1px solid black;  /* div的border不出现说明前一句出错 */  
      4. }

查资料

Google搜：

  • 关键词+MDN
  • 关键词 + CSS tricks
  • 关键词 + 张鑫旭

找练习

  • PSD
    • 英文：Freepik 搜 PSD web
    • 中文：365SD里的UI套件
  • 效果图：dribbble.com顶级设计师社区
  • 商业网站：网上的商业化网站，如淘宝、知乎、微博等
    注意：每种类型（PC端、移动端、小程序、UI组件等）模仿一两个即可，不用太多，浪费时间并且没用！

CSS引入方式

  • 内联样式：定义在html标签内
  1. <div style="color:red;"> hello pig! </div>
  • 内部样式：定义在里
  1. <style>
  2.     div{
  3.         width:200;
  4.         height:200;
  5.         color:blue;
  6.     }
  7. </style>

  • 外部样式：外部引入css文件
    1.创建文件夹css，在里面创建css文件a.css
    2.在html文件中内引入css文件：

    1. <link rel="stylesheet" href="css/a.css">

  • 另一种写法：

    1. <style>
    2.   @import "css/a.css";
    3. </style>

CSS选择器

  1. <div>
  2.     <p class="pig" id="fatpig1"> 肥猪1号 </p>
  3.     <p class="pig" id="fatpig2"> 肥猪2号 </p>
  4.     <span>
  5.     <p> Pig is pig  </p>
  6.     </span>
  7. </div>
  8. <div>
  9.     <a href="#"> 哈哈哈 </a>
  10. </div>
  • 标签选择器（常用来初始化标签）：
    div {
    background-color: red;
    }
  • 类选择器：
    .pig {
    …
    }
  • id选择器：
    #fatpig1 {
    …
    }
  • 属性选择器：
    [id=”fatpig1”] {
    …
    }
    p[id=”fatpig1”] {
    …
    }
  • 并集选择器：
    #fatpig1,
    #fatpig2 {
    …
    }
  • 子选择器：
    div p {
    …
    }
  • 父选择器：
    span > p {
    …
    }
  • 伪类选择器：
    • 状态：
      • link: 初始化状态
      • visited: 被访问过的状态
      • active: 正在访问的状态
      • hover: 鼠标悬浮状态
        a:link {
        color: pink;
        }
  • 伪元素：行级元素，每个元素中前后都有一个before, after

    span::before {
    content: “haha”;
    }
  • !important:
    p.pig {
    color: red !important;
    }
  • 其他选择器:
    li:nth-of-type(2n) {}
  • 选择器优先级：!important > 行间样式 > id > class|属性|伪类 > 标签|伪元素 > 通配符
    选择器权重(256进制): infinity 1000 100 10 1 0
    多个选择器选中同一个元素，权重相加最大的生效，权重一样的，后面的生效

颜色与长度单位

  • 长度单位：px像素，em（1em = 1 font-size ），百分数，整数，rem，vw & vh
  • 颜色：
    • 英文单词：red, green, blue;(开发不用，测试用)
    • RGB值： rgb(0, 0, 255)，rgba(0, 0, 255, 0.5)
    • 十六进制#FF00FF(简写#F0F)
    • 色相，饱和度，亮度：hsl(20, 50%, 50%)

文档流

不要在内联元素中加块级元素，文档流动方向为：内联元素向左流动，块级元素向上流动

  • block: 比如<div> <p> <ul> <li> <ol> <form> <address> -<h1>-<h6>
    • 独占一行，包住内部所有的文档流
    • 不设置width时，默认 width：auto，
    • 如果设置width:100%，则宽度为100%加border-width * 2，尽量不要用
    • 不加height，默认为0
  • inline：比如<span> <strong> <em> <a> <del>
    • 不能设置高度宽度，宽度由所有子内联元素的宽度和决定
    • 实际高度由 line-height 间接决定，视觉高度由 line-height 与 padding 决定
  • inline-block：如
    • 可设置宽高的 inline元素
  • display: block, inline, inline-black, 改变元素显示方式
  • 当内容大于容器时会溢出，使用overflow设置是否显示滚动条
    overflow: hidden（隐藏溢出部分）, scroll(一直显示滚动条，太丑不用)， auto（有溢出才显示滚动条），visible（显示溢出部分）
  • 使元素脱离文档流：加上样式 float, position: absolute/fixed

margin重叠

  • 上下两个div之间的上下margin会重叠，取消margin重叠： display: inline-block；不取消更加方便
  • 第一个子元素的margin-top和最后一个子元素的margin-bottom会和父元素对应的margin重叠，取消父子元素margin重叠，可以给父元素加：border，padding，overflow: hidden，display: flex
  • 只有上下会重叠，左右不会重叠