@EncyKe
2016-06-08T06:27:28.000000Z
字数 13153
阅读 6410
前端
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
+margin
small
或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
毫米
em
1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。
ex
一个 ex 是一个字体的x-height
(通常是字体尺寸的一半)
pt
磅(1 pt 等于 1/72 英寸)
pc
12点活字(1 pc 等于 12 点)
px
像素(计算机屏幕上的一个点)