HTML5和CSS3提高

属性	值	说明
required	required	有该属性则内容不能为空
placehoder	提示文本	表单的提示信息
autofocus	autofocus	自动聚焦
autocomplete	off/on	浏览器基于用户之前输入过的值显示出填写的选项，默认打开
multiple	multiple	可以多选文件提交

可以通过一下方式修改placeholder内字体颜色

input::placeholder{
    color: red;
}

二、CSS新特性

1.新增选择器

1.1.属性选择器

权重为10

语法：

（1）可以根据元素特定的属性选择元素，这样就可以不用借助类或者id选择器。

E[att]：代表是E，且具有att属性的

（2）可以选择属性=某些值的某些元素（重点）

E[att="val"]

（3）可以选择属性值开头的某些元素

E[att^="val"]

（4）可以选择以属性值结尾的某些元素

E[att$="val"]

（5）可以选择含有属性值的元素、

E[att* =""val]

1.2.结构伪类

根据文档结构来选择元素，常用于根据父级选择器里面的子元素。

（1）E:first-child：匹配父元素中的第一个子元素E。

E:nth-child(n)：选择父元素中的一个或多个。n可以是数字，关键字（even,odd），公式（括号内必须是n，从0开始计算，每次加1）

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15
n+5	从第五个开始
-n+5	前5个

（2）E:nth-of-type(n)：指定类型E的第一个

1.3.伪元素选择器

after和before必须具有content属性。均属于行内元素。权重为1。after在父元素内容后面插入值，before在父元素前面插入值。

语法：

element：：before{}

（1）伪元素字体图标

可以直接写入content中。

（2）遮罩层

（3）清除浮动

1.4.盒子模型

（1）box-sizing:content-box：盒子大小为width+padding+border（默认）

（2）box-sizing:border-box：盒子大小为width

1.5、图片模糊处理

语法：

filter: 函数();

例如：filter: blur(Spx); 模糊处理，值越大越模糊。

1.6.cal函数

cal函数可以在声明CSS进行数值运算。

如：width:calc(100%-80px); 括号里可以用四则运算。

1.7.CSS过度（重点）

从一个状态渐渐过渡到另一个状态。经常和:hover一起使用。

语法：

transition：要过度的属性花费时间运动曲线何时开始

过度属性：宽度高度、内外边距，背景颜色都可以，多个属性可以用逗号隔开，如果所有属性都要变化过度，写all。

花费时间：单位是秒（必须写单位）。

运动曲线：默认是ease可以省略。

何时开始：单位是秒，可以设置延迟触发时间，默认是0。

沐木木木木L

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5和CSS3提高

一、HTML5IE9以上1.常用的新增的语义化标签（1）<header>：头部标签（2）<nav>：导航标签（3）<article>：内容标签（4）<section>：定义文档的某个区域（5）<aside>：侧边栏标签（6）<footer>：尾部标签在IE9中，要把这些转换为块级元素。2.多媒体标签2.1.视频 <video>支持mp4，WebM，Ogg四种格式的文件。尽量用M
复制链接

扫一扫