CSS参考

一个免费的视觉引导CSS

通过实例学习cssreference是一个免费的视觉引导CSS。它采用了最流行的性质,并说明和动画举例说明他们。

GitHub

default align-content: stretch;

每条线将延伸到填充的剩余空间。

在这种情况下,容器为300px高。所有框都50px高,除了第二个谁是100px高的。

align-content: flex-start;

每行只能填补它的空间需要他们都将移向开始了Flexbox的容器的十字轴。

align-content: flex-end;

每行只能填补它的空间需要他们都将移向结束了Flexbox的容器的十字轴。

align-content: center;

每行只能填补它的空间需要他们都将移向中心的Flexbox的容器的十字轴。

align-content: space-between;

每行只能填补它的空间需要剩余的空间就会出现之间的线路。

align-content: space-around;

每行只能填补它的空间需要剩余的空间将平均分配周围的行:第一行之前,在两者之间,并在最后一个之后。

CSS对齐项

定义Flexbox的项目的方式,根据所述对准十字轴,线Flexbox的容器内。

align-items: flex-start;

该Flexbox的项目,于对准开始的的十字轴

缺省情况下,横轴是垂直的。这意味着Flexbox的项目将被对准垂直顶部

align-items: flex-end;

该Flexbox的项目,于对齐结束的的十字轴

缺省情况下,横轴是垂直的。这意味着Flexbox的项目将被对准垂直于_bottom。

align-items: center;

将Flexbox的项目,于对准中心的的十字轴

缺省情况下,横轴是垂直的。这意味着Flexbox的物品将被集中 垂直

align-items: baseline;

该Flexbox的项目,于对齐基线的的十字轴

缺省情况下,横轴是垂直的。这意味着Flexbox的项目将赞同以有基线他们的文字沿水平线对齐。

align-items: stretch;

该Flexbox的项目将在整个伸展十字轴

缺省情况下,横轴是垂直。这意味着Flexbox的项目将填补了整个垂直空间。

CSS对齐自

工作像align-items,但只适用于单一的,而不是Flexbox的项目,所有的人。

align-self: flex-start;

如果容器具有align-items: centeralign-items: flex-start,只有目标将在交叉轴的起点。

默认情况下,这意味着将对准垂直顶部

align-self: flex-end;

如果容器具有align-items: centeralign-items: flex-end,只有目标将在交叉轴的端部。

默认情况下,这意味着将对准垂直底部

align-self: center;

如果容器具有align-items: flex-startalign-items: center,只有目标将在交叉轴的中心。

默认情况下,这意味着它会被垂直居中

align-self: baseline;

如果容器具有align-items: centeralign-items: baseline,只有目标将在交叉轴的基线。

默认情况下,这意味着它将沿着文字的basline对齐。

align-self: stretch;

如果容器具有align-items: centeralign-items: stretch,只有目标将沿着整个横轴伸展。

CSS动漫延迟

定义动画有多久前等待的时间开始动画只能在其被推迟的第一迭代。

default animation-delay: 0s;

动画将等待零点几秒,因此马上开始。

animation-delay: 1.2s;

您可以使用十进制值中的关键字s

animation-delay: 2400ms;

您可以使用毫秒代替秒,关键字ms

animation-delay: -500ms;

您可以使用负值:动画将开始就好像它已经被打500ms

CSS动画方向

定义在哪个方向动画播放。

default animation-direction: normal;

动画播放向前当它到达末端,则在第一个关键帧开始。

animation-direction: reverse;

在播放动画时向后:开始在最后一个关键帧,在第一个关键帧结束。

animation-direction: alternate;

动画播放向前,再向下

  • 开始于第一个关键帧
  • 停在最后一个关键帧
  • 再次启动,但在最后的关键帧
  • 停在第一个关键帧

animation-direction: alternate-reverse;

动画播放向后,再向前

  • 开始于最后一个关键帧
  • 停在第一个关键帧
  • 再次启动,但在第一个关键帧
  • 停在最后一个关键帧

CSS动画持续时间

定义动画持续多久。

default animation-duration: 0s;

默认值是零秒:动画根本不会玩。

animation-duration: 1.2s;

您可以使用十进制值中的关键字s

animation-duration: 2400ms;

您可以使用毫秒代替秒,关键字ms

CSS动画填充模

定义发生了什么之前,动画开始和之后它结束。填充模式可以告诉浏览器如果动画的风格也应适用之外的动画。

default animation-fill-mode: none;

动画的风格并不影响默认的风格:动画开始之前,以及动画结束后返回到默认状态的元素设置为默认状态。

animation-fill-mode: forwards;

在动画结束时应用的最后一个样式保留之后

animation-fill-mode: backwards;

动画的风格就已经被应用之前实际开始动画。

animation-fill-mode: both;

该样式应用于之前之后播放动画。

CSS动画迭代计数

定义了动画多少次播放。

default animation-iteration-count: 1;

动画将只播放一次

animation-iteration-count: 2;

可以使用整数值来定义一个特定的次数的动画将播放量。

animation-iteration-count: infinite;

通过使用关键字infinite,动画将无限期播放。

CSS动画名

定义使用动画关键帧。

default animation-name: none;

如果没有指定动画的名称,没有动画播放。

animation-name: fadeIn;

如果指定了名,关键帧匹配该名称将被使用。

例如,fadeIn动画看起来像这样:

@keyframes淡入{
  从{
    不透明度:0;
  }
  至 {
    不透明度:1;
  }
}

animation-name: moveRight;

又如:moveRight动画:

@keyframes MoveRight的{
  从{
    变换:translateX(0);
  }
  至 {
    变换:translateX(100像素);
  }
}

CSS动画播放状态

如果定义动画播放与否。

default animation-play-state: running;

如果animation-durationanimation-name定义,动画将自动开始播放。

animation-play-state: paused;

动画设定停在了第一个关键帧

这比具有或者没有不同animation-durationanimation-name在所有。如果动画暂停,应用该样式是,的第一个关键帧,而不是默认的样式。

在这个例子中,平方是通过默认可见,但上的第一个关键帧fadeAndMove时,opacity被设定为0暂停时,动画将在这一个关键帧“卡壳”,因此将是无形的。

@keyframes fadeAndMove {
  从{
    不透明度:0;
    变换:translateX(0);
  }
  至 {
    不透明度:0;
    变换:translateX(100像素);
  }
}

CSS动画定时功能

如何定义之间的值开始结束的计算的动画。

default animation-timing-function: ease;

动画开始缓慢,在中间的加速,并在结束减慢。

animation-timing-function: ease-in;

动画开始慢慢地,逐渐加速,直到结束。

animation-timing-function: ease-out;

动画很快开始,并逐渐减速,直到结束。

animation-timing-function: ease-in-out;

ease,但更明显。

动画很快开始,并逐渐减速,直到结束。

animation-timing-function: linear;

动画有一个*恒定的速度

animation-timing-function: step-start;

动画跳跃瞬间最终状态

animation-timing-function: step-end;

动画停留在初始状态,直到最后,当它立即跳转到最终状态

animation-timing-function: steps(4, end);

通过使用steps()带有整数,你可以定义一个特定的数字达到年底前的步骤。元素的状态会不会逐渐变化的,而是跳跃的州在不同的时刻。

CSS动画

CSS背景附件

定义如何滚动页面时背景图像的行为。

default background-attachment: scroll;

背景图像会随着页面滚动。它也将定位并根据它施加到元件调整本身。

background-attachment: fixed;

