CDSY,CDSY.XYZ

前言

本文将详细介绍 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 中的一些核心属性，包括文字属性、背景属性、边框属性、列表属性、文本属性等，并通过具体的代码示例进行了解析。希望本文能够帮助读者更好地理解和应用这些属性，提升网页设计的技能。在未来的学习中，建议多实践、多尝试，不断积累经验，提高自己的技术水平。

CDSY,CDSY.XYZ