作者:oschina 来源:开源中国 时间:2018-04-16 21:47:19 我要评论

前言

本篇博客看起来可能会比较枯燥,但是是我纯手打的,转载请注明啊。。。因为全是知识点的总结,也可以当做使用时查询的文档。

css3选择器

(图片来自w3school)

其中,有几个选择方式,我看了好几遍都没有明白到底啥意思,后来找到一个比较通俗的解释,加上自己的实验,得出以下解释:

:first-of-type p:first-of-type 选择每个p元素是其父元素的第一个(比如一个div中有三个p元素,这个选择方式会选中第一个p)

:last-of-type p:lat-of-type 选择每个p元素是其父元素的最后一个(比如一个div中有三个p元素,这个选择方式会选中最后一个p)

:only-of-type p:only-of-type 选择每个p元素是其父元素的唯一元素(比如一个div中有三个p元素,另一个div中有一个p元素,这个选择方式会选中那个只有一个p元素的div元素中的p)

css3文本

@font-face特性

在css3出现之前,必须使用用户计算机上已安装的字体,有了css3,可以使用想使用的字体。

两种情况:

1、客户端已经安装了字体。


lt;p gt; lt;font face="arial" gt;我是已经安装在客户端的字体显示的 lt;/font gt; lt;/p gt;

lt;p gt; lt;font style="font-family: arial" gt;我是已经安装在客户端的字体显示的 lt;/font gt; lt;/p gt;

以上两种写法表达的意义相同。

2、不确定客户端有没有安装某些特殊字体,通过从服务端下载字体来达到显示的效果。

@font-face {
font-family: definefont;
src:url(BORDERW0.eot);
}

可以看到,在里面声明了字体的名称,和安装的路径。

再来使用就行了:

p{font-family:definefont;}

css3文本效果

word-wrap

设值为break-word:根据元素的宽度对文本进行强制换行。

设值为nomal:只在允许换行的地方进行换行处理,不处理则会溢出元素。

text-overflow

设值为clip:对超出宽度的文字不进行处理,只是简单的裁剪。

设值为ellipsis:对超出宽度的文字显示省略号。

(这个效果的使用,一般会结合overflow和white-space来使用)

其他文本效果:

(图片转自w3school)

css3文字渲染

Text-fill-color: 文字内部填充颜色

Text-stroke-color: 文字边界填充颜色

Text-stroke-width: 文字边界宽度

css3文字阴影

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

属性值依次是:

水平阴影、垂直阴影、模糊距离、阴影的颜色

css3边框

边框圆角:

border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角

border-radius:左上角 右上角 右下角 左下角;

两个值:左上角与右下角 右上角与左下角

三个值:左上角 右上角与左下角 右下角

一个值:四个角

边框阴影:

border-shadow:水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影

边框图片:

border-image: source slice width outset repeat|initial|inherit;

(图片转自w3school)

css3颜色

颜色透明度:

rgba(200,200,200,0.7);

这里的a就代表不透明度,值越小,越透明

hsla(110,50%,50%,0.5);

H:

Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360

S:

Saturation(饱和度)。取值为:0.0% - 100.0%

L:

Lightness(亮度)。取值为:0.0% - 100.0%

A:

Alpha透明度。取值0~1之间。

css3背景

background-size

用于调整背景图片的大小

background-size: contain; 缩小图片以适合元素(维持像素长宽比)

background-size: cover; 扩展元素以填补元素(维持像素长宽比)

background-size: 100px 100px; 缩小图片至指定的大小 .

background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸 .

background-clip

通常情况背景图片都是覆盖整个元素,调整此属性可以调整背景从哪里开始显示。

background-clip: border-box; 背景从 border 开始显示 ;

background-clip: padding-box; 背景从 padding 开始显示 ;

background-clip: content-box; 背景显 content 区域开始显示 ;

background-clip: no-clip; 默认属性,等同于 border-box;

background-origin

