CSS（二）：美化网页元素

目录

字体样式

文本样式

列表样式

背景图片

字体样式

字体相关的 CSS 属性：

• font-family：设置字体
• font-size：设置字体大小
• font-weight：设置字体的粗细（如 normal, bold, lighter 等）
• color：设置字体颜色

可以将多个字体属性写在一行：

font: <font-size> <font-weight> <font-family>;

例如：

p {
  font: 16px normal Arial, sans-serif; /* 设置字体大小、粗细和字体类型 */
  color: #333333; /* 字体颜色为深灰色 */
}

文本样式

常见的文本样式属性：

• color：设置文本颜色
• text-align：设置文本对齐方式
  • left：左对齐
  • center：居中对齐
  • right：右对齐
  • justify：两端对齐
• text-indent：设置段落的首行缩进，常用于段落的美化
• line-height：设置行高，可以帮助改善可读性，特别是对于多行文本
• text-decoration：设置文本的装饰效果
  • underline：下划线
  • overline：上划线
  • line-through：中划线
  • none：去掉装饰（常用于去除链接下划线）
• text-shadow：设置文本的阴影，通常是四个参数：阴影颜色、水平偏移量、垂直偏移量和阴影的模糊半径

例如：

h1 {
  color: #2c3e50;
  text-align: center;
  text-decoration: underline;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.5;
}

列表样式

通过 list-style 属性可以自定义列表项的符号

• list-style：控制列表项的样式，可以设置多个属性
  • none：去掉默认的项目符号
  • circle：空心圆
  • decimal：数字（有序列表的默认样式）
  • square：实心方块

例如：

ul {
  list-style: square; /* 使用正方形符号 */
}

ol {
  list-style: decimal; /* 使用数字 */
}

背景图片

常见的背景属性：

• background-image：设置背景图片。语法：background-image: url("image.jpg");
• background-position：设置背景图片的定位。语法：background-position: x% y%; 或者 background-position: top left;。
• background-repeat：控制背景图片是否重复，常见值：
  • repeat：默认，背景图片在水平方向和垂直方向上都重复
  • no-repeat：背景图片不重复
  • repeat-x：仅水平重复
  • repeat-y：仅垂直重复
• background-size：用来控制背景图像的大小，常用的值有：
  • cover：保持背景图比例，自动填满背景区域，可能裁剪部分图片
  • contain：保持背景图比例，图片完整显示，但可能留白
  • 具体的 px 或 % 数值。

合并写法：

background: <color> <image> <position> <size> <repeat>;

例如：

div {
  background: #ffcc00 url("image.jpg") no-repeat center center;
  background-size: cover;
}