走进前端技术栈1 - CSS ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。以下是我根据课程内容整理的笔记。

课堂笔记

课程重点

1. CSS 代码构成
2. CSS 使用方法、
3. 选择器有哪些

笔记内容

什么是CSS

层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，您可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

上面是MDN文档中关于CSS的定义，而在本节课中，我理解到CSS是Cascading Style Sheets三个单词的首字母大写，用来定义页面元素的样式，包括设置字体和颜色，设置位置和大小，添加动画效果等等。

CSS代码构成

CSS是由选择器Selector包裹了一层多种Property:属性值Value

 <style>
        h1 {
            color: white;
            font-size: 14px;
        }
 </style>

CSS使用方法

• 外链

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

• 嵌入

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

• 内联

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

CSS是怎么工作的

首先，浏览器先加载HTML文档，然后浏览器解析HTML文档，根据HTML标签创建DOM树，并同时加载CSS，解析CSS,把解析好的CSS添加样式到DOM节点，最后浏览器渲染出一个页面。

选择器Selector

选择器分为通配选择器，id选择器，类选择器，属性选择器，标签选择器

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素
  • 按照标签名、类名或id
  • 按照属性
  • 按照DOM树中的位置

伪类(pseudo-classes)

• 不基于标签和属性定位元素
• 几种伪类
  • 状态伪类
  • 结构性伪类

结语

通过本次课程的学习，真的收获到了许多，以前对一些比较模糊的知识点也逐渐的清晰了起来。