CSS3学习笔记

 

 

1 2D转换：transform 变换

  1.1 translate（x,y）

    1.1.1 移动元素，x为正表示在x轴向右移动，y为正表示在y轴向下移动

  1.2 rotate

    1.2.1 旋转角度，单位（deg）

  1.3 scale

    1.3.1 缩放大小，单位（x）整体扩大x倍

    1.3.2 scale（x,y）,width扩大x倍，height扩大y倍

  1.4 skew

    1.4.1 skew(x,y) 倾斜角度

  1.5 3D转换：rotateX(),rotateY()

2 transtion 过度

  2.1 设定某属性动画执行的时间

  2.2 transtion-delay 延迟执行的时间

3 animation 动画

  3.1 animation｛动画名称 动画时间 infinite｝

  3.2 infinite 指的是永不停止的运行

  3.3 @keyframes

4 columns 多列布局

  4.1 column-count

  4.2 column-gap

  4.3 column-rule

    4.3.1 列之间的线的样式 如：5px outset red

5 新增属性选择器

  5.1 [id*=mydiv] 选择id中包含mydiv字符的元素

  5.2 [id^=mydiv] 选择id名中前面包含mydiv字符的元素

  5.3 [id￥=mydiv] 选择id名中后面包含mydiv字符的元素

6 结构性伪类选择器

  6.1 first-line 选择某个元素内容中的第一行内容

  6.2 first-letter 选择某个元素内容中的第一个字母

  6.3 before 修改某个元素内容前面的内容

  6.4 after 修改某个元素内容后面的内容

7 选择器详解（一）

  7.1 ：root 选择器，选择整个页面最底部的元素，即选择html

  7.2 ：not 选择器 排除某些元素， 如 div *：not（p）

  7.3 ：empty 选择器 当内容为空的时候该样式起作用

  7.4 ：target 选择器 当触发a链接中target时，为其添加样式

8 选择器详解（二）

  8.1 first-child 第一个子元素

  8.2 last-child 最后一个子元素

  8.3 nth-child 如：li:nth-child(3) 选择li中第三个子元素

  8.4 nth-last-child 如：li:nth-last-child(3) 选择li中倒数第三个子元素

  8.5 nth-child 如：li:nth-child(odd) 选择li中序号为奇数的子元素

  8.6 nth-last-child 如：li:nth-last-child(odd) 选择li中序号为奇数的子元素（从后向前数）

  8.7 nth-child 如：li:nth-child(even) 选择li中序号为偶数的子元素

  8.8 nth-last-child 如：li:nth-last-child(even) 选择li中序号为偶数的子元素（从后向前数）

  8.9 ：nth-of-type(odd) 选择同类型中的奇数项

  8.10 ：nth-of-type(even) 选择同类型中的偶数项

  8.11 ：only-child 选择只有一个子元素的子元素

9 选择器详解（三）

  9.1 ：hover 如 input[type="text"]:hover

  9.2 ：focus 获取焦点是显示，点击

  9.3 ：active 鼠标按下时显示

  9.4 ：checked 当选框被选择后显示

  9.5 ：enabled 选择可用的

  9.6 ：disabled 选择不可用的

  9.7 通用兄弟元素选择器 ~ 选择同一个父级下的所有兄弟选择器

10 文字样式

  10.1 text-shadow 文字阴影

  10.2 使用服务器端字体

    10.2.1 <style type="text/css"> @font-face{ font-family: webfont; /*//字体名自定义*/ src:local("webfont"),url("字体位置")format("truetype"); } div{ font-family: webfont; } </style>

11 盒子相关样式

  11.1 block，inline，inline-block，inline-table，list-item

  11.2 inline-block 表示具有inline的属性，并且有block的属性

  11.3 inline-table 表示表格具有inline的属性，并且有block的属性

  11.4 list-item 表示其他元素具有list的属性，如可以添加list-style-type设置序号

  11.5 overflow:hidden 超出隐藏 scroll超出滚动 auto 自动

  11.6 overflow-x overflow-y 可以针对x,y方向进行设置

  11.7 子主题 7

12 white-space

  12.1 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。

13 background 新增属性

  13.1 background-clip background-clip:border-box 给边框内边距内容都添加背景样式 background-clip:padding-box 给内边距内容都添加背景样式，border没有样式 background-clip:content-box 给内容都添加背景样式，border，padding都没有样式

14 border-radius 设置圆角

15 border-img 给边框添加背景图片

16 动画功能

  16.1 transitions transtion:width属性 3s过度时间 linear 线性过度形式

  16.2 animations

  16.3 实现动画的的方式

    16.3.1 linear 匀速变化 ease-in 先慢后快 ease-out 先快后慢 ease 慢 快 慢 ease-in-out 慢 快 慢

17 分支主题 17

  17.1 子主题 1