文件名称：css笔记课程笔记2019，5，22
文件大小：5KB
文件格式：TXT
更新时间：2022-06-11 11:32:25
CSS
day02
昨天内容回顾
1、html的操作思想
** 使用标签把要操作的数据包起来，通过修改标签的属性值来实现标签内数据样式的变化
***
2、图像标签
** 通过html访问本地图片，使用绝对路径，目前有问题
3、超链接标签
4、表格标签
** 技巧：数里面有多少行，每行里面有多少个单元格
**
aaaaaaa
- .haha {
background-color: orange;
}
（3）id选择器
* 每个html标签上面有一个属性 id
- bbbbb
- #hehe {
background-color: #333300;
}
*** 优先级
style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
（1）关联选择器
* wwwwwwww
1111
22222
* 把div和p标签设置成相同的样式，把不同的标签设置成相同的样式 * div,p { background-color: orange; } （3）伪元素选择器(了解，浏览器的兼容性比较差) * css里面提供了一些定义好的样式，可以拿过来使用 * 比如超链接 ** 超链接的状态 原始状态 鼠标放上去状态 点击 点击之后 :link :hover :active :visited ** 记忆的方法 lv ha 5、css的盒子模型 ** 在进行布局前需要把数据封装到一块一块的区域内（div） （1）边框 border: 2px solid blue; border：统一设置 上 border-top 下 border-bottom 左 border-left 右 border-right （2）内边距 padding:20px; 使用padding统一设置 也可以分别设置 上下左右四个内边距 （3）外边距 margin: 20px; 可以使用margin统一设置 也可以分别设置 上下左右四个外边距 6、css的布局的漂浮(了解) float： ** 属性值 left : 文本流向对象的右边 right : 文本流向对象的左边 7、css的布局的定位（了解） position： ** 属性值 - absolute ： *** 将对象从文档流中拖出 *** 可以是top、bottom等属性进行定位 - relative ： *** 不会把对象从文档流中拖出 *** 可以使用top、bottom等属性进行定位 8、案例 图文混排案例 ** 图片和文字在一起显示 9、案例 图像签名 ** 在图片上面显示文字 10、上午内容总结 1、css和html的四种结合方式（****） 2、css的基本选择器（****） * 标签选择器 使用标签名 * class选择器 .名称 * id选择器 #名称 ** 优先级 style > id > class > 标签 3、css的扩展选择器(了解) * 关联选择器 - 设置嵌套标签的样式 div p {} * 组合选择器 - 不同的标签具有相同的样式 div,p{} * 伪元素选择器 * 超链接的状态 - 原始 :link - 悬停 :hover - 点击 :active - 点击之后 :visited 4、盒子模型(了解) * 边框 border:2px solid red; 上下左右 border-top border-bottom border-left border-right * 内边距 padding:20px 上下左右 * 外边距 margin:20px 上下左右 * 对数据进行操作，需要把数据放到一个区域里面（div） 5、布局的漂浮(了解) float - left: 后面的div到右边 - right：后面的div到左边 6、布局的定位(了解) position - absolute ** 从文档流中拖出 - relative ** 不会从文档流中拖出 一般在目录里面，标出符号 （********）：重点，代码看懂，代码会写，代码理解 - （****重点中的重点***） （了解）：代码看懂 （理解）：能够把原理讲清楚