2020-03-05 CSS基础（十）

多媒体

视频

  • video

音频

  • audio音频标签，支持ogg,mp3,wav三种格式
  • controls 显示音频的控件，各个浏览器的样式不一致
  • autoplay 自动播放，谷歌浏览器已经禁用了自动播放，后期用js解决
  • loop 循环播放
  • muted 静音播放

<audio src="media/music.mp3" controls="controls" loop></audio>

H5新增input表单类型

  • email 邮箱必须是合法邮箱，例如1234@qq.com
  • url 输入网址，一定要以http://开头
  • date 日期选择
  • time 时间选择
  • number 输入的数字，在移动端会调取数字键盘
  • tel 输入手机号码，在移动端会调取数字键盘
  • search 用户输入信息在最后有一个删除按钮
  • color 拾色器
  • range 滑块

<form>

<ul>

<li>邮箱: <input type="email" /></li> 邮箱必须合法的邮箱 例如 12345@qq.com

<li>网址: <input type="url" /></li> 输入网址 一定以http://开头

<li>日期: <input type="date" /></li> 日期选择

<li>时间: <input type="time" /></li> 时间选择

<li>数量: <input type="number" /></li> 输入的数字 在移动端会调取数字键盘

<li>手机号码: <input type="tel" /></li> 输入手机号 在移动端会调取数字键盘

<li>搜索: <input type="search" /></li> 用户输入信息在最后面有一个删除按钮

<li>颜色: <input type="color" /></li> 拾色器

<li>range: <input type="range" /></li> 滑块

<!-- 当我们点击提交按钮就可以验证表单了 -->

<li><input type="submit" value="提交" /></li>

</ul>

</form>

以上这些重点掌握 tel number search

H5新增表单属性

  • placeholder 提示文本占位
  • required 当前表单是必填的，不填写表单提交不成功
  • autocomplete 自动提示，一般情况下不需要这个提示，设置值为off
  • autofocus 自动获取焦点
  • multiple 多选

<input type="text" placeholder="请输入用户名" required autocomplete="off" name="uname" autofocus>

<input type="file" multiple>

<input type="submit">

</form>

以上重点掌握 placeholder multiple

CSS3选择器

属性选择器：权重为10

  • 选中拥有某一属性的元素
  • 选中拥有某一元素，且属性值为XX.的
  • 选中类名以XX开头的
  • 选中类名以XX结尾的
  • 选中类名中包含XX的

/* 选中拥有class属性的div 设置以下样式 */

div[class] {}

/* 选中拥有class属性 并且class值等于one的div */

div[class="one"] {}

/* 选中类名是以o开头的div 以xx开头 ^= ^符号 shift + 6 */

div[class^="o"] {}

/* 选中类名是以o结尾的div 以xx开头 $= ^符号 shift + 4 */

div[class$="o"] {}

/* 选中类名中包含n的div 包含某个值 *= *符号 shift + 8 */

div[class*="n"] {}

结构伪类选择器：权重为10

  • first-child：选中元素内的第一个孩子
  • last-child：选中元素内最后一个孩子
  • nth-child（n）：指定元素内第几个孩子
  • odd奇数/even偶数
  • n/2n/2n+1/n+3...
  • 后五个：nth-child(-n+5)

===================================

  • nth-of-type(n):选择第几个标签

/* li:first-child 是 li 所在的父容器的第一个孩子 只关心第一个孩子是不是li 如果不是li就不渲染样式 */

li:first-child {

background: red;

}

/* li:first-child 是 li 所在的父容器的最后个孩子 */

li:last-child {

background: red;

}

/* 指定第几个 指定第几个n式从1开始的 */

li:nth-child(1), li:nth-child(10){

background-color: pink;

}

------------------------------ 关键词----------------------------

/* 奇数 odd 奇数 2n+1 || 2n-1*/

li:nth-child(odd) {

background-color: red;

}

/* 偶数 2n*/

li:nth-child(even) {

background-color: pink;

}

-------------------------------公式--------------------------------

/* 公式 n 0开始 0*3 = 0 选不中的状态 如果计算结果<=0 或者大于 总数 都不会渲染*/

/* li:nth-child(-n+5) 前5个

li:nth-child(n+5) 从第5个开始找到结束

li:nth-child(2n) 找2的倍数

*/

/* 后五个 */

li:nth-last-child(-n+5) {

background-color: green;

}

-------------------------------of-type-------------------------------

