效果图
博客园中常用的样式
/*标题h1 h2 h3样式*/
#content {
color: black;
font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif;
font-size: 16px;
}
#content h1 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
c
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。在这个示例中，我们看到如何自定义网页中的标题（h1, h2, h3）样式以创建美观的视觉效果。以下是对这些CSS代码的详细解释：
1. **通用样式设置**：
```css
#content {
color: black;
font: 0.875em/1.5em "微软雅黑", "PTSans", "Arial", sans-serif;
font-size: 16px;
}
```
这段代码定义了`#content`区域的全局样式。`color`属性设置文本颜色为黑色，`font`属性组合设置了字体家族、大小和行高，`font-size`用于设定字体大小。
2. **h1标题样式**：
```css
#content h1 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑", "宋体", "黑体", Arial;
font-size: 18px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
```
`h1`标题的背景颜色设为深蓝色(#2B6695)，具有圆角边框(`border-radius`)和阴影效果(`box-shadow`)，文字颜色为白色，字体家族是微软雅黑等，大小为18px，加粗显示。标题的高度、行高、内边距和外边距被设置以提供适当的间距，同时使用`text-shadow`添加文本阴影增强视觉效果。
3. **h2标题样式**：
```css
#content h2 {
background: #2B6600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑", "宋体", "黑体", Arial;
font-size: 15px;
font-weight: bold;
height: 24px;
line-height: 23px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;
}
```
`h2`标题的背景颜色为绿色(#2B6600)，其余属性与`h1`类似，但字体大小为15px，高度和行高相应调整，以及内外边距的变化，以适应不同级别的标题。
4. **h3标题样式**：
```css
#content h3 {
background: #5B9600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑", "宋体", "黑体", Arial;
font-size: 13px;
font-weight: bold;
height: 24px;
line-height: 20px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;
}
```
`h3`标题的背景颜色为浅绿色(#5B9600)，同样具有圆角和阴影效果，但字体大小减小到13px，高度和行高再次调整，以符合三级标题的视觉层次感。
5. **按钮样式**：
```css
#div_digg {
position: fixed;
bottom: 10px;
width: 140px;
right: 390px;
border: 2px solid #6FA833;
padding: 10px;
background-color: #fff;
border-radius: 5px 5px 5px 5px !important;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}
```
这段代码定义了一个固定在屏幕底部的按钮样式。按钮位置通过`position`属性设置为`fixed`，并使用`bottom`和`right`属性进行定位。它具有绿色边框，白色背景，圆角和阴影效果，以增加交互性。
通过这样的自定义CSS样式，我们可以创建独特且吸引人的网页标题和按钮，提升用户体验，使网页设计更加专业且易于阅读。在实际开发中，可以根据需要调整颜色、尺寸和字体等参数，以适应不同的网站主题和品牌风格。同时，了解并熟练运用CSS来定制元素样式是每个前端开发者必备的技能。
