CSS属性

CSS背景

background-color:red

background-image:url('paper.gif')

background-repeat:no-repeat

background-attachment:feix   

background-position:right top;

body {background:#ffffff  url('img_tree.png')  no-repeat  right top;} (背景简写)

 background-image:url(img_flwr.gif),url(paper.gif);

background-size:80px  60px;    background-size:100%100%;  规定背景图片的尺寸。

background-origin:content-box;  规定背景图片的定位区域。

background-clip:content-box;  规定背景的绘制区域。

---

CSS文本格式

color设置文本颜色

direction设置文本方向。

letter-spacing设置字符间距

line-height设置行高

text-align对齐元素中的文本

text-decoration向文本添加修饰

text-indent缩进元素中文本的首行

text-shadow设置文本阴影

text-transform控制元素中的字母

unicode-bidi设置或返回文本是否被重写

vertical-align设置元素的垂直对齐

white-space设置元素中空白的处理方式

word-spacing设置字间距

---

所有CSS字体属性

font在一个声明中设置所有的字体属性

font-family指定文本的字体系列

font-size指定文本的字体大小

font-style指定文本的字体样式

font-variant以小型大写字体或者正常字体显示文本

font-weight指定字体的粗细。

---

链接样式

a:link {color:#FF0000;}      /* 未访问链接*/

a:visited {color:#00FF00;}  /* 已访问链接 */

a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */

a:active {color:#0000FF;}  /* 鼠标点击时 *

---

所有的CSS列表属性

list-style简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image将图象设置为列表项标志。

list-style-position设置列表中列表项标志的位置。

list-style-type设置列表项标志的类型。

---

CSS 边框属性

border简写属性，用于把针对四个边的属性设置在一个声明。

border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color设置元素的下边框的颜色。

border-bottom-style设置元素的下边框的样式。

border-bottom-width设置元素的下边框的宽度。

border-left简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color设置元素的左边框的颜色。

border-left-style设置元素的左边框的样式。

border-left-width设置元素的左边框的宽度。

border-right简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color设置元素的右边框的颜色。

border-right-style设置元素的右边框的样式。

border-right-width设置元素的右边框的宽度。

border-top简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color设置元素的上边框的颜色。

order-top-style设置元素的上边框的样式。

border-top-width设置元素的上边框的宽度。

border-radius  border-radius:25px;

box-shadow      box-shadow: 10px 10px 5px #888888;

border-image    border-image:url(border.png) 30 30 round;

---

所有CSS 轮廓（outline）属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline在一个声明中设置所有的外边框属性

outline-color设置外边框的颜色

outline-style设置外边框的样式

outline-width设置外边框的宽度

---

margin属性可以有一到四个值。pading和他一样

margin:25px 50px 75px 100px;   

上边距为25px

右边距为50px

下边距为75px

左边距为100px

margin:25px 50px 75px;

上边距为25px

左右边距为50px

下边距为75px

margin:25px 50px;

上下边距为25px

左右边距为50px

margin:25px;

所有的4个边距都是25px

---

所有CSS 尺寸 (Dimension)属性

height设置元素的高度。

line-height设置行高。

max-height设置元素的最大高度。

max-width设置元素的最大宽度

min-height设置元素的最小高度。

min-width设置元素的最小宽度。

width设置元素的宽度。

---

CSSDisplay(显示)与Visibility（可见性）

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

---

CSSPositioning(定位)

Fixed 定位元素的位置相对于浏览器窗口是固定位置。

Relative 定位   相对定位元素的定位是相对其正常位置。

Absolute 定位  绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

---

CSS3渐变（Gradients）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background:linear-gradient(red,blue);/*标准的语法*/从上到下的线性渐变

background:linear-gradient(toright,red,blue);/*标准的语法*/  线性渐变 - 从左到右

background:linear-gradient(tobottomright,red,blue);/*标准的语法*/ 从左上角到右下角的线性渐变

径向渐变（Radial Gradients）- 由它们的中心定义

background:radial-gradient(red,green,blue);/*标准的语法*/

颜色结点不均匀分布的径向渐变：
background:radial-gradient(red5%,green15%,blue60%);/*标准的语法*/

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

background:radial-gradient(circle,red,yellow,green);/*标准的语法*/

---

CSS3文本效果

text-shadow:5px  5px  5px  #FF0000;  给标题添加阴影

box-shadow:10px  10px   5px  grey; 属性适用于盒子阴影

text-overflow

word-wrap  CSS3的换行

word-break 单词拆分换行

hanging-punctuation规定标点字符是否位于线框之外。

punctuation-trim规定是否对标点字符进行修剪。

text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。

text-emphasis向元素的文本应用重点标记以及重点标记的前景色

text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。

text-outline规定文本的轮廓。

text-overflow规定当文本溢出包含元素时发生的事情

text-shadow向文本添加阴影

text-wrap规定文本的换行规则。

word-break规定非中日韩文本的换行规则。

word-wrap允许对长的不可分割的单词进行分割并换行到下一行。

---

CSS3 @font-face 规则

font-family:name

src:URL

font-stretch:normal

font-style:normal

font-weight:noraml

---

CSS3   2D 转换

transform:

matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。transform:translate(50px,100px);

translateX(n)定义 2D 转换，沿着 X 轴移动元素。

translateY(n)定义 2D 转换，沿着 Y 轴移动元素。

scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。transform:scale(2,3);

scaleX(n)定义 2D 缩放转换，改变元素的宽度。

scaleY(n)定义 2D 缩放转换，改变元素的高度。

rotate(angle)定义 2D 旋转，在参数中规定角度。transform:rotate(30deg);

skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。transform:skew(30deg,20deg);

skewX(angle)定义 2D 倾斜转换，沿着 X 轴。

skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

---

CSS33D 转换

transform向元素应用 2D 或 3D 转换。

transform-origin允许你改变被转换元素的位置。

transform-style规定被嵌套元素如何在 3D 空间中显示。

perspective规定 3D 元素的透视效果。

perspective-origin规定 3D 元素的底部位置。

backface-visibility定义元素在不面对屏幕时是否可见。

3D 转换方法

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate3d(x,y,z)        定义 3D 转化。

translateX(x)          定义 3D 转化，仅使用用于 X 轴的值。

translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。

translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。

scale3d(x,y,z)定义 3D 缩放转换。

scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。

rotate3d(x,y,z,angle)定义 3D 旋转

rotateX(angle)定义沿 X 轴的 3D 旋转。

perspective(n)定义 3D 转换元素的透视视图。

---

CSS3过渡

transition:property,duration,ease,delay;

transition简写属性，用于在一个属性中设置四个过渡属性。

transition-property规定应用过渡的 CSS 属性的名称。

transition-duration定义过渡效果花费的时间。默认是 0。

transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。

transition-delay规定过渡效果何时开始。默认是 0。

transition:width1slinear2s;效果与下面相同

transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;

---

CSS3 动画

@keyframes规定动画。

animation所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name规定 @keyframes 动画的名称。

animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function规定动画的速度曲线。默认是 "ease"。

animation-delay规定动画何时开始。默认是 0。

animation-iteration-count规定动画被播放的次数。默认是 1。

animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state规定动画是否正在运行或暂停。默认是 "running"。

---

CSS3 多列属性

column-count指定元素应该被分割的列数。

column-fill指定如何填充列

column-gap指定列与列之间的间隙

column-rule所有 column-rule-* 属性的简写

column-rule-color指定两列间边框的颜色

column-rule-style指定两列间边框的样式

column-rule-width指定两列间边框的厚度

column-span指定元素要跨越多少列

column-width指定列的宽度

columns设置 column-width 和 column-count 的简写

---

CSS3 弹性盒子(Flex Box)

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

各个值解析:

flex-start：

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：

弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items 属性

align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

各个值解析:

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex-wrap 属性

flex-wrap属性用于指定弹性盒子的子元素换行方式。

各个值解析:

nowrap- 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

wrap- 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse-反转 wrap 排列。

align-content 属性

align-content属性用于修改flex-wrap属性的行为。类似于align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

各个值解析:

stretch- 默认。各行将会伸展以占用剩余的空间。

flex-start- 各行向弹性盒容器的起始位置堆叠。

flex-end- 各行向弹性盒容器的结束位置堆叠。

center-各行向弹性盒容器的中间位置堆叠。

space-between-各行在弹性盒容器中平均分布。

space-around- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

弹性子元素属性

完美的居中

以下实例将完美解决我们平时碰到的居中问题。

使用弹性盒子，居中变的很简单，只想要设置margin: auto;可以使得弹性子元素在两上轴方向上完全居中:

align-self

align-self属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex

各个值解析:

auto: 计算值为 1 1 auto

initial: 计算值为 0 1 auto

none：计算值为 0 0 auto

inherit：从父元素继承

[ flex-grow ]：定义弹性盒子元素的扩展比率。

[ flex-shrink ]：定义弹性盒子元素的收缩比率。

[ flex-basis ]：定义弹性盒子元素的默认基准值。

媒体查询:

not:not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

all:所有设备，这个应该经常看到。

@media screen and (min-width: 480px){

body{

background-color:lightgreen;

}

}