CSS3知识点

CSS3学习

1、CSS3主要包括下面几个内容：选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面

2、新增属性选择器

结构性伪类：

E:nth-child(n) 表示E父元素中的第n个子节点，且类型为E

p:nth-child(odd){background:red}/*匹配奇数行*/

p:nth-child(even){background:red}/*匹配偶数行*/

p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个子节点，从后向前计算，且类型为E

E:nth-of-type(n) 表示E父元素中的第n个E子节点

E:nth-last-of-type(n)表示E父元素中的第n个E子节点，从后向前计算

E:empty 表示E元素中没有子节点。注意：包含文本节点

E:first-child 表示E父元素中的第一个子节点，且类型为E

E:last-child 表示E父元素中的最后一个子节点，且类型为E

E:first-of-type 表示E父元素中的第一个E子节点

E:last-of-type 表示E父元素中的最后一个E子节点

E:only-child表示E父元素中只有一个子节点。注意：不包含文本节点

E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：不包含文本节点

伪类：

E:target 表示当前的URL片段的元素类型（id被a的href链接并被点击），这个元素必须是E

<a href="#div1">div1</a>

<a href="#div2">div2</a>

<a href="#div3">div3</a>

<div id="div1">div1</div>

<div id="div2">div2</div>

<div id="div3">div3</div>

 

div:target{display:block}

E:disabled 表示不可点击（获取焦点）表单控件

E:enabled 表示可点击（获取焦点）的表单控件

E:checked 表示已选中的checkbox或radio

E:first-line 表示E元素中的第一行

E:first-letter 表示E元素中的第一个字符

E::selection表示E元素在用户选中文字时（moz）

E::before 生成内容在E元素前

E::after 生成内容在E元素后

E:not(s) 表示E元素不被匹配（s是标签名）

E~F表示E元素毗邻的F元素（之后的同级，类似于nextAll()）

3、新增颜色模式：Rgba:rgb的颜色范围在0-255 a:0-1

4、文字阴影：text-shadow:参数：x y blur color 横向偏移 纵向偏移 模糊距离 阴影颜色

阴影也可以叠加起来text-shadow:2px 2px 0px red, 2px 2px 4px green;

但是这样的话就会先渲染后面的 在渲染前面的

5、新增文本功能

direction:定义文字排列方式

text-overflow:定义文本省略方式 clip:无省略号 ellipsists:省略号

6、css3分栏布局

column-width 指定列的宽度

column-count 要分的列数

column-gap 列之间的距离

column-rule 栏目间隔线

7、css3响应式布局（meta）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

width ---- viewport的宽度（width=device-width意思是：宽度等于设备宽度）

initial-scale ----- 初始的缩放比例

minimum-scale ----- 允许用户缩放到的最小比例

maximum-scale ----- 允许用户缩放到的最大比例

user-scalable ----- 用户是否可以手动缩放

8、圆角：border-radius:参数各种长度单位都可以

9、边框背景：border-image:

10、线性渐变：格式：linear-gradient:

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

11、径向渐变：radial-gradient:参数：起点（left top right bottom） 形状（ellipse circle）大小（具体数值或者百分比）

12、多背景：用，分隔开

背景尺寸：baground-size:

background-origin:border-box:相对于border区域开始显示背景

padding-box:相对于padding区域开始显示区域（默认）

content-box:同上

background-clip:border-box:相对于border区域开始裁剪

同上

13、css3动画

transition过渡：

transition-property 要运动的样式 （all || [attr] || none）

transition-duration 规定完成过渡效果需要多少秒或毫秒

transition-delay 定义动画延迟多久开始

transition-timing-function 运动速度曲线

ease：（逐渐变慢）默认值

linear：（匀速）

ease-in：(加速)

ease-out：（减速）

ease-in-out：（先加速后减速）

cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

transition: property duration timing-function delay 简写方法

div{width:200px; height:200px; background-color:red;transition: all 500ms linear; }

2d变换：

transform:

• 点赞
• 收藏
• 分享
• 文章举报

XuQing_Y 发布了12 篇原创文章 · 获赞 5 · 访问量 533 私信 关注