用CSS美化你的网页
原创教程，转载请注明出处：网页教学网 现在我们设计网页已经离不开CSS，使用CSS可以美化我们的网页，这已经是大家所共知的了！ CSS是“Cascading Style Sheets”的缩写，译为样式表。
原创教程，转载请注明出处：网页教学网
现在我们设计网页已经离不开CSS，使用CSS可以美化我们的网页，这已经是大家所共知的了！
CSS是“Cascading Style Sheets”的缩写，译为样式表。HTML允许我们利用CSS来实现风格的显示，举个简单的例子：我们可以使用<b>标签来使页面的字体加粗。如：
<b>网页教学网加粗字体显示</b>
如果你使我们使字体显示为红色、宋体、并且加粗显示我们可以使用下面的代码：
<font color="#FF0000" face="宋体"><strong>网页教学网字体演示</strong></font>
这时我们观察上面的代码时我们发现网页中的元素比较多了，当我们自己编写时可能显得很凌乱，这时我们该想有没有一种方法使用的代码比较少，而同时达到上面显示的要求呢？回答是肯定的，这时我们就要用到CSS了。用CSS设置一种风格，设置好我们需要的特性，给它命名一个唯一的名字，然后保存放在网站的其它地方，然后我们在编写HTML时引用刚才的风格的名字就可以达到这种要求。如：
<p class="myNewStyle">网页教学网的 CSS 风格文本</p>
然后在网页的头部<head></head>之间加上设置风格的代码，如：
<style type="text/css">
<!--
.myNewStyle {
font-family: 宋体;
font-weight: bold;
color: #FF0000;
}
-->
</style>
如果你想使上面的CSS控制你的网页的每个页面，那么我们复制粘贴上面的代码就可以了，如果觉得比较麻烦或者说你觉得网页的头部很乱的话，我们也可以把CSS设置的风格单独保存为一个文件(文件的扩展名为.CSS)，之后我们在HTML直接引用那个保存的文件就可以引用样式了。如你保存的文件的名字为：myFirstStyleSheet.css，那么我们可以使用下面代码来引用：
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
注意：上述代码要放到HTML页面的<head>区域内。
至于CSS的设置就在这里不提了，我们可以专门打开一个记事本，或使用专门的设计工具如DW等。
在编辑CSS注意不要再加上如下代码了：
<style type="text/css">
</style>
我们在CSS文件中只要设置CSS风格就行了，如：
第 1 2 3 页
现在我们设计网页已经离不开CSS，使用CSS可以美化我们的网页，这已经是大家所共知的了！
CSS是“Cascading Style Sheets”的缩写，译为样式表。HTML允许我们利用CSS来实现风格的显示，举个简单的例子：我们可以使用<b>标签来使页面的字体加粗。如：
<b>网页教学网加粗字体显示</b>
如果你使我们使字体显示为红色、宋体、并且加粗显示我们可以使用下面的代码：
<font color="#FF0000" face="宋体"><strong>网页教学网字体演示</strong></font>
这时我们观察上面的代码时我们发现网页中的元素比较多了，当我们自己编写时可能显得很凌乱，这时我们该想有没有一种方法使用的代码比较少，而同时达到上面显示的要求呢？回答是肯定的，这时我们就要用到CSS了。用CSS设置一种风格，设置好我们需要的特性，给它命名一个唯一的名字，然后保存放在网站的其它地方，然后我们在编写HTML时引用刚才的风格的名字就可以达到这种要求。如：
<p class="myNewStyle">网页教学网的 CSS 风格文本</p>
然后在网页的头部<head></head>之间加上设置风格的代码，如：
<style type="text/css">
<!--
.myNewStyle {
font-family: 宋体;
font-weight: bold;
color: #FF0000;
}
-->
</style>
如果你想使上面的CSS控制你的网页的每个页面，那么我们复制粘贴上面的代码就可以了，如果觉得比较麻烦或者说你觉得网页的头部很乱的话，我们也可以把CSS设置的风格单独保存为一个文件(文件的扩展名为.CSS)，之后我们在HTML直接引用那个保存的文件就可以引用样式了。如你保存的文件的名字为：myFirstStyleSheet.css，那么我们可以使用下面代码来引用：
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
注意：上述代码要放到HTML页面的<head>区域内。
至于CSS的设置就在这里不提了，我们可以专门打开一个记事本，或使用专门的设计工具如DW等。
在编辑CSS注意不要再加上如下代码了：
<style type="text/css">
</style>
我们在CSS文件中只要设置CSS风格就行了，如：
第 1 2 3 页
- 上一篇：用CSS创建导航菜单的两个例子
- 下一篇：使用CSS的基础实例
精彩图集
精彩文章