他们两个在某种程度上是一样的,但是of-type匹配的更精确一些

/* 既匹配类型 也匹配顺序 找div中的第一个p标签 不再关心p是否是直接的第一个孩子*/

div p:nth-of-type(1){ 可以选择第一个p标签

background-color: red;

}

div p:nth-child(1){ 不可以选择第一个p标签 第一个孩子是h1标签

background-color: red;

}

<div>

<h1>h1</h1>

<span>span</span>

<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

<p>5</p>

<p>6</p>

<p>7</p>

<p>8</p>

<p>9</p>

<p>10</p>

</div>

伪元素选择器

  • 伪元素默认是行内属性，不能直接设置宽高

  • 必写属性：content

  • 不是html标签，而是css的方式创建的元素，并不会在结构中显示

  • 一个标签有两个伪元素

  • ::berfore 会插入到元素内容之前

  • ::after 会插入到元素内容之后


<style>

div {

width: 200px;

height: 200px;

background-color: #ccc;

}

/* 伪元素默认是行内元素,不能直接设置宽高 */

div::before, div::after {

/* 必写属性content */

content: '';

display: inline-block;

width: 20px;

height: 20px;

background-color: pink;

}

</style>

<!-- 伪元素 不是html标签元素 是通过css的方式来创建的元素,并不会在结构中显示

一个标签有两个伪元素 一个前伪元素before和 后伪元素 after

before 会插入在div的内容之前

after 会插入到div的内容之后

默认都是行内元素,不能直接设置宽高,使用浮动, 定位 转换模式

-->

<div>

<p>html结构中的p标签</p>

</div>

CSS3盒子內减模型

  • box-sizing：border-box;只要元素设置该属性，元素设置的padding，border将会自动向内减去

模糊

  • filter：blur（10px）

计算

  • width:calc(100px-300px)

水平垂直居中

  • 定位后设置top,left的50%，然后做margin的位置移动

<style>

.fa {

position: relative;

width: 200px;

height: 200px;

background-color: red;

}

.son {

position: absolute;

width: 50px;

height: 50px;

background-color: pink;

left: 50%;

top: 50%;

margin-left: -25px;

margin-top: -25px ;

}

</style>

<div class="fa">

<div class="son"></div>

</div>
  • 定位后，将left，top,right,bottom都设置为0，再设置margin：auto;

<style>

.fa {

position: relative;

width: 200px;

height: 200px;

background-color: red;

}

.son {

position: absolute;

width: 50px;

height: 50px;

background-color: pink;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

}

</style>

<div class="fa">

<div class="son"></div>

</div>

过渡

  • transition-property:规定应用过渡的css属性的名称
  • transition-duration:定义过渡效果花费的时间,默认是0
  • transition-timing-function:规定过渡效果的时间曲线,默认是"ease"
  • transition-delay:规定过渡效果从何时开始,默认是0
  • transition:简写属性,用于一个属性中设置四个过渡属性
 div {
     width: 200px;
     height: 20px;
     background-color: red;
     /* transition-property 规定应用过渡的 CSS 属性的名称。  3
     transition-duration    定义过渡效果花费的时间。默认是 0。  3
     transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
     transition-delay   规定过渡效果何时开始。默认是 0。
     transition 简写属性，用于在一个属性中设置四个过渡属性。  3 */
     /* transition-property: width;
     transition-duration: 2s;
     transition-timing-function: 'ease';
     transition-delay : 1s; */
     /* 联写 必写属性是 执行时长   */
     /* transition: width 2s ease 1s; */
     transition: 2s;
 }
div:hover {
    /* width: 400px; */
    height:400px;
    background-color: pink;
    /* border-radius: 50%; */
    /* 在c3过渡中是不能实现display:none转换的, 在c3过渡中是由一个具体的值过渡到另一个具体的值 */
    /* display: none; */
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,629评论 0赞 6
  • 学习笔记（一）
    浏览器与服务器的基本概念 浏览器（安装在电脑里面的一个软件） 作用： ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,164评论 0赞 0
  • 前端基础面试题(HTML+CSS部分)
    1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素：和有他元素都在一行上，高度、行高及外...
    极乐君阅读 2,464评论 0赞 20
  • CSS
    display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别...
    纹小艾阅读 1,690评论 0赞 1
  • CSS选择器与优先级
    其实平时用得多的选择器无非也就是那么几个，时间久了，许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器，今...
    盛夏晚清风阅读 1,875评论 0赞 5