在CSS中设置统一的样式可以帮助我们提高开发效率以及简化代码。以下为一些常见的方式:/* 1. 通过选择器设置样式 */ /* 选中所有的p标签并设置样式 */ p { font-size: 16px
在CSS中设置统一的样式可以帮助我们提高开发效率以及简化代码。以下为一些常见的方式:
/* 1. 通过选择器设置样式 */ /* 选中所有的p标签并设置样式 */ p { font-size: 16px; line-height: 1.5; color: #333; } /* 选中某个class的元素并设置样式 */ .header { background-color: #f5f5f5; padding: 10px; border-bottom: 1px solid #ddd; } /* 选中某个id的元素并设置样式 */ #logo { width: 100px; height: 50px; background-image: url(logo.png); } /* 2. 通过继承设置样式 */ /* 设置body下的元素默认继承 */ body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #666; } /* 子元素继承body的样式 */ .main { background-color: #fff; } .main p { margin: 10px; } /* 3. 通过变量设置样式(CSS Variables) */ /* 定义变量 */ :root { --primary-color: #007bff; --secondary-color: #6c757d; } /* 使用变量 */ button { background-color: var(--primary-color); color: #fff; border: none; padding: 10px 20px; } .header { background-color: var(--secondary-color); color: #fff; padding: 10px; }
粉丝
0
关注
0
收藏
0