过渡使用 trainsition 属性，让元素的样式变化，不再瞬间完成，而是可以设定时间，在时间段内逐渐完成。
对单独的div元素做分别做设置进行属性说明：
1、设置在3秒内完成颜色的变化
2、可以分别对不同的属性分开做时间长度的设定，记得用逗号隔开
3、延迟delay：想在某个属性开始执行样式变化后的多少秒，才让另一个属性开始进行样式的动态变化，就可以使用延迟。用法就是：
2s 1s width ,意思就是在高度开始发生变化后的1s后，width的宽度才开始展现变化，然后在2s内完成宽度从30px到60px的变化。
delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果
3、变化的速度：默认不设定，就是逐渐放慢的，默认值是ease
还可以额外指定设置：
linear:匀速
ease-in：加速
ease-out：减速
上述的三个情况，可以综合写为：
对应的变化就是，div的宽度瞬间变化为60px,然后高度在宽度变化后的1s之后才开始发生变化，在3秒内逐渐加速完成。
重点：
兼容性：各大浏览器基本已经支持无前缀的transition，所以可以直接使用不加前缀；
transition的变化设置，是只对有明确数值设置变化的，对于none,block这类的文字描述无效；
有效性：transition是一次性的，无法重复，除非反复触发。
1、相比于过渡属性transition的设置，动画animation的实现支持更为复杂的动态样式效果。
对单独的div元素做分别做设置进行属性说明：
1、使用animation动画属性，最重要的就是配合有“关键帧”——@keyframes
样式设置如下：
这样的设置，就是将1s分为3帧，每帧显示不同的背景颜色，然后动画效果只显示1次。
注意动画执行完成之后，就恢复元素原来定义的样式设置,如果原来没有这个样式的定义，那也是动画执行完成后恢复没有的状态。
@keyframes的写法比较松泛：
0%等同于from,100%等同于to：
如上面的写法就等同于：
下面的关键帧的写法也是有效的：
当然，（1）也是有延迟效果的设置：设置延迟多少秒后执行动画
（2）每帧之间是平滑过渡的，当然也可以设置为分步过渡，这样就有卡顿的效果：
解释：该动画，在停留1秒后开始执行，执行3次，每次执行时间为2秒，在2秒时间执行完成rainbow定义的关键帧样式，然后分步执行，有卡顿效果。
2、动画持续：动画效果默认只播放一次，加入infinite关键字，可以让动画无限次播放
3、指定动画播放的次数，直接写数值：
4、如果想要让动画结束后，停留在结束状态的样式，而不是默认变为起始状态，就可以添加关键字：
animation-fill-mode属性：
none：默认值，回到动画没开始时的状态
forwards：让动画停留在结束状态
backwards：让动画回到第一帧的状态
4、如果想要将帧数的设置，反向执行，就可以使用animation-direction属性：
normal：动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放
reverse：动画执行，先从结束帧的样式执行跳回到起始帧的样式。例如：
所有的transform属性设置，都不会改变元素占据的位置，还是保留的
1、旋转rotate
通过rotate设置旋转角度，来旋转元素
以div元素为例:
···
<body>
<div class="transform"></div>
</body>
···
2、位移translate
设置X轴、Y轴方向的位移值
设置X轴方向的位移值
设置Y轴方向的位移值
3、缩放scale
设置元素水平方向和垂直方向同时缩放
设置元素水平方向缩放
设置元素垂直方向缩放
只设置一个参数，设置元素水平方向和垂直方向，同一比例同时缩放
4、扭曲：skew，设置元素的平面XY轴的扭曲角度
设置元素X轴，Y轴的扭转角度
只设置一个参数，元素X轴，Y轴的扭转角度相同
设置元素X轴的扭转角度
设置元素Y轴的扭转角度
一、html标签<pre>...</pre>文字格式化
<div>......</div>列块容器
字体大小变化 <font size=?>想输入的字</font>
字体颜色 <font color="...">想输入的字</font>
字体变粗 <b>想输入的字</b>
字体变斜 <i>想输入的字</i>
字体加下划线 <u>想输入的字</u>
对正中央ㄉ语法 <p align="center">内容</p>
对正左边ㄉ语法 <p align="left">内容</p>
对正右边ㄉ语法 <p align="right">内容 </p>
字体删除线 <s>想输入的字</s>
字体设置 <font face="字体名称">想输入的字</font>
打字机字体 <tt>想输入的字</tt>
上标字 <sup>想输入的字</sup>
下标字 <sub>想输入的字</sub>
水平线 <hr color="...">
换行输入 想输入的字<br>想输入的字
超链接 <a href="想链接网址">链接地的名称</a>
<a href="mailto:填入email">要显示的字打这里</a>网络邮寄标签
贴图 <img src="图形的网址">
跑马灯(循环) <marquee behavior=scroll>想输入的字</marquee>
外部文件导入格式标签
CSS外部导入格式：
<link rel="stylesheet" type="text/css" href="/css.css" />
直接引用：
<style type="text/css">
<!--
id{...}
-->
</style>
javascript - 加载外部.js独立文件：
<script type="text/javascript" src="/script.js"></script>
二、CSS文字属性：
color : #999999/*文字颜色*/
font-family : 宋体,sans-serif/*文字字体*/
font-size : 9pt/*文字大小*/
font-style:itelic/*文字斜体*/
font-variant:small-caps/*小字体*/
letter-spacing : 1pt/*字间距离*/
line-height : 200%/*设置行高*/
font-weight:bold/*文字粗体*/
vertical-align:sub/*下标字*/
vertical-align:super/*上标字*/
text-decoration:line-through/*加删除线*/
text-decoration:overline/*加顶线*/
text-decoration:underline/*加下划线*/
text-decoration:none/*删除链接下划线*/
text-transform : capitalize/*首字大写*/
text-transform : uppercase/*英文大写*/
text-transform : lowercase/*英文小写*/
text-align:right/*文字右对齐*/
text-align:left/*文字左对齐*/
text-align:center/*文字居中对齐*/
text-align:justify/*文字分散对齐*/
vertical-align属性
vertical-align:top/*垂直向上对齐*/
vertical-align:bottom/*垂直向下对齐*/
vertical-align:middle/*垂直居中对齐*/
vertical-align:text-top/*文字垂直向上对齐*/
vertical-align:text-bottom/*文字垂直向下对齐*/
三、CSS符号属性：
list-style-type:none/*不编号*/
list-style-type:decimal/*阿拉伯数字*/
list-style-type:lower-roman/*小写罗马数字*/
list-style-type:upper-roman/*大写罗马数字*/
list-style-type:lower-alpha/*小写英文字母*/
list-style-type:upper-alpha/*大写英文字母*/
list-style-type:disc/*实心圆形符号*/
list-style-type:circle/*空心圆形符号*/
list-style-type:square/*实心方形符号*/
list-style-image:url(/dot.gif)/*图片式符号*/
list-style-position:outside/*凸排*/
list-style-position:inside/*缩进*/
四、CSS背景样式：
background-color:#F5E2EC/*背景颜色*/
background:transparent/*透视背景*/
background-image : url(/image/bg.gif)/*背景图片*/
background-attachment : fixed/*浮水印固定背景*/
background-repeat : repeat/*重复排列-网页默认*/
background-repeat : no-repeat/*不重复排列*/
background-repeat : repeat-x/*在x轴重复排列*/
background-repeat : repeat-y/*在y轴重复排列*/
指定背景位置
background-position : 90% 90%/*背景图片x与y轴的位置*/
background-position : top/*向上对齐*/
background-position : buttom/*向下对齐*/
background-position : left/*向左对齐*/
background-position : right/*向右对齐*/
background-position : center/*居中对齐*/
五、CSS连接属性：
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url("光标文件名.cur"),text}
六、CSS框线一览表：
border-top : 1px solid #6699cc/*上框线*/
border-bottom : 1px solid #6699cc/*下框线*/
border-left : 1px solid #6699cc/*左框线*/
border-right : 1px solid #6699cc/*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表单运用：
文字方块 <input type="text" name="T1" size="15">
按钮 <input type="submit" value="submit" name="B1">
复选框 <input type="checkbox" name="C1">
选择钮 <input type="radio" value="V1" checked name="R1">
多行文字方块 <textarea rows="1" name="S1" cols="15"></textarea>
下拉式菜单 <select size="1" name="D1"><option>选项1</option>
<option>选项2</option></select>
八、CSS边界样式：
margin-top:10px/*上边界*/
margin-right:10px/*右边界值*/
margin-bottom:10px/*下边界值*/
margin-left:10px/*左边界值*/
九、CSS边框空白
padding-top:10px/*上边框留空白*/
padding-right:10px/*右边框留空白*/
padding-bottom:10px/*下边框留空白*/
padding-left:10px/*左边框留空白*/
基本语法
规则
选择符
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如， P { text-indent: 3em }
当中的选择符是P。
类选择符
单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如，
<P
例如，code.html.proprietary是无效的。</p>
类的声明也可以无须相关的元素:
.note { font-size: small }
在这个例子，名为note的类可以被用于任何元素。
一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。
ID 选择符
ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:
#svp94O { text-indent: 3em }
这点可以参考HTML中的ID属性:
<P ID=svp94O>文本缩进3em
关联选择符
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符
P EM { background: yellow }
是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。
声明
属性
一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。
值
声明的值是一个属性接受的指定。例如，属性颜色能接受值red。
组合
为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明:
H1, H2, H3, H4, H5, H6 {
color: red
font-family: sans-serif }
继承
实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。
有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。
注解
样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
伪类和伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。
伪类或伪元素规则的形式如
选择符:伪类 { 属性: 值 }
或
选择符:伪元素 { 属性: 值 }
伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:
选择符.类: 伪类 { 属性: 值 }
或
选择符.类: 伪元素 { 属性: 值 }
定位锚伪类
伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。
一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下:
A:link { color: red }
A:active { color: bluefont-size: 125% }
A:visited { color: greenfont-size: 85% }
首行伪元素
通常在报纸上的文章，例如Wall Street Journal中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:
P:first-line {
font-variant: small-caps
font-weight: bold }
首个字母伪元素
首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:
P:first-letter { font-size: 300%float: left }
会比普通字体加大三倍。
CSS在英文中有如下几种常见的缩写：
1，Cascading Style Sheets 层叠样式表
2，Content Scrambling System DVD电影的加密系统
3，Cast Semi-Steel 半铸钢, 钢性铸铁
4，College Scholarship Service 大学奖学金处
其中在网络上最常见的是Cascading Style Sheets（层叠样式表）
什么是Cascading Style Sheets（层叠样式表）
* CSS是Cascading Style Sheets(层叠样式表)的简称.
* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
* 在标准网页设计中CSS负责网页内容(XHTML)的表现.
* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
* 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
* CSS是由W3C的CSS工作组产生和维护的.
Cascading Style Sheets（层叠样式表）的历史
* 1996年W3C正式推出了CSS1.
* 1998年W3C正式推出了CSS2.
* CSS2.1是W3C现在正在推荐使用的.
* CSS3现在还处于开发中.
网页设计中常用的CSS属性
文字或元素的颜色 color
背景颜色 background-color
背景图像 background-image
字体 font-family
文字大小 font-size
列表样式 list
鼠标样式 cursor
边框样式 border
内补白 padding
外边距 margin
等...
css可以用任何写文本的工具进行开发,如文本工具,dreamweaver开发
css也是一种语言,这种语言要和或者x语言相结合才起作用,
css简单来说就是用来美化网页用的,用css语言来控制网页的外观
举个例子
x部分:
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">论坛</a></li>
</ul>
此时在页面上的表达形式是一个竖向列表,这样不够美观,
可以css来改善这个列表为一个横向导航条和超链接
css部分:
ul{list-style:nonemargin:0pxpadding:0px}
ul li{margin:0pxpadding:0pxfloat:left}
ul li a{display:blockwidth:100pxheight:30pxbackground:#efefefcolor:#333text-decoration:none}
ul li a:hover{background:#333color:#fff}
添加上css后,这个列表变成横向的导航条了,超级链接是淡色背景,灰色字体,没有下划线,高度是30像素,宽度是100像素
当我们鼠标经过这个超级链接时候,变成灰色背景,白色字体
