下载 yuicompressor-2.4.2.zip 资源包,解压后 yuicompressor-2.4.2.jar 在 yuicompressor-2.4.2/build 目录下。
2、创建build-yui.xml 文件
然后创建ant 运行的文件，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<project name="MyTask" basedir="." default="compress-css">
<property name="src.dir" value="./src"/>
<target name="compress-js">
<apply executable="java" parallel="false" failonerror="true"
dest="${src.dir}/dest"
append="false" force="true">
<fileset
dir="${src.dir}"
includes="js/**.js" />
<arg line="-jar" />
<arg path="yuicompressor-2.4.2.jar" />
<arg line="--charset utf-8" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*.js" to="*.js" />
<targetfile />
<arg line="--nomunge" /><!--只压缩去掉空格，不混淆-->
</apply>
</target>
<target name="compress-css">
<apply executable="java" parallel="false" failonerror="true"
dest="${src.dir}/dest"
append="false" force="true">
<fileset
dir="${src.dir}"
includes="css/**.css" />
<arg line="-jar" />
<arg path="yuicompressor-2.4.2.jar" />
<arg line="--charset utf-8" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*.css" to="*.css" />
<targetfile />
</apply>
</target>
</project>
3、运行ant
在dos下运行命令：ant -buildfile build-yui.xml 命令。
注：目标目录必须存在，否则会报错。
style？和CSS？在网页制作中有个内部引用和外部引用和内链引用，所谓的外部引用就是所说的CSS样式表。内部引用要在head
标签中写上<style
type=text/css>这句就是表明你是内部引用，而外部引用需要写上<link
rel="stylesheet"
type="text/css"
href="CSS的地址"
/>。而内联引用则是直接在你的代码中加入样式比如<div
style="height:20px">。不知道你明白了么
CSS中的visibility和display两个属性很容易被混淆，因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。visibility属性用来设置一个给定的元素是否显示（visibility="visible|hidden"），但是，虽然一个元素的visibility被设置为hidden，但是该元素仍然会占据设计的位置：
<script
language="JavaScript">
function
toggleVisibility(me){
if
(me.style.visibility=="hidden"){
me.style.visibility="visible"
}
else
{
me.style.visibility="hidden"
}
}
</script><div
onclick="toggleVisibility(this)"
style="position:relative">
This
example
displays
text
that
toggles
between
a
visibility
of
'visible'
and
'hidden'.
Note
the
behavior
of
the
next
line.</div><div>This
second
line
shouldn't
move,
since
visibility
retains
its
position
in
the
flow</div>
<script
language="JavaScript">
function
toggleVisibility(me){
if
(me.style.visibility=="hidden"){
me.style.visibility="visible"
}
else{
me.style.visibility="hidden"
}
}
</script>
<div
onclick="toggleVisibility(this)"
style="position:relative">
This
example
displays
text
that
toggles
between
a
visibility
of
'visible'
and
'hidden'.
Note
the
behavior
of
the
next
line.</div><div>This
second
line
shouldn't
move,
since
visibility
retains
its
position
in
the
flow</div>
注意如果display属性没有被明确设置，将默认被设置为该类元素的常用值。
明显地，两个属性中display属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节（例如树结构）。
