关于CSS以及CSS3那些事

-moz代表firefox浏览器私有属性
-ms代表ie浏览器私有属性
-webkit代表safari、chrome

contenteditable="true"　　　　　　　　内容变的可编辑

onpaste="return false"　　　　　　 　　表示不能粘贴,用于input或不能粘贴的div、span、p标签等

onselectstart="return false" 　　　　    不能复制文本内容
-moz-user-select:none; 　　　　　　　　在火狐下面设置样式不能选择

插入样式表的方法有三种:
　　1、外部样式表（.css文件引入）
　　2、嵌入样式表（<style>标签定义）
　　3、内联样式（<span style="color:red"></span>）

　　内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中） 就近原则
　　!important 在火狐、谷歌、opera优先识别

font书写顺序
　　font-style:italic 斜体
　　font-style:normal 正常显示
　　font-style | font-variant | font-weight | font-size | line-height | font-family 
　　（注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写）

background 书写顺序
　　background-color 背景色（可单独设置）
　　background-image 背景图
　　background-repeat 平铺（X或Y或no-repeat）
　　background-attachment scroll: 随着页面的滚动轴背景图片将移动 fixed:不移动 inherit:继承 默认的继承效果
　　background-position 图像的起始位置
　　第一个值是水平位置，第二个值是垂直位置。如果你仅规定了一个关键词，那么第二个值将是"center"。
　　（0% 0% 默认值 可设置center、left、top、bottom）

text-align
　　left:默认左对齐
　　center:居中对齐
　　right:右对齐
　　justify:两端对齐（主要用于新闻文字之间的间距自动调整，调整单词和字母间的间隔，使各行的长度恰好相等）

text-decoration
　　underline 下划线
　　line-through 删除线
　　overline 上划线
　　blink 文字闪烁（只对火狐有效）
　　none 没有

text-indent 文本缩进 （单位 px em）1em=12px代表一个文字
　　1、在块级元素上使用
　　2、text-indent的值如果子元素也要用到父元素的值，用px单位，而绝不用em

word-spacing 　　属性增加或减少单词间的空白（即字间隔）
letter-spacing　　字符间距

 

text-shadow : color || length || length || opacity
　　取值：
　　　　color :　 指定颜色
　　　　length :　由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
　　　　length :　由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。
　　　　opacity : 由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。
　　　　如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。

text-transform : none | capitalize | uppercase | lowercase
　　取值：
　　　　none :　 默认值。无转换发生
　　　　capitalize :　将每个单词的第一个字母转换成大写，其余无转换发生
　　　　uppercase :　 转换成大写
　　　　lowercase :　 转换成小写

 

vertical-align
　　baseline 默认，元素的基线与父元素的基线对齐
　　sub 降低元素的基线到父元素合适的下标位置
　　super 升高元素的基线到父元素合适的上标位置
　　text-top 把元素的顶端与父元素内容区域的顶端对齐
　　text-bottom 底端
　　middle 垂直居中对齐
　　top 把对齐的子元素的顶端与line box顶端对齐
　　bottom 底端对齐
　　inherit 继承父元素的
　　也可以是 % 或数值 可以为负值

border-style
　　dotted 点线框
　　dashed 虚线框
　　solid 实线边界
　　double 双边框
　　　　CSS3.0的属性
　　　　　　groove 3D沟槽边界
　　　　　　ridge 3D脊边界
　　　　　　inset 3D嵌入边框
　　　　　　outset 3D突出边框

outline 制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 与border使用语法一样

position 定位
　　fixed 基于浏览器定位
　　relative 相对定位
　　absolute 绝对定位

 

cursor 鼠标形状
　　crosshair 十字准心
　　pointer(hand) 手抓
　　wait 等待
　　help 帮助
　　text 文本
　　move 可移动的对象
　　n-resize 向上改变大小 （s--下、e--右、w左）
　　ne 上右改变大小（nw--上左、se--下右、sw下左）
　　auto 自动
　　not-allowed 禁止
　　progress 处理中
　　default 默认

 

css伪类
　　input：focus 选择元素输入后具备焦点
　　　　:first-letter 选择当前元素的第一个字母
　　　　:first-line 选择当前元素的第一行
　　　　:first-child 第一个子元素
　　　　:before 每个匹配的元素之前插入内容
　　　　:after 每个匹配的元素之后插入内容
　　　　:lang(it) 语法：<p lang="it">lang伪类选择器的使用</p>

伪类处理img的时候鼠标经过变亮色

