2022.07.10 第九小组 高小涵 学习笔记

 

定义css样式的方式

1.插入样式表的方法有三种:

外部样式表（推荐）：link引入外部样式

内部样式表： <style> 标签在文档头部定义内部样式表

内页样式（嵌入样式）

（1）标签选择器

（2）类选择器：声明样式的时候需要用一个英文的.，选择样式通过class属 性，不需要写.

（3）id选择器：声明样式需要用一个#号，对应的元素的id要匹配

 

css选择器:
style
*1.标签选择器 行内 内页 （在head中）
*2. 类选择器 内页 class（.）一个标签元素是可以选中多个样式 样式名中间用空格隔开
3. id选择器（# 用得少）
引入外部样式：link
4.div,p 并列选择器 选择所有的div和p
*5. div p 嵌套选择器 选中里面的P,无论多少层，都可以找到（常用）
*6.div>p :选中div里面的直接字标签p（常用）
7. div+P :选中紧跟着div的P
8.[type]:选中页面所有带有type属性的标签
9.[type=text]:选中页面上所有带有type=text的标签
10[type~=t]选中页面上type属性包含单词的所有元素
11.伪类选择器：link，hover（悬停）,active,visited
*12.nth-child():选中第几个对应的元素
13.checked：选中所有被选中的元素

css层叠样式表
层叠性： 1.如果样式冲突，遵循就是就近原则（哪个样式离结构近，就执行哪个样式）
 2.如果样式不冲突，直接用
继承性：子标签会继承父标签的某些样式。文本颜色，字号，背景颜色...
优先性： 类 > 标签 > id
权重：1.继承的样式权重为0
2.行内样式权重最高
3.如果权重相同，又是就近原则
4.!important无限大

###盒子模型：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

 

 

 

（######）定位：

absolute：绝对定位

                当前的文档流可以理解为上天了,

                参照物是已经定位的父级元素

relative：相对定位

               参照物是已经定位的父级元素

               占有原有位置，不会上天

               父相子绝 (定义一个father）

               static：文档流（默认）

               fixed：浮动

 

css常用的单位：
1、px像素：绝对单位，一个像素代表一个点。如100px*100px的正方形，宽度100个点，高度100个点。
2、em是相对单位。它会参考它的父级元素。字体，父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。
3、rem相对单位。由页面决定。当我们改变了浏览器的字号设置，页面的字号也会随之发生变化。应用在老人版。
4、百分比：相对于父级元素的比例。

font-size字体大小
font-family字体样式
line-height行高
font-weight：bold 粗细
text-decoration:underline 字体下划线 line-through 删除