CSS心得总结

开发工具与关键技术：Dreamweaver，CSS
作者：李建威
撰写时间：2019年07月08日

关于input标签的type属性：
Button 一个按钮 Value=””值绑定按钮的文本
Checkbox 正方形的复选框
Color 颜色选择工具
Date和Datetime和Datetime-local 日期，日期时间，年月日和时间
Email 用于e-mail格式绑定，格式不对提示不是合法的email格式；
File 文件上传控件
Hidden 隐藏input
Image 通过Src=””绑定一张图片，图片过大需要自己调整
Month 年月
Number 只能输入数字和字符e,-的文本框
Password 密码框
Radio 圆形的复选框
Range 可拖动滑块
Reset 重置按钮
Search 一个清空按钮的搜索输入框
Submit 提交按钮
Tel 用于手机输入电话号码时跳出的虚拟键盘为电话键盘。
Text 一个单行的文本字段
Time 用于输入时间的控件
url 用于输入 URL 的字段。
week 年份和周数

关于伪类选择器：
:hover 鼠标移到元素上时添加的特殊样式。
:link 点击前的状态。
:action:鼠标点击时刻的状态。
:visited:鼠标点击后的状态。
:before 对指定的支持文本的元素批量插入文本。
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
:nth-child(i) 匹配父元素中的第n个子元素，元素类型没有限制。

匹配所有span元素下的第一个子元素，注意是所有。
有某个类的元素下的div下的第n个span元素

关于浏览器内核：各浏览器内核的兼容写法(历史遗留问题)
标准未确定时每个浏览器使用了自己的私有前缀与未来的标准进行区分，标准确立后开始不需要加前缀，但是因为仍然会有用户使用没有统一标准老浏览器，所以按需要填加前缀进行兼容
-ms代表【ie】内核识别码
-moz代表火狐【firefox】内核识别码
-webkit代表谷歌【chrome】/苹果【safari】内核识别码
-o代表欧朋【opera】内核识别码

关于过渡效果(动画)
transition-property 规定设置过渡效果的 CSS 属性的名称。
-duration 规定完成过渡效果需要多少秒或毫秒。
-timing-function 规定过度效果的速度曲线。
-delay 定义过渡效果开始时间。
速度曲线：
Linear 匀速开始至结束的过渡效果 (匀速)
Ease 慢速开始，中间变快，慢速结束的过渡效果(中间快，两头慢)
ease-in 以慢速开始的过渡效果 (开始的时候慢，之后快)
ease-out 以慢速结束的过渡效果(开始时快，结束时候减慢)
ease-in-out 以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 自定义速度曲线

组合写法：
鼠标移入后伪类的背景颜色用0.15秒平滑的速度曲线进行绑定，多个属性把
;号改成,号在后面添加

animation: 和@keyframes

规定动画的名称{
规定动画的开始{要改变的属性:初始值}
规定动画的结束{要改变的属性:上限值}
}
当满足条件变更样式，例如元素宽度小于500像素某个类的label标签
隐藏，所有div的背景颜色变成红色
@media only screen and (max-width: 500px) {
.Images label{
display: none;
}
div{
background:red;
}
}

一些比较少用的属性：
text-shadow: 1px 1px 1px rgba(0,0,0,0.1); 设置字体的阴影 左右，上下，清晰度(非透明)，颜色
content:‘文本’; 对指定的元素绑定文本，文件则content:url(…/Images/1.jpg);
transform: scale(i); 元素缩放，默认为1
background-size: 400% 100%; 规定背景图像尺寸：宽 高；
background-position: 0% 0px; 设置背景图像在其元素内的位置：左右，上下

这些都是我在精通CSS的时候所发现或用到的，那时才发现仅仅一种语言都有很多没有学到的东西，同样的效果原来可以用CSS完成而并不是一定要JavaScript，在设计网页时可以根据情况选择CSS完成样式或动画可以减少代码量。