css等待样式,Css样式的作用

css鼠标放上去把箭头变成手一样的样式怎么写

任意标签中插入 style="cursor:hand"

创新互联自成立以来，一直致力于为企业提供从网站策划、网站设计、做网站、成都网站设计、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

多种形状可供选择

hand是手型

pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。

crosshair是十字型

text是移动到文本上的那种效果

wait是等待的那种效果

default是默认效果

help是问号

e-resize是向右的箭头

ne-resize是向右上的箭头

n-resize是向上的箭头

nw-resize是向左上的箭头

w-resize是向左的箭头

sw-resize是左下的箭头

s-resize是向下的箭头

se-resize是向右下的箭头

auto是由系统自动给出效果

什么是CSS,CSS有什么用？

通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。此外，使用样式表能有效地分离网页的内容与外观控制，从而便于美工与程序员之间的分工协作，发挥各自的优势。

为什么需要CSS样式表主要是基于以下几点原因：

(1) HTML标签的外观样式比较单一。

大家在学习前面几章时，不知发现没有？前面几章网页中的文字的字体、颜色、大小、超链接、间距等样式都比较单一，为了弥补这个缺点，就需要使用CSS样式表来对HTML标签进行控制，从而实现更加丰富多彩的效果。

(2) 样式表的作用相当于华丽的衣服。

同样的内容，采用不同的CSS样式文件，可以看到不同的布局和效果。从美工的角度来看，可以更容易地调整页面外观，调整页面里某个部分的文字或者图片等，从而实现复杂多变的页面效果，因此样式表相当于一个页面甚至一个网站的华丽的衣服。如图1所示，就是内容相同，外观不同的两个页面。

(3) 样式表能实现内容与样式的分离，方便团队开发。

由于当今社会竞争日趋激烈，分工越来越细，每个人做的事越来越单一，我们开发一个网站也不例外，往往需要美工和程序设计人员的配合，美工做样式，程序员写内容，为了迎合这种需要，就出现了样式表。样式表能把内容结构和格式控制相分离，使网页可以仅由内容构成，而将所有的网页格式通过CSS样式表文件来控制，从而方便美工和程序员分工协作、各司其职、各尽其能，为开发出优秀的网站提供了有力的保障。

css加载会造成阻塞吗？css加载会阻塞js运行吗？

直接给出结论：

1、css并不会阻塞DOM树的解析

2、css加载会阻塞DOM树渲染

3、css加载会阻塞后面js语句的执行

为了避免过长的白屏时间，我们应该尽可能的提高css加载速度，以下有几种优化方法:

1、使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)

2、对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)

3、合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)

4、减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

关于DOMContentLoaded：

对于浏览器来说，页面加载主要有两个事件，一个是DOMContentLoaded，另一个是onLoad。而onLoad没什么好说的，就是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。

1、如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。

2、其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。

参考自：

CSS3 流动边框（仿王者荣耀等待效果）的三种实现方式

!DOCTYPE html

html

head

meta charset="utf8"

style

:root {

--border-anim-size: 10em;

--border-anim-width: calc(var(--border-anim-size) / 20);

--border-anim-width-double: calc(var(--border-anim-width)*2);

--border-anim-duration: 5s;

--border-anim-border-color: gray;

--border-anim-hover-color: LightCoral;

}

body {

display: flex;

}

.border-anim {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid  var(--border-anim-border-color);

}

.border-anim::before, .border-anim::after {

content: '';

position: absolute;

border: var(--border-anim-width) solid var(--border-anim-border-color);

/* 让边框在内容区域内绘制 */

box-sizing: border-box;

transition: background-color 1s;

}

.border-anim::before {

animation: anim-border-run calc(var(--border-anim-duration) * 2) linear infinite;

}

.border-anim::after {

animation: anim-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;

}

.border-anim:hover::before, .border-anim:hover::after {

background-color: var(--border-anim-hover-color);

}

.border-anim-content {

width: calc(100% - var(--border-anim-width-double));

height: calc(100% - var(--border-anim-width-double));

margin: var(--border-anim-width);

border: 1px solid var(--border-anim-border-color);

}

