【MUJL】走进前端技术栈 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

重点

0. CSS 代码构成
1. CSS 使用方法
2. CSS 流程之选择器组、文本渲染
3. 调试 CSS

一、了解CSS

0. 基本格式

    /* 选择器 Selector */
    h1 {
        /* 属性 Property */
        /* 属性值 Value */
        color: white;
        /* 属性和值构成 声明 Declaration */
        font-size: 14px;
    }
   

1. 在页面中使用

    <!-- 外链 （推荐！） -->
    <link rel="stylesheet" href="styles.css">
    ​
    <!-- 嵌入 -->
    <style>
        /*直接在此处写CSS*/
    </style>
    ​
    <!-- 内联 （不推荐！） -->
    <p style="margin: lem 0">p</p>
   

2. CSS工作流程

   添加样式到DOM节点
   加载HTML
   解析HTML
   创建DOM树
   展示页面
   加载CSS
   解析CSS
   

   将解析出来的CSS附加到DOM树上得到一个渲染树

二、选择器 Selector

• 选择元素方式

  • 按照标签名、类名、id
  • 按照属性
  • 按照DOM树中的位置

   /* 通配选择器 * */
   * {
       color: red;
   }
   ​
   /* 标签选择器 */
   p {
       color: red;
   }
   ​
   /* id选择器 # */
   /* 要求id是唯一的 */
   #idxxx {
       color: red;
   }
   ​
   /* 类选择器 . */
   .classxxx {
       color: red;
   }
   ​
   /* 属性选择器 [] */
   /* 选中所有含有property属性的元素 */
   [property] {
       color: red;
   }
   /* 选择属性有特定值的元素 */
   input[type="password"] {
       color: red;
   }
   /* 选择属性匹配一定规则的元素 */
   a[href^="#"] {  /* 以#开头 */
       color: red;
   }
   a[href$=".jpg"] {  /* 以.jpg结尾 */
       color: red;
   }
  

• 伪类 pseudo-classes

  • 不基于标签和属性定位元素

  • 状态伪类

     /* 链接<a>默认状态下 */
     a:link {/*...*/}
     /* 链接<a>访问过后 */
     a:visited {/*...*/}
     /* 鼠标移到链接<a>上时 */
     a:hover {/*...*/}
     /* 鼠标按下链接<a>后 */
     a:active {/*...*/}
     ​
     /* 某元素聚焦状态下 */
     :focus {/*...*/}
    

  • 结构性伪类

     /* 选中<li>父级的第一个子元素 */
     li:first-child {/*...*/}
     /* 选中<li>父级的最后一个子元素 */
     li:last-child {/*...*/}
    

• 组合 Combinators

  语法	说明	示例
  AB	选择同时满足A和B的标签	input:focus
  A B	选中A元素中的所有子孙B	nav a
  A > B	选中A的直接子元素B	section > p
  A ~ B	选中A之后与A同级的所有B	h2 ~ p
  A + B	选中紧跟在A后面的第一个B	h2 + p

• 选择器组：用,将不同选择器分隔开

三、颜色

• RGB 红绿蓝三原色

  • rgb(143, 172, 135) 数值介于0-255
  • #8fac87 每两位表示一个颜色 00-ff

• HSL

  • Hue 色相 0-360
  • Saturation 饱和度 色彩的鲜艳程度 0-100%
  • Lightness 亮度 0-100%
  • 方便制作按钮动画等

• alpha （不）透明度：

  • 1 不透明
  • 0 完全透明
  • #rrggbbaa rgba(r, g, b, a) hsla(h, s%, l%, a)

四、字体 font

font: style weight size/height family

 h1 {
     font: bold 14px/1.7 Helvetica,sans-serif;
 }

• font-family 字体族

   h1 {
       /* 设置多个可以兼容多种设备 */
       font-family: Optima, Georgia, serif;
       /* serif sans-serif 是一个通用类型的字体族 */
   }
  

  • 通用字体族

    • Serif 衬线体 线条末端有装饰
    • Sans-Serif 无衬线体 线条均一
    • Cursive 手写体
    • Fantasy 夸张
    • Monospace 等宽字体
    • 在设置字体最后要加上通用字体族

  • 如果要区分英文与中文字体，一般将英文字体放在中文字体前

  • Web Fonts：强制下载某字体

    @font-face {
        font-family: "Megrim";
        src: "url(...)";
    }
    

    • 有性能开销
    • 中文字体包较大，使用时一般将需要的字体裁切出来

• font-size 字体大小

  • 关键字：small medium large
  • 长度：px em（2em 表示是父元素字体大小的2倍）
  • 百分数：相对于父元素的字体大小

• font-style: "italic"; 斜体。正常为"normal"

• font-width 字重、粗细

  • 100-900
  • 不是所有字体都包含所有字重，一般有 normal 和 bold
  • normal 等同于 400
  • bold 等同于 700

• line-height 行高

• text-align 对齐

• spacing 间距（字符间、单词间）

• text-indent 首行缩进

• text-decoration 文本装饰（下划线、删除线）

• white-space 空格

  • normal 多个空格只保留一个
  • nowrap 只保留一个，强制不换行
  • pre 保留原始，和源代码一致
  • pre-wrap 自动换行，空格保留
  • pre-line 合并空格，保留换行