css定义一套样式系统

CSS（Cascading Style Sheets，层叠样式表）是一种为Web页面添加样式和布局的标准技术。通过CSS，我们能够定义一套样式系统来控制页面上各个元素的外观和显示效果。

/* 定义一套样式系统 */

/* 字体 */
body {
  font-family: Arial,sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* 颜色 */
h1,h2,h3 {
  color: #333;
}

a {
  color: #f00;
  text-decoration: none;
}

/* 布局 */
.container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 20px;
}

/* 边框 */
.Box {
  border: 1px solid #ccc;
}

/* 盒模型 */
.Box {
  Box-sizing: border-Box;
  padding: 10px;
  width: 200px;
  height: 200px;
}

/* 布局排版 */
/* Flex布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px 200px;
  gap: 10px;
}

/* 媒体查询 */
@media screen and (max-width: 768px) {
  .container {
    display: block;
  }
  .Box {
    width: 100%;
  }
}

在上面的代码中，我们为页面中的不同元素定义了一些基础样式，包括字体、颜色、布局、边框、盒模型等，并且使用了Flex和Grid布局进行了排版。同时，我们也使用了媒体查询来实现响应式布局，在不同设备上可以展示不同的布局效果。

通过定义一套样式系统，我们可以使页面上各个元素的样式更加统一和规范，大大提高了页面的可读性和用户体验。