@keyframes anim-border-run {

/* 这里将动画分成了4步；也可以改为2步，这时before和after用的就要是两套keyframes了 */

from, to {

width: var(--border-anim-width-double);

height: 100%;

top: 0;

left: 0;

}

25% {

width: 100%;

height: var(--border-anim-width-double);

top: calc(100% - var(--border-anim-width-double));

left: 0;

}

50% {

width: var(--border-anim-width-double);

height: 100%;

top: 0;

left: calc(100% - var(--border-anim-width-double));

}

75% {

width: 100%;

height: var(--border-anim-width-double);

top: 0%;

left: 0%;

}

/* 需要设置临界效果，否则会渐变 */

from, to, 24.9% {

border-left-color: var(--border-anim-border-color);

border-top-color: transparent;

border-right-color: transparent;

border-bottom-color: var(--border-anim-border-color);

}

25%, 49.9% {

border-left-color: transparent;

border-top-color: transparent;

border-right-color: var(--border-anim-border-color);

border-bottom-color: var(--border-anim-border-color);

}

50%, 74.9% {

border-left-color: transparent;

border-top-color: var(--border-anim-border-color);

border-right-color: var(--border-anim-border-color);

border-bottom-color: transparent;

}

75%, 99.9% {

border-left-color: var(--border-anim-border-color);

border-top-color: var(--border-anim-border-color);

border-right-color: transparent;

border-bottom-color: transparent;

}

}

/style

style

.border-anim2 {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid var(--border-anim-border-color);

}

.border-anim2-edge {

position: absolute;

/* 必须把其他边框置0，否则有默认值存在 */

border: 0px solid var(--border-anim-border-color);

box-sizing: border-box;

}

/*

注意：CSS中不能前向选择，而只能后向选择！

因为如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，

因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？

于是，网页渲染呈现速度就会大大减慢，浏览器会出现长时间的白板。

*/

/* 波浪号和加号都是选择其后的元素，区别是加号只取一个，波浪取所有

.border-anim-content:hover ~ .border-anim2-edge { */

.border-anim2:hover .border-anim2-edge {

background-color: var(--border-anim-hover-color);

}

.border-anim2-left {

width: var(--border-anim-width-double);

height: 100%;

left: 0;

border-left-width: var(--border-anim-width);

animation: anim2-border-run-left var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;

}

.border-anim2-top {

height: var(--border-anim-width-double);

width: 100%;

top: 0;

border-top-width: var(--border-anim-width);

animation: anim2-border-run-top var(--border-anim-duration) linear infinite;

}

.border-anim2-right {

width: var(--border-anim-width-double);

height: 100%;

right: 0;

border-right-width: var(--border-anim-width);

animation: anim2-border-run-right var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;

}

.border-anim2-bottom {

height: var(--border-anim-width-double);

width: 100%;

bottom: 0;

border-bottom-width: var(--border-anim-width);

animation: anim2-border-run-bottom var(--border-anim-duration) linear infinite;

}

@keyframes anim2-border-run-left {

from, to {

height: 0;

}

50% {

height: 100%;

}

from, to, 49.9% {

top: 0;

bottom: auto;

}

50%, 99.9% {

top: auto;

bottom: 0;

}

}

@keyframes anim2-border-run-top {

from, to {

width: 0;

}

50% {

width: 100%;

}

from, to, 49.9% {

left: auto;

right: 0;

}

50%, 99.9% {

left: 0;

right: auto;

}

}

@keyframes anim2-border-run-right {

from, to {

height: 0;

}

50% {

height: 100%;

}

from, to, 49.9% {

top: auto;

bottom: 0;

}

50%, 99.9% {

top: 0;

bottom: auto;

}

}

@keyframes anim2-border-run-bottom {

from, to {

width: 0;

}

50% {

width: 100%;

}

from, to, 49.9% {

left: 0;

right: auto;

}

50%, 99.9% {

left: auto;

right: 0;

}

}

/style

style

.border-anim3 {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid var(--border-anim-border-color);

box-sizing: border-box;

}

