理解CSS（一）｜ 青训营笔记

给我一杯泰绿魔法药水
125 阅读8分钟

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

css是什么（What）

Cascading Style Sheets- 用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画过渡效果

css组成

h1 选择器 (selector) 选中页面中元素，给予样式

h1{

color:white; // 属性 选择器（property） : 属性值(value) 《-一个声明

font-size:14px

}

页面中使用css的方法

  1. 外链-推荐

    将外部样式表使用link标签链接到页面：外部样式表是指将 CSS 编写在扩展名为.css 的单独文件中，并从 HTML<link> 元素引用它的情况：

    <link rel="stylesheet" href="styles.css">

    元素的href 属性需要引用你的文件系统中的一个文件。

    在上面的例子中，CSS 文件和 HTML 文档在同一个文件夹中，但是你可以把 CSS 文件放在其他地方，并调整指定的路径以匹配，例如：

    <!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css">
​
<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css">
​
<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css">

  2. 嵌入

    嵌入样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件head标签里的style标签之中。

      <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
  </style>

  3. 内联

内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素

<p style="color:red;">This is my first CSS example</p>

因为不易于维护，所以尽量不要这么写

css是如何工作的

  1. 浏览器载入 HTML 文件（比如从网络上获取）。
  2. 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。
  3. 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。
  4. 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
  6. 网页展示在屏幕上（这一步被称为着色）。

选择器

  • 找出页面中元素，设置样式

  • 使用多种方式选择元素

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

统配选择器

* { color: red; font-size: 20px; }

标签选择器

span/p等等标签

id选择器

#id选中该元素，一般情况下该id元素是唯一的

类选择器(class)

同一类型的标签设置样式的时候使用标签选择器class

CSS中类选择器用点号表示。实际项目中一个div元素为了能被多个样式表匹配到（样式复用），通常div的class中由好几段组成，如

avatar
文章
阅读
粉丝