css3 基础总结

流浪的我

浏览: 33963 次
性别:

最近访客更多访客>>

Baby真卑鄙

scholltop

玄霄夙玉

chen_l23

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

知识总结

Css3学习随笔

在编写css3样式时，不同的浏览器需要不同的前缀，为了更好的兼容还是需要：

前缀	浏览器
-webkit	Chrome和Safari
-moz	Firefox
-ms	IE
-o	opera

1 Css3边框

1）圆角 border-radius border-radius：4px；

2) 阴影 border-shadow box-shadow: 10px 10px 5px #888888;

3）边界图形 border-image -webkit-border-image:url(border.png) 30 30 round;

2 css3渐变

1）线性渐变（linear gradients）-向下/向上/向左/向右/对角方向

2）径向渐变（Radial Gradients）-由它们的中心定义

background: linear-gradient(direction, color-stop1, color-stop2, ...);

background: linear-gradient(to right, red , blue); /* 标准的语法从左到右渐变*/

background: linear-gradient(to bottom right, red , blue); /* 标准的语法对角渐变*/

3 css3文本效果

1）文本阴影 text-shadow属性适用于文本阴影

2） word-wrap 允许对长的不可分解单词进行分解并换到下一行

3）text-outline 规定文本的轮廓

4）text-overflow 规定文本溢出包含元素时发生的事件

Text-overflow ：clip 表示剪切

Text-overflow：ellipsis 表示显示省阅标记

4 css3过渡

Css3过渡是元素从一种样式逐渐改变为另一种效果

示例：

div

{

width:100px;

height:100px;

background:red;

transition:width 2s;/*过渡时间*/

-webkit-transition:width 2s; /* Safari */

}

div:hover

{

width:300px;/*鼠标事件*/

}

/*平行过渡*/

div:hover {

width: 200px;

height: 200px;

-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */

transform: rotate(180deg);

}

/*旋转过渡*/

Perspective 设置元素被查看的位置视图注：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

Transform 允许我们对元素进行旋转，缩放，移动，倾斜。（2D，3D转换）

Animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

5 background-origin元素背景图片的原始位置

Background-origin：border-box 边框

Padding-box 内边距

Content-box 内容区域

6 background-clip 将图片做适当的裁剪以适应实际需要：

Background-clip：no-clip 不裁剪

Border-box 边框

Padding-box 内边距

Content-box 内容区域

7 background-size 设置背景大小

Background-size：auto/<长度值>/百分比

Cover 填满整个容器

Contain 某一边贴紧容器边缘为止

结构性伪类选择器

1--root

:root”选择器等同于<html>元素，简单点说：

:root{background:orange}

html {background:orange;}

2--not

：not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素

示例：input：not（[ type=”submit”]）{border:1px solid red}

输入框除了submit边框都为红色。

3--empty

：empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

4--target

：target选择器为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

示例：

<h2><a href="#brand">Brand</a></h2>

<p>content for Brand</p>

</div>

<style>

#brand:target p{

background: orange;

color: #fff;

}

</style>

5--first-child

:first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

6--last-child

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。

7--nth-child

:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

示例：

Ul>li:nth-child(2n){background:red;} 注：将偶数行列表背景设置为红色。

8 --nth-last-child（n） n表示指定的第几个

:nth-last-child(n)选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

9 --first-of-type

:first-of-type选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

10 --nth-of-type（n）

：nth-of-type（n）选择器和nth-child（n）选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。

11 --last-of-type

：last-of-type选择器和：first-of-type选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

12 --nth-last-of-type（n）

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

13 --only-child

：only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

14 --only-of-type

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素.

15 --enabled

:disabled

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

16 --checked

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态.

17 --selection

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。

18 --read-only

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

19 --read-write

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

20 ::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

变形

1旋转rotate

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

-webkit-transform: rotate(20deg);

2 扭曲skew（）

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

-webkit-transform: skew(45deg);

3缩放scale（）

缩放 scale()函数 让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况

1. scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

-webkit-transform: scale(0.8 0.8)

4 位移 translate（）

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

transform:translate(50%,50%);

5 矩阵matrix（）

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。

6 原点 transform-origin

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

动画

1 过渡属性transition-property

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property: 指定过渡或动态模拟的CSS属性

transition-duration: 指定完成过渡所需的时间

transition-timing-function: 指定过渡函数

transition-delay: 指定开始出现的延迟时间

2 过渡所需时间 transition-duration

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

3 过渡函数transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

Ease 过渡速度由快到慢；

Linear 过渡速度恒速；

Ease-in 过渡速度越来越快称为渐显效果；

Ease-out 过渡速度越来越慢称为渐隐效果；

Ease-in-out 过渡速度先加速再减速称为渐显渐隐效果；

4 过渡延迟时间transition-delay

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

-webkit-transition: all .5s ease-in .2s;

关键帧

Keyframes

keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

示例：

@keyframes changecolor{

0%{

Background：red；

}

100%{

Background：green；

}

调用动画

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

CSS3的过度animation属性是一个复合属性，主要包括以下几个子属性：

animation-name 调动动画name跟keyframes 名一致

animation-duration: 指定完成过渡所需的时间

animation-timing-function: 指定过渡函数

animation-delay: 指定开始出现的延迟时间

animation-iteration-count 指定播放次数 infinite 无限次播放

animation-direction 动画播放方向 normal循环向前播放 alternate 偶数向前奇数反向播放

animation-play-state 播放状态running开始paused停止跟播放按钮一样

设置动画时间外属性

Animation-fill-mode属性定义在动画开始之前和开始之后发生的操作。主要具有四个属性：

None 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

Forwards 表示动画在结束后继续应用最后的关键帧的位置

Backwards 会在向元素应用动画样式时迅速应用动画的初始帧

Both 元素动画同时具有forwards和backwards效果

多列布局——colums

语法： columns：<column-width> || <column-count> column-width定义多列中没列的宽度 column-count定义多列中的列数

属性	值
Column-width	Auto默认一列的宽度length列数宽度
Column-count	Auto默认列数integer取值为大于0的整数
Column-gap	auto默认列与列之间的值为1em
Column-rule	列与列之间的边框宽度，样式，颜色column-rule-width，column-rule-style，column-rule-color
Column-span	跨列设置none默认的不跨列all跨越所有列

响应式布局<meta>：

学习只是开始，实践只是过程。

分享到：

document 对象 | HTML5 基础总结

2016-05-03 11:00
浏览 564
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论