css下载安装？csdn手机版
本篇文章给大家谈谈css下载安装，以及csdn手机版对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
css预处理器有哪些
CSS(Cascading Style Sheet)被译为级联样式表，做为一名前端从业人员来说，这个专业名词并不陌生，在行业中通常称之为“风格样式表（Style Sheet）”，它主要是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML（XHTML）中各标签的显示属性。可以使人更能有效的控制Web页面（或Web应用程序）外观，可以精确指定Web元素位置，外观以及创建特殊效果的能力。CSS拥有对网页对象和模型样式编辑能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群有较强的易读性。
就CSS本身而言，对于大多数Web前端从业人员来说就不是问题。学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。换句话说，CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。
很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。
一、什么是CSS预处器
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。
到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，讨论的也多，对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。
二、Sass、LESS和Stylus背景介绍
为了能更好的了解这三款流行的CSS预处理器，我们先从其背景入手，简单的了解一下各自的背景信息。
1.Sass背景介绍
Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。
2.LESS的背景介绍
2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
根据维基百科上的介绍，其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了LESS并提供了类似CSS的书写功能。
3.Stylus背景介绍
Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
注：Stylus上下载Ruby安装文件（随意选择一个版本），此处选择的是最新版本Ruby1.9.3-p385：
Ruby安装文件下载好后，可以按应用软件安装步骤进行安装Ruby。在安装过程中，个人建议将其安装在C盘下，在安装过程中选择第二个选项，如下图所示：
Ruby安装完成后，在开始菜单中找到新安装的Ruby，并启动Ruby的Command控制面板，如下图所示：
在启动的Ruby命令控制面板中输入下面的命令：
gem install sass
输入上面命令，回车后就会自动安装Sass：
这样Sass就安装成功了，也就可以使用了。
2.LESS的安装
LESS的安装和Sass安装有所不同，他不需要依赖于Ruby环境，就能直接安装使用。不过LESS安装分为两种：客户端和服务器端安装。
a)客户端安装：
我们可以直接在客户端使用“.less”（LESS源文件），只需要在官网载一个Javascript脚本文件主“less.js”，然后在我们需要引入LESS源文件的HTML的<head>中加入如下代码：
<link rel="stylesheet/less" type="text/css" rel="external nofollow" href="文件路径/styles.less"><script src="文件路径/less.js" type="text/javascript"></script>
需要注意的是：在引入“.less”文件中，“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS源文件一定要在“less.js”引入之前引入，这样才能保证LESS源文件正确编译解析。
b)服务器端安装
LESS在服务器端的使用主要是借助于LESS的编译器，将LESS源文件编译生成最终的CSS文件，目前常用的方式是利用node的包管理器（npm）安装LESS，安装成功后就可以在Node环境中对LESS文件进行编译。如此一来，LESS在服务器的安装和Sass的安装有点相似，不同之处是他们需依赖的环境不一样，LESS需要的是Node JS环境，而Sass需要的是Ruby环境，为了让大家能更清晰的知道如何在服务器端安装LESS，此处简单的过一下安装过程（本文演示的是在Window7下的安装方法）。
首先到Node Js的官网下载一个适合Windows系统的安装文件，此处下载的是“node-v0.8.20-x86.msi”：
安装文件下载后，按正常应用程序方法一样安装。安装完成后在开始菜单中启用Node js的Command控制面板：
在启动的Node Js的Command控制面板直接输入下面的命令：
$ npm install less
这样就安装完LESS的编译命令，可以在本地正常编译LESS源文件。如果您想下载最新稳定版本的LESS，还可以尝试在Node JS的Command控制面板输入：
$ npm install less@latest
3.Stylus的安装
Stylus的安装和LESS在服务器端的安装很相似，同样依赖于Node JS的环境，也就是说也要先安装Node Js（如果安装Node JS请参考前面的介绍）。唯一不同的是在Node JS的Command控制面板输入的命令不一样：
$ npm install stylus
然后，就会自动下载安装最新的stylus库：
这样就算是安装完Stylus了，也可以正常使用Stylus。
四、Sass、LESS和Stylus转译成CSS
Sass、LESS和Stylus源文件（除了LESS源文件在客户端下运行之外）都不能直接被浏览器直接识别，这样一来，要正常的使用这些源文件，就需要将其源文件转译成浏览器可以识别的CSS样式文件，这也是使用CSS预处理器很关键的一步，如果这一步不知道如何操作，那么意味着写出来的代码不可用。接下来按同样的方式，分别来看看三者之间是如何将其源文件转译成所需要的CSS样式文件。
1.Sass源文件转译成CSS文件
Sass文件就是普通的文本文件，不过其文件后缀名有两种，一种为“.sass”；另一种为“.scss”。我们一般用“.scss”就好，至于这两种文件扩展名的区别在于“.sass”是Sass语言文件的扩展后缀名，而“.scss”是SCSS语言文件的扩展后缀名，至于Sass和SCSS的详细区别这里不做介绍。你可以简单的理解为他们都是CSS预处理器语言，而且两者功能特性都一样，只是书写规则不同而以。
要转译Sass文件的前提是有文件可转，因此先在项目中创建一个Sass文件，此例中将其命名为“style.scss”，并且将其放在对应的项目样式中，如D盘的“www/workspace/Sass/css”目录下。
启动Ruby的Command控制面板，找到需要转译的Sass文件，如此例此文件放置在D盘的“www/workspace/Sass/css”目录下：
如果仅针对于单文件的转译，需要将“style.scss”转译成“style.css”，只需要在对应的目录下输入下面的命令：
$ sass style.scss style.css
这样原本在D盘的“www/workspace/Sass/css”目录下只有“style.scss”这个文件，现在增加了一个“style.css”文件，而这个CSS文件我们就可以用来调用，他也就是“style.scss”转译出来的样式文件。
当然，我们不可能每保存一次这个Sass文件就来执行一回这个转译命令。那么有没有更好的办法实现呢？回答是肯定的，可以通过下面的监听命令实现，这样一来只要Sass文件做了修改，就会自动更新对应的CSS样式文件。
单文件的监听，只需要在刚才的命令控制面板中输入：
$ sass--watch style.scss:style.css
按下回车键（Enter）,就会看到下面的提示信息：
看到上图所示的提示信息就表示监听成功，这样一来，你只要修改了“style.scss”文件，“style.css”文件就会随着更新变化。
对于一个项目而言，不太可能只有一个CSS样式文件，如果有多个Sass文件需要监听时，就很有必要的组织一下。默认情况之下，我喜欢把所有的Sass文件放在“/css/sass”目录中，而生成的CSS文件则直接放在“/css”目录下。现在我们修改一下项目文件目录结构，在“/css”目录中再创建一个“sass”目录，并找刚才创建的“style.scss”文件移至“/css/sass”目录下。此时监听“css/sass”下的所有Sass文件时，可以在命令面板中输入如下格式的命令：
$ sass--watch sassFileDirectory:cssFileDirectory
在本例中，冒号前面的“sassFileDirectory”是指“/css/sass”下的“sass”目录，冒号后面的“cssFileDirectory”是指“css”目录，对应的命令就是：
$ sass--watch css/sass:css
回车后，同样可以得到提示信息：
除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具，比如说有名的Compass.app和fire.app。
2.LESS文件的转译成CSS文件
LESS文件的转译和Sass文件转译可以说是大同小异，不同之处是LESS在安装的Node JS环境下通过其自己的命令来进行转译。
$ lessc style.less
上面的命令会将编译的CSS传递给stdout，你可以将它保存到一个文件中：
$ lessc style.less> style.css
除了上面的命令转译LESS源文件之外，现在还有很多第三方开发的工具，比较常见的有：SimpleLess、Less.app、LESS编译辅助脚本-LESS2CSS、WinLess和CodeKit.app等，我个人现在常用的是WinLess工具，简单易用，不过在IOS系统下LESS.app和CodeKit.app很好用。
3.Stylus源文件转译成CSS文件
Stylus具有可执行性，因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”，因此Stylus可以像下面转译源文件：
$ stylus–compress<some.styl> some.css
Stylus也像Sass一样，同时接受单个文件和整个目录的转译。例如，一个目录名为“css”将在同一个目录编译并输出“.css”文件。
$ stylus css
下面的命令将输出到“./public/stylesheets”：
$ stylus css–out public/stylesheets
还可以同时转译多个文件：
$ stylus one.styl two.styl
如果你的浏览器安装了Firebug，那么可以使用FireStylus扩展。
$ stylus–firebug<path>
五、Sass、LESS和Stylus的语法
每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预处理器语言的语法和CSS语法都差不多。
1.Sass语法
Sass3.0版本开始使用的是标准的CSS语法，和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写：
/*style.sass新版语法规则*/h1{ color:#936;
background-color:#333;}
正如你所看到的，在Sass样式中，这样的代码是在简单不过的了。
重要的一点是，Sass也同时支持老的语法，老的语法和常规的CSS语法略有不同，他需要严格的语法，任何的缩进和字符的错误都会造成样式的编译错误。Sass可以省略大括号（｛｝）和分号（；），完全依靠严格的缩进和格式化代码，而且文件使用“.sass”扩展名，他的语法类似于：
/*style.sass*/h1
color:#936
background-color:#333
2.LESS语法
LESS是CSS的一种扩展形式，它并没有阉割CSS的功能，而是在现有的CSS语法上，添加了很多额外的功能。就语法规则而言，LESS和Sass一样，都是使用CSS的标准语法，只是LESS的源文件的扩展名是“.less”，其基本语法类似于：
/*style.less*/h1{ color:#963;
background-color:#333;}
3.Stylus语法
Stylus的语法花样多一些，它的文件扩展名是“.styl”，Stylus也接受标准的CSS语法，但是他也像Sass老的语法规则，使用缩进控制，同时Stylus也接受不带大括号（｛｝）和分号的语法，如下所示：
/*style.styl*//*类似于CSS标准语法*/h1{ color:#963;
background-color:#333;}/*省略大括号（｛｝）*/h1
color:#963; background-color:#333;/*省略大括号（｛｝）和分号（;）*/h1
color:#963
background-color:#333
在Stylus样式中，你也可以在同一个样式文件中使用不同的语法规则，下面这样的写法也不会报错：
/*style.styl*/h1{
color#963}
h2
font-size:1.2em
六、Sass、LESS和Stylus特性
这三款CSS预处理器语言具有一些相同的特性，例如：变量、混入、嵌套、函数等。在这一节中，我们依次来对比一下这三款CSS预处理器语言各种特性的异同之处，以及使用方法。
1.变量（Variables）
如果你是一个开发人员，变量应该是你最好朋友之一。在CSS预处理器语言中你也可以声明变量，并在整个样式表中使用。CSS预处理器语言支持任何变量（例如：颜色、数值、文本）。然后你可以在任意地方引用变量。
a)Sass的变量
Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）分隔开。就像CSS属性设置一样：
/*声明变量*/$mainColor:#963;$siteWidth: 1024px;$borderStyle: dotted;/*调用变量*/|/*转译出来的CSS*/------------------------------------------+------------------------------
body{| body{
color:$mainColor;| color:#963;
border:1px$borderStyle$mainColor;| border:1px dotted#963;
max-width:$siteWidth;| max-width: 1024px;
}|}
b)LESS的变量
LESS样式中声明变量和调用变量和Sass一样，唯一的区别就是变量名前面使用的是“@”字符：
/*声明变量*/@mainColor:#963;@siteWidth: 1024px;@borderStyle: dotted;/*调用变量*/|/*转译出来的CSS*/----------------------------------------+-------------------------------
body{| body{
color:@mainColor;| color:#963;
border:1px@borderStyle@mainColor;| border:1px dotted#963;
max-width:@siteWidth;| max-width:1024px;
}|}
c)Stylus的变量
Stylus样式中声明变量没有任何限定，你可以使用“$”符号开始。结尾的分号（;）可有可无，但变量名和变量值之间的等号（=）是需要的。有一点需要注意的是，如果我们使用“@”符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在Stylus中不要使用“@”符号开头声明变量。Stylus中调用变量的方法和LESS、Sass是完全相同的。
/*声明变量*/mainColor=#963;siteWidth= 1024px;$borderStyle= dotted;/*调用变量*/|/*转译出来的CSS*/----------------------------------------+--------------------------------
body| body{
color mainColor| color:#963;
border 1px$borderStyle mainColor| border:1px dotted#963
max-width siteWidth| max-width:1024px;
|}
Stylus还有一个独特功能，不需要分配值给变量就可以定义引用属性：
/*水平垂直居中*/|/*转译出来的CSS*/------------------------------------+------------------------------------#logo|#logo{
position absolute| position:absolute;
top 50%| top:50%;
left 50%| left:50%;
width w= 150px| width:150px;
height h= 80px| height:80px;
margin-left-(w/ 2)
如何做css,用什么软件
TopStyle
TopStyle是一款Cascading Style Sheets(CSS)的编辑软件，可以帮助我们编写符合包括CSS2标准在内的样式表。TopStyle具有CSS定义选择功能，让你可以选取特定的浏览器或CSS阶层、内建的样式表检查器、内部的预览能力、以颜色标示的编辑器，以及样式预览。TopStyle是第一款可以使用Mozilla等Gecko浏览器的程序。你可以用内嵌的Internet Explorer和Mozilla Gecko来预览你的式样表，或者分开使用。此外，TopStyle的设计对系统十分友善。它不会安装任何DLL、ActiveX controls或其它系统文件。功能相当多，附有CSS码检查功能，减少写错的机会。尤其是它的HELP文件中详细的CSS指令介绍，很适于用作参考文件与初次接触CSS的人做为学习使用。如果你想学习web标准，制作CSS需要一个好软件，TopStyle是非常棒的选择。
下载地址：
Dreamweaver
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DREAMWEAVER、FLASH以及在EAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。
下载地址：
有没有关注html5和css3
本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么，有没有一种新的方法可以避免这些缺点呢?
有的，HTML5和CSS3就可以满足你的需求。甚至，它可以做的更多，更好。作为一名设计师，我们应当了解它们是什么东西，有什么特性，从而进一步思考通过HTML5和CSS3我们能做些什么。
什么是HTML5和CSS3
HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。这时候问题出来了，为什么我们要单独使用CSS呢，HTML不是一样可以控制Web页面的显示效果么?为了回答这个问题，我举个简单的例子：
有没有发现如果一旦形容的事情过多，想要把事情描述清楚的时候，我们不得不重复大量的信息?页面语言也是一样，在这种情况下显得杂乱无章，非常难以理出头绪。通过将控制显示效果的语言集成到CSS里，我们不但可以保证页面语言主体部分的简洁，而且可以非常方便的复用各种语言集合。
HTML5和CSS3是HTML和CSS的最新版本，它们目前均未确定标准，但是已经公布的新特征已经让我们心动不已。
HTML 5的新特新
1.新的内容标签
HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。
2.更好的表格体系
现在，你可以抛弃JavaScript或者是PHP，只通过HTML5来定义表格。你可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。
3.音频、视频API
HTML5不但允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。
4.画布(Canvas) API
在网页中绘制图形一直是个大难题，我们不得不借助flash、silverlight等插件。然而HTML5允许你直接在网页上进行绘图，甚至允许你与网页生成更多的交互，例如绘制图形、放大缩小，等等。图例是一个用HTML5制作的小游戏。
5.地理(Geolocation) API
HTML5提供了地理信息的应用接口Geolocation API。通过这个API，网页可以通过IP，GPS等方式来获得用户的地理信息;同时用户也可以选择是否关闭这个功能。
6.网页存储(Web storage) API
HTML5提供了网页存储的API，方便Web应用的离线使用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。
7.拖拽释放(Drag and drop) API
我们可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果，避免了以往的网页在拖拽释放过程中需要不停修改元素的位置，代码繁多的弊端。
CSS3新特性
1. RGBa
CSS3的RGBa新特性允许你对每个元素进行色彩以及透明度的设置。而原来常用的opacity命令只能对元素及其子元素进行设置。
2. Multi-column layout
CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局，同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的。
3. Round corners
圆角功能可能是CSS3提供的最实用的功能了。通过Border-radius，你可以没有任何难度的给指定的HTML元素添加圆角。并且你还可以定义圆角的大小，以及哪个角是圆角，哪个角不是圆角。
4.@font-face
当网页显示某种用户没有安装的字体时，CSS3提供的@font-face功能会自动的、默默地帮用户从网络上下载相应字体。从而让设计师更加自由的发挥，而不用考虑用户的机器是否安装了相应字体。
5.其他特性
此外，CSS3还给我们带来了渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能。
利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。同过使用元素本身来取代大部分图片，网页的加载速度会得到提升，这些原本是图片的内容，也可以被搜索引擎检索到。
如果你还想了解更多这方面的信息，记得收藏关注本站。