🌈个人主页：前端青山
🔥系列专栏：Css篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Css篇专栏内容:CSS 核心属性详解
前言
本文将详细介绍 CSS 中的一些核心属性，包括文字属性、背景属性、边框属性、列表属性、文本属性等，并通过具体的代码示例进行解析，帮助读者更好地理解和应用这些属性。
目录
前言
一、文字属性
1. 文字大小 (font-size)
2. 文字粗细 (font-weight)
3. 文字倾斜 (font-style)
4. 文字字体 (font-family)
5. 文字颜色 (color)
二、背景属性
1. 背景颜色 (background-color)
2. 背景图片 (background-image)
3. 背景图片平铺 (background-repeat)
4. 背景图片的位置 (background-position)
5. 背景图片固定 (background-attachment)
6. 背景图片的大小 (background-size)
7. 背景复合属性 (background)
三、边框属性
1. 边框线型 (border-style)
2. 边框颜色 (border-color)
3. 边框粗细 (border-width)
4. 边框复合属性 (border)
5. 单独设置某一方向上的边框
6. 单独设置某一方向上边框的某一属性
四、列表属性
1. 项目符号类型 (list-style-type)
2. 项目符号位置 (list-style-position)
3. 项目符号图片 (list-style-image)
4. 列表复合属性 (list-style)
五、文本属性
1. 文本水平对齐方式 (text-align)
2. 文本垂直对齐方式 (vertical-align)
3. 行高 (line-height)
4. 文本修饰 (text-decoration)
5. 文本首行缩进 (text-indent)
6. 文本复合属性 (font)
结尾
一、文字属性
1. 文字大小 (font-size)
文字大小可以通过 font-size 属性来设置。常见的单位有 px（像素）、rem、em、vw、vh 和 pt。其中，px 是 PC 端最常用的单位，默认的文字大小是 16px，最小支持的文字大小是 12px。
div {font-size: 20px; /* 设置文字大小为 20px */
}2. 文字粗细 (font-weight)
文字粗细可以通过 font-weight 属性来设置。常见的属性值有 normal（正常）、bold（加粗）、bolder（更粗）、lighter（更细），以及从 100 到 900 的整百数值，其中 400 是默认值。
div {font-weight: 900; /* 设置文字粗细为 900 */
}3. 文字倾斜 (font-style)
文字倾斜可以通过 font-style 属性来设置。常见的属性值有 normal（正常）、italic（倾斜）。
div {font-style: italic; /* 设置文字倾斜 */
}4. 文字字体 (font-family)
文字字体可以通过 font-family 属性来设置。当有多个字体时，浏览器会优先使用第一个字体，如果系统不支持，则使用下一个字体，如果都不支持，则使用系统默认字体。中文字体需要加引号。
div {font-family: "宋体"; /* 设置文字字体为宋体 */
}5. 文字颜色 (color)
文字颜色可以通过 color 属性来设置。常见的表示方法有英文单词、16 进制、RGB。
div {color: aqua; /* 设置文字颜色为水蓝色 */
}二、背景属性
1. 背景颜色 (background-color)
背景颜色可以通过 background-color 属性来设置。常见的表示方法有英文单词、16 进制、RGB。
div {background-color: red; /* 设置背景颜色为红色 */
}2. 背景图片 (background-image)
背景图片可以通过 background-image 属性来设置。使用 url() 函数指定图片路径。
div {background-image: url(img/6bc5ec99fadf8c80ed13271e0bbf2243.jpeg); /* 设置背景图片 */
}3. 背景图片平铺 (background-repeat)
背景图片平铺可以通过 background-repeat 属性来设置。常见的属性值有 repeat（平铺，默认值）、no-repeat（不平铺）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）。
div {background-repeat: no-repeat; /* 设置背景图片不平铺 */
}4. 背景图片的位置 (background-position)
背景图片的位置可以通过 background-position 属性来设置。常见的属性值有水平方向和垂直方向的数值或方位词（left、right、top、bottom、center）。
div {background-position: right bottom; /* 设置背景图片位置为右下角 */
}5. 背景图片固定 (background-attachment)
背景图片固定可以通过 background-attachment 属性来设置。常见的属性值有 scroll（滚动，默认值）、fixed（固定在可视窗口）。
div {background-attachment: scroll; /* 设置背景图片滚动 */
}6. 背景图片的大小 (background-size)
背景图片的大小可以通过 background-size 属性来设置。常见的属性值有 cover（图片等比例缩放，直到撑满整个盒子，可能会出现裁剪）、contain（图片等比例缩放，直到撑满某个方向，可能会出现留白）。
div {background-size: cover; /* 设置背景图片覆盖整个盒子 */
}7. 背景复合属性 (background)
背景复合属性可以通过 background 属性来设置。可以同时设置背景颜色、背景图片、背景平铺、背景固定、背景位置等。
div {background: url(img/6bc5ec99fadf8c80ed13271e0bbf2243.jpeg) 100px 20px no-repeat; /* 设置背景图片及其属性 */
}三、边框属性
1. 边框线型 (border-style)
边框线型可以通过 border-style 属性来设置。常见的属性值有 solid（实线）、dashed（虚线）、double（双实线）、dotted（点状线）、none（去掉边框）。
div {border-style: solid; /* 设置边框线型为实线 */
}2. 边框颜色 (border-color)
边框颜色可以通过 border-color 属性来设置。常见的表示方法有英文单词、16 进制、RGB。边框颜色默认为文字颜色。
div {border-color: blue; /* 设置边框颜色为蓝色 */
}3. 边框粗细 (border-width)
边框粗细可以通过 border-width 属性来设置。常见的属性值为数值加单位，默认为 3px。
div {border-width: 20px; /* 设置边框粗细为 20px */
}4. 边框复合属性 (border)
边框复合属性可以通过 border 属性来设置。可以同时设置边框线型、边框粗细、边框颜色。
div {border: solid 20px blue; /* 设置边框线型为实线，粗细为 20px，颜色为蓝色 */
}5. 单独设置某一方向上的边框
可以使用 border-方位词（left、right、bottom、top）来单独设置某一方向上的边框。
div {border-top-color: blue; /* 设置上边框颜色为蓝色 */border-left-color: transparent; /* 设置左边框颜色为透明 */border-right-color: transparent; /* 设置右边框颜色为透明 */border-bottom-color: transparent; /* 设置下边框颜色为透明 */
}6. 单独设置某一方向上边框的某一属性
可以使用 border-方位词-属性（例如 border-top-color）来单独设置某一方向上边框的某一属性。
div {border-top-color: blue; /* 设置上边框颜色为蓝色 */
}四、列表属性
1. 项目符号类型 (list-style-type)
项目符号类型可以通过 list-style-type 属性来设置。常见的属性值有 disc（实心圆，默认值）、circle（空心圆）、square（方块）、none（取消项目符号）。
li {list-style-type: disc; /* 设置项目符号类型为实心圆 */
}2. 项目符号位置 (list-style-position)
项目符号位置可以通过 list-style-position 属性来设置。常见的属性值有 outside（外侧，默认值）、inside（内侧）。
li {list-style-position: inside; /* 设置项目符号位置为内侧 */
}3. 项目符号图片 (list-style-image)
项目符号图片可以通过 list-style-image 属性来设置。使用 url() 函数指定图片路径。
li {list-style-image: url(img/bullet.png); /* 设置项目符号图片 */
}4. 列表复合属性 (list-style)
列表复合属性可以通过 list-style 属性来设置。可以同时设置项目符号类型、项目符号位置、项目符号图片。
li {list-style: disc inside; /* 设置项目符号类型为实心圆，位置为内侧 */
}五、文本属性
1. 文本水平对齐方式 (text-align)
文本水平对齐方式可以通过 text-align 属性来设置。常见的属性值有 left（左，默认值）、center（中）、right（右）。
div {text-align: center; /* 设置文本水平对齐方式为居中 */
}2. 文本垂直对齐方式 (vertical-align)
文本垂直对齐方式可以通过 vertical-align 属性来设置。常见的属性值有 top（上）、middle（中）、bottom（下）、baseline（基线）。
span {vertical-align: middle; /* 设置文本垂直对齐方式为居中 */
}3. 行高 (line-height)
行高可以通过 line-height 属性来设置。常见的属性值为数值加单位，也可以使用倍数表示行距。
p {line-height: 1.5; /* 设置行高为 1.5 倍行距 */
}4. 文本修饰 (text-decoration)
文本修饰可以通过 text-decoration 属性来设置。常见的属性值有 underline（下划线）、line-through（删除线）、overline（上划线）、none（去掉修饰）。
a {text-decoration: none; /* 去掉链接的下划线 */
}5. 文本首行缩进 (text-indent)
文本首行缩进可以通过 text-indent 属性来设置。常见的属性值为数值加单位。
p {text-indent: 2em; /* 设置文本首行缩进为 2em */
}6. 文本复合属性 (font)
文本复合属性可以通过 font 属性来设置。可以同时设置文字粗细、文字倾斜、文字大小、行高、文字字体。注意，文字大小和文字字体不能省略，书写顺序也不能错。
div {font: 900 italic 20px/1.5 "宋体"; /* 设置文字粗细为 900，倾斜，大小为 20px，行高为 1.5 倍，字体为宋体 */
}结尾
本文详细介绍了 CSS 中的一些核心属性，包括文字属性、背景属性、边框属性、列表属性、文本属性等，并通过具体的代码示例进行了解析。希望本文能够帮助读者更好地理解和应用这些属性，提升网页设计的技能。在未来的学习中，建议多实践、多尝试，不断积累经验，提高自己的技术水平。