背景图像将与页滚动,并且根据视口保持定位。它也将定位并根据视口调整本身。其结果是,背景图像将可能仅部分可见。

CSS背景素材

定义多远背景应该延长的元素中。

default background-clip: border-box;

背景整个单元甚至完全延伸,边界。

background-clip: padding-box;

背景仅延伸到边缘的边界的:它包括填充,但不是边框。

background-clip: content-box;

背景仅延伸到边缘的内容:它不包括填料,也没有边框。

CSS背景色

定义了元素的背景的颜色。

default background-color: transparent;

缺省情况下,背景颜色是透明,基本上意味着有没有背景颜色。

background-color: red;

您可以使用一个140+颜色名称

background-color: #05ffb0;

您可以使用十六进制颜色代码。

background-color: rgb(50, 115, 220);

您可以使用RGB()颜色代码:

  • 的第一个值是用于 red
  • 第二值是用于 green
  • 第三值是对 blue

他们每个人都可以有之间的值0255

background-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA()色码:

  • 前3个值是 rgb
  • 第四值是alpha信道,并且定义的颜色的不透明度

阿尔法值可以从零0(透明)一1(不透明)。

background-color: hsl(14, 100%, 53%);

您可以使用HSL()色码:

  • 的第一个值是hue可以去从0359
  • 所述第二值是saturation与去从0%100%
  • 第三值是对luminosity去从0%100%

background-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL()一个颜色代码:

  • 前3个值是 hsl
  • 第四值是alpha信道,并且定义的颜色的不透明度

阿尔法值可以从零0(透明)一1(不透明)。

CSS背景图片

定义为元素的背景的图像。

default background-image: none;

删除任何背景图像。

background-image: url(./images/jt.png);

