2019款CSS怎么设置?本文将为大家介绍一些常见的CSS设置方法。
1. 字体设置
/* 设置字体为宋体 */ body { font-family: Simsun,sans-serif; } /* 借助Google Fonts设置自定义字体 */ @import url('https://fonts.googleapis.com/css?family=Roboto'); body { font-family: 'Roboto',sans-serif; }
2. 背景设置
/* 设置背景颜色 */ body { background-color: #f2f2f2; } /* 设置背景图片 */ body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; }
3. 边框设置
/* 设置元素边框 */ div { border: 1px solid #ccc; } /* 设置元素圆角 */ button { border-radius: 5px; }
4. 表格样式设置
/* 设置表格边框 */ table { border-collapse: collapse; border: 1px solid #ccc; } /* 设置表格单元格边框 */ td { border: 1px solid #ccc; } /* 设置表格样式 */ table { width: 100%; } th,td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
5. 盒模型设置
/* 设置盒模型 */ div { Box-sizing: border-Box; width: 300px; padding: 20px; border: 1px solid #ccc; } /* 计算盒模型 */ div { width: 300px; padding: 20px; border: 1px solid #ccc; /* 盒模型计算公式 */ /* 宽度 = 内容宽度 + 填充宽度 + 边框宽度 * 2 */ /* 高度 = 内容高度 + 填充高度 + 边框高度 * 2 */ }
以上就是一些常见的CSS设置方法,大家可以结合具体的项目需求使用。希望这篇文章对大家有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。