/* 设置一个元素的背景色和字体样式 */ p { background-color: lightblue; font-family: Arial, sans-serif; } /* 设置一个按钮的样式 */ button { color: white; background-color: blue; border: none; padding: 10px 20px; font-size: 16px; }
在页面中使用CSS,可以通过两种方式:
- 将CSS代码包含在HTML文档的头部,在<head>标签中使用<style>标签
- 将CSS代码单独存储在外部的样式表中,并在HTML页面中引用
使用样式表的好处是可以提高页面的可维护性和可重用性。通过将样式分离出来,可以避免在每个HTML文档中重复编写CSS,也可以更方便地对页面样式进行统一的修改和更新。
/* 外部样式表:style.css */ p { background-color: lightblue; font-family: Arial, sans-serif; } button { color: white; background-color: blue; border: none; padding: 10px 20px; font-size: 16px; } /* HTML文档中引用样式表 */ <head><link rel="stylesheet" href="style.css"></head>
总之,CSS是Web设计中必不可少的一部分。掌握CSS技能可以使你创建出美观、易于导航、高效和易于维护的网站。