使用在定义的图像URL路径。这个路径可以是相对于(对CSS文件)或绝对(象http://cssreference.io./images/jt.png)。

background-image: linear-gradient(red, blue);

可以定义一个线性梯度为背景图像。

您需要定义至少两种颜色第一个将在顶部,底部的第二个启动。

默认角度为to bottom(或180deg),这意味着该梯度是垂直,从顶部开始,在元件的底部结束。

background-image: linear-gradient(45deg, red, blue);

您可以指定一个角度,无论是在程度,或者用关键字。

当使用辈分,您指定的方向渐变,或当它结束。所以0deg指的顶级元素,如12:00的时钟。

在这个例子中,45deg装置2:30,或右上角。

background-image: radial-gradient(green, purple);

您可以定义一个径向渐变作为背景图像。

您需要定义至少两种颜色第一个将在中心,在边缘处的第二个。

background-image: radial-gradient(circle, green, purple);

您可以指定形状的径向渐变:圆形椭圆形(默认)。

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

您可以指定颜色停止使用百分比值。

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

您可以指定在那里的坡度应终止

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

喜欢跟background-position,你可以指定位置的梯度。

CSS背景出身

定义了背景图像的原点。

default background-origin: padding-box;

背景图像开始在边缘的边界:内的空白,但没有边界。

background-origin: border-box;

背景图像开始边界。

background-origin: content-box;

背景图象仅开始于边缘内容:它不包括填料,也没有边框。

CSS背景位置

定义了背景图像的位置。

default background-position: 0% 0%;

背景图像将被定位在0%上的水平轴和0%在垂直轴上,这意味着该元素的左上角。

background-position: bottom right;

您可以使用组合位置的关键字centertopbottomleftright

background-position: center center;

背景图像将被定位在该元件的中心。

CSS背景重复

定义背景图片如何重演整个元素的背景,从后台位置开始。

default background-repeat: repeat;

背景图像都将重演水平垂直方向

background-repeat: repeat-x;

背景图像只会重演水平

background-repeat: repeat-y;

背景图像只会重演垂直

background-repeat: no-repeat;

背景图像将只出现一次

CSS背景大小

定义了背景图像的大小。

default background-size: auto auto;

背景图像将保持其原始大小。

例如,在此背景图像是960像素由640像素大。其纵横比是3 2,它比它的容器(它是150像素高),从而,可以更大的剪切

background-size: 120px 80px;

您可以指定一个尺寸像素

  • 的第一个值是水平尺寸
  • 第二个是垂直尺寸

background-size: 100% 50%;

您可以使用百分比值,以及。小心,这可能改变长宽比的背景图像,并导致意想不到的结果。

background-size: contain;

关键字contain将调整的背景图像,以确保它仍然是完全可见

background-size: cover;

关键字cover将调整的背景图像,以确保该元件被完全覆盖

CSS背景

CSS下边框颜色

border-color,但对于底部边框而已。

border-bottom-color: transparent;

应用一个透明色的底边框。底边框仍然会占用空间的定义border-width值。

border-bottom-color: red;

您可以使用一个140+颜色名称

border-bottom-color: #05ffb0;

您可以使用十六进制颜色代码rgb()rgba()hsl()hsla()...

CSS边框左下角半径

定义半径的左下角。

default border-bottom-left-radius: 0;

删除任何边界半径。

border-bottom-left-radius: 20px;

您可以使用像素值。

border-bottom-left-radius: 50%;

您可以使用百分比值。在本实施例中,半径开始中途的底部边界,并在中途结束边框。

border-bottom-left-radius: 20px 50%;

如果设置两个值,第一个是对底部边框,第二个用于边框。

CSS边框右下角半径

定义半径右下角的。

default border-bottom-right-radius: 0;

删除任何边界半径。

border-bottom-right-radius: 20px;

您可以使用像素值。

border-bottom-right-radius: 50%;

您可以使用百分比值。在本实施例中,半径开始中途的底部边界,并在中途结束右边界。

border-bottom-right-radius: 20px 50%;

如果设置两个值,第一个是对底部边框,第二个为正确的边界。

CSS下边框风格

border-style,但对于底部边框而已。

default border-bottom-style: none;

删除底部边框。

border-bottom-style: dotted;

打开底部边界进入点的序列。

border-bottom-style: dashed;

打开底边框为虚线序列。

border-bottom-style: solid;

打开底边框为实线。

border-bottom-style: double;

拆分底边框为两行。

border-bottom-style: groove;

设置一个插图风格的底部边框。

CSS下边框宽度

border-width,但对于底部边框而已。

default border-bottom-width: 0;

删除底部边框。

border-bottom-width: 4px;

您可以使用像素值。

CSS边框底部

border-bottom: 4px dotted red;

顺序是非常重要的:

  • 宽度
  • 样式
  • 颜色

border-bottom: 2px solid;

只有颜色可选如果你忽略它,应用颜色将是颜色的文本

CSS边界崩溃

定义是否表格边框应该分开或折叠。

default border-collapse: separate;

每个表单元格将显示它自己的边界。

在本实施例中,每个小区具有border-width4像素其结果是,之间的边界2细胞将8像素

border-collapse: collapse;

相邻的表格单元格将合并它们的边界在一起。

出现的细胞首先在代码将“赢”:它的边界会掩盖那些下面的单元格。

CSS边框颜色

定义元素的边框的颜色。

default border-color: transparent;

应用一个透明色边框。边框仍然会占用空间的定义border-width值。

border-color: red;

您可以使用一个140+颜色名称

border-color: #05ffb0;

您可以使用十六进制颜色代码。

border-color: rgb(50, 115, 220);

您可以使用RGB()颜色代码:

  • 的第一个值是用于 red
  • 第二值是用于 green
  • 第三值是对 blue

他们每个人都可以有之间的值0255

border-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA()色码:

  • 前3个值是 rgb
  • 第四值是alpha信道,并且定义的颜色的不透明度

阿尔法值可以从零0(透明)一1(不透明)。

border-color: hsl(14, 100%, 53%);

您可以使用HSL()色码:

  • 的第一个值是hue可以去从0359
  • 所述第二值是saturation与去从0%100%
  • 第三值是对luminosity去从0%100%

border-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL()一个颜色代码:

  • 前3个值是 hsl
  • 第四值是alpha信道,并且定义的颜色的不透明度

阿尔法值可以从零0(透明)一1(不透明)。

CSS左边框的颜色

border-color,但对于边框仅。

border-left-color: transparent;

施加透明颜色的左边界。左边框将仍占用空间的定义border-width值。

border-left-color: red;

您可以使用一个140+颜色名称

border-left-color: #05ffb0;

您可以使用十六进制颜色代码rgb()rgba()hsl()hsla()...

CSS左边框风格

border-style,但对于边框仅。

default border-left-style: none;

移除左边框。

border-left-style: dotted;

变为左边界成的点的序列。

border-left-style: dashed;

打开左边框为虚线序列。

border-left-style: solid;

变为左边界成实线。

border-left-style: double;

拆分左边框为两行。

border-left-style: groove;

设置一个插图风格左边框。

CSS左边框宽度

border-width,但对于边框仅。

default border-left-width: 0;

移除左边框。

border-left-width: 4px;

您可以使用像素值。

CSS左边框

border-left: 4px dotted red;

顺序是非常重要的:

  • 宽度
  • 样式
  • 颜色

border-left: 2px solid;

只有颜色可选如果你忽略它,应用颜色将是颜色的文本

CSS边界半径

定义半径元素的角落。

default border-radius: 0;

删除任何边界半径。

border-radius: 20px;

您可以使用像素值。

border-radius: 50%;

您可以使用百分比值。在本实施例中,半径通过每个边界半途开始。

border-radius: 20px 50%;

如果设置两个值,第一个是对于顶部底部边界,第二个为所述边缘。

CSS右边框的颜色

border-color,但是对于边界只。

border-right-color: transparent;

应用一个透明的颜色右边框。右边框仍然会占用空间的定义border-width值。

border-right-color: red;

您可以使用一个140+颜色名称

border-right-color: #05ffb0;

您可以使用十六进制颜色代码rgb()rgba()hsl()hsla()...

CSS右边框风格

border-style,但是对于边界只。

default border-right-style: none;

删除右边框。

border-right-style: dotted;

变为右侧边界进入点的序列。

border-right-style: dashed;

打开右边框分为划线的序列。

border-right-style: solid;

变为右边界成实线。

border-right-style: double;

拆分右边框为两行。

border-right-style: groove;

设置一个插图风格的右边框。

CSS右边框的宽度

border-width,但是对于边界只。

default border-right-width: 0;

删除右边框。

border-right-width: 4px;

您可以使用像素值。

CSS右边框

border-right: 4px dotted red;

顺序是非常重要的:

  • 宽度
  • 样式
  • 颜色

border-right: 2px solid;

只有颜色可选如果你忽略它,应用颜色将是颜色的文本

CSS边框样式

定义元素边框的风格。

default border-style: none;

移除元素的边界。

border-style: dotted;

变成边界进入点的序列。

border-style: dashed;

打开边界进入短线的序列。

border-style: solid;

打开边界进入实线。

border-style: double;

拆分边界进入两行。

border-style: groove;

设置一个插图风格的边界。

CSS边框顶部的颜色

border-color,但对于顶部边框而已。

border-top-color: transparent;

应用一个透明的颜色上边框。上边框仍将占用空间的定义border-width值。

border-top-color: red;

您可以使用一个140+颜色名称

border-top-color: #05ffb0;

您可以使用十六进制颜色代码rgb()rgba()hsl()hsla()...

CSS边框左上角的半径

定义半径左上角的。

default border-top-left-radius: 0;

删除任何边界半径。

border-top-left-radius: 20px;

您可以使用像素值。

border-top-left-radius: 50%;

您可以使用百分比值。在本实施例中,半径开始中途的顶部边界,并在中途结束边框。

border-top-left-radius: 20px 50%;

如果设置两个值,第一个是在顶部边界,第二个为边框。

CSS边框右上角半径

定义半径右上角的。

default border-top-right-radius: 0;

删除任何边界半径。

border-top-right-radius: 20px;

您可以使用像素值。

border-top-right-radius: 50%;

您可以使用百分比值。在本实施例中,半径开始中途的顶部边界,并在中途结束右边界。

border-top-right-radius: 20px 50%;

如果设置两个值,第一个是在顶部边界,第二个为右边界。

CSS边框顶式

border-style,但对于顶部边框而已。

default border-top-style: none;

删除顶部边框。

border-top-style: dotted;

接通顶部边界进入点的序列。

border-top-style: dashed;

打开上边框分为划线的序列。

border-top-style: solid;

打开顶部边框变成了实线。

border-top-style: double;

拆分上边框为两行。

border-top-style: groove;

设置一个插图风格上边框。

CSS边框顶部宽度

border-width,但对于顶部边框而已。

default border-top-width: 0;

删除顶部边框。

border-top-width: 4px;

您可以使用像素值。

CSS边框顶部

border-top: 4px dotted red;

顺序是非常重要的:

  • 宽度
  • 样式
  • 颜色

border-top: 2px solid;

只有颜色可选如果你忽略它,应用颜色将是颜色的文本

CSS边框宽度

定义元素的边框的宽度。

border-width: 1px;

定义的宽度边框为1px。

border-width: 2px 0;

限定在顶部和底部边界为2px,左,右为0。

CSS边界

为速记属性border-width border-styleborder-color

border: 4px dotted red;

顺序是非常重要的:

  • 宽度
  • 样式
  • 颜色

border: 2px solid;

只有颜色可选如果你忽略它,应用颜色将是颜色的文本

CSS底部

定义根据其在所述元件的位置底部边缘。

default bottom: auto;

该元件将保持在其自然位置。

bottom: 20px;

如果该元素是在适当的位置相对,所述元件将移动向上通过由限定的量值。

bottom: 0;

如果该元素处于位置绝对的,元素本身会从位置底部的首先定位的祖先

CSS箱阴影

定义元素的影子。

default box-shadow: none;

删除被应用到任何元素的box-shadow。

box-shadow: 2px 6px;

你至少需要两个值

  • 第一种是在水平方向偏移
  • 第二个是垂直偏移

阴影颜色将从文本颜色继承。

box-shadow: 2px 6px red;

您可以定义一个颜色作为最后的值。

正如color,你可以使用颜色名称,十六进制,RGB,HSL ...

box-shadow: 2px 4px 10px red;

可选的第三个值定义模糊的影子。

颜色会跨越10px的在这个例子中被扩散,从不透明到透明的。

box-shadow: 2px 4px 10px 4px red;

可选的第四个值定义蔓延的阴影。

传播定义了阴影多少应该成长:它增强了阴影。

CSS箱上浆

定义如何在元件的宽度和高度被计算:它们是否包括填充边界或没有。

default box-sizing: content-box;

宽度高度的元件的仅适用于内容的元素。

例如,该元件具有

  • border-width: 12px
  • padding: 30px
  • width: 200px

全宽为24px的+ 60像素+ 200像素= 284px

的内容具有定义的宽度。盒子可容纳这些尺寸。

box-sizing: border-box;

宽度高度的元件的应用到元件的所有部分:内容,该填充边界

例如,该元件具有

  • border-width: 12px
  • padding: 30px
  • width: 200px

全宽200像素,无论是什么。

这个盒子有定义的宽度。内容可容纳这些尺寸,并最终被200像素- 30PX - 24px的= 146px

CSS清

前面所有的浮动元素后移动元素。

clear: none;

明确与有兄弟姐妹一起使用时属性仅有关浮点值。

该元素将坐在一起,任何浮动元素之前它。

clear: left;

清除的元素会移动后,它前面的左侧浮动元素,但仍将沿着右浮动元素。

clear: right;

清除的元素会移动后,它前面的任何权利浮动元素,但仍将沿着左浮动元素。

clear: both;

清除的元素会移动后,它前面的浮动元素。这包括悬空,右浮动元素。

CSS彩

定义的颜色文本

color: transparent;

施加透明颜色的文本。文本将仍然占用空间,它应该。

color: red;

您可以使用一个140+颜色名称

color: #05ffb0;

您可以使用十六进制颜色代码。

color: rgb(50, 115, 220);

您可以使用RGB()颜色代码:

  • 的第一个值是用于 red
  • 第二值是用于 green
  • 第三值是对 blue

他们每个人都可以有之间的值0255

color: rgba(0, 0, 0, 0.5);

您可以使用RGBA()色码:

  • 前3个值是 rgb
  • 第四值是alpha信道,并且定义的颜色的不透明度

阿尔法值可以从零0(透明)一1(不透明)。

color: hsl(14, 100%, 53%);

您可以使用HSL()色码:

  • 的第一个值是hue可以去从0359
  • 所述第二值是saturation与去从0%100%
  • 第三值是对luminosity去从0%100%

color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL()一个颜色代码:

  • 前3个值是 hsl
  • 第四值是alpha信道,并且定义的颜色的不透明度

阿尔法值可以从零0(透明)一1(不透明)。

CSS列数

限定了元件的列数。

default column-count: auto;

从元素删除任何列(除非另一个column-属性设置)。

column-count: 3;

当使用整数值,该元件将在所定义的列数分发其子元素。

CSS列隙

限定了元件的各列之间的间隙。

default column-gap: normal;

列之间的间隙设置为浏览器的默认值,这通常是1em的

column-gap: 2px;

您可以使用像素值的差距。

注意,间隙只出现之间的列,而不是在边缘的列的外部侧面。

CSS列宽

限定了元件的列数。

default column-width: auto;

该元素将不会派发其子元素为列,unlesse一个column-count值定义。在这种情况下,列的宽度将从列计数可以infered。

column-width: 10px;

您可以使用像素值的列宽。

列数将是分发横跨元件的所有内容所需的最低限度。

CSS内容

定义的文本内容:before:after伪元素。

default content: normal;

没有内容被添加到元件。

content: "Foo bar";

考虑到这个HTML元素:

<p类=“元素”>
  你好,世界
</ P>

而这个CSS:

.element:前{
  内容:“富巴”;
}

文本内容将被前置到元素的内容。

请注意如何最终结果结合从CSS的HTML和文字文本。

content: url(./images/jt.png);

您可以插入图像通过使用url()功能。

content: attr(data-something);

考虑到这个HTML元素:

<p类=“元素”数据的东西=“cssreference”>
  你好,世界
</ P>

而这个CSS:

.element:前{
  内容:ATTR(数据的东西);
}

该元素将抓住从HTML文本内容属性

CSS光标

徘徊在元素时,设置鼠标光标。

cursor: default;

设置光标到元素的默认值。对于一个链接,这将是一个指针。对于文本这将是一个选择光标。

cursor: auto;

汽车

cursor: pointer;

指针

cursor: move;

移动

cursor: crosshair;

十字线

cursor: text;

文本

cursor: wait;

等待

cursor: helpe-resize;

helpe调整大小

cursor: ne-resize;

NE-调整大小

cursor: nw-resize;

NW-调整大小

cursor: n-resize;

正调整大小

cursor: se-resize;

SE-调整大小

cursor: sw-resize;

SW-调整大小

cursor: s-resize;

S-调整大小

cursor: w-resize;

W-调整大小

CSS显示

设置元素的显示行为。

display: none;

该元素被完全除去,就好像它在第一位置的HTML代码不是。

display: inline;

元素变成一个内联元素:它的行为就像纯文本。

任何heightwidth施加将没有效果。

display: block;

元素变成一个元素:它开始在新的一行,并占据了整个宽度。

display: inline-block;

元素都共享一个属性内联元素:

  • 内联,因为该元素的行为类似于简单的文字,并插入本身的文本块
  • ,因为你可以申请heightwidth

例如,这个元素有:

。元件{
  高度:3EM;
  宽度:60像素;
}

display: list-item;

元素就像一个列表项<li>唯一的区别是一个列表项具有符号点

display: table;

元素就像一个<table>

其内容和子元素表现得像表格单元格。

display: table-cell;

该元素的行为像一个表格单元格<td><th>

其内容和子元素表现得像表格单元格。

display: table-row;

元素就像一个表行<tr>

其内容和子元素表现得像表格单元格。

display: flex;

元素变成一个Flexbox的容器。就其本身而言,它就像一个块元素。

其子元素会变成Flexbox的项目

display: inline-flex;

元素都共享一个属性内联Flexbox的元素:

  • 内联,因为该元素的行为类似于简单的文字,并插入本身的文本块
  • Flexbox的,因为它的子元素将化为Flexbox的项目

例如,这个元素有:

。元件{
  高度:3EM;
  宽度:120像素;
}

CSS柔性基础

定义Flexbox的项目的初始大小。

default flex-basis: auto;

元件将根据它的内容被自动调整大小,或任何heightwidth值,如果它们被定义。

flex-basis: 80px;

您可以定义像素(R)EM值。该元素将包装的内容,以避免任何溢出。

CSS柔性方向

定义Flexbox的项目是如何一个Flexbox的容器内订购。

default flex-direction: row;

的Flexbox的项目被订购的相同方式与文本方向,沿主轴线

flex-direction: row-reverse;

的Flexbox的项目被订购的相反方式与文本方向,沿主轴

flex-direction: column;

的Flexbox的项目被订购的相同方式与文本方向,沿横轴

flex-direction: column-reverse;

该项目Flexbox的是有序的相反的方式与文本方向,沿横轴

CSS柔性流动

为速记属性flex-directionflex-flow

CSS柔性成长

定义Flexbox的项目应该有多少增长,如果有可用空间。

default flex-grow: 0;

元素会不会,如果有可用空间成长。它将只使用所需的空间。

flex-grow: 1;

该元素将增加由一个因素1这将填补剩余的空间,如果没有其他Flexbox的项目都有一个flex-grow值。

flex-grow: 2;

由于柔性成长值是相对的,其行为取决于Flexbox的项目的价值兄弟姐妹

在本例中,剩余空间被分为3

  • 1第三转到绿色项目
  • 2三分之二的进入粉红项目
  • 没有去的黄色物品,谁保留其初始宽度

CSS弹性收缩

定义Flexbox的项目应该有多少缩水,如果有没有足够的可用空间。

default flex-shrink: 1;

如果有没有足够的可用空间中的容器的主轴线,所述元件将收缩通过的系数1,和将包装的内容。

flex-shrink: 0;

该元素将不会缩水:将保留它需要的宽度,没有包装的内容。它的兄弟姐妹将萎缩给空间目标元素。

由于目标元素不会换它的内容,还有对Flexbox的容器的内容的机会溢出

flex-shrink: 2;

由于柔性收缩值是相对的,其行为取决于Flexbox的项目的价值兄弟姐妹

在本实施例中,绿色项目要填补的宽度的100%。它需要的空间是取自其两个同胞,并在划分4

  • 3宿舍是取自项目
  • 1季度取自项目

CSS柔性包装

如果Flexbox的项目出现在定义单行多个行一Flexbox的容器内。

default flex-wrap: nowrap;

该Flexbox的项目将保持在一个单一的线,无论是什么,最终将溢出如果需要的话。

flex-wrap: wrap;

该Flexbox的项目会之间进行分配多条线路如果需要的话。

flex-wrap: wrap-reverse;

该Flexbox的项目会之间进行分配多条线路如果需要的话。任何额外的生产线将出现的前一个。

CSS浮

推压元件,以任一侧。下面的兄弟姐妹将环绕浮动元素

default float: none;

删除以前定义的float值。该元件将保持在该页面的自然流动。

float: left;

移动元件到其容器的侧面。以下内容将环绕它,填满剩余右边的空间。

float: right;

移动元件的右边其容器的侧面。以下元素将环绕它和填充其余左侧的空间。

CSS FONT-FAMILY

font-family: "Source Sans Pro", "Arial", sans-serif;

当使用多个值,则font-family列表的字体系列定义优先级在浏览器应选择字体系列。

该浏览器会为每个家庭用户的电脑,在任何@字体面的资源。

列表被优先从:将使用所述第一值,如果它是可用的,或去到下一个,直到到达列表的末端。默认字体系列是由浏览器的喜好来定义。

在本实施例中,浏览器将尝试使用Source Sans Pro,如果它是可用的。如果无法找到它,它会尝试使用Arial如果它都不可用,它会使用浏览器的sans-serif字体。

font-family: serif;

该浏览器将使用衬线字体家族:所有字符笔画的结局

font-family: sans-serif;

该浏览器将使用无衬线字体系列:角色有中风的结局。

font-family: monospace;

该浏览器将使用等宽字体系列:所有字符相同的宽度

font-family: cursive;

该浏览器将使用草书字体系列。

font-family: fantasy;

浏览器将使用一个幻想字体系列。

CSS字体大小

定义文本的大小。

default font-size: medium;

该文本将使用浏览器默认的中等大小。

font-size: 20px;

您可以使用像素值。

font-size: 1.2em;

您可以使用EM值。

该值是相对父母font-size
这样一来,该值将级联如果在子元素中。

font-size: 1.2rem;

您可以使用REM值。

的值是相对根元素font-size,它是<html>元件。
其结果是,该值将依赖于变化的深度在HTML层次结构中的元素,并且将reamin上下文无关。

font-size: 90%;

您可以使用百分比值。他们像em值。

该值是相对父母font-size
这样一来,该值将级联如果在子元素中。

font-size: smaller;

您可以使用相对的关键字该值是相对于亲本

下列是可用的:

  • larger
  • smaller

font-size: x-large;

您可以使用的绝对关键词该值是相对于根元素 <html>

下列是可用的:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

CSS字体风格

定义文本多少倾斜。

default font-style: normal;

该文本是倾斜。

font-style: italic;

使用斜体字体的版本:字母略微倾斜。

font-style: oblique;

使用字体的版本:字母比斜体更多倾斜。

CSS字体变形

定义了字形用于每个字母。

default font-variant: normal;

每个字母使用其正常的字形。

font-variant: small-caps;

每个字母使用其小型大写版本。

CSS字体重量

定义文本的重量。

default font-weight: normal;

该文本是正常体重。

font-weight: bold;

文本变得大胆

font-weight: 600;

您可以使用数字值。它们都对应于特定的命名的重量

  • 100
  • 200超轻型
  • 300
  • 400正常
  • 500
  • 600半粗体
  • 700粗体
  • 800额外大胆
  • 900超大胆

如果该字体族不提供所请求的重量,将使用最近的可用之一。

font-weight: lighter;

您可以使用相对关键字:lighterbolder浏览器将使用下一个可用的重量。

CSS字体

CSS高度

限定了元件的高度。

default height: auto;

元件将自动调整其高度,以允许正确地显示其内容。

height: 100px;

您可以使用数值的像素(R)EM百分比 ...

如果内容没有在指定范围内的高度契合,就会溢出如何容器将处理这种溢出的内容是由定义overflow属性。

CSS辩解内容

定义Flexbox的项目的方式,根据所述对准轴线,一个Flexbox的容器内。

default justify-content: flex-start;

该项目Flexbox的朝向推启动容器的主轴线。

justify-content: flex-end;

将Flexbox的项目对推动结束容器的主轴线。

justify-content: center;

该Flexbox的项目为中心沿着容器的主轴线。

justify-content: space-between;

剩余的空间分布之间的Flexbox的物品。

justify-content: space-around;

剩余的空间分布围绕所述Flexbox的项:这增加了空间之前的第一项和之后的最后一个。

CSS左

定义根据其在所述元件的位置边缘。

default left: auto;

该元件将保持在其自然位置。

left: 80px;

如果该元素是在适当的位置相对,所述元件将移动向上通过由限定的量左侧的值。

left: -20px;

如果该元素处于位置绝对的,元素本身会从位置左侧的第一个定位的的始祖

CSS字母间距

定义文本块中的字符之间的间距。

default letter-spacing: normal;

字符之间的间隔是正常

letter-spacing: 2px;

您可以使用像素值。

letter-spacing: 0.1em;

可以使用的EM的值:这允许间隔保持相对的字体大小。

CSS线高

限定单个文本行的高度。

default line-height: normal;

还原为默认浏览器的价值。

recommended line-height: 1.6;

您可以使用无单位值:行高将是相对的字体大小。

line-height: 30px;

您可以使用像素值。

line-height: 0.8em;

您可以使用EM值:像无单位值,该行高度将相对字体大小。

CSS列表样式图像

定义的图像被用作列表项的项目符号

default list-style-image: none;

列表项将使用所定义的子弹点list-style-type值,默认情况下是一个圆盘

list-style-image: url(./images/list-style-image.png);

列表项将使用图像位于指定URL作为他们的子弹点
的图像不能调整大小。

CSS列表样式位置

定义位置列表的要点的。

default list-style-position: outside;

子弹点将列表项,因为如果不是列表项的一部分。

每个的开始列表项将被垂直对齐。

list-style-position: inside;

子弹点将内部列表项。

因为它该列表项的一部分,这将是文本的一部分,并在开始推文本。

CSS列表样式类型

定义类型列表项的的圆点

default list-style-type: disc;

列表项将使用光盘作为他们的子弹点。

list-style-type: circle;

列表项会用一个圆圈作为圆点。

list-style-type: square;

列表项将使用作为项目符号。

list-style-type: decimal;

列表项将使用十进制作为他们的子弹点。

list-style-type: none;

该列表中的项目将有没有小点。

CSS列表样式

CSS保证金底

限定空间以外的元素,在底部一侧。

default margin-bottom: 0;

删除底部的任何保证金。

margin-bottom: 30px;

您可以使用像素值。

margin-bottom: 2em;

你可以使用(R)EM值。

值是相对于对字体大小:

  • EM:相对于元素的当前字体大小
  • REM:相对于<html>所述元素的字体大小

margin-bottom: 10%;

可以使用百分比值。
百分比是基于宽度的的容器

CSS保证金左

限定空间以外的元素,在侧。

default margin-left: 0;

删除左侧的任何保证金。

margin-left: 50px;

您可以使用像素值。

margin-left: 7em;

你可以使用(R)EM值。

值是相对于对字体大小:

  • EM:相对于元素的当前字体大小
  • REM:相对于<html>所述元素的字体大小

margin-left: 30%;

可以使用百分比值。
百分比是基于宽度的的容器

margin-left: auto;

自动关键字将会给左侧的比重剩余空间

当结合margin-right: auto,它将为中心的元素,如果一个固定的宽度被定义。

CSS保证金权

限定空间以外的元素,在侧。

default margin-right: 0;

删除右边的任何保证金。

margin-right: 50px;

您可以使用像素值。

margin-right: 7em;

你可以使用(R)EM值。

值是相对于对字体大小:

  • EM:相对于元素的当前字体大小
  • REM:相对于<html>所述元素的字体大小

margin-right: 30%;

可以使用百分比值。
百分比是基于宽度的的容器

margin-right: auto;

自动关键字将会给右侧的每股剩余空间

当结合margin-left: auto,它将为中心的元素,如果一个固定的宽度被定义。

CSS的margin-top

限定空间以外的元素,在侧。

default margin-top: 0;

除去顶部的任何保证金。

margin-top: 30px;

您可以使用像素值。

margin-top: 2em;

你可以使用(R)EM值。

值是相对于对字体大小:

  • EM:相对于元素的当前字体大小
  • REM:相对于<html>所述元素的字体大小

margin-top: 10%;

可以使用百分比值。
百分比是基于宽度的的容器

CSS保证金

default margin: 0;

删除所有的利润。

margin: 30px;

当使用1值,则将边距设置为所有4个方面

margin: 30px 60px;

当使用2的值:

  • 所述第一值是顶部/底部
  • 所述第二值是右/左

要记住为了想想你的值没有定义

如果输入2的值(前/右),你忽略设置底部和左侧。因为底部是顶部的垂直对应,它将使用顶部的值。而且因为左边是右边的水平对应,它将使用权的价值。

margin: 30px 60px 45px;

当使用3的值:

  • 所述第一值是
  • 所述第二值是右/左
  • 第三个值是底部

要记住为了想想你的值没有定义

如果输入3的值(上/右/下),你忽略设置离开。作为右的对手,它会用它的价值。

margin: 30px 60px 45px 85px;

当使用4的值:

  • 所述第一值是
  • 所述第二值是正确的
  • 第三个值是底部
  • 第四值是

记住顺序,开始在顶部和去顺时针

CSS最大高度

限定元件可以是最大高度。

default max-height: none;

该元素有没有限制高度的条款。

max-height: 2000px;

您可以使用数值的像素(R)EM百分比 ...

如果最大高度较大比元件的实际高度,最大高度有任何效果

max-height: 100px;

如果内容没有最大高度内适合,会溢出如何容器将处理这种溢出的内容是由定义overflow属性。

CSS最大宽度

限定元件可以是最大宽度。

default max-width: none;

该元素有没有限制在宽度方面。

max-width: 2000px;

您可以使用数值的像素(R)EM百分比 ...

如果该最大宽度是较大比元件的实际宽度,最大宽度有没有影响

max-width: 150px;

如果内容没有最大宽度内适合时,会自动改变高度的元件,以适应对内容的包装纸。

CSS最小高度

限定了元件的最小高度。

default min-height: 0;

该元素有没有最低高度。

min-height: 200px;

您可以使用数值的像素(R)EM百分比 ...

如果该最小高度是大的比元件的实际高度,最小高度将被应用。

min-height: 5px;

如果该最小高度是小的比元件的实际高度,最小高度具有任何效果

CSS最小宽度

限定了元件的最小宽度。

default min-width: 0;

该元素没有最小宽度。

min-width: 300px;

您可以使用数值的像素(R)EM百分比 ...

如果该最小宽度较大比元件的实际宽度,最小宽度将被应用。

min-width: 5px;

如果该最小宽度比元件的实际宽度,最小宽度有没有影响

CSS混合混合模式

定义了元素应该如何混合与背景。

default mix-blend-mode: normal;

元素并没有融为一体。

mix-blend-mode: multiply;

该元素使用乘法混合模式。

mix-blend-mode: screen;

该元素使用屏幕混合模式。

mix-blend-mode: overlay;

该元素使用叠加混合模式。

mix-blend-mode: darken;

该元素使用变暗混合模式。

mix-blend-mode: lighten;

该元素使用减仓混合模式。

mix-blend-mode: color-dodge;

该元素使用颜色减淡混合模式。

mix-blend-mode: color-burn;

该元素使用的颜色烧伤混合模式。

mix-blend-mode: hard-light;

该元素使用硬轻混合模式。

mix-blend-mode: soft-light;

该元素使用软光混合模式。

mix-blend-mode: difference;

该元素使用不同的混合模式。

mix-blend-mode: exclusion;

该元素使用排除混合模式。

mix-blend-mode: hue;

该元素使用色相混合模式。

mix-blend-mode: saturation;

该元素使用饱和度混合模式。

mix-blend-mode: color;

该元素使用的颜色混合模式。

mix-blend-mode: luminosity;

该元素使用亮度混合模式。

CSS透明度

定义元素如何不透明的。

default opacity: 1;

该元素是完全不透明

opacity: 0;

该元素是完全透明的

opacity: 0.3;

之间的任意值0(零)和1(一个)可以使元素半透明

CSS秩序

定义Flexbox的项目的顺序。

default order: 0;

所述Flexbox的项目的顺序是在定义的HTML代码

order: 1;

顺序是相对的Flexbox的项目的兄弟姐妹当所有个体Flexbox的项目次序值都考虑到最后的顺序定义。

order: -1;

您可以使用的值。

order: 9;

您可以设置不同的每个Flexbox的项目值。

CSS轮廓色

定义该元素的轮廓的色彩。

default outline-color: transparent;

施加透明色的轮廓。轮廓仍然会占用空间的定义outline-width值。

outline-color: red;

您可以使用一个140+颜色名称

outline-color: #05ffb0;

您可以使用十六进制颜色代码。

outline-color: rgb(50, 115, 220);

您可以使用RGB()颜色代码:

  • 的第一个值是用于 red
  • 第二值是用于 green
  • 第三值是对 blue

他们每个人都可以有之间的值0255

outline-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA()色码:

  • 前3个值是 rgb
  • 第四值是alpha信道,并且定义的颜色的不透明度

阿尔法值可以从零0(透明)一1(不透明)。

outline-color: hsl(14, 100%, 53%);

您可以使用HSL()色码:

  • 的第一个值是hue可以去从0359
  • 所述第二值是saturation与去从0%100%
  • 第三值是对luminosity去从0%100%

outline-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL()一个颜色代码:

  • 前3个值是 hsl
  • 第四值是alpha信道,并且定义的颜色的不透明度

阿尔法值可以从零0(透明)一1(不透明)。

CSS提纲式

定义元素的轮廓风格。

default outline-style: none;

移除元素的轮廓。

outline-style: dotted;

接通轮廓成的点的序列。

outline-style: dashed;

打开大纲分为划线的序列。

outline-style: solid;

转动轮廓成实线。

outline-style: double;

拆分大纲为两行。

outline-style: groove;

设置一个插图风格的轮廓。

CSS轮廓宽度

定义该元素的轮廓的宽度。

default outline-width: medium;

定义所有轮廓到的宽度中等

outline-width: 1px;

定义了所有的宽度概述了1像素

CSS大纲

为速记属性outline-width outline-styleoutline-color

outline: 4px dotted red;

顺序是非常重要的:

  • 宽度
  • 样式
  • 颜色

outline: 2px solid;

只有颜色可选如果你忽略它,应用颜色将是颜色的文本

CSS溢出包装

定义是否达到行的末尾时的话应该打破。

default overflow-wrap: normal;

有没有空间的话会不会打破。不间断的字符序列将在一行中显示。

overflow-wrap: break-word;

以无间隙的话会打破,因为它们到达行末,尽快。

CSS溢出-X

定义如何在横轴上溢出的内容显示出来。

default overflow-x: visible;

四溢的内容是可见的,而元素本身停留在指定的宽度。

overflow-x: hidden;

溢出的内容是隐藏的,并且不能被访问。

overflow-x: scroll;

四溢的内容可访问多亏了水平滚动条

overflow-x: auto;

浏览器决定是否显示水平滚动条或没有。

CSS溢出-Y

定义如何在垂直轴上溢出的内容显示出来。

default overflow-y: visible;

溢出的内容是可见的,而元件本身保持在规定的高度。

overflow-y: hidden;

溢出的内容是隐藏的,并且不能被访问。

overflow-y: scroll;

四溢的内容可访问多亏了垂直滚动条

overflow-y: auto;

浏览器决定是否显示垂直滚动条或没有。

CSS溢出

定义如何在水平和垂直轴溢出的内容显示出来。

default overflow: visible;

溢出的内容是可见的,而元件本身保持在规定的高度。

overflow: hidden;

溢出的内容是隐藏的,并且不能被访问。

overflow: scroll;

四溢的内容可访问多亏了垂直滚动条

overflow: auto;

浏览器决定是否显示垂直滚动条或没有。

CSS填充底

限定空间的元件,在侧。

default padding-bottom: 0;

删除底部任何填充。

padding-bottom: 50px;

您可以使用像素值。

padding-bottom: 7em;

你可以使用(R)EM值。

值是相对于对字体大小:

  • EM:相对于元素的当前字体大小
  • REM:相对于<html>所述元素的字体大小

padding-bottom: 30%;

可以使用百分比值。
百分比是基于宽度的的元件

CSS填充左

限定空间的元件,在左侧边。

default padding-left: 0;

删除左侧的任何填充。

padding-left: 50px;

您可以使用像素值。

padding-left: 7em;

你可以使用(R)EM值。

值是相对于对字体大小:

  • EM:相对于元素的当前字体大小
  • REM:相对于<html>所述元素的字体大小

padding-left: 30%;

可以使用百分比值。
百分比是基于宽度的的元件

CSS填充右

限定空间的元件,在侧。

default padding-right: 0;

删除右边任何填充。

padding-right: 50px;

您可以使用像素值。

padding-right: 7em;

你可以使用(R)EM值。

值是相对于对字体大小:

  • EM:相对于元素的当前字体大小
  • REM:相对于<html>所述元素的字体大小

padding-right: 30%;

可以使用百分比值。
百分比是基于宽度的的元件

CSS填充顶

限定空间的元件,在侧。

default padding-top: 0;

删除顶部任何填充。

padding-top: 50px;

您可以使用像素值。

padding-top: 7em;

你可以使用(R)EM值。

值是相对于对字体大小:

  • EM:相对于元素的当前字体大小
  • REM:相对于<html>所述元素的字体大小

padding-top: 30%;

可以使用百分比值。
百分比是基于宽度的的元件

CSS填充

default padding: 0;

删除所有垫。

padding: 30px;

当使用1值,填充设置为所有4个方面

padding: 30px 60px;

当使用2的值:

  • 所述第一值是顶部/底部
  • 所述第二值是右/左

要记住为了想想你的值没有定义

如果输入2的值(前/右),你忽略设置底部和左侧。因为底部是顶部的垂直对应,它将使用顶部的值。而且因为左边是右边的水平对应,它将使用权的价值。

padding: 30px 60px 45px;

当使用3的值:

  • 所述第一值是
  • 所述第二值是右/左
  • 第三个值是底部

要记住为了想想你的值没有定义

如果输入3的值(上/右/下),你忽略设置离开。作为右的对手,它会用它的价值。

padding: 30px 60px 45px 85px;

当使用4的值:

  • 所述第一值是
  • 所述第二值是正确的
  • 第三个值是底部
  • 第四值是

记住顺序,开始在顶部和去顺时针

CSS指针事件

如果定义元素反应指针事件与否。

default pointer-events: auto;

元素发生反应的指针事件,如:hoverclick

pointer-events: none;

元素并没有反应指针事件,如:hoverclick其结果是,那些元件的背后是可访问的。

CSS位置

限定了元件的位置的行为。

default position: static;

该元件将保持在自然流动的网页。

其结果是,它将充当锚点的绝对定位的黄色块。

此外,它会反应以下列性质:

  • top
  • bottom
  • left
  • right
  • z-index

position: relative;

该元件将保持在自然流动的网页。

这也使得该元素的位置:它会作为一个锚点的绝对定位的黄色阻止作用。

此外,它会发生反应,以下列属性:

  • top
  • bottom
  • left
  • right
  • z-index

position: absolute;

的元件将留在网页的自然流动。它会根据自身定位最接近的定位的祖先

因为它的位置,这将作为一个锚点绝对定位黄色块。

此外,它会发生反应,以下列属性:

  • top
  • bottom
  • left
  • right
  • z-index

position: fixed;

的元件将留在网页的自然流动。它会根据自身定位

因为它的位置,这将作为一个锚点绝对定位黄色块。

此外,它会发生反应,以下列属性:

  • top
  • bottom
  • left
  • right
  • z-index

CSS调整大小

如果定义textarea的是可调整大小与否。

default resize: none;

textarea的是调整大小。

resize: horizontal;

textarea的是可调整大小的水平

resize: vertical;

textarea的是大小可调整垂直

resize: both;

textarea的是可调整大小的两个水平垂直方向

CSS文本对齐

如何定义元素的文本内容是水平排列。

text-align: left;

文本内容对齐的左侧

text-align: right;

文本内容被对准到右边

text-align: center;

文本内容居中

text-align: justify;

文字内容是有道理的

CSS文本修饰

如何定义元素的文本内容的装饰。

default text-decoration: none;

删除任何文本修饰。

text-decoration: underline;

强调文本内容。

CSS文本缩进

定义元素的文本第一行的缩进。

default text-indent: 0;

该文本是缩进。

text-indent: 40px;

您可以使用数值的像素(R)EM百分比 ...

注意怎么只有第一行缩进。

text-indent: -2em;

您也可以使用负的值。

CSS文本溢出

定义隐藏的文本内容,如果它溢出的行为。

default text-overflow: clip;

文字内容是裁剪和不可访问。

text-overflow: ellipsis;

该溢出的内容被替换用省略号

CSS文字阴影

定义文本内容的影子。

default text-shadow: none;

之后文本内容已没有阴影

text-shadow: 2px 6px;

你至少需要两个值

  • 第一种是在水平方向偏移
  • 第二个是垂直偏移

阴影颜色将从文本颜色继承。

text-shadow: 2px 6px red;

您可以定义一个颜色作为最后的值。

正如color,你可以使用颜色名称,十六进制,RGB,HSL ...

text-shadow: 2px 4px 10px red;

可选的第三个值定义模糊的影子。

颜色会跨越10px的在这个例子中被扩散,从不透明到透明的。

CSS文本转换

定义文本内容应该如何改变。

default text-transform: none;

删除任何文本转换:文本将出现在相同的HTML代码。

text-transform: capitalize;

打开的第一个字母每个字变成了大写字母。

text-transform: uppercase;

打开所有的字母大写字母。

text-transform: lowercase;

打开所有的字母小写字母。

CSS顶部

定义根据其上边缘的元件的位置。

default top: auto;

该元件将保持在其自然位置。

top: 20px;

如果该元素是在适当的位置相对,所述元件将移动向上通过由限定的量最高值。

top: 0;

如果该元素处于位置绝对的,元素本身会从位置上方的首先定位的祖先

CSS变换原点

定义由定义的转换原点transform属性。

default transform-origin: 50% 50% 0;

变换原点在中心的元素。

transform-origin: 20px 70%;

您可以使用2个值

  • 的第一个值是水平
  • 第二个是垂直

transform-origin: top right;

您可以使用组合位置的关键字centertopbottomleftright

transform-origin: center bottom;

当使用关键字,您可以更改订单轴的,只要每个关键字是明确的。

CSS变换

定义元素如何转换。

default transform: none;

删除任何改造。

transform: translateX(40px);

移动的元素水平轴。

transform: translateY(20px);

移动的元素垂直轴。

transform: translateY(100%);

可以使用百分比值:百分比是相对于元件本身,而不是父。

transform: translate(20px, -10%);

您可以translate()两个值

  • 的第一个值是在水平
  • 所述第二值是垂直

transform: scaleX(1.5);

规模上的元素水平轴。

transform: scaleY(0.4);

缩放的元素垂直轴。

transform: scaleY(-2);

你可以用消极的价值观:它会反转的元素。

transform: scale(0.8, 0.8);

您可以scale()两个值

  • 的第一个值是在水平
  • 所述第二值是垂直

通过使用两个相同的值,则可以按比例缩放

transform: rotate(45deg);

旋转元件。

您可以使用:

  • 0360deg
  • gradians0400grad
  • 弧度02πrad
  • 原来01turn

transform: skewX(15deg);

歪斜上的元件的水平轴。

transform: skewY(45deg);

歪斜的元素垂直轴。

transform: skew(10deg, -20deg);

您可以skew()两个值

  • 的第一个值是在水平
  • 所述第二值是垂直

transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);

