技术栈-CSS | 青训营笔记

73 阅读1分钟

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

一、CSS-入门

CSS 作为前端技术栈中关键一环,对页面元素及样式呈现起到了直接作用。本节课对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读,帮助前端新手建立对 CSS 的全面而深刻的认知。

  1. CSS 代码构成
  2. CSS 使用方法
  3. CSS 流程之选择器组、文本渲染
  4. 调试 CSS
h1{
    color:white;
    font-size:14px;
}
1、在页面中使用CSS

外链

<link rel="stylesheet"href="/assets/style.css">

嵌入

<style>
    li{margin:0;list-style:none;}
    p{margin:lem 0;}
</style>

内联

<p style="margin:lem 0">Example Content</p>

举例 image.png

CSS工作

image.png

2、选择器Selector

通配选择器 image.png 标签选择器 image.png id选择器 image.png 类选择器 image.png 属性选择器 image.png image.png image.png

3、伪类(pseudo-classes)
  • 状态伪类
  • 结构性伪类

状态伪类: image.png 触发橙色边框 image.png 结构伪类: image.png image.png

image.png

4、字体 font-family

image.png image.png image.png image.png image.png image.png

5、white-space

image.png

CSS-进阶

  1. CSS 选择器的特异度
  2. CSS 继承
  3. CSS 求值过程解析
  4. CSS 布局方式及相关技术
1、复用/继承

image.png image.png

image.png image.png

2、布局Layout

image.png image.png image.png image.png image.png image.png image.png image.png image.png 举例 image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png Grid布局 image.png 划分网格 image.png grid line image.png image.png image.png image.png grid area image.png

float浮动-文字环绕

image.png

绝对定位

image.png image.png position:fixed;固定在当前视野里 image.png