2022-7-10_CSS学习

样式通常存储在样式表中（先定义样式表），再把样式表添加到html元素中

定义CSS样式的方式：

1. 行内样式（内联样式）

   ---

   

·行内样式仅针对当前标签生效，如果当前的样式不需要复用，可以用行内样式

·优先级高（优先级比内页样式的优先级高，如果同时存在，先显示行内样式）

1. 内页样式（嵌入样式）

·声明一个样式：在head标签中style中声明

给样式起名：

A：标签选择器（根据标签命名）

B：类选择器

---

思考题：标签选择器和类选择器哪个优先级高？

声明样式的时候需要用一个英文的“.”，选择样式通过class属性，class属性里不写“.”

C：id选择器（id：在当前页面的唯一标识，不能重复）

---

声明样式需要一个“#”，对应的元素的id要匹配

1. 外部样式（推荐）

1. CSS选择器

1. 标签选择器
2. 类选择器：一个标签元素是可以选择多个样式，样式名中间用空格隔开
3. Id选择器
4. 选中页面上所有的标签（div,p）

   ---

   

（5）选中div里面的p（无论嵌套多少层，都可以找到）（div p）

（6）选中div里面的直接子标签（div>p）

---

（7）选中紧跟着div的p（div+p）

1. 选中页面上所有带有type属性的标签（[type]）

   ---

   

1. 选中页面上所有带有type=text属性的标签（[type=name]）

   ---

   

1. 选中页面上type属性包含某个单词的所有元素（[type~=t]）

1. 伪类选择器（link，hover，active，visited）

   ---

   

（12）选中第几个对应的元素（nth:child()）

---

（13）选中所有被选中的元素（:checked）

---

CSS层叠样式表

1. 层叠性：如果样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式；如果样式不冲突，就不层叠，直接用

   ---

   

1. 继承性：子标签会继承父标签的某些样式，（文本的颜色、字号、背景颜色等）
2. 权重（优先级）：

优先级：类>标签>id

（1）继承的权重最低

（2）行内样式的权重最高

（3）如果权重相同，就近原则

（4）！Important改变权重（无限大）

CSS常用的单位

1. px 像素（绝对单位）一个像素代表一个点。
2. em （相对单位）会参考它的父级元素，设计字体时用的较多。父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。
3. rem （相对单位）由页面决定。当我们改变了浏览器的字号设置时，页面的字号也会随之发生变化。应用在老人版电子设备。
4. % 百分比（相对单位） 相对于父级元素的比例。