您可以将多个中间用空格分隔的转换。

CSS过渡延迟

定义转换有多久前等待的时间开始

default transition-delay: 0s;

过渡将等待零点几秒,因此马上开始。

transition-delay: 1.2s;

您可以使用十进制值中的关键字s

transition-delay: 2400ms;

您可以使用毫秒代替秒,关键字ms

transition-delay: -500ms;

您可以使用负值:转型开始就好像它已经被打500ms

CSS过渡期限

定义过渡持续多久。

default transition-duration: 0s;

过渡会持续零秒,因此是瞬间

transition-duration: 1.2s;

您可以使用十进制值中的关键字s

transition-duration: 2400ms;

您可以使用毫秒代替秒,关键字ms

CSS转换属性

定义哪些属性将过渡。

default transition-property: all;

该元素将转型的所有属性:

transition-property: none;

该元素将转型没有财产:过渡从而瞬间

transition-property: background;

该元素将只TRANSTION的背景属性。

transition-property: color;

该元素将只TRANSTION的颜色属性。

transition-property: transform;

该元素将只TRANSTION的变换属性。

CSS转换定时功能的

如何定义之间的值开始结束计算的过渡。

default transition-timing-function: ease;

过渡慢慢开始,中间的加速,并在结束减慢。

transition-timing-function: ease-in;

