文本样式
字体、字号、行高、颜色等
/* 定义字体样式 */ body {font-family: Arial, sans-serif;} /* 定义字号 */ h1 {font-size: 30px;} /* 定义文本颜色 */ p {color: #333;} /* 定义行高 */ ul {line-height: 1.5;}
背景样式
背景颜色、背景图片、背景位置等
/* 定义背景颜色 */ body {background-color: #f5f5f5;} /* 定义背景图片 */ h1 {background-image: url(header.jpg);} /* 定义背景重复方式 */ body {background-repeat: no-repeat;} /* 定义背景位置 */ header {background-position: center top;}
盒子模型样式
边框、内边距、外边距等
/* 定义边框 */ div {border: 1px solid #ccc;} /* 定义内边距 */ section {padding: 20px;} /* 定义外边距 */ article {margin: 20px;}
列表样式
无序列表、有序列表、自定义列表等
/* 定义无序列表样式 */ ul {list-style: none;} /* 定义有序列表样式 */ ol {list-style-type: decimal;} /* 自定义列表 */ dt {font-weight: bold;} dd {margin-left: 20px;}
链接样式
链接的颜色、状态、下划线等
/* 定义链接颜色 */ a {color: #007bff;} /* 定义链接状态 */ a:visited {color: #333;} /* 去掉链接下划线 */ a {text-decoration: none;}
表格样式
表格边框、表头、单元格等
/* 定义表格边框 */ table {border-collapse: collapse;} /* 定义表头样式 */ th {background-color: #f5f5f5;} /* 定义单元格样式 */ td {padding: 10px;}
以上是一些常见的CSS样式,当然,CSS样式的组合也是非常灵活的,可以根据实际需求进行调整和修改。在实际开发中,大家可以通过引入现成的CSS框架,如Bootstrap、Foundation等来加速开发。