CSS 属性

🎯 学习 CSS 属性

在本章节中，您将学习常用的 CSS 属性和值，包括字体、颜色、布局、背景等属性，这些是构建美观网页的基础。

什么是 CSS 属性？

CSS 属性是用于定义 HTML 元素样式的特性，如颜色、字体、大小、间距等。每个 CSS 属性都有一个或多个可能的值。

/* 属性: 值; */

p {
    color: red; /* 颜色属性 */
    font-size: 16px; /* 字体大小属性 */
    margin-bottom: 10px; /* 下外边距属性 */
}

常用 CSS 属性分类

1. 字体属性

属性	描述	示例值
font-family	设置字体系列	Arial, sans-serif
font-size	设置字体大小	16px, 1rem, 100%
font-weight	设置字体粗细	normal, bold, 400, 700
font-style	设置字体样式	normal, italic, oblique
line-height	设置行高	1.6, 24px
font	字体属性的简写	16px Arial, sans-serif

2. 颜色属性

属性	描述	示例值
color	设置文本颜色	red, #ff0000, rgb(255, 0, 0)
background-color	设置背景颜色	blue, #0000ff, rgb(0, 0, 255)
border-color	设置边框颜色	green, #00ff00, rgb(0, 255, 0)

3. 文本属性

属性	描述	示例值
text-align	设置文本对齐方式	left, center, right, justify
text-decoration	设置文本装饰	none, underline, overline, line-through
text-transform	设置文本大小写	none, uppercase, lowercase, capitalize
text-indent	设置文本缩进	20px, 2em
letter-spacing	设置字符间距	1px, 0.1em
word-spacing	设置单词间距	5px, 0.2em
white-space	设置空白处理方式	normal, nowrap, pre

4. 盒模型属性

属性	描述	示例值
width	设置宽度	200px, 50%, auto
height	设置高度	100px, 50%, auto
margin	设置外边距	10px, 10px 20px
padding	设置内边距	10px, 10px 20px
border	设置边框	1px solid #ddd
border-radius	设置圆角	4px, 50%
box-shadow	设置阴影	0 2px 4px rgba(0,0,0,0.1)

5. 背景属性

属性	描述	示例值
background-color	设置背景颜色	#f0f0f0
background-image	设置背景图像	url('image.jpg')
background-repeat	设置背景重复方式	repeat, no-repeat, repeat-x, repeat-y
background-position	设置背景位置	center, top left, 50% 50%
background-size	设置背景大小	cover, contain, 100% 100%
background	背景属性的简写	#f0f0f0 url('image.jpg') no-repeat center

6. 布局属性

属性	描述	示例值
display	设置显示方式	block, inline, inline-block, flex, grid
position	设置定位方式	static, relative, absolute, fixed, sticky
top, right, bottom, left	设置定位偏移	10px, 20px
z-index	设置堆叠顺序	1, 10, 100
float	设置浮动	left, right, none
clear	清除浮动	left, right, both, none
overflow	设置溢出处理	visible, hidden, scroll, auto

7. 弹性布局属性

属性	描述	示例值
display	设置弹性容器	flex
flex-direction	设置弹性方向	row, column, row-reverse, column-reverse
justify-content	设置主轴对齐	flex-start, flex-end, center, space-between, space-around
align-items	设置交叉轴对齐	flex-start, flex-end, center, baseline, stretch
flex-wrap	设置换行方式	nowrap, wrap, wrap-reverse
flex	设置弹性项目属性	1, 1 1 auto

8. 网格布局属性

属性	描述	示例值
display	设置网格容器	grid
grid-template-columns	设置列	1fr 1fr, repeat(3, 1fr)
grid-template-rows	设置行	100px 100px, repeat(2, 1fr)
grid-gap	设置网格间距	10px, 10px 20px
grid-area	设置网格区域	header, footer

9. 动画和过渡属性

属性	描述	示例值
transition	设置过渡效果	all 0.3s ease
animation	设置动画	fadeIn 1s ease infinite
transform	设置变换	translate(10px, 10px), rotate(45deg), scale(1.2)

CSS 属性值类型

关键字：如 red, bold, center 等
长度值：如 10px, 2em, 50% 等
颜色值：如 #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%) 等
URL：如 url('image.jpg')
函数：如 rgba(255, 0, 0, 0.5), calc(100% - 20px) 等
列表：如 Arial, sans-serif
布尔值：如 true, false

CSS 属性简写

CSS 提供了许多简写属性，可以在一个声明中设置多个相关属性：

1. 字体简写

/* 完整写法 */
p {
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.6;
    font-family: Arial, sans-serif;
}

/* 简写写法 */
p {
    font: italic bold 16px/1.6 Arial, sans-serif;
}

2. 背景简写

/* 完整写法 */
div {
    background-color: #f0f0f0;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 简写写法 */
div {
    background: #f0f0f0 url('image.jpg') no-repeat center/cover;
}

3. 边框简写

/* 完整写法 */
button {
    border-width: 1px;
    border-style: solid;
    border-color: #333;
    border-radius: 4px;
}

/* 简写写法 */
button {
    border: 1px solid #333;
    border-radius: 4px;
}

4. 外边距和内边距简写

/* 完整写法 */
div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
    
    padding-top: 15px;
    padding-right: 25px;
    padding-bottom: 15px;
    padding-left: 25px;
}

/* 简写写法 */
div {
    margin: 10px 20px;
    padding: 15px 25px;
}

💡 学习提示

使用 CSS 属性简写可以减少代码量，提高代码的可读性和维护性。但要注意简写属性的顺序和默认值，避免意外覆盖其他样式。

✅ 学习进度检查

在继续学习之前，请确保您已经理解了以下内容：

常用的 CSS 属性和值
CSS 属性的分类
CSS 属性值的类型
CSS 属性简写的使用方法