过渡开始慢慢地,逐渐加速,直到结束。

transition-timing-function: ease-out;

过渡很快开始,并逐渐减速,直到结束。

transition-timing-function: ease-in-out;

ease,但更明显。

过渡很快开始,并逐渐减速,直到结束。

transition-timing-function: linear;

过渡有一个*恒定的速度

transition-timing-function: step-start;

过渡跳跃瞬间最终状态

transition-timing-function: step-end;

过渡停留在初始状态,直到最后,当它立即跳转到最终状态

transition-timing-function: steps(4, end);

通过使用steps()带有整数,你可以定义一个特定的数字达到年底前的步骤。元素的状态会不会逐渐变化的,而是跳跃的州在不同的时刻。

CSS转换

为速记属性transition-property transition-duration transition-timing-functiontransition-delay

transition-duration需要

transition: 1s;

  • transition-duration设置1s
  • transition-property 默认all
  • transition-timing-function 默认ease
  • transition-delay 默认0s

transition: 1s linear;

  • transition-duration设置1s
  • transition-property 默认all
  • transition-timing-function设置linear
  • transition-delay 默认0s

transition: background 1s linear;

  • transition-duration设置1s
  • transition-property设置background
  • transition-timing-function设置linear
  • transition-delay 默认0s

transition: background 1s linear 500ms;

  • transition-duration设置1s
  • transition-property设置background
  • transition-timing-function设置linear
  • transition-delay设置500ms

