值得注意的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属性及属性值相同的名字
- 正常工作的例子:
示例代码:
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属性的更多相关文章
- jQuery修改操作css属性实现方法
在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍. css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() ...
- javascript操作html元素CSS属性
下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .ori ...
- CSS属性操作/下
CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...
- CSS属性操作
CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...
- css属性分类介绍
css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...
- 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM
好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- 值得学习的CSS知识
这里零度给大家推荐几个值得学习的CSS技巧,能让你编写网页事半功倍!一.清除默认值 通常 padding 的默认值为 0,background-color 的默认值是 transparent.但是在不 ...
- css样式重叠、css样式继承、css 属性计算,,a元素下的文字颜色不能继承
1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...
随机推荐
- 根据Facebook内存的管理使用,浅谈在iOS上自动检测内存泄漏问题
分装库下载:https://github.com/facebook/FBMemoryProfiler FBMemoryProfiler类库使用教程:http://ifujun.com/fbmemory ...
- onDraw(canvas)和dispatchDraw(canvas)方法
绘制VIew本身的内容,通过调用View.onDraw(canvas)函数实现 绘制自己的孩子通过dispatchDraw(canvas)实现 View组件的绘制会调用draw(Canvas canv ...
- lambda表达式初步
// Lambda_test20140801.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <algorithm& ...
- 面试之路(3)-详解MVC,MVP,MVVM
一:mvc mvc结构: 视图(View):用户界面. 控制器(Controller):业务逻辑 模型(Model):数据保存 mvc各部分的通信方式 mvc互动模式 通过 View 接受指令,传递给 ...
- SQLCODE和SQLERRM .
Oracle内置函数SQLCODE和SQLERRM是特别用在OTHERS处理器中,分别用来返回Oracle的错误代码和错误消息. OTHERS处理器应该是异常处理块中的最后的异常处理器,因为它是用来捕 ...
- 64位ubuntu安装N64模拟器mupen64
我们知道在windows平台下模拟器多如牛毛,N64的模拟器也不例外.而linux下对于想玩N64的童鞋们有啥好办法呢?我通过度娘找到一款开源的N64模拟器mupen64,其官方网址为:http:// ...
- shim & polyfill
在JavaScript中,经常提到shim和polyfill,polyfill是shim的一种.shim 是将不同 api 封装成一种,比如 jQuery 的 $.ajax 封装了 XMLHttpRe ...
- HP-Socket快速入门:分包、粘包解析
环境配置 vs2015 windows7 64位 hp-socket 5.0 安装hp-socket 新建控制台项目TelnetServer,打开Nuget管理工具,搜索hp-socket: 安装成功 ...
- Nuget发布教程
nuget setApiKey Your-API-Key -Source https://www.nuget.org/api/v2/package nuget spec nuget pack Monk ...
- MySQL基本sql语句
MySQL基本操作语句 操作文件夹(库) 增加create database 库名 charset utf8;charset utf8是指定库的字符编码删除drop database 库名删除某个数据 ...