CSS全局样式的设置，【建议收藏】
CSS全局样式设置可以通过创建一个全局样式文件来实现，这个文件会被项目中的所有组件共享。以下是一个简单的CSS样式文件示例，它设置了基本的全局样式，如字体、颜色、边距和填充：
/* 全局样式文件 global.css */
/* 设置基本字体和字体大小 */
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #333; /* 基本文本颜色 */
}
/* 设置标题字体和颜色 */
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
color: #555;
}
/* 设置边距和填充的全局样式 */
.m-t-0 {
margin-top: 0 !important; /* 上边距0 */
}
.m-b-10 {
margin-bottom: 10px !important; /* 下边距10px */
}
.p-l-15 {
padding-left: 15px !important; /* 左填充15px */
}
.p-r-20 {
padding-right: 20px !important; /* 右填充20px */
}
/* 更多全局样式 */
在你的入口文件或者主样式文件中引入这个全局样式文件，确保它是被加载的第一个样式文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="path/to/global.css">
</head>
<body>
<!-- 你的应用内容 -->
</body>
</html>这样，你的应用中所有的组件都会默认使用这些全局样式，你可以在每个组件内部根据需要覆盖这些全局样式。
评论已关闭