/* 设置文本样式 */ p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } /* 设置背景颜色 */ body { background-color: #f5f5f5; } /* 设置盒子模型 */ .box { width: 100px; height: 100px; margin: 10px; padding: 5px; border: 1px solid #ccc; } /* 设置边框 */ .border { border: 1px solid #333; border-top: 2px dashed #333; border-bottom: 2px dotted #333; } /* 设置浮动 */ .left { float: left; } /* 设置定位 */ .absolute { position: absolute; top: 50px; left: 50px; } /* 设置动画效果 */ .transition { transition: all 0.3s ease; } /* 设置响应式布局 */ @media screen and (max-width: 768px) { .box { width: 50%; } }
CSS样式可以通过HTML文件的“标签或者外部样式表文件来引用,通过ID、class等选择器来选择相应的HTML元素进行样式修改。使用CSS可以实现丰富多样的网站设计效果,提高用户的浏览体验。