2022-07-10 第四小组 孙翰章 CSS学习笔记

CSS

CSS---层叠样式表，相当于整个网页的美化

---

1.如何嵌入？（样式如何显示html元素）

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

---

2.定义CSS样式的方式：

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

• 行内样式仅针对当前标签生效，如果当前的样式不需要复用，可以用行内样式
• 优先级高（优先级比内页样式的优先级高，如果同时存在，先显示行内样式）

（2）内页样式（嵌入样式）

• 声明一个样式：在head标签中style中声明
• 给样式起名：

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

                B：类选择器

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

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

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

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

（3）外部样式（推荐）

---

3.CSS选择器

（1）标签选择器

（2）类选择器

         一个标签元素是可以选择多个样式，样式名中间用空格隔开

（3）Id选择器

（4）选中页面上所有的标签（div,p）

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

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

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

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

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

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

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

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

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

---

4.CSS层叠样式表

层叠性	如果样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式；如果样式不冲突，就不层叠，直接用
继承性	子标签会继承父标签的某些样式，（文本的颜色、字号、背景颜色等）
权重（优先级）	优先级：类>标签>id             （1）继承的权重最低             （2）行内样式的权重最高             （3）如果权重相同，就近原则             （4）！Important改变权重（无限大）

---

5.CSS常用的单位

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

---

所学内容大部分可以理解，存在知识点掌握不全面的情况

坚持晨跑，心情良好