CSS（Cascading Style Sheets）用于为 HTML 元素添加样式和布局。以下是一些常见的 CSS 样式和属性示例：
- 设置文本样式：
h1 { color: blue; /* 设置文本颜色为蓝色 */ font-size: 24px; /* 设置字体大小为24像素 */ font-family: Arial, sans-serif; /* 设置字体为Arial或sans-serif字体族 */ font-weight: bold; /* 设置字体加粗 */ text-decoration: underline; /* 添加下划线 */ } p { color: #333; /* 设置文本颜色为十六进制值 #333 */ font-size: 16px; line-height: 1.5; /* 设置行高为1.5倍字体大小 */ }
- 设置背景样式：
body { background-color: #f1f1f1; /* 设置背景颜色为十六进制值 #f1f1f1 */ } div { background-image: url('background.jpg'); /* 设置背景图片 */ background-repeat: no-repeat; /* 禁止背景图片重复 */ background-position: center center; /* 将背景图片居中对齐 */ background-size: cover; /* 调整背景图片尺寸以填满元素 */ }
- 设置盒模型样式：
.box { width: 200px; /* 设置盒子宽度为200像素 */ height: 200px; /* 设置盒子高度为200像素 */ border: 1px solid #000; /* 设置边框样式 */ padding: 20px; /* 设置内边距为20像素 */ margin: 10px; /* 设置外边距为10像素 */ box-sizing: border-box; /* 将宽度和高度包括在内边距和边框内 */ }
- 设置浮动和定位样式：
.float-left { float: left; /* 元素左浮动 */ } .float-right { float: right; /* 元素右浮动 */ } .absolute-position { position: absolute; /* 使用绝对定位 */ top: 0; /* 距离顶部为0 */ left: 0; /* 距离左侧为0 */ } .relative-position { position: relative; /* 使用相对定位 */ top: 10px; /* 向下偏移10像素 */ left: 10px; /* 向右偏移10像素 */ }
这些只是 CSS 的一小部分示例，还有许多其他的样式和属性可用于创建各种效果和布局。你可以根据需要在 HTML 元素的 <style> 标签中或外部 CSS 文件中添加这些样式，并根据实际情况进行修改和扩展。