CSS 效果

<link rel="stylesheet" type="text/css" href="15.css" />  

<pre>

vertical-align:100%; 垂直对齐方式
text-align:center; /*水平对齐，中心对齐*/
margin-left:auto; margin-right:auto;IE7之后的居中技术
align="center":居中

float:left;   飘，左飘
box-shadow:5px 10px 10px 0px #EDEDED;  阴影

letter-spacing:20px; 字间距
word-spacing:30px;/*词间距，对中文不起作用*/

white-space:nowrap; 不换行 出现横向滚动条

direction:rtl;/*文字流动的方向，这个从右到左*/

p.pageOne:first-letter {font-size:42px;/*段落的首字母会变的很大*/}
p.pageOne:first-line {font-weight:bold;/*段落的第一行会变粗体*/}

border-style 控制边框的样式 solid,dotted等等
border:solid #CCC 0.5px;  边框:实体 颜色 宽度
border-top:none;   去掉上边框

width: calc(100% - 50px); 我的宽度为100% - 50px

line-height:6px;  行高
border-radius:50px;  边框圆角

 white-space:nowrap; 不换行
overflow:hidden; 文字会隐藏     
overflow:scroll;会出现滚动条


font-weight:bold;/*字体粗体*/
font-family:family, verdana（宋体）
font-variant:small-caps;  小型大写字母
 
text-decoration:underline;/*下划线u*/
text-decoration:overline;/*上划线*/
text-decoration:line-through;/*删除线s*/

a:link   没有点过
a:active 处于激活状态的
a:visited  点过的a元素
a:link:hover 正常状态下的a元素,当鼠标移动到其上时会使用下列规则

font-size字体大小   元素将文本加粗显示:b   元素的内容显示来斜体:i   删除线:s 
sup 使元素成为上标   sub使元素成为下标  br:硬换行   hr:水平线   small:使内容变小

text-decoration:underline;   下划线
text-decoration:none;/效果就是去掉默认的下划线*/

div:hover   悬停
visited:hover 访问过 的不会应用下面的规则

visibility:hidden  隐藏
display:none       文档流中完全拉出

position:relative;  相对定位 
position:absolute; 绝对定位 把元素从普通流中移除
position:fixed;    定定位


li.a {list-style:none;}
li.b {list-style:disc;/*圆点*/}
li.c {list-style:circle;/*圆圈*/}
li.d {list-style:square;/*方块*/}
li.e {list-style:decimal;/*数字*/}
li.f {list-style:lower-alpha;/*小写字母*/}
li.g {list-style:upper-alpha;/*大写字母*/}
li.h {list-style:lower-roman;/*小写罗马字母*/}
li.i {list-style:upper-roman;/*大写罗马字母*/}

ul {list-style-position:outside;}
ol {list-style-position:inside;/*文本在项目符号的下面对齐*/ }

/*自定义项目符号，这个是我们喜欢的，用一张自已的图片做项目符号*/
ul {list-style-image:url(images/list.png);}

cursor:pointer;  光标移动上去的时候变化指标


<!--新增的属性:contenteditable:它可以使任何html成对的包含的元素处于可编辑状态 -->
<div contenteditable>请试着写字</div>
<div hidden>这里是一些看不见的内容</div>
<div >这里是一些看得见的内容</div>

<ol><li> 有序列表 </li></ol> 默认以数字为序号 start="4"  
type="a":小写字母来做序号  type="A":大写的字母为序号   type="i"  type="I"




img 图片效果
align="right" /*对齐方式*/
border-radius:50px; /*边框圆角*/
<img src="tupian/gx.png" class="yuan" style="border-radius:20px; margin-left:50px;" width="160" 

height="201" align="left" hspace="12" vspace="12">



跨而锚点链接
<a href="menu.html#starters">开始</a> | 
<a href="menu.html#mains">主要部份</a> | 
<a href="menu.html#ends">尾部</a>

<a href="http://www.qq.com/">QQ</a> 
<a id="top">项部</a>   <a href="#top">返回顶部</a><!--这是一个锚点链接 -->
<a href="#di1">第一章</a></li><!--这是一个锚点链接 -->   <a id="di1">第一章</a>
<img src="images/top.jpg" title="注意了" />


<a href="http://www.biying.com" target="_blank">biying</a> 在新的页面打开 target的属性值是_blank
<a href="http://biying.com" accesskey="b" target="_blank"> accesskey属性所指定的字母用来设置快捷键，当我

们用alt+b时就会激活这个超链接，回车表格

<ol><li> 有序列表 </li></ol> 默认以数字为序号 start="4"  
type="a":小写字母来做序号  type="A":大写的字母为序号   type="i"  type="I"

<ul><li> 无序列表 </li></ul>  默认是以小圆点为项目符号
type="disc"是以小圆点为项目符号   type="circle"是以小圆圈为项目符号
type="square":是以小方块为项目符号 

<dl>定义列表，其中的<dt>表明要定义的术语其后的         
    <dd>表明前面指明术语的定义
<dl>定义列表 <dd>表明前面指明术语的定义  <dl>男人</dl> <dd>男人不能生孩子</dd>



伸缩盒 & 渐变 & 多媒体
overflow:hidden; 超出部分掩藏

text-align:center； 中心对齐

clear:both 清除数据及格式

font-weight:bold;字体加粗

target="_blank" 连接在新页面显示

background-repeat:repeat-x  背景重复属性,横向重复
background-image 背景图片属性 url
background-position: 0 top;  背景图片位置

display:flex;

flex-grow:2  伸缩增长

flex-shrink:3  收缩减少

min-width:300px; 300px-600px 以内收缩减少
max-width:600px;

flex-basis:400px;/flex-basis: 100%;  绝对数/百分比计算收缩

flex-direction:row-reverse;   反转

flex-direction:column： 纵向排列


transition:background-color .5s ease-in;  背景色5秒过渡

鼠标移动到上面时,在5s内慢慢向右移动
transition-timing-function:ease-in;
transition-property:left;
transition-duration:5s;
:hover{left:500px;}
ease-in： 由慢到快
ease： 平滑过渡
ease-out： 由快到慢
ease-in-out： 由慢到快再到慢

延迟0.6s后开始过渡   平移
transition-property:all;   
transition-duration:.5s;
transition-timing-function:ease;
transition-delay:.6s;        

宽度大于500px小于800px时
@media all and (min-width:500px) and (max-width:700px){  }
高度大于300px小于500px时
@media all and (min-height:300px) and (max-height:500px){ }

设备分辨率宽度设置为1024px时
@media screen and (device-width:1024px){ } 

设备分辨率高度设置为800px时
@media screen and (min-device-height:768px){ }

当输出设备中的页面可见宽度大于高度时
@media not screen and (orientation:portrait){ }

当输出设备中的页面可见宽度与高度比率小于或等于20:11时
@media screen and (max-aspect-ratio:22/11){ }

当你将输出设备屏幕分辨率为16:10时
@media screen and (device-aspect-ratio:16/10){ }

动画   2秒后由快到慢平移   opacity 透明
.a1{transform:translate(55px);animation:animations 2s ease-out; 2s}
@keyframes animations{
    0%{transform:translate(0);opacity:0;}
    50%{transform:translate(30px);opacity:1;}
    70%{transform:translate(35px);opacity:1;}
    100%{transform:translate(60px);opacity:0;}
}

4秒后由慢到快显示 
.a2{text-align:center;font-size:26px;
animation:animations2 5s ease-in-out 4s;}
@keyframes animations2{
    0%{opacity:0;}
    40%{opacity:.8;}
    100%{opacity:.3;}
}