这是我参与「第四届青训营」笔记创作活动的的第2天
学习状态：🤔😕😁
D1总结：HTML 用于定义内容的结构和语义。

CSS是什么

Cascading Style Sheets（层叠样式表）
• 用来定义页面元素的样式，设计风格和布局
▫ 设置字体和颜色
▫ 设置位置和大小
▫ 添加动画效果

基础代码

层叠样式表（CSS）是你用来为你的网站设置样式的代码。

屏幕截图 2022-07-25 224832.png 整个结构称为 规则集（通常简称“规则”）

• 选择器 Selector：HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素h1（图中）。要给不同元素添加样式只需更改选择器。

• 属性 Properties：改变 HTML 元素样式的途径。color（图中）为<h1>元素的属性。CSS 中，由编写人员决定修改哪个属性以改变规则。

• 属性值 Property value：在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值。

• 声明 Declaration：（属性-属性值）一个单独的规则，如图中的color:white；用来指定添加样式元素的属性。

在页面中使用CSS

• 外链：在<head>中加入，将 CSS 的所有内容都写入以 CSS 为后缀的文件，可适用多个页面来共享此 CSS。

• 嵌入：在<head>中加入<style>。这种做法表示此页面中所有对应元素都是采用其指定的样式，适合于样式的复用，有效减小页面体积。

• 内联：元素的内联是直接在属性中写入元素的 style 属性，适用于样式没有其他可复用性的场合。

CSS是如何工作的

选择器 Selector

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

屏幕截图 2022-07-25 225716.png

通配选择器

匹配所有
*{}

标签选择器

一个 HTML 页面是通过很多标签组成的，CSS 标签选择器就是用来声明这些标签的。
每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。
a[title] { }

id选择器

id的值应该是唯一的。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 #来定义。
#unique { }

类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 . 号显示。
.box { }

属性选择器

具有特定属性的HTML元素样式。
把包含标题（title）的所有元素变为蓝色：
[title] { color:blue; }

伪类 pseudo-classes

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

状态伪类

状态伪类主要针对表单进行设计的，表单是UI设计的灵魂。
UI是User Interface（用户界面）的缩写，UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。

结构性伪类

结构伪类选择器可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

组合 Combinators

屏幕截图 2022-07-25 223010.png

如有错误，欢迎指正🥰

D2.理解CSS（1） ｜ 青训营笔记