猫哥带你去战斗——Java Web开发——网页篇[5]——样式

来源：互联网发布：java教材推荐编辑：程序博客网时间：2024/05/03 20:33

网页不仅要显示内容，还要美观，比如设置网页的背景色、字体的颜色、字体的大小。如果要给不同部分设置不同的样式，需要两个标签<div>和<span>。
这两个标签没有具体的含义，只是用来区分区域的，比如现在我想设计一个网页，上面是标题栏“猫哥的文章大全”，左边是菜单栏“文章一、文章二、文章三”，右边是具体的内容栏即“每篇文章具体的内容”。
这样的话，可以设计为

<html><body><div id="title">猫哥的文章</div><div id="menu">    <span>文章一</span><span>文章二</span><span>文章三</span></div><div id="content">    这篇文章很精彩</div></body></html>

运行一下代码，就发现了，<div>与<span>虽然都是包裹内容的标签，但是<div>前后自动换行，<span>前后不换行，一般来说分区域的时候都是需要换行的，所以<div>标签很火，经常在市面上看到相关字样的教程，其实<div>标签就是网页上用来划分区域的标签而已，具备了一个换行的功能。

好了，既然是要划分区域，那么区域的位置和样式肯定要有区别（没区别划分区域干嘛？），那这个位置和样式就要借助CSS来实现了！CSS也是一种语言，用来描述网页样式的（样式的意思就是外观），举个例子先，它一般借助html标签的style属性来实现。例如：
<div id="title" style="color:red;font-size:30px;">猫哥的文章</div>。
style属性中可以写多个样式，中间用分号分割即可。

到了这一句，有两个挺大的问题，第一，怎么有个id=”title”，id是干嘛的？第二，感觉代码好乱，不舒服。

解释下，id是标签的唯一标识，之前也说过name是标签的名字，可以这么理解，id就是标签的身份证号、name就是标签的姓名。CSS可以通过id找到唯一一个标签，然后设置这个标签的样式。
这句加粗字体的话，说明了第二个问题的解决办法。可以用下面的代码实现与<div id="title" style="color:red;font-size:30px;">猫哥的文章</div>同样的效果。

<html><head><style type="text/css">    #title{color:red;font-size:30px;}</style></head><body><div id="title"">猫哥的文章</div><div id="menu">    <span>文章一</span><span>文章二</span><span>文章三</span></div><div id="content">    这篇文章很精彩</div></body></html>

解释下，部分只有区域（div）和内容，所有跟样式、显示相关的放在<head>标签下的<style type="text/css">标签中，其中type=”text/css”，表示使用css语言来描述style(样式)。
#title中，#表示按id选取，所以是选取id=”title”的标签，然后{color:red;font-size:30px;}中，大括号表示前面选取的样式在大括号中设定。然后就是颜色的为红色、字体大小为30px，以:分割设定内容和设定值。

其实，在html中也有一些描述样式的标签，但是建议统统忽略，html表现主题内容和分区，具体分区的位置和区域内的样式，交给css吧。这样也有个很大的好处，程序员写html，css神马的，就交给美工吧！（在现实中，有很多极端，有的公司程序员包打天下，前端到后端到数据库全干了，有的公司html和css是美工的，程序员纯后端，不管哪种，都应该了解html、了解css，猫哥属于能读懂html和css，能写，但是要弄得漂亮美观，这个还需要2亿多个艺术细胞啊）。

至此，我们把这个网页分为了3部分，还设置了标题部分的颜色和字体，但是我们想要的，标题栏在上面、左边菜单栏、右边内容，还没实现，这就牵扯到布局啦，布局实际上也属于样子方面的，可以依赖CSS实现，在下一篇手记再实现吧！

1 0