CSS样式表内嵌排版样式的用法详解教程

2024-10-14 13:16:26

1、我们知道要实现一个网页的样式可以用HTML传统的提供的方式来实现。直接用HTML提供的属性来完成工作。在这里我就用HTML的属性来说明如何使用属性来创建网页的样式。<html> <head> <title>传统HTML排版</title> </head> <body> <p align="center"><font color="red"><b>用传统HTML来排版文件</b></font></p> </body></html>可以看到要完成工作需要编写很多的代码,用到很多的属性。如果HTML没有提供这些属性则工作无法完成。

CSS样式表内嵌排版样式的用法详解教程

3、在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标签的内容就是我们设定的结果显示的效果。

CSS样式表内嵌排版样式的用法详解教程

5、如果我们在加一行文字,将文字设置成蓝色,除了类之外还可以使用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的三种基本格式的创建和使用了,这三个学会了其他的都比较好理解。

CSS样式表内嵌排版样式的用法详解教程
猜你喜欢