@EncyKe
2016-06-08T06:27:28.000000Z
字数 13153
阅读 5283
前端 CSS
选择符{样式属性: 值;样式属性: 值;...}/* 注释内容 */
<link type="text/css" rel="stylesheet" href=文件位置 media="screen(电脑荧屏)/print(打印机)/handheld(移动端)/aural(高速浏览器)/Braille(盲文)/tv(电视)" />
<head></head>内，<style></style>标签书写；
<head></head>内，<style></style>标签导入地址；
不实用，不推荐；
div：块状元素，会分行，不用于行内；并列放置时为“并”，即取两个div中最大的边界值作为边界值；span：行内元素，不分行；并排放置时为“和”，即以两个span的边界值之和为边界值；id：有唯一性，用于唯一的区块，选择符以#开头，多给js代码用；class：有普遍性，用于不唯一的非区块，选择符以.开头；margin+border-width+padding+width+padding+border-width+marginsmall或medium定义body{font-size:;}，而body的子级元素的font-size则以百分比或em表示。这对响应式极为有用。#+红色十六进制代码+绿色十六进制代码+蓝色十六进制代码； 十六进制代码：0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F(分别表示1-16)，颜色的两位数代码如xy=16x+y。只有当三种颜色的xy都相同，才可进行简写，如：#abc=#aabbcc。
background在一个声明中设置所有的背景属性。
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll(背景随对象滚动), fixed(背景固定，不随对象滚动).
background-color设置元素的背景颜色。
background-image设置元素的背景图像。url(路径).
background-position设置背景图像的开始位置。x% y%/xpx ypx,
(center, top, bottom, left, right两两组合).
background-repeat设置是否及如何重复背景图像。no-repeat, repeat(重复排满整个页面), repeat-x(只在水平上重复), repeat-y(只在垂直上重复).
background-clip规定背景的绘制区域。
background-origin规定背景图片的定位区域。
background-size规定背景图片的尺寸。
font在一个声明中设置所有字体属性。
font-family规定文本的字体系列。逗号分割各值，并始终提供一个类族名称作为最后的选择。
font-size规定文本的字体尺寸。必须有。数值px/(xx-small…medium…xx-large)/%/em(后二者相对父级元素大小).
font-size-adjust为元素规定 aspect 值。
font-stretch收缩或拉伸当前的字体系列。
font-style规定文本的字体样式。normal, oblique(偏斜), italic(斜).
font-variant规定是否以小型大写字母的字体显示文本。normal,small-caps(小英→大英).
font-weight规定字体的粗细。*可选，但必须位于font-size前。*bolder,bold,normal,light,lighter,400-700.
color字色rgb(百分数,百分数,百分数) / rgb(数值,数值,数值)(数值=255×百分数) / rgba(数值, 数值, 数值, 不透明度) / hexcodes六位色值 / (Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow).
direction规定文本的方向/书写方向。
unicode-bidi设置文本方向。
letter-spacing设置字符间距。normal, 数值(可负)px.
line-height设置行高。数值px/%/em。
text-align规定文本的水平对齐方式。left, right, center, justify(两端对齐).
text-decoration规定添加到文本的装饰效果。none, underline, overline, ling-through, blink.
text-indent规定文本块首行的缩进。数值px/%.
text-shadow规定添加到文本的阴影效果。
text-transform控制文本的大小写。none,lowercase(第一个字母大写),uppercase(所有字母大写),capitalize(所有字母小写).
word-spacing设置单词间距。normal, 数值(可负)px.
white-space规定如何处理元素中的空白。normal, pre(保留原文本格式，IE专用？), nowrap(不换行，除非<br />).
punctuation-trim规定是否对标点字符进行修剪。
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。
text-justify规定当text-align: justify时所使用的对齐方法。
text-outline规定文本的轮廓。
text-overflow规定当文本溢出包含元素时发生的事情。
text-shadow向文本添加阴影。
text-wrap规定文本的换行规则。
hanging-punctuation规定标点字符是否位于线框之外。
word-break规定非中日韩文本的换行规则。
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。break-word(换行).
height设置元素高度。auto, 数值px.
width设置元素的宽度。auto, 数值px.
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
border在一个声明中设置所有的边框属性。
border-color设置边框颜色。
border-width设置边框宽度。
border-style设置边框样式。none,dotted(点线框), dashed(虚线框), solid(实线框), double(双实线框), groove(立体沟槽框), ridge(脊形框), inset(凹陷框), outset(凸起框).
border-*在一个声明中设置所有的左边框属性。
border-*-color设置特定边框颜色。
border-*-style设置特定边框样式。
border-*-width设置特定边框宽度。medium(默认), thin, dashed.
outline在一个声明中设置所有的轮廓属性。
outline-color设置轮廓的颜色。
outline-style设置轮廓的样式。
outline-width设置轮廓的宽度。
border-radius简写属性，设置所有四个border-*-radius形状属性。
box-shadow向方框添加一个或多个阴影。
border-image简写属性，设置所有border-image-*属性。
border-image-outset规定边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺。repeated(平铺), rounded(铺满), stretched(拉伸).
border-image-slice规定图像边框的向内偏移。
border-image-source规定用作边框的图片。
border-image-width规定图片边框的宽度。
margin在一个声明中设置所有外边距属性。上, 右, 下, 左. auto/数值px/%.
margin-*设置元素的各个外边距。
padding在一个声明中设置所有内边距属性。上, 右, 下, 左. 数值px/%.
padding-bottom设置元素的下内边距。
list-style在一个声明中设置所有的列表属性。
list-style-image将图象设置为列表项标记。none, url(路径).
list-style-position设置列表项标记的放置位置。outside, inside.
list-style-type设置列表项标记的类型。disc(实心圆), circle, square, decimal(阿拉伯数字), lower-roman, upper-roman, lower-alpha, upper-alpha, none.
position规定元素的定位类型。static(默认), absolute(表移出流，span及div忽略之，非static定位的父级元素的绝对位置), fixed(浏览器的绝对位置), relative(流的一部分，可使元素越过div，是对直接父级元素的相对定位).
float规定框是否应该浮动。表移出流，span敏感之，div忽略之，必须同时指定width。none, left, right(表示对象浮动在文字的方向).
clear规定元素的哪一侧不允许其他浮动元素。none, left, right, both(表示不允许存在浮动对象).
top设置定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom设置定位元素下外边距边界与其包含块下边界之间的偏移。
left设置定位元素左外边距边界与其包含块左边界之间的偏移。
right设置定位元素右外边距边界与其包含块右边界之间的偏移。
*auto, 数值px/%.
overflow规定当内容溢出元素框时发生的事情。visible(不裁切也不加滚动条), auto(默认), hidden(不显示超出的内容), scroll(总显示滚动条).
vertical-align设置元素的垂直对齐方式。Baseline(默认), Super, Sub, Top(垂直靠上), text-top(向上对齐), middle, text-bottom(向下对齐).
clip剪裁绝对定位元素。auto, rect(上数值,右数值,下数值,左数值)(以对象左上角为原点坐标)(在绝对定位下使用).
cursor规定要显示的光标的类型（形状）。default(箭头), pointer, crosshair(十字线), text, help, wait, (字母方向组合nw, ne, n,w等)-resize, auto.
display规定元素应该生成的框的类型。
visibility规定元素是否可见。inherit(默认，继承父对象可见性), visible(总是可见), hidden(总是隐藏).
z-index设置元素的堆叠顺序。auto, 数值(可负)(1表示在最下层，以此类推).
border-collapse 规定是否合并表格边框。collapse(边框压缩).
border-spacing 规定相邻单元格边框之间的离。
caption-side 规定表格标题的位置。
empty-cells 规定是否显示表格中的空单元格上的边框和背景。
table-layout 设置用于表格的布局算法。
content与:before以及:after伪元素配合使用，来插入生成内容。
counter-increment递增或递减一个或多个计数器。
counter-reset创建或重置一个或多个计数器。
quotes设置嵌套引用的引号类型。
crop允许被替换元素仅仅是对象的矩形区域，而不是整个对象。
move-to从流中删除元素，然后在文档中后面的点上重新插入。
page-policy确定元素基于页面的 occurrence 应用于计数器还是字符串值。
filter: alpha(opacity=0-100(越小越透明),finishopacity=0-100,style=0(无渐进),1(直线渐进),2(圆渐进),3(矩形渐进),startx=数值,starty=数值,finishx=数值,finishy=数值).
filter: blur(add=true,false(设置滤镜是否激活),direction=数值,strength=整数值)
filter: dropshadow(color=,offX=数值(阴影相对图像水平移动),offY=数值(阴影相对图像垂直移动),positive=0(透明像素生成阴影),1(不透明像素生成阴影))
@media screen and (min-width: ) and (max-width: ) {}
<link rel="" type="text/css" href=""media="screen and (orientation portrait)" /*表竖屏*/media="not screen and (orientation portrait)" /*表非竖屏*/media="only screen and (max-width: 960px;)" /*表宽度范围*//>
@import url("…css") screen and (width: ) {} /*@import将影响加载速度*/
width, height, //渲染窗口即浏览器宽高
device-width,device-height, //屏幕宽高
orientation,resolution,aspect-ratio: 宽/高,color(颜色位数),monochrome
scan: progressive(逐行扫描)/scan: interlace(隔行扫描),grid…
<meta name="viewport" content="initial-scale=2.0, width=device-width" />
initial-scale表将对象放大为实际的2倍
maximum/minimum-scale表允许用户缩放的上下限（一般是移动端）
user-scalable=no表不允许缩放
@viewport{width: }
@keyframes规定动画。
animation所有动画属性的简写属性，除了animation-play-state属性。
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function规定动画的速度曲线。
animation-delay规定动画何时开始。
animation-iteration-count规定动画被播放的次数。
animation-direction规定动画是否在下一周期逆向地播放。
animation-play-state规定动画是否正在运行或暂停。
animation-fill-mode规定对象动画时间之外的状态。
@keyframes _(自定义动画名称) {0%{…}..%{…}100%{…}}//或把0%、100%替换为from、to，荐用%；
_要有动画的类/元素{animation: _(名称) _(持续时间) _(方式) _(速度);animation-name: _;animation-duration: _;animation-timing-function: (同transition);animation-iteration-count: infinite; (循环播放)animation-play-state: runing/pause;animation-delay: _s;animation-fill-mode: none;}
transition简写属性，用于在一个属性中设置四个过渡属性。
transition-property规定应用过渡的 CSS 属性的名称。
transition-duration定义过渡效果花费的时间。
transition-timing-function规定过渡效果的时间曲线。
transition-delay规定过渡效果何时开始。
:hover使用）：
_{transition: _ _ _ _; (按以下4个属性顺序填充)transition-property: none/all/需要变化的属性名称;transition-duration: _s;transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier;transition-delay: _s;}
transform向元素应用 2D 或 3D 转换。
transform-origin允许你改变被转换元素的位置。
transform-style规定被嵌套元素如何在 3D 空间中显示。
perspective规定 3D 元素的透视效果。
perspective-origin规定 3D 元素的底部位置。
backface-visibility定义元素在不面对屏幕时是否可见。
_{transform: scale(_); //正数，表缩放值；transform: translate(_, _); //各表示右移、下移，负值相反，px/%；transform: rotate(_deg);transform: skew(_deg, _deg); //各表示x轴、y轴，只有一值表示只转动x轴；正值顺，负值逆；transform: matrix();transform-origin: _, _; //变形起点默认为中心点，用此语句可改变其起点。}
尚未成熟，只支持-webkit-，需加前缀
首先在父级元素上设置透视：
perspective: _; //数值，表景深，值小则立体效果强；
其次为各子元素加：
transform-style: preserve-3d;
| 前缀 | 引擎 |
|---|---|
| -khtml- | Konqueror |
| -rim- | RIM |
| -ms- | IE |
| -o- | Opera |
| -moz- | FF |
| -webkit- | Chrome & Safari |
最后以原声明覆盖一遍。
marquee-direction设置移动内容的方向。
marquee-play-count设置内容移动多少次。
marquee-speed设置内容滚动得多快。
marquee-style设置移动内容的样式。
column-count规定元素应该被分隔的列数。
column-fill规定如何填充列。
column-gap规定列之间的间隔。
column-rule设置分割线属性的简写属性。语法同border。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间规则的样式。
column-rule-width规定列之间规则的宽度。
column-span规定元素应该横跨的列数。
column-width规定列的宽度。
columns规定设置column-width和column-count的简写属性。
target简写属性，设置target-name、target-new以及target-position属性。
target-name规定在何处打开链接（链接的目标）。
target-new规定目标链接在新窗口还是在已有窗口的新标签页中打开。
target-position规定在何处放置新的目标链接。
box-align规定如何对齐框的子元素。
box-direction规定框的子元素的显示方向。
box-flex规定框的子元素是否可伸缩。
box-flex-group将可伸缩元素分配到柔性分组。
box-lines规定当超出父元素框的空间时，是否换行显示。
box-ordinal-group规定框的子元素的显示次序。
box-orient规定框的子元素是否应水平或垂直排列。
box-pack规定水平框中的水平位置或者垂直框中的垂直位置。
overflow-x如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
overflow-y如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
overflow-style规定溢出元素的首选滚动方法。
rotation围绕由rotation-point属性定义的点对元素进行旋转。
rotation-point定义距离上左边框边缘的偏移点。
appearance允许您将元素设置为标准用户界面元素的外观
box-sizing允许您以确切的方式定义适应某个区域的具体内容。content-box(在宽度和高度之外绘制元素的内边距和边框), border-box(为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制), inherit.
icon为创作者提供使用图标化等价物来设置元素样式的能力。
nav-down规定在使用arrow-down导航键时向何处导航。
nav-index设置元素的tab键控制次序。
nav-left规定在使用arrow-left导航键时向何处导航。
nav-right规定在使用arrow-right导航键时向何处导航。
nav-up规定在使用arrow-up导航键时向何处导航。
outline-offset对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize规定是否可由用户对元素的尺寸进行调整。
与opacity区别：opacity让整个元素都透明；rgba/hsla只让颜色透明。
opacity规定div的不透明级别。0~1.0.
IE: eot;
others: ttf, svg, woff.
@font-face{font-family:;src: url();src: url(?#iefix) format('embedded-opentype'),url() format('woff'),url() format('truetype'),ulr() format(''svg);font-weigh:;font-style:;}
语法：
text-shadow: _(右阴影大小，负左) _(下阴影大小，负上) _(模糊距离) _(色值); /*单位均可为px/em/rem*/
浮雕效果demo：
text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);
多重阴影demo：
text-shadow: 0 1px #fff, 4px 4px 0 #dad7d7;
语法（与text-shadow同，可能需加前缀，默认为外阴影）：
box-shadow: _ _ _ _;
内阴影：
box-shadow: inset _ _ _ _;
_{linear-gradient(_(方向：to top/bottom或0deg-180deg等), _(初始色值) _(位置：%), …(中间可有多个过渡色，语法同), _(终止色值) _(位置：%));}
_{radial-gradient(_(位置：center/数值px), _(形状：circle/ellipse) _(大小：closest-side/closest-corner/farthest-side/farthest-corner/cover/contain), _ _(色值), …)}
repeating-radial-gradient/repeating-linear-gradient
_{background: url() _ _(定位或颜色信息),url() _ _,url() _ _,url() _ _;background-size: _ _, …(宽、高，按上述顺序), auto/cover/contain;background-repeat: ;background-position: ;}
.class→.intro选择 class="intro" 的所有元素。
#id→#firstname选择 id="firstname" 的所有元素。
*→*选择所有元素。
element→p选择所有<p>元素。
element,element→div,p选择所有<div>元素和所有<p>元素。
element element→div p选择<div>元素内部的所有<p>元素。
element>element→div>p选择父元素为<div>元素的所有<p>元素。
element+element→div+p选择紧接在<div>元素之后的所有<p>元素。
[attribute]→[target]选择带有 target 属性所有元素。
[attribute=value]→[target=_blank]选择 target="_blank" 的所有元素。
[attribute~=value]→[title~=flower]选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value]→[lang|=en]选择 lang 属性值以 "en" 开头的所有元素。
:link→a:link选择所有未被访问的链接。
:visited→a:visited选择所有已被访问的链接。
:active→a:active选择活动链接。
:hover→a:hover选择鼠标指针位于其上的链接。
:focus→input:focus选择获得焦点的 input 元素。
:first-letter→p:first-letter选择每个<p>元素的首字母。
:first-line→p:first-line选择每个<p>元素的首行。
:first-child→p:first-child选择属于父元素的第一个子元素的每个<p>元素。
:before→p:before在每个<p>元素的内容之前插入内容。
:after→p:after在每个<p>元素的内容之后插入内容。
:lang(language)→p:lang(it)选择带有以 "it" 开头的 lang 属性值的每个<p>元素。
element1~element2→p~ul选择前面有<p>元素的每个<ul>元素。
[attribute^=value]→a[src^="https"]选择其 src 属性值以 "https" 开头的每个<a>元素。
[attribute$=value]→a[src$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有<a>元素。
[attribute*=value]→a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个<a>元素。
:first-of-type→p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
:last-of-type→p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。
:only-of-type→p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。
:only-child→p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
:nth-child(n)→p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。
:nth-last-child(n)→p:nth-last-child(2)同上，从最后一个子元素开始计数。
:nth-of-type(n)→p:nth-of-type(2)选择属于其父元素第二个<p>元素的每个<p>元素。
:nth-last-of-type(n)→p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。
:last-child→p:last-child选择属于其父元素最后一个子元素每个<p>元素。
:root→:root选择文档的根元素。
:empty→p:empty选择没有子元素的每个<p>元素（包括文本节点）。
:target→#news:target选择当前活动的 #news 元素。
:enabled→input:enabled选择每个启用的<input>元素。
:disabled→input:disabled选择每个禁用的<input>元素。
:checked→input:checked选择每个被选中的<input>元素。
:not(selector)→:not(p)选择非<p>元素的每个元素。
::selection→::selection选择被用户选取的元素部分。
%百分比
in英寸
cm厘米
mm毫米
em1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。
ex一个 ex 是一个字体的x-height(通常是字体尺寸的一半)
pt磅(1 pt 等于 1/72 英寸)
pc12点活字(1 pc 等于 12 点)
px像素(计算机屏幕上的一个点)