[ 走进前端技术栈-CSS | 青训营笔记]

76 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天,这节课主要讲解CSS的一些基础知识。

一.CSS是什么?

(1)CSS全称Cascading Style Sheets,译为层叠样式表。是用来定义页面元素的样式的计算机语言。具体体现在可以设置字体和颜色,设置位置和大小,添加动画效果等方面。

(2)CSS的使用方法,我们一般在页面中使用CSS采用三种方法

1.外链式,先将CSS样式定义在后缀为.css的文件中,再使用link标签将CSS文件链接到HTML文档中。具体操作如下:link rel="stylesheet" href="/assets/style.css">

2.嵌入式,就是把样式写在<style></style>之间,在它们之间定义某个标签所使用的样式。

3.内联式,在标签中设置style定义该标签使用的样式。例如<p style="margin:lem 0">Example Content</p>

(3)CSS是如何工作的

graph TD
加载HTML --> 解析HTML --> 加载CSS-解析CSS-添加样式到DOM节点 & 创建DOM树 -->展示页面

二.选择器Selector

(1)找出页面中的元素,以便给他们设置样式。

(2)使用多种方式选择元素

  • 按照标签名,类名或id
  • 按照属性
  • 按照DOM树中的位置

通配选择器

是让所有标签使用该样式的选择器

image.png

标签选择器

单独设置在某一标签的样式的选择器

image.png

id选择器

设置某一logo的样式,使用该logo的内容会采用该样式

image.png

还有类选择器,属性选择器等,就是设置某一类或属性的样式然后使用类或属性内容则可以采用该样式。

伪类

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

组合

image.png