来自2022.7.13
- 一、EMMET语法
- 1.emmet语法快速生成HTML
- 2.emmet语法快速生成CSS样式
- 3.快速格式化代码
- 二、复合选择器
- 1.什么是复合选择器
- 2.后代选择器
- 3.子选择器
- 4.并集选择器
- 5.伪类选择器
- 5.1链接伪类选择器
- 5.2focus伪类选择器
- 三、元素显示模式
- 1.什么是元素显示模式
- 2.块元素
- 3.行内元素
- 4.行内块元素
- 5.元素显示模式转换
- 6. 小技巧——文字垂直居中
- 四、CSS的背景
- 1.背景颜色
- 2.背景图片
- 3.背景平铺
- 4.背景图片位置
- 参数是方位名词
- 5.背景固定
- 6.背景复合写法
- 7.背景半透明
- 五、CSS的特性
- 1.层叠性
- 2.继承性
- 3.优先级
- 3.1选择器权重
- 3.2继承的权重为0
- 3.3权重叠加
- 六、盒子模型
- 1. 网页布局的本质
- 2. 盒子模型的组成
- 3. 边框（border）
- 3.1 复合属性
- 3.2 边框分开写法
- 4. 表格的细线边框
- 5. 边框会影响盒子的实际大小
- 6. 内边距
- 6.1 复合属性
- 6.2 padding不影响盒子大小的情况
- 七、课堂练习or案例
- 1. 将下面的链接文字修改为红色
- 2.请见下面的大肘子文字修改为红色
- 3.简易小米侧边栏
- 4.成长守护平台小图标案例
- 5.王者荣耀背景大图
- 6.精确方位
- 7.五彩导航
- 8. padding应用-新浪导航
- 八、写在最后
- 快速生成标签——tab
- 快速生成多个div
div*10
- 父子关系 >
- 兄弟关系 +
div+p
- 快速生成clss
p.class(clss名)+tab键
- 快速生成demo
.demo$*5+tab键
- 想生成的标签里面默认显示几个文字
div{一句话}*5
2.emmet语法快速生成CSS样式
3.快速格式化代码总结：万物皆可tab键
二、复合选择器 1.什么是复合选择器vscode右键选择格式化
- 更高效的选择目标元素
- 由两个或多个基础选择器通过不同方式组合而成
- 包括：后代选择器、子选择器、并集选择器、伪类选择器
- 可以选择父元素里面的子元素
语法：
元素1 元素2 {样式}
ps：元素间需要空格
元素1为父亲 元素2为后代 最终选择的是元素2
复杂版：
3.子选择器
- 只能选择作为某元素的最近一级子元素
- 简单理解就是选亲儿子元素
元素1>元素2
4.并集选择器
- 可以选择多组标签，同时为它们定义相同的样式
元素1，元素2，元素N {样式}
熊大
熊二
光头强
- 小猪佩奇
- 猪爸爸
- 猪妈妈
- 给链接添加特殊的效果
- 例：将光标放到链接上时变色
- 最大特点：冒号
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针为其上的链接
a:active 选择活动链接（鼠标未按下）
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: orange;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
5.2focus伪类选择器一定要按顺序写！
a:lik/a:visited/a:ohver/a:acitive
- 用于选取获得焦点的表单元素
三、元素显示模式 1.什么是元素显示模式
- 元素标签以什么方式进行显示
- 比如
- html元素一般分为块元素和行内元素
- h1-h6
- p
- div 最典型的块元素
- ul
- ol
- li
特点
- 独占一行
- 高度宽度外边距可以控制
- 宽度默认是容器的100%
- 是一个容器盒子，里面可以放块元素或行内元素
ps: 特点 ps:链接里面不能放链接，a里面可以放块级元素 特点 一个模式的元素需要另外一种模式的特性 转换为块元素：display:block 解决方案：让文字的行高等于盒子的高度 行高<盒子高度：文字偏上 bcakground-color:颜色值 方便控制位置（精灵图） background-image：none | url（） bcakground-repeat:repeat | no-repeat | repeat-X | repeat-Y 利用Background-position属性可以改变图片在背景中的位置 background-position: x y; background-attachment属性设置背景图是否固定或者随页面其余部分滚动 background-attachment:scroll | fixed 习惯性约定顺序： background：rgba(0,0,0,0.3) 相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式 层叠性原则： 结果为粉红色 今天是七月十三日 结果为橘色 但同一个元素指定多个选择器，就会有优先级的产生 你笑起来真好看 继承的权重为0 复合选择器会有权重叠加问题**（永远不会有进位）** 网页布局过程： 核心：利用CSS摆盒子 CSS盒子模型本质是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距和实际内容 border可以设置元素的边框，边框由三部分组成： 没有顺序 border-collapse 属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框 border-collapse合并相邻边框 边框会额外增加盒子的实际大小，两种解决方案： 复合属性： padding会影响盒子的大小 结果： 结果： 效果如下： 结果如下： 效果如下： 效果如下： 累 明天见朋友们~
5.元素显示模式转换
转换为行内元素：display:inline
转换为行内块元素：display:inline-block在这里插入代码片` `
6. 小技巧——文字垂直居中
四、CSS的背景
1.背景颜色
行高>盒子高度：文字偏下
2.背景图片
一般情况下元素背景默认为transparent（透明）
div {
width: 120px;
height: 120px;
background-image: url(cat.jpg);
}
3.背景平铺
4.背景图片位置
平铺 | 不平铺 | 横向上平铺 | 纵向平铺
参数是方位名词
xy为坐标background-position:right center;
5.背景固定
6.背景复合写法
背景颜色 背景图片地址 背景平铺 滚动 图片位置
7.背景半透明
五、CSS的特性
最后一个范围在0-1
1.层叠性
body{
font:12px/1.5 Microsoft YaHei;
}
3.优先级
3.1选择器权重
3.2继承的权重为0
选择器 权重 继承或者* 0,0,0,0 元素选择器 0,0,0,1 类选择器，伪选择器 0,0,1,0 id选择器 0,1,0,0 行内选择器style 1,0,0,0 !important 无穷大
3.3权重叠加
标签到底执行哪个样式看这个标签有没有直接选中的元素
六、盒子模型
1. 网页布局的本质
加就完事了
3. 边框（border）
属性 作用 border-width 定义边框粗细，单位px border-style 边框样式 border-color 边框颜色
3.1 复合属性
3.2 边框分开写法
4. 表格的细线边框
5. 边框会影响盒子的实际大小
6. 内边距
6.1 复合属性
属性 作用 padding-left 左 padding-right 右 padding-top 上 padding-bottom 下
padding：
一个值为上下左右均为（正方形）
两个值代表上下x，左右y
三个值代表上左下
四个值代表上右下左（顺时针）
解决方案
6.2 padding不影响盒子大小的情况
七、课堂练习or案例
1. 将下面的链接文字修改为红色
2.请见下面的大肘子文字修改为红色
3.简易小米侧边栏
