当前位置：网站首页 > 创业 > 正文

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

张子豪 2025-10-12 11:34 1

CSS样式表在网页设计顶用处很普遍，设置网页的标签属性、文字属性、文字长度、布景等等都用到了CSS样式表来设计。CSS不仅功能齐备并且便于点窜和阅读。在这里我就来介绍下用内嵌的体例建立CSS类、id和标签属性样式。

东西/原料

CSS根本常识
html根本常识
UE编纂器

方式/步调

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没有供给这些属性则工作无法完当作。
2
那么我们可以利用传统的HTML属性来排版，还有没有其他的体例呢？这里我就介绍CSS来完当作工作，起首来介绍内嵌的CSS来排版。
内嵌排版样式是将CSS样式表放在<head></head>这里面的具体格局如下：
<html>
<head>
<title>传统HTML排版</title>

<style type="text/css">
此处设置我们需要的样式。

</style>

</head>
<body>

<p>标签名来节制的样式</p>
</body>
</html>
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标签的内容就是我们设心猿意马的成果显示的结果。
4
除了这种法子之外，若是我们需要将第二行的段落中文字设置当作绿色其他的按照步调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中就是按照这种体例来建立类到利用类的。
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的三种根基格局的建立和利用了，这三个学会了其他的都比力好理解。