Background属性
background-color 背景颜色 可用英文单词 或者 RGB(X,X,X)

background-image 背景图片， background-image: url(xxxx.png);

background-repeat 是否重复，比如，当图片不够大时，选择repeat则会用多张图片填满，边缘显示可能不完整，如果设置为 no-repeat 就只显示那张图片，不会出现多张同样的。

background-position 这是设置图片的位置，分为 水平方向 和 垂直方向<br/>
水平方向有 left center right<br/>
垂直方向有 top center bottom<br/>

用法： background-position: right top; // 显示在右上角 先 水平 再 垂直 <br/>
当然 right 跟 top 可以替换成 像素 如 200px 200px 距离左边200像素 上边200像素。

连写顺序：

background: background-color background-image background-repeat background-position

字体属性
font-size: 20px;

font-style: normal; // Italy 斜体 normal 是正常

color: red;

font-family: "楷体";

font-weight: bold bolder lighter // 粗 加粗 细线

连写顺序：

font: font-style font-weight font-size font-family
// font-size 跟 font-family 必须得有，而且必须得放在最后两个

行内元素
可以多个标签放在同一行，但不能设置宽高（其实不是不能，而是设置了但没效果）

有这些元素： span u b i s ins strong del em a

块级元素
块级元素都是单独占一行的，可以设置宽和高

有这些元素： div p h ul ol dl li

通过设置 display 属性，可以让标签，既能够设置宽和高又能够在同一行（行内块级元素） display: inline-block; // 还可以是 block inline

a标签的字体颜色是不会从父级元素继承下来的，要想设置其颜色要直接指定，比如这个a标签有class或者id，就直接给它的class或者id设置属性

h标签的字体大小也不会从父级元素中继承下来。

如果 div不设置宽和高，那么这个div的宽会 从父级元素直接继承下来 ，但不会继承高度，也就是说高度为0（记住宽可以继承，高不可以继承）
CSS初始化 *{margin: 0; padding: 0;}
让一个div居中，（仅仅是水平居中） margin: 0 auto; 字体的居中用 text-align: center
一个class可以被多个标签使用，一个标签也可以有多个class

但是 一个个标签只能有一个id，一个id也只能被一个标签使用。
通配符在进行选择时，会遍历页面上的所有标签，并给其设置相应的属性（所以一般情况下不建议使用）
标签选择器
子元素选择器（用大于号 > 进行选择）

子元素选择器只作用于第一代子元素，也就是直接子元素

<div class="father">
    <p class="son1">abc</p>
    <p class="son2">def</p>
    <div class="son">
        <p class="son4">gfh</p>
    </div>
    <p class="son3">jkl</p>
</div>

.father > p 则是 选择 father这个父div下的直接 p 元素（也就是son1 son2 son3 三部分）

后代选择器 （父元素与子元素用 空格 隔开）
还是上面的代码 如果是 .father .son p{样式} 则会选择所有的 p 标签

也就是说，后代选择器，作用于 N（自然数） 代子元素。

<br/><br/><br/><br/><br/><br/>

border-radius: 10px; 设置圆角

不同浏览器有不同的内核渲染，为了兼容要这样写：

-webkit-border-radius: 50%; // chrome和Safari
-moz-border-radius: 50%; // Firefox
-ms-border-radius: 50%; // ie
-o-border-radius: 50%; // opera
border-radius: 50%; // 一般

一个矩形分四个角，左上，右上，左下，右下。

border-top-left-radius: 10px; // 左上角10px圆角
border-top-right-radius: 10px; // 右上角10px圆角
border-bottom-left-radius: 10px; // 左下角10px圆角
border-bottom-right-radius: 10px; // 右下角10px圆角

四个属性可单独设置。

另一种设置圆角的方法：
参数值为1个：四个角都是该圆角属性

border-radius: 10px 8px; // 左上角和右下角为10px 右上角和左下角为8px
border-radius: 10px 8px 9px; // 左上角为10px 右上角和左下角为8px 右下角为9px
border-radius: 10px 8px 9px 7px; // 左上角为10px 右上角为8px 右下角为9px 左下角为7px

盒子阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

假设扩展半径设置为10px;则阴影会向上向下向左向右增加10px； （可以有负值）

阴影模糊半径设置后，阴影没那么生硬，会模糊。值越大，模糊面积越大。(没有负值)

x轴偏移量是指阴影会超出背景图片横向多少px。 y则超出背景图片纵向多少。

x 和 y可以有负值，x负的会向左，y负会向上。（正的是右下）

如果要让阴影出现在盒子里面，则在 box-shadow: 作为第一个参数或者放在最后，其他位置无效。 有inset时，x和y正值为左和上。

