px：一个虚拟长度单位，是计算机系统的数字化图像长度单位，换算成物理长度，需要制定经度DPI。Windows系统默认是96dpi，Apple系统默认是72dpi。 一个相对长度单位，像素px是相对于显示器屏幕分辨率而言的。但IE无法调整哪些使用px作为单位的字体大小，国外的大部分网站能够调整的原意在于其使用了em或者rem作为字体单位。em：一个相对长度单位，一般指字符宽度的倍数，用法类似百分比，如：0.8em，通常1em=16px。 相对于当前对...
原文:CSS中伪类及伪元素用法详解伪类的分类及作用：注：该表引自W3School教程伪元素的分类及作用：接下来让博主通过一些生动的实例（之前的作业或小作品）来说明几种常用伪类的用法和效果，其他的读者可以自己尝试： :active 大致效果为用鼠标点击时，元素增加特效，鼠标松开时，特效消失。多用在按钮的点击上。 写法：这里id为box的是一div块，在css中首先设置了他的基本样式，下面为加入:active伪类后需要修改的样式。未点击时：...
CSS样式优先级行内>内部>外部使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug，注意书写方式一般可以轻松避开的。CSS中的!important一般都是用于对低版本的除了iE 6 ，用来做hack的，后面缀上了!important的css语句，让浏览器首选执行这个语句，因为css有继承的样式，加上!importanrt可以覆盖父级的样式。 IE6不认识它的，IE7和别的浏览器中可以用，用来处理浏览器的兼容性 .padding-l-r p span{ fon...
一般我们通过box-shadow来设置盒阴影，但是有些属性我们一般没有用到，这篇文章将对box-shadow属性进行逐个分析。语法CSS Code复制内容到剪贴板E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 即：对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} inset 投影方式 此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”...
1、网站常见小图标调用方式： 将所有小图标做在一张大图上a.png，然后根据横纵轴来调用。 background:url("a.png") -23px -70px no-repeat;2、块级元素居中的常见写法： margin:0px auto;3、如何让超链接影响到整个块？ 将行内元素变成块级元素：display:block 4、文本框只留下面一条线： { border-width:0px; border-bottom:solid 1px #000; }5、html及css常用易混短语总结： 超出部分隐藏： overflo...
目录1. label标签2. 文字属性3. 背景属性4. 边框5. display6. 盒子模型margin7. 盒子模型padding8. 浮动9. overflow10. 相对定位11. 绝对定位12. 固定定位13. 定位脱离文档流14. 模态框1. label标签定义：<label>标签为 input 元素定义标注（标记）。
说明：label 元素不会向用户呈现任何特殊效果。<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><titl...
--引用外部的CSS样式 @import url(样式地址); --注释 /*Modify this at 08/05/06 AM9:58*/ /**********NOTICE Theme Name:CSDN BLOG css style; Description:This is style templet file author:wuyue@csdn.net time:2008-05-06 location:unknown last modify:2007-05-06 *************************************/ --换行 word-wrap:break-word;word-break:break-all; 原文：http://www.jb51.net/css/10504.html
前面的话 现在，预处理器(如sass)似乎已经成为开发CSS的标配，正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想，CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法 变量 一般地，我们在进行web开发时，会有一套变量定义规范，以sass为例，如下所示// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0...
在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，它可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内，允许空格。本文向大家描述一下CSS属性display:inline-block的用法，它可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别，支持的浏览器有：Opera、Safari。 深入理解...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
p{font-size:14px;text-indent:2em;}
span{font-size:0.8em;}
</style>
</head><body><p>啦啦啦啦啦啦啦啦<span>啦啦啊啦啦啦啦啦</span>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啊啦啦啦啦啦啦啦啦</p></body>
</html> 原文：http://www.cnblogs.com/Riona-C/p/7148079.html
1，CSS3 边框用CSS3，您可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序（如Photoshop等作图软件），极大地帮助您节省了很多时间。而在本节中，您将了解以下的边框属性有：border-radiusbox-shadowborder-image（需要注意的是：该属性不支持ie浏览器）Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Safari 支持所有新的边框属性。注释：对于 border-image，Safari 5 以及更...
前端开发在近一两年发展的非常快，JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一 些前端开发中的共性问题，但是实现又不尽相同。通常一般的前端加载js文件都是这样 :<script type="text/javascript" src="js/js1.js"></script>
<script type="text/javascript" src="js/js2.js"></script>
<script type="text/javascript" src="js/js3.js"></script>
<script type="text/jav...
sass依赖于缩进;scss是sass3引入的新语法 下面将介绍scss基本用法 参数$prop: xxx
嵌套ul {...li {...&:hover}
}
@mixin//定义
@mixin xxx($xxx){}
//使用
@include xxx()
@extend//使用
@extend .xxx;
//会继承子属性
@import// _base.scss
body {...
}
// style.scss 引入
@import "base";
lighten&darken//颜色加深、变淡
$light-color:lighten($base-color,50%);
$dark-color:darken($base-color,50%);
saturate&desaturate...
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml准备工作1：设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： 这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maxi...
LI代码的格式化:A).运用CSS格式化列表符： ul li{list-style-type:none;}B).如果你想将列表符换成图像，则： ul li{list-style-type:none;list-style-image: url(/blog/images/icon.gif);}C).为了左对齐，可以用如下代码： ul{list-style-type:none;margin:0px;}D).如果想给列表加背景色，可以用如下代码： ul{list-style-type: none;margin:0px;}ul li{background:#CCC;}E).如果想给列表加MOUSEOVER背景变色效果，可以用如下代码：...