CSS属性列表

以下为最近总结的CSS属性列表，这里做下笔记

 CSS属性组目录列表：

 1 .  动画；2 .  背景；3 .  边框和轮廓；4 . Box盒子属性；5 . 可伸缩框；6 . 字体；7 . 表格属性；

 8 . 文本属性；9 . 2D/3D 转换属性transform； 10 . 过渡属性transition；

11 . 用户界面属性（User-interface）；

 

 

下面具体介绍下各个属性

 （1 . 动画）

【简介】

   动画是使元素从一种样式逐渐变化为另一种样式的效果，并且可以改变任意多的样式任意多的次数

   一般使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

   0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器

【兼容】

   IE10、Firefox 以及 Opera 均支持动画属性，而Chrome 和 Safari 需要前缀 -webkit-

 【主要内容】

  1. CSS3的@keyframes 规则； 2. animation 属性及它所配置的6个动画属性

      ①animation-name动画名；②animation-duration动画持续时间；③animation-timing-function定时功能；

      ④animation-delay动画延迟；⑤animation-iteration-count动画迭代计数；⑥animation-direction动画方向

【详解】

  具体我在后面文章http://570109268.iteye.com/admin/blogs/2410427里做了总结

 

（2 . CSS背景属性）

 ①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动；

  常见用法：设置固定的背景图像，使图像不会随着页面的其他部分滚动

 ②background-clip背景修剪------规定背景的绘制区域；

 ③background-origin背景来源------规定 background-position 属性相对于什么位置来定位；

  属性值：与背景修剪属性值相同，border-box边界框；padding-box填充盒；content-box内容盒

 ④background-size背景尺寸------规定背景图像的尺寸；

 【详解】具体我在后面文章http://570109268.iteye.com/admin/blogs/2410426里做了总结

 

（3 . 边框和轮廓）

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

 【兼容】IE8及其他主流浏览器均支持

  注意：轮廓线不会占据空间，也不一定是矩形，outline 简写属性在一个声明中设置所有的轮廓属性

  可以按顺序设置如下属性：outline-color，outline-style，outline-width

<style type="text/css">
p {
  border:1px solid red;
  outline:6px dotted #00ff00;
}
</style>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 
才支持 outline 属性。</p>

 【拓展：轮廓偏移outline-offset 】

   outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

  兼容：除了IE外，其他主流浏览器均兼容

  案例：在边框边缘之外 15 像素处的绘制轮廓

 

div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

 

 

②圆角属性

 border-top-left-radius------定义边框左上角的圆角；border-top-right-radius------定义边框右上角的圆角；

 border-bottom-left-radius------定义边框左下角圆角；border-bottom-right-radius------定义边框右下角圆角

 ③阴影属性

 box-shadow------向方框添加一个或多个阴影

 语法：box-shadow: h-shadow v-shadow blur spread color inset;

 【兼容】IE9+及其他主流浏览器均支持

 【IE兼容方案】①引入.htc文件；②使用IE的Shadow滤镜。

   具体我在后面文章http://570109268.iteye.com/blog/2407672里做了总结

h-shadow	必需，水平阴影的位置。允许负值（正值向右，负值向左）	测试
v-shadow	必需，垂直阴影的位置。允许负值（正值向下，负值向上）	测试
blur	可选，模糊距离	测试
spread	可选，阴影的尺寸	测试
color	可选，阴影的颜色	测试
inset	可选，将默认的外部阴影 (outset) 改为内部阴影	测试

 注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0

 

 （4 . Box盒子属性）

 ①overflow-x  水平滚动；

 ②overflow-y  垂直滚动；

 ③overflow-style  规定溢出元素的首选滚动方法（目前无浏览器支持）；

 ④rotation  围绕由rotation-point属性定义的点对元素进行旋转（目前无浏览器支持）；

 ⑤rotation-point  定义距离上左边框边缘的偏移点（目前无浏览器支持）；

 

 （5 . 可伸缩框Flexible Box）

 ①box-align  规定如何对齐框的子元素

 

 （6 . 字体属性）

