html5 css 笔记,HTML5+CSS3笔记

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

emmet语法？

IE 9 +

H5新增的语义化标签

除了ie，这些标签默认是块元素header ：定义页面头部

nav：导航栏标签

article：内容标签

sectiom：文档标签

aside：侧边栏标签

footer：尾部标签

H5新增的多媒体标签

使用这些标签前前查文档(谷歌默认不自动播放，但有解决方案)video:视频标签

audio：音频标签

H5新增的input类型type属性值说明emali限制用户必须输入Email类型

url限制用户必须输入URL类型

date限制用户必须输入日期类型

time限制用户必须输入时间类型

month限制用户必须输入月类型

week限制用户必须输入周类型

number限制用户必须输入数字类型

search搜索框

color颜色选择表单

H5新增的input属性属性值说明requiredrequired表示必填

placeholder提示文本提示文本

autofocusautofocus页面加载完自动聚焦

autocompleteoff/on是否保存记录，只有拥有name属性并且提交成功的数据才会被保存，默认已经打开

multiplemultiple可选择多文件提交

C3

新增选择器

属性选择器选择器[属性名]{

}

input[value]{

/*表示所有拥有value属性的input*/

}

input[name="123"]{

/*表示所有name属性值是123的input*/

}选择器描述[attribute]用于选取带有指定属性的元素。

[attribute=value]用于选取带有指定属性和值的元素。

[attribute~=value]用于选取属性值中包含指定词汇的元素。

[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[[attribute^=value]匹配属性值以指定值开头的每个元素。

[attribute$=value]匹配属性值以指定值结尾的每个元素。

[attribute*=value]匹配属性值中包含指定值的每个元素。

结构伪类选择器选择器功能描述版本E:last-child选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1)3

E:nth-child(n)选择父元素的第n个子元素，n从1开始计算3

E:nth-last-child(n)选择父元素的倒数第n个子元素，n从1开始计算3

E:first-of-type选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1)3

E:last-of-type选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1)3

E:nth-of-type(n)与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素3

E:nth-last-of-type与:nth-last-child作用类似，用作选择同种标签的倒数第一个元素3

E:only-child选择父元素下仅有的一个子元素，相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)3

E:root选择文档的根元素，对于HTML文档，根元素永远HTML3

E:empty选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点3

E:only-of-type选择父元素下使用同种标签的唯一子元素，相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)3

伪元素选择器

::first-letter 第一个字

::first-line 第一行(以浏览器为准的第一行)

::selection 被选中的字行(鼠标选中的字段)只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

::before 和 ::after必须带一个属性content

2.在内部内容的前面或者后面插入内容

必须带一个属性content

div::before {

content: "我是插入的内容";

background: #572eb8;

}

3.当插入的内容定义宽高和其他属性时，其实就是一个盒子(必须通过display转换，因为默认是一个行内元素)。

盒子1

div{

width: 500px;

height: 500px;

border: 1px solid #000;

}

div::before{

content: "插入的盒子";

display: block;

width: 200px;

height: 200px;

background: rgb(211, 29, 29);

}

C3盒子模型

box-sizing

该属性有两个值content-box/border-boxcontent-box：默认的，盒子的大小计算公式：width + padding + border

border-box：盒子大小不会随着margin和border的大小而扩大(前提是padding + border <= width)

css3其他新特性

图片模糊

filter：函数()；

calc函数

该函数可以帮你执行一些计算

例子width:calc(100%-100px);

C3 过渡transition:要过渡的属性 过渡时间 运动曲线 何时开始[,要过渡的属性 过渡时间 运动曲线 何时开始[,...]];要过渡的属性 : 想要变化的css属性(可以省略，默认是all)

过渡时间： 单位是s，例如0.5s

运动曲线：默认是 ease (可以省略)ease ：逐渐变慢

linear：匀速

ease-in：加速

ease-out：减速

ease-in-out：慢》块》慢

何时开始：单位是秒，默认是0s(可以省略)

2D转换

transform(可以实现元素的位移、旋转、缩放等)

移动：translate

对行元素无效translate(x,y):xy两个方向都可以移动

translateX(n)：只移动x方向

translateY(n)：只移动y方向

语法：div{

transform:translate(20px,100px)/*水平移动20px 垂直移动100px，如果值是百分比，那么是相对于盒子的对应方向方向上的长度*/

}

旋转：rotale

度数单位是deg，如果度数是正数则顺时针旋转，度数是负数则逆时针旋转，旋转点默认是元素的中心

语法：div{

transform:rotate(度数);

}

设置旋转中心：transform-origin

x y默认都是50%，这里的%是相对于元素高宽，还可以使用方位名词(top bottom left right center)

例如 top left 表示左上角div{

transform-origin: x y;

/*transform-origin: top left;*/

}

