CSS属性之字体(Font) font：[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] 复合属性，各属性见下文。 必须同时包含font-size和font-family，且这两个值顺序不能变，其他关键字的值放到这两个值的前面，顺序可以随意打乱。 可以在字号值(font-size)上放一个可选的行高值(line-height)作为字号的某种附属值，后面必须有font-family。 font-style:norma...
background 简写属性在一个声明中设置所有的背景属性。 所有浏览器都支持 background 属性。 注释：IE8 以及更早的浏览器不支持一个元素多个背景图像。 注释：IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。 可以设置如下属性： ?background-color ?background-position ?background-size ?background-repeat ?background-origin ?background-clip ?background-attachment ?background-image...
近期教学给学员总结常用的CSS属性，方便学习查询，正好发上来也给大家分享一下，O(∩_∩)O。 摘选自：http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版本。 目录： 01. CSS背景属性(Background) 02. CSS边框属性(Border和Outline) 03. CSS文本属性(Text) 04. CSS字体属性(Font) 05. CSS外边距属性(Margin) 06. CSS内边距属性(Padding) 07. CSS列表属性(List) 08. CSS尺寸...
绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下: CSS:pointer-events .overlay1 { width:80px; height:20px; background:gold; position:absolute; top:5px; left:5...
CSS如果想要将DOM元素隐藏，有2种做法：将display属性设置成none，或者将visibility属性设置成hidden。下面的html代码没有设置display和visibility属性。 使用display:none隐藏outB 使用visibility:hidden隐藏outB 对比结果可以很容易得出结论：display:none，元素实际上就从页面中移走了，它后面的元素就会自动上移；而visibility:hidden，则仅仅隐藏该元素，它占据的页面空间依然存在。 对于out...
在css3之前，要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里：http://www.hicss.net/css-practise-of-image-round-box/)。实现过程很繁琐，但CSS3的到来简化了实现圆角的方式。 CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。 -webkit-border-radius-moz-border-radius-ms-border-radius-o-border-radius border-radius属性其实可以分为四个其他的属性...
RGBA 是 CSS3 中用来控制颜色的单位，分别是 Red Green Blue 三原色和 Alpha 透明度的缩写。 也就是说该属性可以帮助我们在设置颜色的同时，也设置了其透明度。 其实就是 RGB 属性和 opacity 属性的合并写法。 其中 RGB 三个值的设置可以为百分比或者 0~255 的整数值。 A 的值则是 0~1 ，和 opacity 属性一致。 一、应用在背景中： .reg-bgc{ background: rgb(255, 0, 0);}.apl-bgc{ background: rgba(255, 0, 0...
一 CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-...
Box-sizing 尽管box-sizing在CSS3中才被引入，其有一个值是border-box，让元素的高和宽包含了填充和边框。 .div { width: 150px; height: 100px; border: 1px solid #ccc; box-sizing: border-box; } Chrome 31+, IE8+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+等都支持该属性。 z-index和定位 如果元素没有定位属性，如static/absolute/relative/fixed，改属性将被忽略 positio...
[attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属...
CSS--属性 css属性键值对，property：value。主要是一下几类： 文字相关属性：控制文字的字体，颜色，修饰，阴影等属性。 font-family 设置字体类型，如"Arial"、"宋体"等 font-size 设置字体大小，常用度量单位pt和px font-style 设置字体风格，可选值normal, italic和oblique font-weigh 设置字体“重量”，常用值为normal和bold font 综合设置上述各种字体属性 段落相关属性：控制整个段或者div的显示效果，...
flex实现子块的完美居中 方案 父块使用display:flex属性,子块margin自适应即可实现 代码 index.html 块状元素垂直居中(已知高度) *{margin: 0;padding: 0;} .parent{ display: flex; height:500px; background: #03A1FA; } .child{ width: 100px; height: 100px; margin: auto; background: #BB3713; } /* 这个依赖于设置“margin”值为“auto”值，自动获取伸缩容器中剩余的空间。所以设置垂直方向margin值为“au...
在css3中,position的属性值有：inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持。 static 默认值，元素出现在正常的流中，忽略 （TRBL）和z-index的值。请参照下面的例子，div1由于position的值为static，所以top,left 没有起作用. test position static .divPos{ position:static; left:100px; top:100px; } this ...
1、-webkit-tap-highlight-color 移动端页面点击按钮时会发现按钮上会出现一块阴影，设置-webkit-tap-highlight-color:rgba(0,0,0,0);就可以了，将阴影设置成透明就看不见了； 2、-webkit-line-clamp 限制在一个块元素显示的文本的行数，可以配合其他属性设置多行文本溢出省略号的效果 3、-webkit-text-stroke 文字边框，可以配合color:transparent;设置镂空文字的效果 4、-webkit-background-clip 背景...
使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码： 注：chrome浏览器效果最佳，最终效果静态图： HTML代码如下： <meta http-equiv="Content-Type" content="text/html; charset=utf-8";> 练习一个小人的动画 I ? Y O U ...