理解 CSS | 青训营笔记

60 阅读2分钟

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

一、什么是CSS

 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
总之,可以归纳概括为以下几点:
  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

二、CSS的引入方式

内嵌式:CSS写在style标签中 提示:style标签虽然可以写在页面任意位置,但是通常约定写在head标签中 作用:当前页面 外联式:CSS写在一个单独的.css文件中 作用:多个页面 提示:需要通过link标签在网页中引入 行内式:CSS写在标签的style属性中 写法:style="属性:属性值" ​ 作用:当前标签 ​ 提示:基础不推荐使用,之后会配合js使用。

三、基础选择器

  1. 标签选择器
  2. 类选择器
  3. id选择器

四、字体和文本样式

五、选择器的进阶

复合选择器

背景相关属性

元素显示模式

CSS特性

  • 继承性
  • 层叠性
  • 优先级
  • 优先级——权重叠加计算

六、盒子模型

七、CSS浮动

  1. 结构伪类选择器基本用法
  2. 选择器:
  3. 结构伪类公式
  4. 伪元素
  5. 标准流
  6. 浮动

八、定位

  1. 网页常见布局方式
  2. 使用定位的步骤
  3. 相对定位
  4. 绝对定位
  5. 固定定位
  6. 边框圆角