[分享]css中如何设置统一的样式

在CSS中设置统一的样式可以帮助我们提高开发效率以及简化代码。以下为一些常见的方式：/ 1. 通过选择器设置样式 / / 选中所有的p标签并设置样式 / p { fontsize: 16px; lin...

在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;
}