值得注意的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属性及属性值相同的名字
正常工作的例子:
示例代码:
用户界面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基本的重点属性了,但是多列和伸缩盒本人没有用到所以暂时没有列出来!
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基本的重点属性了,但是多列和伸缩盒本人没有用到所以暂时没有列出来!
相关文章推荐
- css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- 原生JS中如何获取CSS属性中的值
- Div+CSS命名规范
- 《css权威指南》——笔记3(结构与层叠)
- CSS3-盒模型设计
- 设置inline-block布局造成的幺蛾子事
- CSS3 box-sizing 属性
- css实现动态进度条
- css实现百分比进度条
- HTML&CSS基础学习笔记1.17-表格的头部与尾部
- css实现鼠标放到图片旋转效果
- 自定义Dialog样式 虚拟键盘的隐藏 TextView的图标
- css3 如何实现圆边框的渐变
- CSS深入理解之margin
- 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- QPainter就是手里的作图工具,只需要三洋东西:笔(颜色,宽度,样式),字体(写字),刷子(大面积作画),这里有三个典型例子
- css input[type=file] 样式美化,input上传按钮美化
- css3记录
- CSS样式,雪碧,图片替换,渐变小析
- css伪类选择器详细解析及案例使用-----伪类选择器(2)