css3 学习笔记
css3 学习笔记
- CSS简介
- css编写位置分类
- 字体
- css 继承性
- 表单伪类选择器
- 伪元素选择器
- 属性选择器
- CSS优先级
- 盒子模型
CSS简介
- CSS（Cascading Style Sheets，层叠样式表）。是用来控制网页在浏览器中的显示外观的语言。CSS3 现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。
css编写位置分类
-
内联样式表（行内样式表）：样式写到标签内部，可以控制当前标签的样式，特殊情况使用。
-
内部样式表：写到
<head>标签中，脱离结构，可以控制当前页面的所有标签，较为常用。
-
外部样式表：单独新建一个CSS文件，完全脱离结构，可以控制整个网站的所有标签，最常用。
字体
- font-family
- font 简写属性在一个声明中设置多个字体属性
- 语法：
font:font-style font-weight font-size/line-height font-family;// 例子：
font: italic 500 100px/100px 'Microsoft YaHei', Helvetica, Areal;
css 继承性
- 子元素自动继承父元素的某些css样式属性。
- 主要继承跟文字相关的样式属性，比如字体、颜色、文本对齐等。
- 但是子元素定义自己样式，会优先自己样式。
Chrome 浏览器查看继承样式方法
表单伪类选择器
:disabled：表单禁用
button:disabled {background: rgba(0, 0, 0, 0.5);
}
:checked：选中状态，单选复选按钮
input:checked+label {color: red;
}// html
<input type="checkbox" id="agree">
<label for="agree">同意注册协议</label>
伪元素选择器
- 选择元素的特定部分（使用双冒号 ::）
::before：元素内插入伪元素，作为第一个元素
div::before {content:"开始";color:red;
}
::after：元素内插入伪元素，作为最后一个元素
div::after{content:"结束";color:red;
}
属性选择器
-
根据元素的属性特征来精准定位元素，从而实现更灵活的样式控制。
-
使用场景
- 表单样式控制
- 图标字体控制
- 国际化语言适配等等
| 属性选择器 |作用 |
|–|–|
| [属性] | 匹配包含指定属性的元素 |
| [属性=值] | 匹配属性值等于指定值的元素 |
| [属性^=值] | 匹配属性值以指定字符串开头的元素 |
| [属性&=值] | 匹配属性值为指定字符串结尾的元素 |
| [属性*=值] | 匹配属性值任意位置包含指定字符串的元素 |
-
例子
[type=checkbox],[type=radio] {box-sizing:border-box;padding:0;
}[class*=iconfont]{
font-family:iconfont !important;
}// 英文
[lang="en"] {font-family:"Times New Roman";
}
// 中文
[lang="zh-CN"] {font-family:"微软雅黑";
}// 只选择有class属性的a标签
a[class]{color:red;
}a[class]{color:red;
}
CSS优先级
- 浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。
- 原则：
- 优先级相等的时候，CSS中最后的那个声明的样式将会被应用到元素上。（层叠遵循就近原则）
- 其余判断那个选择器权重高，优先执行那个样式。
- 权重是 4 位一组，是分开的层级，不能进位。
| 选择器类型 | 示例 | 权重值 | 优先级说明 |
|---|---|---|---|
| !important | color:Red !important; | 无限大 | 强制覆盖所有规则（慎用） |
| 内联样式 | <div style="color:red">前端小菜鸟</div> | (1,0,0,0) | 行内样式权重最高（1,0,0,0） |
| ID选择器 | #myid | (0,1,0,0) | 每个ID增加 0,1,0,0 |
| 类/属性/伪类 | .class，[type=“text”] | (0,0,1,0) | 每个类/属性/伪类增加 0,0,1,0 |
| 类型（标签）/伪元素 | div,::after | (0,0,0,1) | 每个标签/伪元素增减 0,0,0,1 |
| 通配符/继承 | *，继承的样式 | （0,0,0,0） | 通配符和继承权重最低 |
- 权重叠加
- 权重是累加的，每个选择器的层级权重相加。
- 例子：
#nav .item a 的权重为？
// id 0,1,0,0
// 类 0,0,1,0
// 类型（元素） 0,0,0,1
// 累加后 ： 0,1,1,1
盒子模型
- 所有的元素都被一个个的“盒子”包围的，学会盒子模型可以实现准确布局、处理元素排列的关键。
- 在CSS中，我们有几种类型的盒子，一般分为区块盒子和行内盒子。
区块盒子（block）
- 盒子会产生换行
- width 和 height 属性可以发挥作用
- 不设置宽度则默认和是父元素空间的100%
- 内边距、外边距和边框会撑大元素
- 常见的比如：div、p、h、ul、table等
区块盒子（block）
- 盒子不会产生换行
- width 和 height 属性将不起作用
- 垂直方向的内边距、外边距不起效果
- 水平方向的内边距、外边距会有效果
- 常见的比如：span、em、a、strong等
盒子背景
- background：用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等。
| 属性 | 作用 | 常用值 | 示例代码 |
|---|---|---|---|
| background-color | 设置元素背景颜色 | 颜色名称、十六进制、RGB、透明度 | background-color |
| background-image | 设置背景图片 | url(image.jpg) | background-image:url(bg.jpg) |
| background-repeat | 控制背景图片是否重复 | repeat(默认)、no-repeat、repeat-x、repeat-y | background-repeat:no-repeat; |
| background-position | 定位背景图片位置 | x y（如center top，或者 px、%单位） | background-position:center |
| background-size | 调整背景图片尺寸 | 默认 auto、cover(覆盖)、contian(包含)或者跟px 、% | background-size:cover; |
| background-attachment | 背景是否随页面滚动 | scroll(默认)、fixed（不会滚动） | background-attachment:fixed |
- 背景复合写法
background:颜色 图片 重复 固定 位置/尺寸；
- 视差效果例子
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学习 css 笔记</title><link rel="stylesheet" href="css/index.css"><style>* {padding: 0;margin: 0;overflow-x: hidden;box-sizing: border-box;}.box {width: 1920px;height: 1080px;margin: 0 auto;padding: 0;}.box1 {background: url(./images/banner01.png) no-repeat fixed center center;background-size: cover;}.box2 {background: url(./images/banner02.png) no-repeat fixed center center;background-size: cover;}.box3 {background: url(./images/banner03.png) no-repeat fixed center center;background-size: cover;}.box4 {background: url(./images/banner04.png) no-repeat fixed center center;background-size: cover;}.content {background: rgba(0, 0, 0, 0.7);color: #fff;padding: 20px;}</style>
</head><body><div class="box box1"><div class="content">近年来，岚皋县立足县域实际，抓住“村BA”赛事，以低成本、高情感的群众性活动为切入点，深度融合“农文旅体商”，全面激发消费活力。通过小城办大赛，优化资源配置，增强乡村振兴动力，实现了现象级传播“流量”与经济效益“增量”的双赢，探索出一条“赛事搭台、经济唱戏、群众受益”的特色县域经济发展之路。近年来，岚皋县立足县域实际，抓住“村BA”赛事，以低成本、高情感的群众性活动为切入点，深度融合“农文旅体商”，全面激发消费活力。通过小城办大赛，优化资源配置，增强乡村振兴动力，实现了现象级传播“流量”与经济效益“增量”的双赢，探索出一条“赛事搭台、经济唱戏、群众受益”的特色县域经济发展之路。</div></div><div class="box box2"><div class="content">近年来，岚皋县立足县域实际，抓住“村BA”赛事，以低成本、高情感的群众性活动为切入点，深度融合“农文旅体商”，全面激发消费活力。通过小城办大赛，优化资源配置，增强乡村振兴动力，实现了现象级传播“流量”与经济效益“增量”的双赢，探索出一条“赛事搭台、经济唱戏、群众受益”的特色县域经济发展之路。近年来，岚皋县立足县域实际，抓住“村BA”赛事，以低成本、高情感的群众性活动为切入点，深度融合“农文旅体商”，全面激发消费活力。通过小城办大赛，优化资源配置，增强乡村振兴动力，实现了现象级传播“流量”与经济效益“增量”的双赢，探索出一条“赛事搭台、经济唱戏、群众受益”的特色县域经济发展之路。</div></div><div class="box box3"><div class="content">近年来，岚皋县立足县域实际，抓住“村BA”赛事，以低成本、高情感的群众性活动为切入点，深度融合“农文旅体商”，全面激发消费活力。通过小城办大赛，优化资源配置，增强乡村振兴动力，实现了现象级传播“流量”与经济效益“增量”的双赢，探索出一条“赛事搭台、经济唱戏、群众受益”的特色县域经济发展之路。近年来，岚皋县立足县域实际，抓住“村BA”赛事，以低成本、高情感的群众性活动为切入点，深度融合“农文旅体商”，全面激发消费活力。通过小城办大赛，优化资源配置，增强乡村振兴动力，实现了现象级传播“流量”与经济效益“增量”的双赢，探索出一条“赛事搭台、经济唱戏、群众受益”的特色县域经济发展之路。</div></div><div class="box box4"><div class="content">近年来，岚皋县立足县域实际，抓住“村BA”赛事，以低成本、高情感的群众性活动为切入点，深度融合“农文旅体商”，全面激发消费活力。通过小城办大赛，优化资源配置，增强乡村振兴动力，实现了现象级传播“流量”与经济效益“增量”的双赢，探索出一条“赛事搭台、经济唱戏、群众受益”的特色县域经济发展之路。近年来，岚皋县立足县域实际，抓住“村BA”赛事，以低成本、高情感的群众性活动为切入点，深度融合“农文旅体商”，全面激发消费活力。通过小城办大赛，优化资源配置，增强乡村振兴动力，实现了现象级传播“流量”与经济效益“增量”的双赢，探索出一条“赛事搭台、经济唱戏、群众受益”的特色县域经济发展之路。</div></div>
</body></html>