[关闭]
@EncyKe 2016-06-08T06:27:28.000000Z 字数 13153 阅读 5283

CSS

前端 CSS



1. 基础

1.1. 语法格式

  1. 选择符{
  2. 样式属性: 值;
  3. 样式属性: 值;
  4. ...
  5. }
  6. /* 注释内容 */

1.2. 链入方式

1.2.1. 链接外部样式表

  1. <link type="text/css" rel="stylesheet" href=文件位置 media="screen(电脑荧屏)/print(打印机)/handheld(移动端)/aural(高速浏览器)/Braille(盲文)/tv(电视)" />

1.2.2. 内部样式表

<head></head>内,<style></style>标签书写;

1.2.3. 导入外部样式表

<head></head>内,<style></style>标签导入地址;

1.2.4. 内联样式表

不实用,不推荐;

1.3. 优先级

  1. html内联 > id选择符 > 类选择符 > 元素选择符;
  2. 最下方的样式优先级最高;
  3. 类选择符相冲突时先由具体性筛选,再由最底部的选择符筛选。

1.4. 基本概念



2. 语法手册

2.1. 背景background

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 规定背景图片的尺寸。

2.2. 字体font

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.

2.3. 文本text

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(换行).

2.4. 尺寸dimension

height 设置元素高度。auto, 数值px.
width 设置元素的宽度。auto, 数值px.
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。

2.5. 边框border

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 规定图片边框的宽度。

2.6. 外边距margin

margin 在一个声明中设置所有外边距属性。上, 右, 下, 左. auto/数值px/%.
margin-* 设置元素的各个外边距。

2.7. 内边距padding

padding 在一个声明中设置所有内边距属性。上, 右, 下, 左. 数值px/%.
padding-bottom 设置元素的下内边距。

2.8. 列表list

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.

2.9. 定位positioning

position 规定元素的定位类型。static(默认), absolute(表移出流,span及div忽略之,非static定位的父级元素的绝对位置), fixed(浏览器的绝对位置), relative(流的一部分,可使元素越过div,是对直接父级元素的相对定位).
float 规定框是否应该浮动。表移出流,span敏感之,div忽略之,必须同时指定widthnone, 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表示在最下层,以此类推).

2.10. 表格table

border-collapse 规定是否合并表格边框。collapse(边框压缩).
border-spacing 规定相邻单元格边框之间的离。
caption-side 规定表格标题的位置。
empty-cells 规定是否显示表格中的空单元格上的边框和背景。
table-layout 设置用于表格的布局算法。

2.11. 内容

content:before以及:after伪元素配合使用,来插入生成内容。
counter-increment 递增或递减一个或多个计数器。
counter-reset 创建或重置一个或多个计数器。
quotes 设置嵌套引用的引号类型。


crop 允许被替换元素仅仅是对象的矩形区域,而不是整个对象。
move-to 从流中删除元素,然后在文档中后面的点上重新插入。
page-policy 确定元素基于页面的 occurrence 应用于计数器还是字符串值。


* 滤镜filter(IE专用)

不透明度

  1. filter: alpha(opacity=0-100(越小越透明),finishopacity=0-100,style=0(无渐进),1(直线渐进),2(圆渐进),3(矩形渐进),startx=数值,starty=数值,finishx=数值,finishy=数值).

动感模糊

  1. filter: blur(add=true,false(设置滤镜是否激活),direction=数值,strength=整数值)

阴影效果

  1. filter: dropshadow(color=,offX=数值(阴影相对图像水平移动),offY=数值(阴影相对图像垂直移动),positive=0(透明像素生成阴影),1(不透明像素生成阴影))

颜色透明

发光效果

灰度处理


2.12. 媒介查询

2.12.1. 响应式布局的实现:

2.12.2. 实现方法

a 内嵌方式:
  1. @media screen and (min-width: ) and (max-width: ) {}
b 外链方式:
  1. <link rel="" type="text/css" href=""
  2. media="screen and (orientation portrait)" /*表竖屏*/
  3. media="not screen and (orientation portrait)" /*表非竖屏*/
  4. media="only screen and (max-width: 960px;)" /*表宽度范围*/
  5. />
c import关键字:
  1. @import url("…css") screen and (width: ) {} /*@import将影响加载速度*/
