提到css预编译器（css preprocessor），你可能想到Sass、Less以及Stylus。而本文要介绍的PostCSS，正是一个这样的工具：css预编译器可以做到的事，它同样可以做到。 “你说的我都懂，那为什么要用它？” 套装与单件 如果Sass等预编译器是新定义了一种模板语言，然后将其转化为css的话，PostCSS则是更纯粹地对css本身做转换。 回想一下你是如何学习使用css预编译器的：了解到有这样一种可以转化为css的语言，它有很多特性，变量...
使用compass自动拼css sprite css sprite （css 雪碧）又叫css精灵，是一种图片拼合技术。多用在图标上，把几个图标拼成一个图片，页面加载的时候只需要load拼好的图片，然后使用background-position配合width、height来显示不同的图标。这样做可以减少页面请求数。但是，想想把一个个图标从psd上扣下来，合到一个图上，然后还要慢慢算background-position，这也真是醉了，而且后期如果改了图标，又要重新拼一次，拼完再算一次ba...
将许多小的图片组合在一起，使用CSS定义背景属性，来控制图片的显示位置和方式。当页面加载时，只需一次就能加载整个组合图片，大大减少了HTTP请求的次数，减轻服务器的压力。同时缩短了悬停加载图片所需的时间延迟，使效果更流畅。
2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档，并且也被大多数浏览器支持（包括IE9+）。 由于Selectors Level 4 specification 目前已是工作草案状态，并且Editor’s Draft of the same spec也在进行中(编辑草案通常被视为更有权威)，未来的CSS选择器看起来很明朗了， 这篇文章重点介绍没有在之前那篇文章中出现的新选择器...
CSS全称Cascading Style Sheets，即级联样式表 CSS是一种表示文件样式的语言,也可以说是用户看到的界面,是一种真正能做到表现与内容的分离的语言 一、基本语法 规则:CSS规则主要由选择器以及一条或多条声明组成 选择器:就是定义在代码段中的标签，用来作为CSS识别的标记 声明就是要对选择器中的内容设置的格式 实例： 在代码段中设置选择器如下，Style用来标记文字“提高班” 提高班 那么在CSS中可以根据选择器...
相信大多数人都有过关于CSS的痛苦经历，从我加入公司到现在，不到两年的时间里，听到最多CSS相关的讨论就是‘很难调’。所以我也一直在探究这其中有怎样的问题，为什么很多人觉得CSS很难写，如何才能让其他人更优雅的写CSS。在Code Review的时候，我渐渐的发现了问题所在，其实很多人已经掌握了丰富的CSS知识，但却不知道如何分组属性写成class。最后只好在需要改变样式的元素上随意起个名字做class然后把所有要写的属性丢进这个cl...
/* 样式初始化*/*{ margin: 0px; padding: 0px;}a{ text-decoration: none;}li{ list-style: none;}/*公用样式*/.border{ border: 1px solid #ff0000;}.center{ margin: 0px auto;}.bg{ background: yellowgreen;}/*三角形*/.sjx{ width: 15px; height: 15px; background: #FBFBFB; position: absolute; top: 10px; left: 112px; transform: rotate(45deg);}.title{ width: 409px; ...
ReactCSS 是一个基于 React 模式实现的 CSS 样式操作封装和定义。提供一种非常简单的方式来附加 inline CSS 样式 示例代码： var ReactCSS = require(reactcss);class Button extends ReactCSS.Component { classes() { return { default: { modal: { background: #fff, boxShadow: 0 2px 4px rgba(0, 0, 0, .48) }, title: { fontSize: 24px }, C...
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } ol,ul { list-style: none; } th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } a, a:link, a:visited, a:hover, a:active { outline: 0; text-de...
刚刚接触webstorm，编写html 的时候软件会有提示，但是只能选择到文件夹，不能插入具体图片文件; 编写css也一样，background：url会自动补全括号和双引号，但是没有图片的文件选择，尝试输入文件路径也不对; 菜单栏上也没有发现相关的插入图片的指令…… 希望得到解答！ 回复讨论(解决方案) 路径设置不对。把图片放到同级目录的文件夹中 路径设置不对。把图片放到同级目录的文件夹中 那就是只能输入路径...
一.简介 级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。...
CSS前缀 Break free from CSS prefix hell! 摆脱CSS前缀地狱！ CSS3 每个浏览器都有私有属性例如 -moz 代表firefox浏览器私有属性、-ms 代表IE浏览器私有属性、-webkit 代表chrome、safari私有属性，在 CSS3 标准还在没有定稿的时候，CSS3 中有很多属性都还处于实验性阶段，各个浏览器都针对暂行的规范草稿根据自己的理解做了 CSS3 新特性实现，但因为规范尚未成熟和定稿，某些描述的不清晰或是处理逻辑的不完整可能导致一些目...
PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。 PostCSS 已经被许多大公司使用：谷歌，推特，阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。 PostCSS 可以作为预处理器使用，类似：Sass, Less 和 Stylus。但是 PostCSS 是模块化的工具，比之前那些快3-30 倍，而且功能更强大。 PostCSS 包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个...
最近在和小伙伴讨论如何高效的编写css代码的问题，于是我们想到了使用css的预处理语言。例如（less，sass等）。最后我们决定使用less（相对于其他css预处理语言更简单，语法更接近css）。 先说说什么是less? 简单的说，你可以在你的css文件中使用变量、函数等方式来编写你的css。 less具有哪些功能？ 混入(Mixins)??class中的class； 参数混入??可以传递参数的class，就像函数一样； 嵌套规则??Class中嵌套class，从而...
二章 CSS 1节CSS介绍 CSS(Cascading Style Sheets) //cascade级联,串联CSS由两个部分组成:选择器，以及一条或多条声明selector{declaration1;declaration2;...} h1{font-size:16px;color:red;}一级标签 2节CSS定义三种样式 1 内联式一级标题2 嵌入式 //一节中的样式3 外联式 //新建一个css @charset "UTF-8"; h1{font-size:36px;color:pink;} //指定关联文件的类型，指定关联文件与当前文件的关系，引用关联文件//如果通过...