小蔡学Web：[12]class调用CSS样式

时间：2026-04-30 22:09:25

1、首先我们打开DW网页编辑器然后新建一个class.html文件。

2、在<body>标签中输入标签：

这个段落采用左对齐的方式，text-align:left<br/>

调试网页效果如下图。

小蔡学Web：[12]class调用CSS样式

3、在网页内部输入css样式如下：

p{ font-size:12px; }

p.left{ text-align:left; } /* 左对齐 */

</style>

小蔡学Web：[12]class调用CSS样式

4、在P标签里面用class调用css样式如下：

这个段落采用左对齐的方式，text-align:left<br/>

调试结果如下：字体变小，往左靠。

小蔡学Web：[12]class调用CSS样式

5、我们在写入一个标签，然后来不调用.left样式是什么样子的。

<p class="left"> 这个段落采用左对齐的方式，text-align:left<br/> 这个段落采用右对齐的方式，text-align:right<br>

调试如下图，但是我们从下图中没有明显看到不同，所以再写个css样式做区别。

小蔡学Web：[12]class调用CSS样式

6、我们在写一个p.right{ text-align:right; } /* 右对齐 */的样式，用class调用，结果如下图。

小蔡学Web：[12]class调用CSS样式