.border-anim3::before, .border-anim3::after {

content: '';

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.border-anim3::before {

box-shadow: 0 0 0 var(--border-anim-width) var(--border-anim-border-color) inset;

animation: anim3-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;

}

.border-anim3::after {

box-shadow: 0 0 0 var(--border-anim-width) var(--border-anim-border-color) inset;

animation: anim3-border-run calc(var(--border-anim-duration) * 2) linear infinite;

}

.border-anim3:hover::before, .border-anim3:hover::after {

/* 如果只在hover的时候设置transition，那么进入有效，但是退出无效(即退出时不会有缓动) */

transition: background-color 1s;

background-color: var(--border-anim-hover-color);

}

@keyframes anim3-border-run {

/*

clip通过对元素进行剪切来控制元素的可显示区域(clip的区域显示，其他隐藏)

clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用

shape函数声明：rect(top right bottom left)

rect()和top和bottom指定偏移量是从元素盒子顶部边缘算起；left和right指定的偏移量是从元素盒子左边边缘算起（包括边框）。

如果right和bottom设置为auto时，他们就相当于元素的宽度（这个宽度包括元素的border、padding和width），或者简单的理解为100%

注意：1.值不能设置为百分比。 2.在动画设置过程里不能使用auto，使用auto没有动画效果（因此建议使用SCSS或者LESS之类的预处理器）

*/

/*

clip动画有3种方案，但是都有点小瑕疵（在线条粗的时候明显，线条细的情况下完全看不出来）

(1)使用如下的1和9作为边界，当拐弯的时候，尾部多余的边界会跟着动

(2)将下面的1和9替换为0和10，当拐弯的时候，线条宽度会变为0

(3)在每个状态后面一步立即重置它，但是会出现抖动

*/

from, to {

clip: rect(0, 1em, 10em, 0);

}

1% {

clip: rect(1em, 1em, 10em, 0);

}

25% {

clip: rect(9em, 10em, 10em, 0);

}

25.1% {

clip: rect(9em, 10em, 10em, 1em);

}

50% {

clip: rect(0, 10em, 10em, 9em);

}

50.1% {

clip: rect(0, 10em, 9em, 9em);

}

75% {

clip: rect(0, 10em, 1em, 0);

}

75.1% {

clip: rect(0, 9em, 1em, 0);

}

}

/style

/head

body

section

h1(1)通过两矩形的移动来制作动画/h1

div class="border-anim"

div class="border-anim-content"/div

/div

/section

section

h1(2)通过四个边框的长度来控制动画/h1

div class="border-anim2"

div class="border-anim-content"/div

div class="border-anim2-edge border-anim2-left"/div

div class="border-anim2-edge border-anim2-top"/div

div class="border-anim2-edge border-anim2-right"/div

div class="border-anim2-edge border-anim2-bottom"/div

/div

/section

section

h1(3)通过clip的裁剪来显示动画/h1

div class="border-anim3"

div class="border-anim-content"/div

/div

section

/body

/html

对web开发技术感兴趣的同学，欢迎私信我加群，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。

最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰

CSS3 animation动画，循环间的延时执行该怎么弄

1、@keyframes规则。from{属性：值;}  to{属性：值;}。

2、0%{属性：值;} 100%{属性：值;}0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。

3、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。

4、规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。

5、播放次数：animation-iteration-count：次数；永久播放的值取infinite。

6、动画速度曲线：animation-timing-function：变化类型；变化类型有：linear 匀速；ease-in 开始慢；ease-out 结束慢；ease 动画有一个缓慢的开始，然后快，结束慢。

扩展资料

animation 属性是一个简写属性，用于设置六个动画属性：

1、animation-name

规定需要绑定到选择器的 keyframe 名称。

2、animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

3、animation-timing-function

规定动画的速度曲线。

4、animation-delay

规定在动画开始之前的延迟。

5、animation-iteration-count

规定动画应该播放的次数。

6、animation-direction

规定是否应该轮流反向播放动画。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

CSS 核心样式、H5 + C3 新特性

粗细font-weight

设置文字是否加粗显示 。 有两种类型 ：单词类型、数字类型

单词类型 | 属性值 | 说明

| normal | 默认值，定义批准的字体

| bold | 定义粗体字符 ，b strong标签 的默认值

| bolder | 定义更粗的字体

| ligher | 定义更细的字体

数字类型 100-900之间的整百数字。数字越大文字显示越粗。 400==normal 700==bold

字体风格font-style

设置字体是否斜体显示。

| 属性值 | 说明

|normal | 设置正规的字体 ， 大多是标签的默认值

| italic | 设置斜体的文字 ，主要针对英文，要求英文以字体中的斜体样式显示

| oblique | 设置斜体的文字 ， 只是将文字倾斜显示 ， 与字体无关

**行高 line-height **

设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。

| px 像素值 | 设置的行高的具体像素值

| 百分比数值 | 设置的本身字号像素值的百分比

字体综合font

1.字号 、 字体

2.字号 /行高 、字体 重点是字号和行高之间使用 /

3.加粗和斜 体两个值之间可以互 换位置 、 字号、行高、字体不能更改位置。

水平对齐text-align

设置文本水平方向的对齐

| 属性名 | 作用 |

| left | 居中对齐，大部分标签的默认值

| center | 居中对齐

| right | 居右对齐

文本修饰 text-decoration

设置文本整体是否有线条的修饰效果

| 属性名 | 作用 |

| none | 没有修饰， 大部分标签的默认值

| overline | 上划线

| line-through | 中划线，删除线del 标签的默认值

| underline | 下划线，a标签的默认值

**缩进 text-indent **

设置段落首行是否进行缩进

| px 单位 | 表示首行缩进多少像素

| em单位 | 首行缩进几个中文字符的位置

| 百分比 | 表示缩进文字所在标签的父级标签width 属性值的百分比

书写元素内容区域 width+height

盒子可以实体化的区域 width + height + padding + border

盒子实际占位的位置 width + height + padding + border + margin

宽度width 高度height

设置可以添加元素内容的区域的宽度

| auto | 默认值，浏览器可计算出实际的宽度

| px | 像素值定义的宽度

| % | 定义参考父元素宽度width 的百分比宽度

内边距padding 、 外边距margin

内边距padding：设置的是元素的边框内部到宽高区域之间的距离。

外边距margin： 设置的是盒子与盒子之间的距离。

四值法 上右下左 padding : 10px 20px 30px 40px;

三值法 上 左右 下

二值法 上下 左右

单值法 四个值相同

边框border

设置的是内边距外面的边界区域 作为盒子的实体化的最外层

border ：“宽度 线 颜色 “

border-style | 属性值 | 说明

| none | 定义无边框

| solid | 定义实线

| dashed | 定义虚线 在大多数浏览器中呈现为实线

| dotted | 定义点状边框，在大多数浏览器中呈现为实线

| double | 定义为双线，双线的边框的宽度等于 border-width的值

| groove | 定义3D凹槽边框，其效果取决于border-color 的值

| ridge | 定义3D垄装边框，其效果区域于border-color 的值

| inset | 定义3D内容凹陷效果，其效果取决于border-color 的值

| outset | 定义3D内容凸出效果，其效果取决于border-coloe 的值

清除默认样式

1.大部分容器标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。

2.ul和li两种列表有默认的列表前缀，清除list-style属性

3.a标签的默认样式，顺带设置页面中常用的a的公共样式：color和text-decorstion

4.清除默认加粗效果:设置font-weight

父子盒模型

父元素的width = 所有子元素width + padding + border + margin

margin塌陷现象

margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的 真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到 了边距值大的值内部

同级元素塌陷： 大的margin吃掉小的

标准文档流：指得是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排版方式。前面内容发生了变化，后面的内容位置也会随着发生变化

微观现象

1.空白折叠现象。

2.文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。

3.自动换行，元素内一行内容写满元素的width时会自动进行换行。[图片上传失败...(image-5327c1-1604048626452)]

元素等级

块级元素：大部分容器级标签包括p标签都是块级元素，比如div,h1-h6,p,pre,ul,ol,li,form,table,label

行内元素：大部分的文本及标签比如 a,span，i（斜体）,em（强调）,sub(下标)，sup（上标） 等。

行内块元素： (img，button,input，textarea,select), img等

显示模式display

display 属性更改的显示模式并没有改变标准流本质性质

| 属性值 | 作用

| block | 表示元素要以块级元素模式加载，具备块级特点

| inline | 表示元素要以行内元素模式加载，具备行内特点

|inline-block| 表示标签及行内块模式加载，具备行内块特点

| none | 表示标签及内容直接隐藏，让出原有标准流的位置

脱离标准流

标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位

浮动定义

1.浮动 (float)：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示

float : right / left

浮动的问题二：父元素没有高度，会影响后面元素的标准流位置，如果福哦的那个的子元素足够高，有可能影响到后面浮动的贴边。

[图片上传失败...(image-7923f-1604048626452)]

清除浮动方法

清除浮动一：给标准流的父元素强制给一个合适的高度height

解决：浮动元素影响后面元素标准流位置和贴边。

问题：父元素不能高度自适应，后面父元素之间如果有margin效果不正确。

清除浮动五：溢出隐藏

overflow：hidden

总结 如果父元素高度是固定的，建议使用height属性解决

如果父元素告诉需要自适应，建议使用overflow属性解决浮动问题

要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、 鼠标移上hover、鼠标点击active。

-背景颜色 background-color

-背景图片 background-image 属性 url(图片路径)

-背景重复 background-repeat

| repeat | 重复，默认属性值，表示会使用背景重复加载填满整个盒子背景区域

| no-repeat| 不重复，不论背景图是否大于盒子范围，都只加载依次图片

| repeat-x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复

| repeat-y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复

-背景定位 background-position 主要用于设置 不重复 的图片在背景区域的加载开始位置

单词表示法 水平方向可选单词：left、center、right

垂直方向可选单词：top、center、bottom

像素表示法 水平 垂直 border以内的

百分比表示法 100%代表的数值

水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。

垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。

-背景附着 background-attachment

| scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走

| fixed | 固定的，背景图的定位的参考点从盒子border，以内的左上顶点变为了浏览器窗口的左 上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口 的某个位置，不会随着页面滚动而滚走

background 属性可以将五个单一属性的值进行合写。 属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作 一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。

-背景缩放background-size 设置img的尺寸

| px值 | 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值 加载

| 百分比 | 同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性

| cover | 自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区 域。如有溢出部分则会被隐藏。

| contain | 自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背 景区域

-相对定位 relative

相对定位的元素不能脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置

-绝对定位 absolute 脱离标准文档流

子绝父相 、 子绝父绝 、 子绝父固

-固定定位 fixed 脱离标准文档流

-压盖顺序 z-index

HTML5

[图片上传失败...(image-974217-1604048626452)]

audio音频标签 ogg mpeg wav

| 属性 | 值 | 描述

| autoplay| autoplay| 如果出现该属性，则音频在就绪后马上播放

| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮

| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。

| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

| src | url | 要播放的音频的 URL。

video 视频标签 ogg mp4 webm

[图片上传失败...(image-361a85-1604048626452)]

| 属性 | 值 | 描述

|autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）

| controls | controls | 向用户显示播放控件

| loop | loop |放完是否继续播放该视频，循环播放

| preload | auto |（预先加载视频）

none（不应加载视频） 规定是否预加载视频(如果有了autoplay 就忽略该属性）

| src | url | 视频url地址

| width | pixels(像素) |设置播放器宽度

| height | pixels(像素) |设置播放器高度

| poster | Imgurl | 加载等待的画面图片

| muted | muted | 静音播放

属性值 描述

type="email" 限制用户输入必须为Email类型

type="url" 限制用户输入必须为URL类型

type="date" 限制用户输入必须为日期类型

type="time" 限制用户输入必须为时间类型

type="month" 限制用户输入必须为月类型

type="week" 限制用户输入必须为周类型

type="number" 限制用户输入必须为数字类型

type="range" 滑动条

type="tel" 手机号码

type="search" 搜索框

type="color" 生成一个颜色选择表单

datalist 标签

• datalist 标签规定了 input 元素可能的选项列表。

• datalist元素包含了一组option元素，这些元素表示预定义可选值，在input元素输入

过程中，会自动响应option元素的值。

• 绑定的input标签必须设置 list 属性，属性值等于datalist标签的 id 属性值。

新增表单属性

属性 值 描述

required required 表单拥有该属性表示其内容不能为空，必填

placeholder 提示文本 表单的提示信息，存在默认值将不显示

autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个

autocomplete off / on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填 写的选项。

默认已经打开，如 autocomplete=”on “

关闭 autocomplete =”off”

-需要放在表单内同时加上name属性

-同时成功提交

multiple multiple 可以多选文件提交

CSS3

子级选择器

子级选择器用于选取带有特定父元素的元素 书写语法element1element2

[图片上传失败...(image-bb266d-1604048626452)]

兄弟选择器

--相邻兄弟选择器 用于选择 紧接 在另一个元素后的兄弟元素，而且二者有相同的父元素。

| element1+element2 | 匹同一个父元素中紧跟在element1后面的一个element2元素

--其他兄弟选择器 匹配同一个父元素中在element1后面的 所有 element2元素

| elemenet~element2 | 匹配同一个父元素中elemenet1后面的所有element2元素

E:first-of-type 指定类型E的第一个

E:last-of-type 指定类型E的最后一个

E:nth-of-type(n) 指定类型E的第n个 这个是元素的第几个在元素下选取

属性选择器

E[att] 选择具有att属性的E元素

E[att="val"] 选择具有att属性且属性值等于val的E元素

E[att^="val"] 匹配具有att属性、且值以val开头的E元素

E[att$="val"] 匹配具有att属性、且值以val结尾的E元素

E[att*="val"] 匹配具有att属性、且值中含有val的E元素

box-sizing属性

content-box 标准模式 盒子总体大小为 width(height) + padding + border

border-box 怪异模式 盒子总体大小为 width 和 height

[图片上传失败...(image-cdef05-1604048626452)]

文字阴影text-shadow

| 属性值 | 简介

| h-shadow | 必需。水平阴影的位置。允许负值。

| v-shadow | 必需。垂直阴影的位置。允许负值。

| blur | 可选。模糊的距离。

| color | 可选。阴影的颜色。

--transition-property过渡的属性

• none 表示没有属性过渡

• all 表示所有变化的属性都过渡

• 属性名 使用具体的属性名，多个属性名中间逗号分隔

--时间

以秒为单位 0s必须加单位

--transition-timing-function 时间曲线

对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可 以取代大量之前只能靠Flash才可以实现的效果。

位移translate()

translate(x,y) x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负

translate(x) 只有一个数值，表示水平方向的位移

translate(y) 只有一个数值，表示垂直方向的位移

缩放 scale()

值 说明

scale(x, y) x,y分别为改变元素的宽度和高度的倍数

scale(n) 只有一个值，表示宽度和高度同时缩放n倍

scaleX(n) 改变元素的宽度

scaleY(n) 改变元素的高度

旋转 rotate(deg)

deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转

倾斜 skew()

transform: skew(数字deg,数字deg)

两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个 数值不写默认为0

transform-­origin 属性

设置调整元素的水平和垂直方向原点的位置

x 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比

y 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

[图片上传失败...(image-ac107d-1604048626452)]

透视属性 perspective

作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。

属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。 注意：透视属性需要设置给 3D 变化元素的父级

3D 旋转

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

[图片上传失败...(image-e781c5-1604048626452)]

3D 位移

translateX(x) 设置 X 轴的位移值。

translateY(y) 设置 Y 轴的位移值。

translateZ(z) 定义3D位移，设置Z轴的位移值。

属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应 轴的负方向移动。

transform-style属性

用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。

属性值：

flat：所有子元素在 2D 平面呈现

preserve-3d：保留 3D 空间

浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9 需要前缀 -ms-。