值得注意的CSS属性
文本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
使用用户自定义标识名作为组件取值。
- 自定义标识区分大小写,例如test与TEST是2个不同的值
- 自定义标识不能使用与CSS属性及属性值相同的名字
- 正常工作的例子:
示例代码:
1 li { 2 counter-increment: testname; 3 } 4 li { 5 counter-reset: testname2; 6 }
用户界面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基本的重点属性了,但是多列和伸缩盒本人没有用到所以暂时没有列出来!
cncncn