CSS笔记

8.20

1.层级

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。有三个特征：

1.元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

2.z-index属性指定了⼀个元素的堆叠顺序（哪个元素应该放在前面，或后面）

3.⼀个元素可以有正数或负数的堆叠顺序

2.透明度

透明度有两种表示方法，分别是：

1.rgba() 设置颜色透明度

2.opacity属性设置背景透明度

2.1.rgba() 设置颜色透明度

语法：rgba(R,G,B,A); RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有⼀个 alpha 通道 - 它规定了对象的不透明度。

rgba()里的值的介绍：

• R：红色值。正整数 （0~255）

• G：绿色值。正整数 （0~255）

• B：蓝色值。正整数（0~255）

• A：透明度。取值0~1之间

rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。

2.2.opacity属性设置背景透明度

语法：opacity: value; value 指定不透明度，从0.0（完全透明）到1.0（完全不透明）。

opacity 属性具有继承性，会使容器中的所有元素都具有透明度；

2.3.两种方法的适用情况和注意事项

1.rgba() 方法与opacity方法可以实现透明度效果

2.rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）

3.opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度

3.隐藏元素的6种方式

一般情况下我们使用六种不同的方式来隐藏元素，但是他们的情况和适用范围各不相同，具体如下

3.1.使用透明度

语法：opacity:0

注意：元素消失，但是还会占据空间

3.2.语法：display:none

注意：元素消失，不会占据空间

3.3.使用 scale 缩放

语法：transform:scale(0)

注意：元素消失，但是还会占据空间

3.4.使用visibility

语法：visibility:hidden 隐藏 / visible显示

注意： 元素消失，但是还会占据空间

3.5.使用宽高和overflow

语法：width:0;overflow:hidden;

注意： 元素消失，但是还会占据空间

3.6.使用position定位

语法：position:absolute; top:-当前元素的高度；left：-当前元素的高度

注意： 元素消失，不会占据空间

4.光标属性

cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状：属性值见下表

5.reset样式表

一般情况下我们使用reset样式表来清除标签的默认样式，一是因为默认样式非常影响我们的页面属性，二是因为需要去除掉默认样式 

一般由以下样式构成

1.清除页面中标签的内外边距

html,body,div,h1,h2,h3,h4,h5,h6,p,table,tr,td,th,ul,li,ol,dl,dt,dd,a,input,img,span,b,i{margin:0px;padding:0px;}

2.恢复页面的高度

html,body{height: 100%;}

3.去除默认H标签的样式

h1,h2,h3,h4,h5,h6{font-weight: normal;}

4.去除辅助标签em和i的默认样式

em,i{font-style: normal;}

5.去除掉img的默认外边距和边框

img{display:block;border:none;}

6.定义页面中的字体样式

body{font-family:arial,"微软雅黑",serif;font-size: 12px;color:#5a5a5a;}

7.去除ul中默认样式

ul{list-style: none;}

8.去除a标签中的默认样式

a{color: #000;text-decoration: none;}

9.清除浮动

.clearfix:after{content: " ";display: block;height: 0px;clear:both;visibility: hidden;}

10.定义右外边距为0

.mgr_0{margin-right: 0px;}

11.定义安全宽度

.w1100{width: 1100px;}

12.左浮动简写

.fl{float: left;}

13.右浮动简写

.fr{float: right;}

6.HTML5-新增表单控件

6.1.下拉菜单

<datalist > 元素规定输入域的选项列表。 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项 使用 < input > 元素的列表属性与 < datalist> 元素绑定

示例

<!-- 添加搜索框 -->
<input list="browsers" name="mybrowser">
<!-- 搜索内容 -->
<datalist id="browsers">
  <option value='jack'></option>
  <option value='Rose'></option>
  <option value='Bob'></option>
  <option value='Pater'></option>
  <option value='jerry'></option>
</datalist>

6.2.必填字段

required 属性适用于以下 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

示例

<!--键和值一致可以省略-->
<input type="text" required="required">

6.3.正则

pattern='[限制的内容]{数量}' A-Z -表示范围 数量 如果是5-10之间，中间用,隔开

示例

<!--年龄-->
<input type="text" name="" id="" pattern='[0-9]{3}'><br>
<!--只能输入字母-->
<input type="text" name="" id="" pattern='[A-Za-z]{1,3}'><br>
<!--电话号码-->
<input type="text" name="" id="" pattern='1[3-9][0-9]{9}'><br>

6.4.邮件地址

语法：<input type="email" />

示例

<input type="email" name='email'/>

6.5.网址

语法：<input type="url" />

示例

<input type="url" name='url'/>

6.6.数字类型

语法：type="number" min 最小值 max 最大值 value 默认值 step 间隔值

示例

<input type="number" min="1" max="10" value="1" step='10'>

6.7.日期字段

语法：type = date min 最小日期 max 最大日期 注意：日期格式必须为YYYY-MM-SS

示例

<input type="date" min="2010-12-16" />

6.8.时间字段

语法：type="time" step 时间间隔（单位秒)

示例

<input type="time" step="1800" />

6.9.拾色器

语法：type：color value：默认颜色

示例

<input type="color" value="#ed1c24">

6.10.进度条

<progress value="22" max="100"></progress>

6.11.取消表单验证

在开发阶段我们可能想把表单临时提交一下， 又不想让它进行表单中所有元素内容的有效性检查，有两种方法可以取消表单验证

示例

<!-- 方法一 -->
<form action="demo.php" novalidate='novalidate'></form>
<!-- 方法二 -->
<input type="submit" formnovalidate='formnovalidate'/>

6.12.使用滑块和输出组件进行运算

oninput 输入组件 output 输出组件 parseInt 转换为整形

示例

<form action="" oninput="sum.value = parseInt(a.value) + parseInt(b.value)">
  0<input type="range" min="0" max="100" step="10" value="0" id='a'>100
  +
  <input type="number" min="0" max="100" step="10" value="10" id="b">
  =
  <output name='sum'></output>
</form>

6.13.指定元素属于对应的表单

在HTML4中，表单内的从属元素必须写在表单的内部，而在HTML5中，可以把他们书写在页面上的任何地方，然后为该元素指定一个form属性，属性值为表单的id，这样就可以声明该元素的从属指定表单了。

示例

 <form action="demo.php" method="get" id="user-demo" id='user-form'>
     first name: <input type="text" name='uname'>
     <input type="submit">
 </form>
 first name: <input type="text" name='rename' form="user-form">

6.14.提交到不同的页面

在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。 同一个表单可以选择提交给不同的数据处理程序

示例

<form action="demo.php" method="get" >
     first name: <input type="text" name='fname'>
     last name: <input type="text" name='lname'>
     <input type="submit" value='注册' formaction="register.php">
     <input type="submit" value='登陆' formaction="login.php">
     <input type="submit" value='post方式提交' formmethod="post" formaction="login.php">
</form>

6.15.占位符

表单元素所具有的默认提示，可以使用placeholder去进行设置。

示例

<input type="text" name='uname' placeholder='请输入用户名'>

6.16.视频音频标签

注意：如果你无法看到该视频,那么可能你的电脑不支持该文件格式 <object > 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

<embed >标签是html5中新标签，几乎所有浏览器都支持。拥有width、height、src、type(src引用文件的MIME 类型)四个属性 embed是针对非IE的浏览器（如火狐、chrome）的媒体播放器; object是针对IE浏览器标签

<!-- 音频或者视频 -->
<object data="../video/Tomorrow.mp4" height="200" width="200"></object>
<!-- 音频或者视频 -->
<embed src="../video/Tomorrow.mp4" height="200" width="200">
<!-- 音频 -->
<audio src="../那一年.mp3"></audio>
    audio 音频元素；用于嵌入一个 音频文件
    src 音频文件的URL
    controls 显示播放控件
    autopaly 表示立刻播放
    preload 预先载入音频文件数据
<!-- 视频 -->
<video src="movie.mp4" controls="" width="400" muted="" poster="cover.jpg" loop="">
    video 视频播放元素
    src 视频资源的URL
    controls 表示显示播放控件
    autoplay 自动播放,目前不能使用
    muted 表示静音
    poster 指定视频载入时显示的图片封面
    loop 反复播放
    preload 预先加载