关于 HTML5 和 CSS3 这些知识点你都知道多少–静态篇
前言： 当我学过了前端的很多框架之后，发现自己的基础的css3有点弱，这些H5和C3的新特性用特不是很熟练，因此现在回过头来再学习一遍这些新的特性，当学过一些前端框架过后你会发现CSS3真的很重要！
1. HTML5 新增标签
- header头部标签
- footer 底部标签
- section 块 区域标签 可以理解为较大的div
- article 文章内容标签
- nav 导航标签
- aside侧边栏
- audio 音频
- video 视频
input中新增的值
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为Email类型 |
| type=“url” | 限制用户输入必须为URL类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type="number’ | 限制用户输入必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/ on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete ="off"需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
2. css3 选择器
2.1 css3 属性选择器
例如我们有两个input 但是只对一个有value属性的input设置样式，这样我们就可以使用属性选择器
<style>
input[value] {
color: pink;
}
</style>
<body>
<input type="text" value="12123321">
<input type="text">
</body>
但是它不仅仅如此还可以根据属性的值进行判断,如下
<style>
input[type=text] {
color: pink;
}
</style>
<body>
<input type="text" value="123">
<input type="password" value="123">
</body>
| 选择符 | Value |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=“value”] | 选择具有att属性且属性值等于value的E元素 |
| E[att^=“value”] | 选择以value开头的元素 |
| E[att$=“value”] | 选择以value结尾的元素 |
| E[att*=“value”] | 选择包含value的元素 |
2.2 结构伪类选择器
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第-一个 |
| E:last-of-type | 指定类型E的最后-个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
类似这种情况就会很方便
ul li:first-child {
color: pink;
}
ul li:last-child {
color: pink;
}
ul li:nth-child(3) {
color: pink;
}
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
</ul>
小知识：这个 ul>li{我是第$个孩子}*5 可以快捷生成上面的标签哦~！
通过nth-child()我们还可以隔行变色，通过选中所有的基数或则偶数行设置样式 ，如下：
/* 基数行 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 偶数行 */
ul li:nth-child(even) {
background-color: #ccc;
}
如果nth-child(n)在这个括号里面写n的话 则表示选中所有的子元素
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15… |
| n+5 | 从第5个开始(包含第五个)到最后 |
| -n+5 | 前5个(包含第5个) … |
2n 因为n是从0开始的 所以2n就是所有的偶数，2n+1就是基数，同理其他的也是这样算的。
至于E:first-of-type、 E:last-of-type和E:nth-of-type(n) 这三个和 上面讲的三个很像，功能类似 ，但是它可以将指定的元素排序号。nth-child是给所有的孩子节点排序，然而nth-of-type是给指定类型的孩子节点排序
2.3 css3 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
| 选择 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
-
before和after创建一个元素 ,但是属于行内元素想设置大小需要转换为块元素等。
-
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
-
语法: element::before{}
-
before和after 必须有content属性
-
before在父元素内容的前面创建元素, after在父元素内容的后面插入元素
-
伪元素选择器和标签选择器一样,权重为1
那么这个有哪些应用场景呢？
1.
这个需要用到字体图标
.box5 {
position: relative;
width: 300px;
height: 30px;
border: 1px solid black;
}
.box5::after{
font-family: icomoon;
content: '';
position: absolute;
line-height: 30px;
right: 10px;
}
<div class="box5"></div>
2.
这种遮罩层也可以使用伪元素来做，
.box5 {
position: relative;
width: 300px;
height: 30px;
border: 1px solid black;
}
.box5::before{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
-
伪元素清除浮动
.clearfix::after { content: ""; display: block; height: 0; //隐藏伪元素 clear: both; visibility: hidden; //隐藏伪元素 }.clearfix:before, .clearfix:after { content: ""; display: table; //转换块元素表示这个两个伪元素在一行 } .clearfix:after { clear: both; }上面这是使用伪元素两种清除浮动的办法。
3. css3的盒模型
css3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box ,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
-
box-sizing: content- box盒子大小为width + padding + border ( 以前默认的)
-
box-sizing: border-box盒子大小为width，这样的话我们的宽度是一定的不管外面又没有padding和border大小都是width 的给定宽度。
通过使用这个特性我们就不需要再 考虑padding和border带给我们的加加减减了。
4. css3 的其他新特性
4.1 css3 图片的模糊处理
img {
filter: blur(15px);
}
blue是一个函数，小括号里面的数值越大，图片就会变得越模糊 注意 这个需要加px单位 ，如下图效果
4.2 css3的calc 函数
这个函数呢可以让我们再css中做一些计算操作例如
width:calc(100% - 80px);
这个函数要注意的是 运算符两边一定要有空格。
当然css3中还有更重要的过渡和动画属性和transform，但是这个放到下一篇 动画篇中来写了。
转载：https://blog.csdn.net/qq_44983621/article/details/106320905