* 可查询的项目:

width, height, //渲染窗口即浏览器宽高
device-width, device-height, //屏幕宽高
orientation, resolution, aspect-ratio: 宽/高, color(颜色位数), monochrome
scan: progressive(逐行扫描)/scan: interlace(隔行扫描), grid

2.13. 画布缩放

2.13.1. html实现

  1. <meta name="viewport" content="initial-scale=2.0, width=device-width" />

initial-scale表将对象放大为实际的2倍
maximum/minimum-scale表允许用户缩放的上下限(一般是移动端)
user-scalable=no表不允许缩放

2.13.2. CSS实现

  1. @viewport{width: }

2.14. 动画animation

@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 规定对象动画时间之外的状态。

2.14.1. 设定

@keyframes手册

  1. @keyframes _(自定义动画名称) {
  2. 0%{…}
  3. ..%{…}
  4. 100%{…}
  5. }
  6. //或把0%、100%替换为from、to,荐用%;

2.14.2. 引用

Animation手册

  1. _要有动画的类/元素{
  2. animation: _(名称) _(持续时间) _(方式) _(速度);
  3. animation-name: _;
  4. animation-duration: _;
  5. animation-timing-function: (同transition);
  6. animation-iteration-count: infinite; (循环播放)
  7. animation-play-state: runing/pause;
  8. animation-delay: _s;
  9. animation-fill-mode: none;
  10. }

2.15. 过渡transition

transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。
transition-timing-function 规定过渡效果的时间曲线。
transition-delay 规定过渡效果何时开始。

2.15.1. 语法(一般配合:hover使用):

  1. _{
  2. transition: _ _ _ _; (按以下4个属性顺序填充)
  3. transition-property: none/all/需要变化的属性名称;
  4. transition-duration: _s;
  5. transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier;
  6. transition-delay: _s;
  7. }

2.16. 变形transform

transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

2.16.1. 2D

  1. _{
  2. transform: scale(_); //正数,表缩放值;
  3. transform: translate(_, _); //各表示右移、下移,负值相反,px/%;
  4. transform: rotate(_deg);
  5. transform: skew(_deg, _deg); //各表示x轴、y轴,只有一值表示只转动x轴;正值顺,负值逆;
  6. transform: matrix();
  7. transform-origin: _, _; //变形起点默认为中心点,用此语句可改变其起点。
  8. }

2.16.2. 3D

尚未成熟,只支持-webkit-,需加前缀
首先在父级元素上设置透视:
perspective: _; //数值,表景深,值小则立体效果强;
其次为各子元素加:
transform-style: preserve-3d;

* 私有前缀

前缀 引擎
-khtml- Konqueror
-rim- RIM
-ms- IE
-o- Opera
-moz- FF
-webkit- Chrome & Safari

最后以原声明覆盖一遍。

2.17. 滚动marquee

marquee-direction 设置移动内容的方向。
marquee-play-count 设置内容移动多少次。
marquee-speed 设置内容滚动得多快。
marquee-style 设置移动内容的样式。

2.18. 分栏

column-count 规定元素应该被分隔的列数。
column-fill 规定如何填充列。
column-gap 规定列之间的间隔。
column-rule 设置分割线属性的简写属性。语法同border
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。
column-width 规定列的宽度。
columns 规定设置column-widthcolumn-count的简写属性。

2.19. 超链接

target 简写属性,设置target-name、target-new以及target-position属性。
target-name 规定在何处打开链接(链接的目标)。
target-new 规定目标链接在新窗口还是在已有窗口的新标签页中打开。
target-position 规定在何处放置新的目标链接。

2.20. 盒

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 定义距离上左边框边缘的偏移点。

2.21. 用户界面属性

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 规定是否可由用户对元素的尺寸进行调整。

2.22. CSS3颜色rgba/hsla

与opacity区别:opacity让整个元素都透明;rgba/hsla只让颜色透明。

opacity 规定div的不透明级别。0~1.0.

2.23. CSS3字体@font-face

