您的位置:首页 > Web前端 > CSS

值得注意的CSS属性

2016-07-25 13:31 507 查看
文本TEXT

letter-spacing 字符间距

word-spacing 字间距

line-height 行高

text-decoration 修饰(下划线)

text-indent 首行缩进

text-shadow 文字阴影

vertical-align 元素垂直对齐

overflow-wrap 容器内文字溢出容易还是/换行

定位POSITION

position 定位

z-index 层叠

top/right/left/bottom 配合position使用

布局LayOut

visibility 是否可见(不可见也保留空间)

overflow 对溢出内容的处理

尺寸Dimension

width

min-width

max-width

height

min-height

max-height

边框border

border-radius 边角半径长度

border-shadow 边框阴影

背景background

background-attachment 背景图像是否随着页面滚动(是否fixed)

background-position 指定背景图像填充的位置

background-clip 从什么区域开始向外剪裁图像

background-size 背景图像的大小

颜色color

opacity 不透明度

字体font

font-style 字体样式(斜体等)

font-weigth 字重(粗细)

font-size 字大小

font-family 字体库

列表list

list-style-image 标记的图像

list-style-position 标记的位置

list-style-type 标记样式

表格table

table-layout 表格布局(根据内容拉伸或固定不变)

border-collapse 表格的行和单元格的边是合并还是独立

border-spacing 表格之间的间距(若表格边是合并的则无效)

empty-cells 空单元格是否显示

内容content

content 内容用来和:after:before伪元素一起使用,在对象前或后显示内容。

[b]使用用户自定义标识名作为组件取值。[/b]

自定义标识区分大小写,例如test与TEST是2个不同的值

自定义标识不能使用与CSS属性及属性值相同的名字

正常工作的例子:

示例代码:



li {
counter-increment: testname;
}
li {
counter-reset: testname2;
}





用户界面userinterface

text-overflow 当内联内容溢出容器时,将溢出部分裁切掉

outline-width/color/style/offset 不占据中间的轮廓

cursor 不仅有样式选择,还有位置

zoom 对象实际尺寸的缩放

box-sizing 定义盒模型的宽高是针对content还是border

pointer-events 设置属性是否可以触发事件

变化transform

transform 设置或检索对象的转换,可选项很多

transform-origin 设置对象以某个原点进行转换

transform-style 设置对象是2D还是3D

perspective 指定观察者距离z=0界面的距离,为元素及其内容应用透视变换

perspective-origin 指定透视点位置

backface-visibility 指定元素背面可见,允许显示正面的镜像

过渡Transition

transition-property 需要过渡的属性

transition-duration 过渡持续时间

transition-timing-function 事件函数

transition-delay 过渡延时

动画Animation

animation
<' animation-name '>:检索或设置对象所应用的动画名称<' animation-duration '>:检索或设置对象动画的持续时间<' animation-timing-function '>:检索或设置对象动画的过渡类型<' animation-delay '>:检索或设置对象动画延迟的时间<' animation-iteration-count '>:检索或设置对象动画的循环次数<' animation-direction '>:检索或设置对象动画在循环中是否反向运动<' animation-fill-mode '>:检索或设置对象动画时间之外的状态<' animation-play-state '>:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式

以上就是CSS包括CSS3基本的重点属性了,但是多列伸缩盒本人没有用到所以暂时没有列出来!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: