一，效果图。
二，代码。
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>CSS id和class选择器</title> <style> #para1 { text-align: center; color: red; } .center { text-align: center; } p.center { text-align: right; } </style> </head> <body> <p id="para1">hello</p> <p>this paragraph is not affected by the style.</p> <h1 class="center">标题居中</h1> <p class="center">段落居中</p> </body> </html>
参考资料：《菜鸟教程》
一，效果图。
二，代码。
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>CSS id和class选择器</title> <style> #para1 { text-align: center; color: red; } .center { text-align: center; } p.center { text-align: right; } </style> </head> <body> <p id="para1">hello</p> <p>this paragraph is not affected by the style.</p> <h1 class="center">标题居中</h1> <p class="center">段落居中</p> </body> </html>
参考资料：《菜鸟教程》