前端重学笔记-CSS篇-01

/* 导入字体图标库 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 包括边框和内边距在元素宽高内 */
}
 
body {
  font-family: 'Roboto', sans-serif; /* 设置默认字体 */
  background-color: #F7F7F7; /* 背景色设置为浅灰色 */
  color: #333; /* 字体颜色设置为深灰色 */
  overflow: hidden; /* 隐藏默认滚动条，后续如果有滚动条则特别设置 */
}
 
/* 清除浮动 */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}
 
/* 设置图标库使用范围，避免影响其他元素 */
#root,
#root * {
  font-family: 'Material Icons'; /* 指定字体库为图标库 */
}
 
/* 设置图标库的字体显示大小 */
#root .material-icons {
  font-size: 24px; /* 设置图标字体大小 */
  vertical-align: middle; /* 垂直对齐方式为中间 */
  user-select: none; /* 禁止文字被选中 */
}
 
/* 设置图标库图标的默认颜色 */
#root .material-icons.inactive {
  color: #999; /* 设置图标颜色为浅灰色 */
}

这段代码设置了基本的CSS规则，包括字体导入、全局样式、清除浮动、图标库的使用和字体样式设置。这对于理解如何在前端项目中整合和设计CSS样式非常有帮助。