缩放：scale

可以按元素本身的大小按倍数放大，放大1倍为不变，可以是小数

语法：div{

trabsform:scale(x,y);

}trabsform:scale(1,1):放大了一倍，等于没变

trabsform:scale(2,2)：高宽都放大两边

trabsform:scale(2)：相对于trabsform:scale(2,2)

trabsform:scale(0.5,0.5)：缩小

2D转换综合语法

直接在后面跟空格就可以添加了，对顺序没有硬性要求，但切记移动移动要在旋转之前，不然会出现你意想不到的效果(移动是按相对于元素的方向移动的，当你先旋转元素之后，元素的方向会与屏幕的方向不一样)div{

trabsform:translate(x,y) rotate(度数) scale(x,y)

}

C3 动画

相对于过渡，动画可以实现更多变化，控制，连续播放等效果

制作动画分两步：定义动画

使用(调用)动画

定义动画

语法：(中间可以定义如何时间点的样式)@keyframes 动画名{

0%{

width:100px;

}

41%{

rotate(45deg)

}

100%{

width:200px;

}

}

使用动画

语法：div{

animation:动画名;

animation-duration:持续时间;

}

动画常见属性属性描述@keyframes定义动画

animation所有动画的简写，除啦animation-play-state属性

animation-name调用的动画的名称(必须的)

animation-duration动画的持续时间

animation-timing-function动画的速度曲线，默认是“ease”，这里相对于过渡增加了步长steps(n),表示动画分为n步执行

animation-delay动画开始时间，默认是0

animation-iteration-count动画执行次数，默认是1，还有infinite

animation-direction动画下一周期是否逆向播放，默认是“normal”，还有”alternate“(逆播放)

animation-play-state动画是否运行，默认是“running”，还有“paused”

animation-fill-mode动画结束状态，保持结束状态：forwards，回到起始状态：backwards

动画属性简写

语法：

前两个属性是必须的div{

animation:动画名称 持续时间 运动曲线 开始时间 播放次数 是否下一周期反向 动画结束的状态;

}

阴影 ：box-shadow

语法：div{

box-shadow:x偏移 y偏移 模糊距离 阴影大小 颜色 模糊位置;

}x偏移：(必需)

y偏移：(必需)

模糊距离：(可选)

阴影大小(可选)

颜色：(可选)

模糊位置：默认(inset)外部阴影，outset改为内阴影(可选)

3D转换

移动：translate3dtransform:translateX(100px):仅仅在x轴上移动；

transform:translateY(100px):仅仅在y轴上移动；

transform:translateZ(100px):仅仅在z轴上移动；

transform:translate3d(x,y,z):x,y,z三个方向移动；

透视：perspective

代码给上级，会让下级有透视效果perspective:500:表示虚拟距离，既当元素向前移动500px时会占满屏幕

旋转：rotate3dtransform:rotateX(100deg):仅仅沿着x轴旋转；

transform:rotateY(100deg):仅仅沿着y轴旋转；

transform:rotateZ(100deg):仅仅沿着z轴旋转；

transform:rotate3d(x,y,z,deg):沿着x,y,z轴旋转,单位为deg(沿着x,y,z的矢量轴旋转)；

3D呈现：transform-style

当一个元素没有开启3D呈现时，如果对这个元素的父元素进行3D旋转时，该元素会转变为2D。

代码给父(或父以上)级，但影响的是子元素，就像 perspective一样。transform-style:flat;子元素不开启3D呈现，默认的

transform-style:preserve-3d;子元素开启3D立体空间

浏览器私有前缀-moz-：firefox

-ms-：ie

-webkit-：chrome，Safari

-o-：Opera

C3渐变色

C3中有线性渐变和径向渐变两种渐变

CSS background-image 属性url(‘URL’)图像的URLnone无图像背景会显示。这是默认

linear-gradient()创建一个线性渐变的 “图像”(从上到下)

radial-gradient()用径向渐变创建 “图像”。 (center to edges)

repeating-linear-gradient()创建重复的线性渐变 “图像”。

repeating-radial-gradient()创建重复的径向渐变 “图像”

inherit指定背景图像应该从父元素继承

线性渐变

线性渐变是指颜色的渐变方向是沿着一个方法变换的

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction：渐变方向可以是方位名词： to bottom、to top、to right、to left、to bottom right，等等

可以是角度：

color-stop：渐变颜色，至少两个值；

重复线性渐变

径向渐变

有一个点向周围方向扩散

上菜鸟教程吧

CSS

背景图片大小：background-sizebackground-size:50px 100px;(高50宽100)

background-size:cover;(等比例缩放到高宽都足以填充元素)

background-size:contain;(等比例缩放到高或宽足以填充元素)