<html> <head> <title>CSS Tutorial</title> <style type="text/css"> p {color: red; font-size: 16px;} </style> </head> <body> <p>这是一个段落。</p> </body> </html>
在这段代码中,大家在<head>标签中使用<style>标签来定义CSS代码,然后在<p>标签中应用了这个CSS代码。在这个例子中,大家规定所有的<p>标签都将文字颜色设为红色,字体大小为16像素。
你也可以使用一个唯一的ID或者一个类名来应用CSS样式。例如,如果你想让一个特定的段落有不一样的样式,你可以为这个段落设置一个唯一的ID,并且使用#符号来引用这个ID名。如果你想让多个元素有相似的样式,你可以为它们设置同一个类名,并且使用.符号来引用它们。
<html> <head> <title>CSS Tutorial</title> <style type="text/css"> #uniqueParagraph {color: blue; font-size: 20px;} .similarParagraphs {color: green; font-size: 12px;} </style> </head> <body> <p id="uniqueParagraph">这是唯一的一个段落。</p> <p class="similarParagraphs">这是一个相似的段落。</p> <p class="similarParagraphs">这是另外一个相似的段落。</p> </body> </html>
现在,第一个段落将变成蓝色、20像素字体,第二和第三个段落将变成绿色、12像素字体。
在HTML中使用CSS,可以让大家轻松地控制页面的布局和样式。虽然CSS需要一些学习,但它可以使网页开发更加美观和可读,同时也可以增强用户体验。