基础 CSS 全局样式

介绍

全局样式是针对整个网站或应用程序的样式，它定义了基本的元素样式，如字体、颜色、边框等，使得整个网站的外观和感觉更加一致。此外，全局样式还包括了页面布局的基本元素，如顶部导航栏、侧边栏、内容区等。

在编写全局样式方面，可以借助现有的CSS框架，例如Bootstrap、Foundation等，或者按照自己的喜好和需求编写自定义的样式。无论采用何种方式，全局样式一定要简洁、易于维护和扩展。

基本元素样式

全局样式涉及到的基本元素有很多，下面列出了一些常见的样式属性。

字体样式

• font-family: 设置字体的种类，如"Arial", "Times New Roman", "Verdana"等。
• font-size: 设置字体的大小，如"12px"或"1.2rem"。
• font-weight: 设置字体的粗细，如"normal"或"bold"。
• line-height: 设置行高，如"1.5"或"150%"，默认值为"normal"。

文本样式

• color: 设置文本颜色，如"#333333"或"rgb(51, 51, 51)"。
• text-align: 设置文本对齐方式，如"left", "center", "right"。
• text-decoration: 设置文本装饰，如"underline", "none"。
• text-transform: 设置文本大小写转换，如"uppercase", "lowercase"。

边框样式

• border: 设置边框，如"1px solid #ccc"。
• border-radius: 设置圆角边框，如"5px"。
• box-shadow: 设置元素阴影，如"1px 2px 3px rgba(0, 0, 0, 0.3)"。

背景样式

• background-color: 设置背景颜色，如"#f1f1f1"。
• background-image: 设置背景图片，如"url('image.jpg')"。
• background-size: 设置背景图片尺寸，如"cover"或"contain"。

页面布局样式

页面布局是网站或应用程序的核心，它决定了用户如何使用和浏览网站。全局样式中，页面布局的样式往往是最重要和最复杂的部分。

容器样式

网站或应用程序通常会有一些容器元素，如顶部导航栏、侧边栏、底部导航等。这些容器元素的样式需要统一，以保证整个网站的外观和感觉一致。

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

栅格系统

栅格系统是一种常用的页面布局方式，它将页面分成若干个等宽的列，然后将内容放在各个列中。栅格系统往往需要使用CSS框架或自定义样式来实现。

.row::after {
  content: "";
  clear: both;
  display: table;
}

.col {
  float: left;
  box-sizing: border-box;
}

.col-1 {
  width: 8.333%;
}

.col-2 {
  width: 16.667%;
}

...

.col-12 {
  width: 100%;
}

媒体查询

在不同设备上呈现不同的页面布局是现代网站设计的必要要求。为了实现响应式设计，全局样式中通常会使用媒体查询来设置不同尺寸设备上的样式。

@media (max-width: 767px) {
  .container {
    max-width: none;
    padding: 0;
  }

  .col {
    width: 100%;
  }
}

结语

全局样式是网站或应用程序基础样式的核心，它决定了整个网站的外观和感觉。在编写全局样式时，可以借助现有的CSS框架或自定义样式，但无论采用何种方式，全局样式一定要简洁、易于维护和扩展。