font	在一个声明中设置所有字体属性
font-family	规定文本的字体系列
font-size	规定文本的字体尺寸
font-size-adjust	为元素规定 aspect 值（IE不支持）
font-style	规定文本的字体样式
font-variant	规定是否以小型大写字母的字体显示文本
font-weight	规定字体的粗细

 ①font-size-adjust -------为元素规定 aspect 值，为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height

     字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读

     举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读

 ②font-weight--------设置显示元素的文本中所用的字体加粗

      数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗

      属性值：normal---默认值，定义标准的字符；bold---定义粗体字符；bolder---定义更粗的字符；lighter---定义更细的字符；100--900定义由粗到细的字符

 

 （7 . 表格属性）

 目录：

 ①border-collapse合并边框；②border-spacing边框间距；③caption-side标题端；④empty-cells空白单元格

 ⑤table-layout表格布局；

  以下为详解：

 ①border-collapse属性设置表格的边框是否被合并为一个单一的边框；

 属性值：

 separate（分离）默认值，边框会被分开。且不会忽略 border-spacing 和 empty-cells 属性

 collapse（塌方）边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性

 ②border-spacing设置相邻单元格的边框间距离（仅用于“边框分离”模式）；

 属性值：在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔

  除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承

 ③caption-side规定表格标题的位置；

<style type="text/css">
caption{
    caption-side:bottom
}
</style>
<table border="1">
<caption>这是一个标题</caption>
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>

 ④empty-cells 规定是否显示表格中的空单元格上的边框和背景（仅用于“分离边框”模式）

  属性值：

  hide---不在空单元格周围绘制边框；show---默认值，在空单元格周围绘制边框

 ⑤table-layout 设置用于表格的布局算法（固定表格布局，自动表格布局）

 属性值：automatic默认，列宽度由单元格内容设定；fixed列宽由表格宽度和列宽度设定。

 固定表格布局：

 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关

 自动表格布局：

 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容

 

 （8 . 文本属性）

 关于文本属性详解，我在后面文章http://570109268.iteye.com/admin/blogs/2410569里做了总结

 

 （9 . 2D/3D 转换属性transform）

 关于2D/3D 转换详解，我在后面文章http://570109268.iteye.com/blog/2410700里做了总结

 

（10 . 过渡属性transition）

【兼容】IE10+及其他主流浏览器，Safari 支持hsck写法的 -webkit-transition 

 ①transition      简写属性，用于在一个属性中设置四个过渡属性，主要包含

   transition-property---过渡属性名称（设置过渡效果的 CSS 属性的名称，例宽高背景色等）

   transition-duration---过渡时长

   transition-timing-function---过渡时间函数

   transition-delay---过渡延迟

  案例：把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px

<style type="text/css"> 
div{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover{
width:300px;
}
</style>
<div></div>
<p>把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效</p>

  ②transition-timing-function                     规定过渡效果的时间曲线

 

  语法：transition-timing-function: linear（匀速）|ease（慢快慢）|ease-in（慢速开始）|ease-out（慢速结束）|ease-in-out（慢速开始和结束）|cubic-bezier(n,n,n,n)（定义值，可能的值是 0 至 1 之间的数值）;

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

 

 

（11）用户界面属性（User-interface）

 ①appearance（外观）设置元素外观，使元素看上去像标准的用户界面元素

 【兼容】所有主流浏览器都不支持 appearance 属性，Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性

 例如：使div呈现按钮样式

<style type="text/css">
        div {
            appearance:button;
            -moz-appearance:button; /* Firefox */
            -webkit-appearance:button; /* Safari and Chrome */
        }
</style>
<div>一些文本</div>

 属性值：appearance: normal（正常）|icon（图标）|window（窗口）|button（按钮）|menu（选项）|field（字段）;

  ②box-sizing 属性通过指定容器的盒子模型类型，达到不同的展示效果

  属性值：content-box内容块；border-box盒模型

content-box的宽高为元素的内容框，在宽高外绘制外边距和边框；

border-box的宽高包含内边距和边框

  适用场景：

  例如百分比为宽度的容器设置padding时,容器的宽度就会像外扩展相应的padding值,要使宽度不被撑开,那么就是用box-sizing:border-box;会控制这种情况

 具体案例详解我在后面文章http://570109268.iteye.com/admin/blogs/2410754里做了总结

  ③resize（调整）规定是否可由用户对元素的尺寸进行调整

  注意：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll

 【兼容】测试后IE不支持，chrome，Opera等均支持，Safari暂时未测

  属性值：none（禁止调整尺寸）|both（宽高都可以调整）|horizontal（横/调整宽）|vertical（垂直/调整高）

  案例：可以由用户调整 div 元素的大小

<style type="text/css"> 
div{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
}
</style>
<div>resize 属性规定是否可由用户调整元素尺寸</div>

 

 

  

 

 

 

 

 

 

 

 【总结】

  ①关于animation-fill-mode动画填充模式，还有很多问题，我在后面再做介绍

 .