理解CSS｜ 青训营笔记Day 2

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

本节课的知识要点：

1. CSS 是什么以及其代码构成
2. CSS 使用方法
3. CSS 流程之选择器组、文本渲染
4. 调试 CSS
5. CSS布局

本节课的详细知识点：

•  CSS是用来定义页面元素的样式

        如：设置字体、颜色、位置、大小，添加动画效果等

• CSS基础代码如下：（3个要素：对象、属性、属性值）

  h1 { color: pink; font-size: 12px; }

• CSS的使用方法：

       1、外链：将元素放在一个新建文件里，用<link>标签把元素引进页面     

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

       2、嵌入：将代码嵌入里面

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

       3、内联：直接写进标签里面

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

• 选择器 Selector：

       通配选择器、标签选择器、id选择器、类选择器、属性选择器、伪类选择器

• 伪类：不基于标签和属性定位元素。如状态伪类、结构性伪类

          举例：链接<a>，属于状态伪类

                 <a:link> ：链接颜色
<a:visited> ：已访问链接
<a:hover> ：变换图像链接
<a:active> ：活动链接

a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

• 文本渲染：颜色、透明度、字体、通用字体族等
• 如何调试CSS？

1. 鼠标右键点击页面，选择【检查】
2. 使用快捷键：Ctrl+Shift+I（Windows）、Cmd+Opt+I（Mac）

• CSS布局：是确定内容大小和位置的算法，是依据元素、容器、兄弟节点和内容等信息来计算的。
• 盒子结构：4个组成部分

       content（内容）、padding（内边距或填充）

       margin（外边距）、border（边框）

       盒子的总宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

       盒子的总高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

通过今天这几节课对CSS的理解比之前在学校里会更深入一些。期待下一节课程。