2、然后双击打开
如果你没有安装相应的代码编辑器，那只能使用记事本打开了，没有语法高亮和代码提示。
3、这里我们使用Sublime Text这款代码编辑器进行编辑。
4、我们可以看见，css文件的规则是，选择器{属性名:属性值}的形式，下面我们增加一个img的样式
选择器是img，样式是width: 100px；
JS可以使用css属性来进行样式修改，并且不仅可以修改单一属性，也可以同时修改多个属性。
案例以下小案例使用JQuery作为演示。
前提： html页面首先必须引入JQuery，放置在body体最后的位置。例如：
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>html部分代码
<p>我是一个段落，我没有背景颜色的，但是JQuery会给我增加背景颜色。
</p>
<button>
点击我，给上面段落添加黄色背景颜色。
</button>
JQuery代码
$("button").click(function(){$("p").css("background-color", "yellow")
})
修改多个属性
$("button").click(function(){$("p").css({"background-color": "yellow", "font-size": "200%"})
}) 结论与解释：
首先使用Jquery选择器进行元素选择 - $("button")
为该元素绑定点击事件 - click
click中的匿名函数修改css属性。
在css属性的修改中，p段落有了黄色背景； 多个属性修改，不但有了黄色背景而且字体是之前的两倍大小。
注意事项：可以不用非要绑定事件，在本案例中，绑定事件是为了更好地演示Jquery如何操作css属性。
修改单一属性和多个属性的写法是有区别的，多个属性使用{},属性与值之间用：分割，属性与属性之间用，分割。
在<head></head>之间写php语句输出一个变量
<?php echo $cssStr?>
然后php程序中（在没有输出$cssStr之前） 给变量$cssStr 赋值
$cssStr = <<<EOT
<style type="text/css">
#headimg {
background-color: #ffffff
background-position: 50% 50%
}
#headimg h1, #headimg #desc {
display: none
}
</style>
EOT
理论上就是这个样子的。