用于确定背景的位置,通常与background-position联合使用

background-origin: border-box; 从 border. 开始计算 background-position;

background-origin: padding-box; 从 padding. 开始计算 background-position;

background-origin: content-box; 从 content. 开始计算 background-position;

background-break

在css3中允许一个元素在不同盒子中显示,这个属性就是控制背景在这些盒子中如何显示

background-break: continuous; 默认值。忽略盒之间的距离(也就是像元 素没有分成多个盒子,依然是一个整体一 样)

background-break: bounding-box; 把盒之间的距离计算在内;

background-break: each-box; 为每个盒子单独重绘背景。

多重背景

background:url('1.jpg),url('2.jpg') ;

背景图重叠放置,也可以给他们单独设置其他属性

css3反射效果

box-reflect:direction offset mask-box-image

这三个值分别是:

1、方向,规定反射在哪个方向,取值为above,below,left,right

2、偏移量,表示倒影与对象之间的距离,取值可以为正数、负数、百分数(百分比是根据图像大小确定)

3、遮罩图像,该图像会覆盖投影区域,如果没有这个参数,默认为0。他的取值为:

none:无遮罩图像。

使用绝对或相对地址指定遮罩图像。

使用线性渐变创建遮罩图像。

使用径向(放射性)渐变创建遮罩图像。

使用重复的线性渐变创建背遮罩像。

使用重复的径向(放射性)渐变创建遮罩图像。

css3渐变

线性渐变

基本语法

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

参数是方向与颜色值,其中,方向与颜色有多种设置方式,这个我觉得先从方向开始区分比较好

1、默认方向:从上至下(因此只需写起止的颜色即可)

2、to direction(to后面接的就是终点方向,那么起点方向就与他相反),比如:

banckground:linear-gradien(to right red blue);

即是从左至右

3、direction direction(两个方向值一般就是斜对角)比如:

banckground:linear-gradien(top right red blue);

即是从右上角到左下角的线性渐变

4、多颜色渐变

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

5、重复的渐变

background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变

基本语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

shape 参数定义了形状。它可以是值 circle ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

也可以这样

漫射光效果

backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

效果是这样,像一盏灯照射下来

尺寸大小


closest-side最近边
background: radial-gradient(closest-side circle,red , blue);
farthest-side 最远边
background: radial-gradient(farthest-side circle,red , blue);
closest-corner最近角
background: radial-gradient(closest-corner circle,red , blue);
farthest-corner最远角
background: radial-gradient(farthest-corner circle,red , blue);

颜色结点

background:radial-gradient(circle,red 50% ,blue 70%);
注意:此时的百分比,指的是圆心到元素最远端的距离(角度)

重复渐变

background: repeating-radial-gradient(red 0%,blue 10%,red 20%);

css3的转换

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

Internet Explorer 9 要求前缀 -ms- 版本.

2D转换

用于元素的位移,伸缩,旋转,倾斜

(转自csdn的博客)

位移

transform:translate(x,y),x为x轴(左边)移动距离,y轴(顶边)移动距离

还可以有translateX(n),translateY(n)(只移动x轴位置或y轴位置)

旋转

transform:rotate(ndeg),n为角度,正数为顺时针,负数为逆时针,旋转中心为图形的中心点

伸缩

transform:scale(x,y),x为宽度伸缩的倍数,y为高度伸缩的倍数,如果数值为大于1,就是拉伸,如果数值小于1,就是缩小。也可以是一个数字,这样的情况,一个数字代表宽和高。

同样可以有scaleX(n),scaleY(n)

倾斜

transform:skew(xdeg,ydeg)x为x轴倾斜的角度,y为y轴倾斜的角度,以左下角为倾斜中心。

同样可以有skewX(ndeg),skewY(ndeg)

矩阵

transform:matrix(n,n,n,n,n,n)

这个好难,在这里三言两语说不清,具体可以参考其他网友的文章链接点我

位置transform-origin

语法:transform-origin: x-axis y-axis;更改元素的位置。

但是使用此属性之前必须使用transform。

3D转换

方法与2D转换差不多,但是2d与3d的转换方式完全不同,具体的不同,敲代码来看吧。

3D转换也有位移,缩放,旋转,矩阵,只是多了一个z轴,方法就不一一举例了。

来看看3d转换与2d转换不同的部分。

(转自csdn博客)

perspective

透视视图:元素距视图的距离

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

这个属性只影响3d元素。

当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。

语法:perspective:n;n为数字,设置子元素距视图的距离。

转换风格transform-style

语法:transform-style: flat|preserve-3d;

但是使用此属性之前必须使用transform。

底部位置perspective-origin

语法:perspective-origin: x-axis y-axis;(默认值为50%,50%)

背面可见backface-visibility

语法:backface-visibility: visible|hidden;

如果在旋转时不希望看到该元素的背面,这个属性就有用。

css3过渡

属性

语法:transition:property duration timing-function delay;

property是需要应用过渡的属性,比如宽度,颜色等,transition-property:none | all | one property ;

duration是过渡持续的时间,以秒或者毫秒记,transition-duration:time

timing-function是过度效果的时间曲线,只能使用一个值,transition-timing-function: linear;值有如下这些

ease:平滑过渡(0--慢--快--慢),默认值
cubic-bezier(0.25,0.1,0.25,1)
linear:线性过渡(匀速) cubic-bezier(0,0,1,1)
ease-in:慢--快 cubic-bezier(0.42,0,1,1)
ease-out:快--慢 cubic-bezier(0,0,0.58,1)
ease-in-out:慢--快--慢
cubic-bezier(0.42,0,0.58,1) (贝塞尔曲线

delay是过渡延迟执行的时间,以毫秒或秒来记,比如值为1s,那么这个过度效果就延迟一秒才开始执行。

transition-delay: 2s;

两种写法

1、列举:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

2、缩写

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

css3动画

css3动画的出现,让css脱离了“静止”的概念,出现一些可以替代图片与flash的动画。

先来看看怎么使用:

先创建一个动画:

@keyframes关键帧:

两个属性,一个是关键帧,一个是需要变化的样式

1、关键帧

a,0%与100%,表示开始与结束时间也可以使用from与to来表示

b,使用百分数,10%,20%,50%,100%,并不是每一个时间点都需要进行设置,只需要设置关键帧就行了。

2、变化的样式,比如在动画开始时,颜色变为红色,结束时颜色变为绿色,即为from{color:red;}to{color:green}

应用动画

一个动画设置之后如果不应用到选择器上,就不会起作用。

animation有以下这些属性

(sorry,我截图写的,字有点小)

下面解释一下那些属性值没有给全的属性

animation-direction:normal , reverse , alternate , alternate-reverse ;

normal : 正常方向
reverse :反向运动
alternate : 先正常运动在反向运动,并持续交替运行, 需要配合循环属性使用
alternate-reverse : 先反向运动在正常运动,并持续交替运行, 需要配合循环属性使用

animation-play-state:paused | running ;

paused : 指定暂停动画
running : 默认值,制定正在运行的动画

复合写法:

animation : name duration timing-function delay interation-count direction play-state

css3多列

将文本内容设计成报纸那样多列的格式。

比如这样:

那么将一段文字分割成这么多列显示需要设置些什么属性呢?

(图片来自csdn博客)

css3框大小

为什么有些元素明明width和height设置为一样的,但显示出来就是不一样呢?

这就是因为

元素实际宽度=padding+border+width

元素实际高度=padding+border+height

因此,想要获取元素的实际宽高,需要将元素的内边距与边框加上。

方法就是设置box-sizing:border-box;

这个方法将元素的边框及内边距加在一起得到实际显示的宽高。

从结果上看,box-sizing为border-box效果更好,因此建议将元素设置这个属性。

css3弹性盒模型

当页面在不同的屏幕大小,不同设备类型时,确保元素有相应的布局方式。

查了很多资料还是没说清楚,仿佛是太麻烦了。不过我还是要一条条属性的列出来,才能明白。

举例

先说一个传统的三栏布局,要求中间的元素自适应屏幕大小,我们通常的做法就是设置三个元素,左右两边的设置固定宽度并固定定位,中间的元素宽度设置为100%;

如下所示:

使用弹性盒模型,只需要设置三个元素的父元素display:flex;左右两边子元素设置宽度,中间的子元素设置为flex:1;就不需要使用定位。

so,要使用flex容器,需要使用两层,外面一层叫作flex容器(flex container),他的子元素称为项目(flex item)

看一下flex基本布局概念:

分为水平主轴(main axis),垂直交叉轴(cross axis)

flex容器

属性

1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content

1、flex-direction

表示项目的排列方向

flex-direction: row | row-reverse | column | column-reverse;

2、flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

3、flex-flow

是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

4、justify-content

定义了项目在x轴上的对其方式

justify-content: flex-start | flex-end | center | space-between | space-around;

5、align-items

定义项目在交叉轴上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;

6、align-content

定义多根轴线对齐方式,如果只有一根轴线,此属性不起作用。

- flex-start:与交叉轴的起点对齐。

- flex-end:与交叉轴的终点对齐。

- center:与交叉轴的中点对齐。

- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

- stretch(默认值):轴线占满整个交叉轴。

flex item

上面是容器,现在写写项目

注意:设置flex之后,元素的float,clear,vertical-align都将失效。

flex项目有6个属性:

1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. align-self

1、order

order:integer;

用于定义项目的排列顺序,数值越小,越靠前,默认为0,可以调整项目在html中出现的顺序。

2、flex-grow

flex-grow:number;

定义了项目的放大比例,默认为0,即如果存在剩余空间,项目也不放大

如果一个项目的flex-grow属性为2,另一个项目为1,则前者占据的剩余空间将比后一项多一倍。

3、flex-shrink

flex-shrink:number;

定义了项目缩小比例,默认为1,即如果空间不足,改项目将缩小。

比如:

所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。

如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

4、flex-basis

定义了在分配多余空间之前,项目占据的主轴空间(main size)。类似于设置了width属性。

5、flex

是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

6、align-self

允许单个项目与其他项目有与其他项目不同的对齐方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

默认值为auto,表示继承父元素的align-items属性,如果没有父元素,就相当于stretch。

css3多媒体查询

多媒体类型

all:用于所有的多媒体类型设备

print:用于打印机

screen:用于智能手机,平板,电脑屏幕

speech:用于屏幕阅读器

使用方法

第一种:

lt;link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" gt;

比如:

lt;linkrel+"stylesheet" media="screen and (orientation: portrait)"href="portrait-screen.css"/ gt;

//设置了媒体类型和媒体特性(显示屏, 纵向放置)

lt;linkrel="stylesheet"media="not screen and (orientation: portrait)"href="portrait-screen.css"/ gt;

//非纵向放置的显示屏 lt;linkrel="stylesheet"media="screen and (orientation: portrait) and (min-width:800px)"href="800wide-portrait-screen.css"/ gt;//限制只有视口宽度大于800px像素的显示屏设备才能加载此文件

规定在某个设备时使用哪个样式表文件。

其中的

not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

all: 所有设备

第二种:

@media all and(min-width:800px){...}

@media后面接多媒体设备

比如:

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {...}

参考文章及资料

1、菜鸟教程

2、segmentfault博客

3、developerworks

4、css3弹性盒模型详解



文章转载自 开源中国社区 [http://www.oschina.net]

本文地址:https://my.oschina.net/u/3802541/blog/1796437

8阅读 | 0评论
你的回应
写文章

联系我们