CSS样式表内嵌排版样式的用法详解教程
CSS样式表在网页设计中用处很广泛，设置网页的标签属性、文字属性、文字长度、背景等等都用到了CSS样式表来设计。CSS不仅功能齐全而且便于修改和阅读。在这里我就来介绍下用内嵌的方式创建CSS类、id和标签属性样式。
操作方法
- 01
我们知道要实现一个网页的样式可以用HTML传统的提供的方式来实现。直接用HTML提供的属性来完成工作。在这里我就用HTML的属性来说明如何使用属性来创建网页的样式。 <html> <head> <title>传统HTML排版</title> </head> <body> <p align="center"><font color="red"><b>用传统HTML来排版文件</b></font></p> </body> </html> 可以看到要完成工作需要编写很多的代码，用到很多的属性。如果HTML没有提供这些属性则工作无法完成。
- 02
那么我们可以使用传统的HTML属性来排版，还有没有其他的方式呢？这里我就介绍CSS来完成工作，首先来介绍内嵌的CSS来排版。 内嵌排版样式是将CSS样式表放在<head></head>这里面的具体格式如下： <html> <head> <title>传统HTML排版</title> <style type="text/css"> 此处设置我们需要的样式。 </style> </head> <body> <p>标签名来控制的样式</p> </body> </html>
- 03
在Style这个标签对中设置CSS样式，我们可以直接用标签名来作为CSS样式的名字，具体代码如下： <html> <head> <title>传统HTML排版</title> <style type="text/css"> p{ color:red; text-align:center; font-weight:bold; font-size:50px; } </style> </head> <body> <p>标签名来控制的样式</p> </body> </html> 可以看到我们在p{}中按照属性：属性名；的格式来设置之后P标签的内容就是我们设定的结果显示的效果。
- 04
除了这种办法之外，如果我们需要将第二行的段落中文字设置成绿色其他的按照步骤3的样式来做，则可以使用CSS的类来完成。 定义的时候是在style这个标签对之间设置类名为.pgreen，具体代码如下： <html> <head> <title>传统HTML排版</title> <style type="text/css"> p{ color:red; text-align:center; font-weight:bold; font-size:50px; } .pgreen { color:green; } </style> </head> <body> <p>标签名来控制的样式</p> <p class="pgreen">类名来控制</p> </body> </html> 从上面的代码可以看到定义和引用的方式，在CSS中就是按照这种方式来创建类到使用类的。
- 05
如果我们在加一行文字，将文字设置成蓝色，除了类之外还可以使用id来设置。具体格式是#id名{属性：属性值；} 我们可以看看具体的例子： <html> <head> <title>传统HTML排版</title> <style type="text/css"> p{ color:red; text-align:center; font-weight:bold; font-size:50px; } #pblue{color:blue;} .pgreen { color:green; } </style> </head> <body> <p>标签名来控制的样式</p> <p class="pgreen">类名来控制</p> <p id="pblue">用id来控制文字显示 </p> </body> </html> 如下图我们可以看到执行的效果。在这里我就完成了CSS的三种基本格式的创建和使用了，这三个学会了其他的都比较好理解。