为边框应用图片

使用 border-image, 语法：

切割图片的宽度，也就是四个 70 那里，是根据 border: 70px solid red; 里面的70来设定的，如果里面是 60，则border-image上的也是设置60。

颜色之RGBA
color：rgba(R,G,B,A)
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

渐变色彩

第一个参数：指定渐变方向，可以用“角度”的关键词或“英文”来表示：

图片中少了 to bottom left (从右上角到左下角) 和 to bottom right (从左上角到右下角)
​
​ 第一个参数省略时，默认为“180deg”，等同于“to bottom”。
​
​ 第二个和第三个参数，表示颜色的起始点 和 结束点，可以有多个颜色值。
​ 比如

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果如下图：

文字与字体
text-overflow:ellipsis; (clip 为剪切，会显示边界前的，后面的是断的) 控制文字超出边界的部分以什么形式展示。要实现超出边界（溢出）的文字显示为省略号，则还需要强制使文字在同一行显示 white-space: nowrap; 以及溢出的文字隐藏起来 overflow: hidden;

即，这样写：

text-flow: ellipsis;
overflow: hidden;
white-space: nowrap;

嵌入字体：

@font-face{
font-family: "字体名";
src= url("字体在服务器上的路径");
}

注意：这里设置以后，标签样式中的，font-family: "";必须跟上面的一样。
这样即使电脑本地没有该字体，浏览器一样可以显示。

给文字设置阴影
text-shadow: X-Offset Y-Offset blur color;
X-Offset: 是指阴影在x轴方向的偏移距离，为正值时，阴影在右边。负值反之。<br/>
Y-Offset: 是指阴影在y轴方向的偏移距离，为正值时，阴影在下边。负值反之。 <br/>
blur: 阴影模糊的程度，值越大越模糊。不能是负值。
color: 就是阴影的颜色。

背景大小 background-size
background-size: auto | <百分比> | <长度值> | cover | contain

取值说明：

1、auto 默认值。 不改变图片大小，将【以图片原来的大小显示】。
2、百分比： 设为 100%一个值的时候，图片将完整的显示在盒子当中。 两个值时，将以盒子的宽高乘以相应的百分比以后显示。
3、长度值就是设置相对应的长度。如果设置的宽高跟盒子的宽高一样，那效果跟百分百一样的。
4、cover 图片会被等比缩放填 【满整个容器】
5、cantain 将图片缩放至 【某一边贴合容器】

css3属性选择器

html代码：

<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

css代码：

a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}

效果图：<br/>

结构性伪类选择器

-root

:root{ background: orange; }       相当于 <br/>
html{ background: orange; } 可以修改页面背景颜色。 按照字面意思其实就是根选择器。

-not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。<br/>

想给表单中除submit按钮之外的input元素添加红色边框<br/>input:not([type="submit"]){border:1px solid red;}

其他的例子： div:not([class="nav"]){border: 1px solid red;}

-empty

empty 选择器表示的就是空。用来选择 没有任何内容 的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

p:empty{ display: none; } // 隐藏完全没有内容的p标签

-target

:target 选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

来个例子： <br/>
html代码：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>

css代码：

.menuSection{
display: none;
}
#brand:target{
display:block;
}

效果图

一开始 content for brand是不显示的，点击brand以后才显示。

-first-child

顾名思义就是选择父元素的第一个子元素的元素E，记住是子元素而不是后代元素

额外补充：子元素与后代元素的区别

后代元素表达方式：例：#main p{ color:red; } 后代元素则是 父元素后面接空格再接子元素

子元素：表达方式：例：#main>p{ color:red; } 即子元素使用大于号 > 进行连接

后代元素包括子元素，孙子元素，重孙子元素.........

假设 ul里面有6个li标签，则选用 ol>li:first-child{color:orange;} 则序号1（仅仅是数字1）会变橙色。其他不变

-last-child

跟first-child相反的，也就是最后一个。

-nth-child

:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
HTML代码：

<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ol>

css代码：

ol > li:nth-child(2n){
background: orange;
}

效果图：

-nth-last-child

:nth-last-child(n)选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

-first-of-type (last-of-type 跟这个相反)

:first-of-type选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

-nth-of-type(n)

:nth-of-type(n)选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

-nth-last-of-type(n)

:nth-last-of-type(n)选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

-only-child

:only-child选择器选择的是父元素中只有一个子元素。 也就是说，匹配的元素的父元素中仅有一个子元素。 也就是作用于子元素的。

html代码：

<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>

css代码：

.post p {
background: green;
color: #fff;
padding: 10px;
}
.post p:only-child {
background: orange;
}

效果图：