IE: eot;
others: ttf, svg, woff.

  1. @font-face{
  2. font-family:;
  3. src: url();
  4. src: url(?#iefix) format('embedded-opentype'),
  5. url() format('woff'),
  6. url() format('truetype'),
  7. ulr() format(''svg);
  8. font-weigh:;
  9. font-style:;
  10. }

2.24. 阴影

2.24.1. 文字阴影

语法:

  1. text-shadow: _(右阴影大小,负左) _(下阴影大小,负上) _(模糊距离) _(色值); /*单位均可为px/em/rem*/

浮雕效果demo:

  1. text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);

多重阴影demo:

  1. text-shadow: 0 1px #fff, 4px 4px 0 #dad7d7;

2.24.2. 盒阴影

语法(与text-shadow同,可能需加前缀,默认为外阴影):

  1. box-shadow: _ _ _ _;

内阴影:

  1. box-shadow: inset _ _ _ _;

2.25. 渐变

2.25.1. 线性

  1. _{
  2. linear-gradient(_(方向:to top/bottom0deg-180deg等), _(初始色值) _(位置:%), …(中间可有多个过渡色,语法同), _(终止色值) _(位置:%));
  3. }

2.25.2. 径向

  1. _{
  2. radial-gradient(_(位置:center/数值px), _(形状:circle/ellipse) _(大小:closest-side/closest-corner/farthest-side/farthest-corner/cover/contain), _ _(色值), …)
  3. }

2.25.3. 重复渐变

repeating-radial-gradient/repeating-linear-gradient

2.26. 多重背景

  1. _{
  2. background: url() _ _(定位或颜色信息),
  3. url() _ _,
  4. url() _ _,
  5. url() _ _;
  6. background-size: _ _, …(宽、高,按上述顺序), auto/cover/contain;
  7. background-repeat: ;
  8. background-position: ;
  9. }


3. 选择器手册

.class.intro 选择 class="intro" 的所有元素。
#id#firstname 选择 id="firstname" 的所有元素。
** 选择所有元素。
elementp 选择所有<p>元素。
element,elementdiv,p 选择所有<div>元素和所有<p>元素。
element elementdiv p 选择<div>元素内部的所有<p>元素。
element>elementdiv>p 选择父元素为<div>元素的所有<p>元素。
element+elementdiv+p 选择紧接在<div>元素之后的所有<p>元素。
[attribute][target] 选择带有 target 属性所有元素。
[attribute=value][target=_blank] 选择 target="_blank" 的所有元素。
[attribute~=value][title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value][lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
:linka:link 选择所有未被访问的链接。
:visiteda:visited 选择所有已被访问的链接。
:activea:active 选择活动链接。
:hovera:hover 选择鼠标指针位于其上的链接。
:focusinput:focus 选择获得焦点的 input 元素。
:first-letterp:first-letter 选择每个<p>元素的首字母。
:first-linep:first-line 选择每个<p>元素的首行。
:first-childp:first-child 选择属于父元素的第一个子元素的每个<p>元素。
:beforep:before 在每个<p>元素的内容之前插入内容。
:afterp:after 在每个<p>元素的内容之后插入内容。
:lang(language)p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个<p>元素。
element1~element2p~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-typep:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。
:last-of-typep:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。
:only-of-typep:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。
:only-childp: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-childp:last-child 选择属于其父元素最后一个子元素每个<p>元素。
:root:root 选择文档的根元素。
:emptyp:empty 选择没有子元素的每个<p>元素(包括文本节点)。
:target#news:target 选择当前活动的 #news 元素。
:enabledinput:enabled 选择每个启用的<input>元素。
:disabledinput:disabled 选择每个禁用的<input>元素。
:checkedinput:checked 选择每个被选中的<input>元素。
:not(selector):not(p) 选择非<p>元素的每个元素。
::selection::selection 选择被用户选取的元素部分。



4. 单位

% 百分比
in 英寸
cm 厘米
mm 毫米
em 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。
ex 一个 ex 是一个字体的x-height(通常是字体尺寸的一半)
pt 磅(1 pt 等于 1/72 英寸)
pc 12点活字(1 pc 等于 12 点)
px 像素(计算机屏幕上的一个点)



5. 盒模型

5.1. CSS三种定位机制

  1. 标准文档流
  2. 浮动
  3. 绝对定位

5.2. 盒模型层级(由上而下)

  1. border
  2. content + padding
  3. background-image
  4. background-color
  5. margin


添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注