以下为最近总结的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动画填充模式,还有很多问题,我在后面再做介绍
.