理解CSS ｜ 青训营笔记

Xecho
32 阅读6分钟

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

大家好我是Xecho，这是进入青训营的第二节课，相对于第一节课CSS的内容可以说是非常多，那咱们就好好来消化一下课程知识点。

一、本堂课重点内容：

  • 认识CSS在页面的地位和用途
  • CSS的使用方式
  • 浏览器渲染CSS的过程
  • CSS选择器的类型

二、详细知识点介绍：

CSS是什么

CSS(Cascading Style Sheets)层叠样式表，用来定义页面元素的样式。打个比方HTML是房子的毛坯房，而CSS就是给毛坯房添加各种软装，让页面整体更加美观。

我们CSS的用途：

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

页面中如何使用CSS

选择器Selecor{
    选择器Property:属性值Value
}

.box {
   height: 100px;
 }

主要的使用方式有三种：

外链

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

嵌入

<style> 
body { 
    width: 100px; height: 100px; 
} 
</style>

内联

<p style="margin: 1em 0">This is a example.</p>

CSS工作原理

如图所示，计算机从上至下加载HTML文件并进行解析后产生DOM树，并在解析HTML后加载解析CSS文档，接着将解析后的CSS样式赋给DOM树中的对应元素，最后在浏览器中展示出来。

CSS选择器

/* 通配符选择器：常用'*'号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素 */
*{
margin：0;     
padding：0;
}

/* 标签选择器：指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式 */
p{ 
    font-size: 12px;
}

/* 类选择器：使用'.'(英文点号)进行标识，后面紧跟类名 */
.red{
    color: red;
}
<h2 class="red">二级标题文本</h2>

/* id选择器：使用'#'进行标识，后面紧跟id名 */
#red{
    color: red;
}
<h2 id="red">二级标题文本</h2>

/* 属性选择器：可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性 */
input[type="text"] { 
    width:150px; 
} 
input[type="button"] { 
    width:120px; 
}

/* -------------组合选择器---------------- */

/* 并集选择器：同时匹配多个选择器，取多个选择器的并集 */
p, div, span{
    font-size: 12px;
}

/* 后代选择器：选择特定元素的后代 */
div p { 
    color: red; 
}

/* 子代选择器：使用'>'表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代 */
#box>p{ 
    color: darkorange; 
}

/* 兄弟选择器 */
/* ~ 选择器 ：表示匹配紧跟第一个选择器并匹配第二个选择器的元素。 */
/* ~ 选择器 ：作用是查找某一个指定元素的后面的所有兄弟结点。 */
h1 + p { 
    margin-top:50px;
}

/* -------------伪类选择器---------------- */

a:hover{ 
    color:red; /*当鼠标悬停时链接变成红色*/ 
} 
a:link{ 
    background-color: blue; /*给链接添加蓝色的背景色*/ 
} 
a:focus{ 
    color:yellow; /*当链接获取焦点时变为黄色,失去焦点时恢复黑色*/ 
} 
a:visited{ 
    color:green; /*被访问过后的链接变为绿色*/ 
} 
a:active{ 
    background-color: blue; /*鼠标点击的那一瞬间给链接添加蓝色的背景*/ 
}

CSS颜色

颜色

在CSS中颜色使用三种方式：RGB模型、HSL模型、关键字。

RGB模型：#000000或rgb(0,0,0)

R:red

G:green

B:blue

HSL模型：hsl(200,30%,50%)

Hue:色相，取值为0-360；

Saturation:饱和度，色彩的鲜艳程度，取值范围为0-100%，越高越鲜艳；

Lightness:亮度，颜色的明亮程度，取值为0-100%，越高越亮；

关键字：red skyblue···

透明度alpha：取值为0-1，1表示不透明。

使用方式：#ff006e、rgba(255,0,0,0.43)、hsla(0,100%,50%,0.43)

选择器优先级

当我们在一个节点上用了多个选择器怎样去判断他的样式取决去哪里呢，那我们就要考虑选择器权重的问题。

  1. CSS选择器都有权重值，权重值越大优先级越高。
  • 内联样式表的权重值最高，值为1000。
  • id选择器的权重值为100。
  • class选择器的权值为10。
  • 类型（元素）选择器的优先级为1。
  • 通配符选择器的优先级为0。

  1. 当权值相等时，后定义的要优于先定义的样式表。

  2. 在同一组属性设置中表有 !important 规则的优先级最大。

CSS求值过程

371e42dd580b7eec960a476bfe50dfe.jpg 如上图所示，是CSS求值的过程：

  • HTML解析成DOM树，解析过程中将从CSS中搜集的样式放在一起组成样式规范；

  • 对样式规范进行筛选，获得符合规则的一组声明值；

  • 按照优先级顺序选出优先值最高的属性值即层叠值；

  • 若层叠值为空，此时采用继承或使用初始值的方法得到指定值（指定值一定不为空）；

  • 将一些相对值转换为绝对值，从而获得计算值（此时，属性值之中的关键字、百分比等还没有转换）；

  • 进一步将计算值转换从而获得使用值（此时的使用值中存在小数）；

  • 将小数转换为整数，从而得到实际值。

页面布局

盒子布局

最基本的布局就是盒子模型布局，width``height``padding``border``margin使用这些最基本的样式布局。

弹性布局

弹性布局就是使用弹性盒模型进行布局，弹性盒模型也是目前主流的布局方式。

父盒子 flex-direction``justify-content``align-item``align-self``order

子盒子 flex-grow``flex-shrink

最好还是看文档了菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

定位布局

定位布局就是采用positon布局，这里我们最主要的知识点就是子绝父相

栅格布局

三、课后个人总结：

我认为CSS的知识是非常的庞大的，也是非常难成体系的，好多属性你不用就很容易忘记。也正如老师所说要时刻保持好奇心，就像我刚入行前端也是看着大神几行CSS代码就可以实现非常精致的效果，确实非常的吸引人，希望我可以一直保持这份初心，对于CSS的学习不要停止，虽然老师花了这么时间来讲CSS但是我知道这也只是其中很少的一部分，依然要靠自己努力学下去！

四、引用参考：

菜鸟教程：菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

Victor252：CSS全攻略|青训营笔记 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