　　 先给图片设置办透明，:hover{opacity:1.0;filter(alpha=100)}
　　alpha 主要针对IE8处理 100不透明 0全透明 对于文字图片都可以使用

 

常用的转义字符
　　人民币符号　　　　　　　　  &yen;
　　= 　　　　　　　　　　　　 &quot
　　& 　　　　　　　　　　　　 &amp;
　　< 　　　　　　　　　　　　 &lt;
　　> 　　　　　　　　　　　　 &gt;
　　ˆ 　　　　　　　　　　　　 &circ;
　　˜ 　　　　　　　　　　　　 &tilde;
　　Œ 　　　　　　　　　　　  &OElig;
　　œ　　　　　　　　　　　　&oelig;
　　Š 　　　　　　　　　　　　&Scaron;
　　š 　　　　　　　　　　　　 &scaron;
　　Ÿ 　　　　　　　　　　　   &Yuml;
　　‰ 　　　　　　　　　　   &permil;
　　† 　　　　　　　　　　　   &dagger;
　　版权符号 　　　　　　　　  &copy;
　　注册商标 ®                     &reg;

     ™ 商标　　　　　　　　　　&trade;

writing-mode 控制内联元素的显示、用来实现文字可以竖着呈现的。text-orientation:upright 让其垂直的英文直立  （-webkit-writing-mode:vertical-lr;writing-mode:tb-rl;writing-mode:vertical-lr;）
　　writing-mode:
　　　　lr-tb 　　 　　　　从左向右，从上往下
　　　　tb-rl 　　　　　　 从上往下，从右向左
　　　　tb-lr (IE8+); 　　 内容从上往下(top-bottom)，从左往右

　　writing-mode:
　　　　horizontal-tb　　 默认
　　　　vertical-rl 　　　 垂直方向 从右往左
　　　　vertical-lr; 　　　垂直方向 从左往右

 

CSS 3.0新属性以及一些用法

　　1、border-radius设置制作圆角效果
　　2、box-shadow制作盒子的阴影效果
　　　　　　box-shadow{
　　　　　　　　h-shadow:必需的。水平阴影的位置。允许负值,
　　　　　　　　v-shadow:必需的。垂直阴影的位置。允许负值，
　　　　　　　　blur:可选。模糊距离,
　　　　　　　　spread:可选。阴影的大小,
　　　　　　　　color:可选。阴影的颜色,
　　　　　　　　inset:可选。从外层的阴影（开始时）改变阴影内侧阴影}
　　　　　　　　[inset x-offset y-offset blur-radius spread-radius color] 先后顺序

3、text-shadow可以实现文字阴影效果
　　　　　　text-shadow: h-shadow v-shadow blur color;
　　　　　　　　h-shadow：必需。水平阴影的位置。允许负值。
　　　　　　　　v-shadow：必需。垂直阴影的位置。允许负值。
　　　　　　　　blur：可选。模糊的距离。
　　　　　　　　color：可选。阴影的颜色

4、RGBA可以制作透明通道色
　　　　　　　　R：红色值。正整数 | 百分数

　　　　　　　　G：绿色值。正整数 | 百分数

　　　　　　　　B：蓝色值。正整数| 百分数

　　　　　　　　A：透明度。取值0~1之间
　　　　　　　　主要用background、前景色color、边框色border-color、字体的阴影色text-shadow、改变边框阴影色

5、opacity可以实现元素的透明度
　　　　　　filter: alpha(opacity=60); // IE 5-7
　　　　　　opacity：从 0.0 （完全透明）到 1.0（完全不透明）

6、background-size可以改变背景图片大小
　　　　　　background-size：可以是百分比、数值大小、
　　　　　　cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
　　　　　　背景图像的某些部分也许无法显示在背景定位区域中。
　　　　　　contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

7、Multiple Backgrounds用来实现多背景
　　　　　　background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;

8、columns用来制作多列排版
　　　　　　-moz-column-count: 2;
　　　　　　-webkit-column-count: 2;
　　　　　　主要用于新闻之类的布局，多列

9、border-image可以制作出图片边框效果 不常用

10、transition可以实现动画效果
11、@font-face实现自定义字体

::selection{background|color|text-shadow}改变你选择中元素的文本的高亮背景和前景色

图片的缩放在IE7以及IE6下解决（运用img时，常常会碰到图片底产无缘无故多出3px）    img{-ms-interpolation-mode: bicubic;vertical-align: top;}

背景图片自适应
　　　　background-image:url(‘’) ;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;

 

对于html5页面
　　　　vertical-align 与line-height 的区别
　　　　　　　　http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/