看到没？css里面是对p标签使用的。即对子元素使用，会自动选择出只有一个子元素的父标签。

CSS3选择器

:enabled

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

:disabled

:disabled选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性，即 disabled: disabled;

::selection

::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：

::selection{ // 设置网页中字体被选择时，背景颜色为灰色，字体颜色为粉色
background: #ccc;
color: pink;
}

:read-only

:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了readonly="readonly";

设置处于只读状态元素的样式：

textarea[name="comment"]:read-only{
width: 50px;
height: 20px;
background: red;
}

CSS3变形

旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

div{ // 设置div 绕着原点逆时针旋转45度， deg相当于度
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

扭曲 skew()

skew(x,y) 同时向x，y轴两个方向扭曲（注意所有的skew()都是不会旋转，是会改变外形的）

skew(x) 只向x轴扭曲。 正值时，是left那条线，逆时针对x轴产生角度扭曲。相当于把y轴正半轴当x轴，逆时针产生角度。如果是负值，则是顺时针。

skew(y) 只向y轴扭曲。 正值时，是bottom那条线，顺时针(负值则逆时针)对y轴产生角度扭曲。也就是相当于把x轴正半轴当y轴，与x轴正半轴形成角度。

transform: skew();

skew(45deg) skew(45deg , 45deg) skew(0, 45deg)

translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

一样的有 同时向x轴y轴移动，只向x轴移动，只向y轴移动。
transform: translate(10px)

过渡属性 transistion-property

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

第一，在默认样式中声明元素的初始状态样式；

第二，声明过渡元素最终状态样式，比如悬浮状态；

第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

• transition-property:指定过渡或动态模拟的CSS属性
• transition-duration:指定完成过渡所需的时间,也就是从旧属性过渡到新属性花费的时间长度
• transition-timing-function:指定过渡函数
• transition-delay:指定开始出现的延迟时间 (多个值逗号 , 隔开)

transition-property

特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

用一个简单的例子来说明这个问题：

假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。

transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

Keyframes
Keyframes 被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和@keyframes定义的动画名称完全一致（区分大小写），比如上面的 changecolor 动画名,其实和css中的： div:hover{animation-name: changecolor} 里面动画名一样。如果不一致将不具有任何动画效果。

animation-duration跟上面的transition-duration作用是一样的，用来指定动画播放时间长。

animation-timing-function 跟 transition-timing-function 作用一样，也是那几个函数。

animation-delay 设置动画开始的延迟时间。

animation-iteration-count属性主要用来定义动画的播放次数。

animation-direction 属性主要用来设置动画播放方向，主要有两个值，一个是 normal 一个是 alternate

animation-play-state属性主要用来控制元素动画的播放状态。

参数：

其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

CSS3多列布局

columns

columns语法： columns: || 实现类似报刊，杂志的分栏 <br/>
举例： 实现分2栏，没栏200px columns: 200px 2; 没有列数的话，会根据文本长度以及列宽定列数。

column-gap

column-gap主要用来设置列与列之间的间距, 语法：

column-gap: normal ||

length: 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

normal: 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。

column-rule

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

column-rule:||

column-span

column-span 是分列元素的子元素能跨越多少列。
column-span: none | all 可以配合 nth-child(n) 使用，来设置哪个子元素要跨列

伸缩布局
创建一个flex容器

.flexcontainer{
display: -webkit-flex;
display: flex;
}

项目的显示
Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column; // 也可以设为 row 行显示
flex-direction: column;
}

Flex项目移到顶部
如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。(上一个图是水平，上图是垂直)

.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-start; // 把flex-start改为flex-end就是移动到底部
justify-content: flex-start;
}

Flex项目移动到左边

flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row; // 把row改为column就是竖着移动到左边
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}

Flex项目移动到右边

.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-end; // 其实就是上面的移到左边的start改成end
justify-content: flex-end;
}

Flex项目的水平居中

在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

如果需要使用上面中间垂直，或者左右居中，就删除相应的属性就行。

媒体类型

随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：

说白了就是通过设置媒体类型，让不同你的web在不同设备上尽量最可能的显示，这就需要不同的设备具有不一样的css文件。

常用引用方式有： link @import @media

link:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

@import:

一种 是在样式中通过@import调用另一个样式文件；另一种方法 是在标签中的中引入，但这种使用方法在IE6~7都不被支持

method 1:

@importurl(reset.css) screen;
@importurl(print.css) print;

method 2:

<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>

@media

@media是CSS3中新引进的一个特性，被称为媒体查询。

（1）在样式文件中引用媒体类型：

@media screen {
选择器{/你的样式代码写在这里…/}
}

（2）使用@media引入媒体类型的方式是在标签中的