298      阿里云  技术社区[云栖]

css知识梳理

写完之前的一篇"一起领略css3动画的强大"之后,我发现自己以为的懂得并不是真的懂得,所以现在来好好把css3来梳理一下

css属性组

动画属性(Animation)

@keyframes - 规定动画

通过@keyframes规则能够创建动画,创建动画的原理是:将一套CSS样式逐渐变化为另一套样式;在动画过程中能够多次改变这套CSS样式;以百分比来规定改变发生的时间,或通过关键词"from"/"to",等价于0%和100%;为了获得最佳的浏览器支持,应该始终定义0%和100%选择器

注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定

语法:

@keyframes animationname {keyframes-selector {css-styles;}}

举例:在一个动画中添加多个keyframe选择器改变多个 CSS 样式:

@keyframes mymove{
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove{ / Firefox /
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove{ / Safari and Chrome /
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove{ / Opera /
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}

animation - 除animation-play-state外所有动画属性的简写属性

animation属性是一个简写属性,用于设置六个动画属性:

语法:

animation: name duration timing-function delay iteration-count direction;

animation-fill-mode介绍

背景属性(Background)

在一个声明中设置所有的背景属性

background-color

background-color属性为元素设置一种纯色,这种颜色会填充元素的内容/内边距/边框区域,扩展到元素边框的外边界(但不包括外边距),如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色

background-color可能的值

background-attachment

设置背景图像是否固定或随着页面的其余部分滚动

background-attachment可能的值

background-image

为元素设置背景图像;元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距,默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果

background-image可能的值

background-position

设置背景图像的起始位置;这个属性设置背景原图像(由background-image定义)的位置;背景图像如果要重复,将从这一点开始

提示:需要把background-attachment属性设置为"fixed",才能保证该属性在Firefox和Opera中正常工作

background-position可能的值

background-repeat

设置是否及如何重复背景图像;默认地,背景图像在水平和垂直方向上重复

提示:背景图像的位置是根据background-position属性设置的;如果未规定background-position属性,图像会被放置在元素的左上角

background-repeat可能的值

background-clip

规定背景的绘制区域

语法

background-clip: border-box|padding-box|content-box;

background-clip可能的值

background-origin

规定background-position属性相对于什么位置来定位;如果背景图像的background-attachment属性为"fixed",则该属性没有效果

语法

background-origin: padding-box|border-box|content-box;

background-origin可能的值

background-size

规定背景图片的尺寸

语法

background-size: length|percentage|cover|contain;

background-size可能的值

边框属性(Border和Outline)

border

在一个声明中设置所有的边框属性;可以按顺序设置如下属性:border-width/border-style/border-color;如果不设置其中的某个值也不会出问题,比如 border:solid #ff0000;也是允许的

border-width

为元素的边框设置宽度;只有当边框样式不是none时才起作用;如果边框样式是none,边框宽度实际上会重置为0,不允许指定负长度值

border-width可能的值

border-style

用于设置元素边框的样式,只有当这个值不是none时边框才可能出现

border-style可能的值

最不可预测的边框样式是double,它定义为两条线的宽度再加上这两条线之间的空间等于border-width值;不过CSS规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗,所有这些都有用户代理决定,创作人员对这个决定没有任何影响

border-color

设置四条边框的颜色,此属性可设置1到4种颜色;border-color属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为4个边分别设置不同的颜色

border-color可能的值

border-top/border-right/border-bottom/border-left

单独设置上边框/右边框/下边框/左边框的样式

可能的值

border-radius

border-radius属性是一个简写属性,用于设置四个border-*-radius属性

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个radii的四个值；如果省略bottom-left,则与top-right相同;如果省略bottom-right,则与top-left相同;如果省略top-right,则与top-left相同

可能的值

border-top-left-radius:定义边框左上角的形状;border-top-right-radius:定义边框右上角的形状;border-bottom-left-radius：定义边框左下角的形状；border-bottom-right-radius：定义边框右下角的形状

border-image

设置所有 border-image-* 属性

box-shadow

box-shadow向框添加一个或多个阴影,该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值/可选的颜色值/可选的inset关键词来规定,省略长度的值是0

语法

box-shadow: h-shadow v-shadow blur spread color inset;

box属性

overflow-x / overflow-y

规定如果溢出元素内容区域的话,是否对内容的左/右或上/下边缘进行裁剪

语法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

overflow-style

规定溢出元素的首选滚动方法 - 目前浏览器都不支持

语法

overflow-style: auto|scrollbar|panner|move|marquee;

rotation

rotation属性围绕由rotation-point属性定义的指定点,对块级元素进行逆时针旋转 - 目前浏览器都不支持

语法

rotation: angle;

outline

outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用;可以按顺序设置如下属性:outline-color/outline-style/outline-width

注释:轮廓线不会占据空间,也不一定是矩形;outline简写属性在一个声明中设置所有的轮廓属性

outline-color

outline-color属性设置一个元素整个轮廓中可见部分的颜色;要记住,轮廓的样式不能是none,否则轮廓不会出现;请始终在outline-color属性之前声明outline-style属性,元素只有获得轮廓以后才能改变其轮廓的颜色

outline-color可能的值

outline-style

outline-style属性用于设置元素的整个轮廓的样式,样式不能是none,否则轮廓不会出现

outline-style可能的值

outline-width

outline-width属性设置元素整个轮廓的宽度,只有当轮廓样式不是none时,这个宽度才会起作用;如果样式为none,宽度实际上会重置为0,不允许设置负长度值

outline-width可能的值

color属性

Content for Paged Media 属性

CSS 尺寸属性(Dimension)

width/height

这个属性定义元素内容区的宽度/高度,在内容区外面可以增加内边距/边框/外边距,行内非替换元素会忽略这个属性

可能的值

max-width / max-height / min-width / min-height

该属性值会对元素的宽度/高度设置一个最高/最低限制;因此,元素只能处于最大值和最小值之间.不允许指定负值

注释：max-width/max-height/min-width/min-height属性不包括外边距/边框/内边距。

可伸缩框属性(Flexible Box)

box-align / box-pack

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

box-align属性规定如何对齐框的子元素,实现垂直方向的位置

box-pack属性规定当框大于子元素的尺寸,在何处放置子元素;该属性规定水平框中的水平位置

语法

box-align: start|end|center|baseline|stretch;

语法

box-pack: start|end|center|justify;

box-direction

规定框元素的子元素以什么方向来排列

语法

box-direction: normal|reverse|inherit;

box-flex

规定框的子元素的尺寸是否可伸缩

提示:可伸缩元素能够随着框的缩小或扩大而缩写或放大,只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间

语法

box-flex: value;

value:元素的可伸缩行;柔性是相对的,例如box-flex为2的子元素两倍于box-flex为1的子元素

box-flex-group

box-flex-group属性用于向柔性分组分配可伸缩元素

提示:可伸缩元素能够随着框的缩小和扩大而伸缩。

语法

box-flex-group: integer;

integer:一个整数;(第一个柔性分组是1,后面的柔性分组是更大的值)

box-lines

规定如果列超出了父框中的空间,是否要换行显示

提示:默认地,水平框会在单独的行中排列其子元素,而垂直框会在单独的列中排列其子元素

语法

box-lines: single|multiple;

box-ordinal-group

规定框中子元素的显示次序,值更低的元素会显示在值更高的元素前面显示

注释:分组值相同的元素,它们的显示次序取决于其源次序

目前没有浏览器支持box-ordinal-group属性;Firefox支持替代的-moz-box-ordinal-group属性,Safari和Chrome支持替代的-webkit-box-ordinal-group属性

语法

box-ordinal-group: integer;

integer:一个整数,指示子元素的显示次序

box-orient

box-orient属性规定框的子元素应该被水平或垂直排列

提示:水平框中的子元素从左向右进行显示,而垂直框的子元素从上向下进行显示;不过,box-direction/box-ordinal-group能够改变这种顺序

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

字体属性(Font)

font简写属性用于在一个声明中一次设置元素字体的两个或更多方面字体属性;此属性也有第六个值:"line-height",可设置行间距;使用icon等关键字可以适当地设置元素的字体,使之与用户计算机环境中的某个方面一致;注意:如果没有使用这些关键词,至少要指定字体大小和字体系列

可以按顺序设置如下属性:font-style / font-variant / font-weight / font-size/line-height / font-family;可以不设置其中的某个值,比如:font:100% verdana; 也是允许的。未设置的属性会使用其默认值

可能的值

内容生成(Generated Content)

content

与:before/:after伪元素配合使用来插入生成内容,该属性用于定义元素之前/之后放置的生成内容,默认往往是行内内容,不过该内容创建的框类型可以用属性display控制

<style>
a:after{
  content: " (" attr(href) ")"
}
</style>
<p><a href="https://www.w3school.com.cn">W3School</a> contains free tutorials and references.</p>

counter-increment

counter-increment属性设置某个选取器每次出现的计数器增量,默认增量是1;利用这个属性,计数器可以递增/递减某个值,这可以是正值或负值;如果没有提供number值,则默认为1

可能的值

counter-reset

counter-reset属性设置某个选择器出现次数的计数器的值,默认为0;利用这个属性,计数器可以设置或重置为任何值,可以是正值/负值;如果没有提供number,则默认为0

可能的值

<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before{
  counter-increment:section;
  content:"Section " counter(section) ". ";
}
h2:before{
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
}
</style>
<h1>HTML tutorials</h1> //Section 1.
<h2>HTML Tutorial</h2> //1.1
<h2>XHTML Tutorial</h2> //1.2
<h2>CSS Tutorial</h2> //1.3
<h1>Scripting tutorials</h1> //Section 2.
<h2>JavaScript</h2> //2.1
<h2>VBScript</h2> //2.2
<h1>XML tutorials</h1> //Section 3.
<h2>XML</h2> //3.1
<h2>XSL</h2> //3.2

quotes

quotes属性设置嵌套引用(embedded quotation)的引号类型

可能的值

<style type="text/css">
q:lang(en){
  quotes: '"' '"' "'" "'"
}
</style>
<p><q>This is a <q>big</q> quote.</q></p>

引号字符

crop

允许被替换元素仅仅是对象的矩形区域,而不是整个对象

move-to

从流中删除元素,然后在文档中后面的点上重新插入

page-policy

确定元素基于页面的occurrence应用于计数器还是字符串值

Grid属性 - 目前没有浏览器支持

使用网格系统对于打印设计师来说具有巨大的价值,现在相同的改变被应用到在线内容上;网格属性提供了在可伸缩网格中调整标题,文本和图片尺寸和位置的能力

语法

grid-columns/grid-rows: length|%|none|inherit;

grid-columns/grid-rows: length|%|none|inherit;

Hyperlink属性 - 目前没有浏览器支持

列表属性(List)

list-style

该属性是一个简写属性,涵盖了所有其他列表样式属性;由于它应用到所有display为list-item的元素,所以在普通的HTML和XHTML中只能用于li元素,不过实际上它可以应用到任何元素,并由list-item元素继承;可以按顺序设置如下属性:list-style-type/list-style-position/list-style-image;可以不设置其中的某个值,比如:"list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值

list-style-type

设置列表项标记的类型

可能的值

<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
<ul >
  <li>"none" 类型</li><li>茶</li><li>可口可乐</li>
</ul>

list-style-position

list-style-position属性用于声明列表标志相对于列表项内容的位置;外部(outside)标志会放在离列表项边框边界一定距离处,不过这距离在CSS中未定义;内部(inside)标志处理为好像它们是插入在列表项内容最前面的行内元素一样

可能的值

list-style-image

list-style-image属性使用图像来替换列表项的标记;这个属性指定作为一个有序或无序列表项标志的图像,图像相对于列表项内容的放置位置通常使用list-style-position属性控制

注释:请始终规定一个"list-style-type"属性以防图像不可用

可能的值

<style type="text/css">
ul{
  list-style-image: url('/i/eg_arrow.gif')
}
</style>
<ul>
  <li>咖啡</li><li>茶</li><li>可口可乐</li>
</ul>

marker-offset

设置或检索标记容器和主容器之间水平补白,即两个容器靠近的一边的间距

语法

marker-offset : auto | length

auto:默认值,浏览器自动设置间距;length:由浮点数字和单位标识符组成的长度值,可为负值

举例:

li:before { display: marker; marker-offset: 5px; }

外边距属性(Margin) / 内边距属性(Padding)

Marquee属性

多列属性(Multi-column)

columns

columns属性是一个简写属性,用于设置列宽和列数

columns: column-width column-count; //列宽 列数

举例

<style> 
.newspaper{
  columns:100px 3;
  -webkit-columns:100px 3; / Safari and Chrome /
  -moz-columns:100px 3; / Firefox /
}
</style>
<div >
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
</div>

column-width

column-width 属性规定列的宽度

column-width: auto|length;

auto:由浏览器决定列宽;length:规定列的宽度

column-count

语法

column-count: number|auto;

number:元素内容将被划分的最佳列数;auto:由其他属性决定列数

column-gap

语法

column-gap: length|normal;

column-gap属性规定列之间的间隔;length:把列间的间隔设置为指定的长度;normal:规定列间间隔为一个常规的间隔,W3C建议的值是1em

注释:如果列之间设置了column-rule,它会在间隔中间显示

column-rule

column-rule属性是一个简写属性,用于设置所有column-rule-*属性;column-rule属性设置列与列之间的宽度/样式/颜色规则

语法

column-rule: column-rule-width column-rule-style column-rule-color;

<style> 
.newspaper{
  -moz-column-count:3; / Firefox /
  -webkit-column-count:3; / Safari and Chrome /
  column-count:3;
  -moz-column-gap:40px; / Firefox /
  -webkit-column-gap:40px; / Safari and Chrome /
  column-gap:40px;
  -moz-column-rule:4px outset #ff0000; / Firefox /
  -webkit-column-rule:4px outset #ff0000; / Safari and Chrome /
  column-rule:4px outset #ff0000;
}
</style>
<div >
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知,决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
</div>

column-fill

column-fill属性规定如何填充列(是否进行协调) - 目前主流浏览器都不支持column-fill属性

column-fill: balance|auto;

balance:对列进行协调,浏览器应对列长度的差异进行最小化处理;auto:按顺序对列进行填充,列长度会各有不同

column-span

column-span属性规定元素应横跨多少列

column-span: 1|all;

1:元素应横跨一列;all:元素应横跨所有列

<style> 
.newspaper{
  -moz-column-count:3; / Firefox /
  -webkit-column-count:3; / Safari and Chrome /
  column-count:3;
}
h2{
  -webkit-column-span:all; / Chrome /
  column-span:all;
}
</style>
<div >
<h2>成品油价格25日凌晨上调 汽柴油涨300、290元/吨</h2>
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
</div>

Paged Media属性

定位属性(Positioning)

top/bottom/left/right

规定元素的上部/底部/左边/右边边缘,该属性定义了定位元素上/下/左/右外边距边界与其包含块上/下/左/右边界之间的偏移

注释:如果"position"属性的值为"static",那么设置"top/bottom/left/right" 属性不会产生任何效果

对于static元素为auto;对于长度值则为相应的绝对长度,对于百分比数值为指定值,否则为auto;对于相对定义元素,如果bottom和top都是auto,其计算值则都是0;如果其中之一为 auto,则取另一个值的相反数;如果二者都不是auto,bottom将取top值的相反数;left和right同理

可能的值

float

float属性定义元素在哪个方向浮动;在CSS中任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何种元素;如果浮动非替换元素,则要指定一个明确的宽度,否则它们会尽可能地窄

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止

可能的值

clear

clear属性规定元素的哪一侧不允许其他浮动元素

可能的值

display

display属性用于定义建立布局时元素生成的显示框类型,对于HTML等文档类型,如果使用display不谨慎可能违反HTML中已经定义的显示层次结构

可能的值

visibility

visibility属性规定元素是否可见;即使不可见的元素也会占据页面上的空间,请使用"display"属性来创建不占据页面空间的不可见元素

可能的值