目录
字体样式
文本样式
列表样式
背景图片
字体样式
字体相关的 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;
}