transition: background 4s, transform 1s;

您可以将多个属性用自己的过渡时间。

CSS空白

定义元素的空白将被如何处理。

default white-space: normal;

的空间序列被合并成一个。
换行被忽略。
文本内容被包裹。

white-space: nowrap;

的空间序列被合并成一个。
换行被忽略。
文字内容是没有包装的,并保持在一个单行

white-space: pre;

白色空间究竟保留

  • 的空间序列被保留
  • 行只对新的生产线,并突破 <br>

white-space: pre-wrap;

白色空间大多保存完好

  • 的空间序列被保留
  • 线打破新的生产线,<br>但也达到了元素的结尾时,

white-space: pre-line;

只有新的生产线将被保留。

  • 的空间序列组合成一个
  • 线打破新的生产线,<br>但也达到了元素的结尾时,

CSS宽

限定了元件的宽度。

default width: auto;

元件将自动地调整其宽度,以允许正确地显示其内容。

width: 240px;

您可以使用数值的像素(R)EM百分比 ...

width: 50%;

如果使用的百分比,其值是相对于容器的宽度。

CSS将变

定义哪些属性预期在未来改变(无论是通过CSS或JavaScript)。

default will-change: auto;

告诉浏览器优化的任何财产。

will-change: scroll-position;

告诉浏览器优化元素的滚动位置,因为它可能会在未来改变。

will-change: contents;

告诉浏览器优化元素的内容,因为它可能会在未来改变。

will-change: box-shadow;

您可以指定任何其他的CSS 属性例如,这告诉浏览器优化元素的箱阴影,因为它可能会在未来改变。

CSS字断

定义达到行的末尾时的话应该怎么休息。

default word-break: normal;

有没有空间的话会不会打破。不间断的字符序列将在一行中显示。

word-break: break-all;

以无间隙的话会打破,因为它们到达行末,尽快。

CSS字间距

定义文本块的字之间的间隔。

default word-spacing: normal;

字符之间的间隔是正常

word-spacing: 5px;

您可以使用像素值。

word-spacing: 2em;

可以使用的EM的值:这允许间隔保持相对的字体大小。

CSS z索引

定义了顺序的元素的z轴* 8。它仅适用于定位的**元(什么距static)。

default z-index: auto;

顺序是由顺序定义HTML代码

  • 首先在代码=后面
  • 最后在代码=前

z-index: 1;

的z索引值是相对于其他的。目标元素是运动的兄弟姐妹。

z-index: -1;

您可以使用负值目标元素是移动在后面的兄弟姐妹。