html+CSS3提高篇

html+CSS3提高篇

HTML5

多媒体标签

• video标签

• audio标签

• input标签

新增语义化标签

• • 头部标签
• • 导航标签
• • 内容标签
• • 定义文档某个区域
• • 侧边栏标签
• • 尾部标签

CSS3

属性选择器

• 属性选择器可以根据元素特定的属性来选择元素。
• 类选择器，属性选择器，伪类选择器的权重都是10

结构伪类选择器

• 结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素

• nth-child（n）选择某个父元素的一个或多个特定的子元素

  • n可以是数字关键字和公式

  • n如果是数字，就是选择第n个子元素

  • n可以是关键字：even偶数，odd奇数

  • n可以是公式，常见的公式（如果n是公式，则从0开始计算，但是第0个元素或者超出元素范围会被忽略）

- nth-of-type(n)指定元素排序，再进行选择

伪元素选择器

• 伪元素选择器可以帮助我们利用CSS创建标签元素，而不需要HTML标签，从而简化html结构

• before和after创建一个元素，但是属于行内元素

• 新创建的这个元素在文档内是找不到的，所以称之为伪元素

• 语法：element::before{}

• before和after必须有content属性

• before在父元素前面创建元素，after在父元素内容的后面插入元素

• 伪元素选择器和标签选择器一样，权重为1

• 应用

  • 利用伪元素设置字体图标

CSS3盒子模型

• box-sizing

  • border-box
  • content-box

CSS3滤镜filter

• filter：blur(5px);

  • blur（）是模糊处理函数，数值越大，图片越模糊

计算盒子宽度calc()函数

• 括号内可以用±*/来进行计算

CSS3过渡

• transition

  • transition:要过渡的属性 花费时间 运动曲线 何时开始
  • 如果想要多个属性都变化，属性写all即可