引导备忘单 - CSS

本备忘单提供了基础的CSS引导信息，以帮助你快速搭建Web页面。

基本样式

以下是一组基本的样式，可以将其添加到你的CSS文件中。

/* 去除默认的margin和padding */
* {
  margin: 0;
  padding: 0;
}

/* 去除图片边框 */
img {
  border: 0;
}

/* 全局字体和颜色 */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

/* 超链接样式 */
a {
  color: #007aff;
  text-decoration: none;
}

/* 悬停链接样式 */
a:hover {
  text-decoration: underline;
}

布局

以下是一些用于布局的基本样式。

容器

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

这将使你的容器居中，并且比页面最大宽度多15像素。

栅格系统

使用栅格系统可以快速响应式设计你的页面。以下是一个基本的栅格系统，你可以根据需要进行修改。

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

• .row用于包裹栅格列，并给栅格列提供CSSdisplay: flex和flex-wrap: wrap的功能，使其能够流动多行，实现自适应。
• .col是一个栅格列，你可以将其放置在.row内部，设置需要的宽度（百分比或固定宽度），或使用flex: 1，在它所在的容器中均分父容器的剩余空间。

媒体查询

以下是一些基本的媒体查询，可以根据需要进行修改。

/* 移动设备 */
@media only screen and (max-width: 768px) {
  /* 栅格系统调整 */
  .col {
    flex-basis: 50%;
  }
}

/* 平板设备 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* 栅格系统调整 */
  .col {
    flex-basis: 33.33%;
  }
}

/* 大屏幕设备 */
@media only screen and (min-width: 1024px) {
  /* 栅格系统调整 */
  .col {
    flex-basis: 25%;
  }
}

字体

以下是一些常见的字体设置，你可以根据需要进行修改。

/* 标题字体 */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 36px;
  line-height: 1.2;
}

h2 {
  font-size: 30px;
  line-height: 1.2;
}

h3 {
  font-size: 24px;
  line-height: 1.2;
}

h4 {
  font-size: 20px;
  line-height: 1.2;
}

h5 {
  font-size: 18px;
  line-height: 1.2;
}

h6 {
  font-size: 16px;
  line-height: 1.2;
}

/* 段落字体 */
p {
  font-size: 16px;
  line-height: 1.5;
}

/* 链接字体 */
a {
  font-size: 16px;
  font-weight: bold;
}

颜色

以下是一些基本的颜色，你可以根据需要进行修改。

/* 主题色 */
:root {
  --primary-color: #007aff;
}

/* 文本颜色 */
body {
  color: #333;
}

/* 超链接颜色 */
a {
  color: var(--primary-color);
}

/* 按钮颜色 */
button {
  background-color: var(--primary-color);
  color: #fff;
}

/* 悬停链接颜色 */
a:hover {
  color: #fff;
  background-color: var(--primary-color);
}

总结

以上是基本的CSS样式和模板，可以帮助你快速搭建Web页面。更多CSS信息可以在此基础上进一步学习，实现更加丰富和独特的Web设计。