网站开发：XTML + CSS - 文本段落背景格式

蒜蓉大猩猩

于 2024-09-04 08:00:17 发布

阅读量425

点赞数 9

分类专栏：网站开发：XTML+CSS 文章标签： css 前端 ui html5 css3

本文链接：https://blog.csdn.net/qq_51222843/article/details/141875483

版权

网站开发：XTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 前言

在 CSS 中，文本格式和背景格式是网页设计中两个非常重要的方面。它们直接影响网页的可读性、美观性和用户体验。理解并合理使用这些属性可以帮助开发者创建更好的网页界面。

2. 文本格式

对于不同标签，网页页面中最常见的元素就是文本，在CSS中文本属性为'font'

可以在同一个声明中设置多种字体相关的样式

font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];

2.1 font 属性

color

针对于字体颜色进行修改

颜色修改可以使用不同显色模式进行设定

color:red/RGB/;

2.2 font-family 字体设置

进行字体设置；可以指定多个字体作为备选方案，浏览器会按照顺序使用第一个可用的字体

body
{
    font-family:Arial,"楷体",sans-serif;
}

2.3 font-size 字体大小

设置字体的字体大小

h1
{
    font-size:/*可以使用绝对单位px，也可以使用相对父级大小单位%*/
}

2.4 font-weight 字体粗细

设置文本的字体粗细

900位最粗体，100为最细

body
{
    font-weight:bold; /*或者使用100-900*/
}

2.5 font-style 字体风格

设置字体风格，例如斜体

em
{
    font-style:italic/normal/oblique;
}

italic	倾斜
normal	正常
oblique	斜体

3.6 font-variant 字体变体

设置文本字体变体

font-variant:samll-caps/normal;

3. 段落属性

3.1 外边距 margin

设置段落的外边距，用于设置段落与其他元素的距离

margin:[top] [right] [bottom] [left];

3.2 内边距 padding

设置段落的内边距

• 段落内容与边框之间的距离

padding:[top] [right] [bottom] [left]

3.3 文本对齐 text-align

设置段落中文本的对齐方式

•left左对齐

•right右对齐

•center居中对齐

•justify两端对齐

text-align: [alignment]

3.4 行高 line-height

可以想像每一行文本有一固定的框图将文本限制，line-height就是进行框图修改

line-height:绝对高度/相对高度;

3.5 缩进text-indent

设置段落第一行文本的缩进

text-indent: 30px;40%;

3.6 文本转换 text-transform

text-transform:uppercase;

uppercase	大写
capitalize	首字母大写
lowercase	小写
none	不做转换

4 边框 border

border:[border-width] [border-style] [border-color];

4.1 宽度 width

可以设置边框的宽度

border-width: 5px /*设置所有边框的宽度为5px*/

当然也可以设置不同边框的宽度

border-width: 2px 4px 6px 9px; /*上 右 下 左*/

边框样式 border-style

border-style:[style];

none	无边框
solid	实现
dotted	点线
dashed	虚线
double	双线
groove	凹槽
ridge	山脊
inset	内嵌
outset	突起

4.2 边框颜色 border-color

设置边框颜色

border-color:[color];

4.3 边框圆角 border-radius

border-radius:10px; /*所有角的圆角半径为10px*/
border-radius:10px 20px 30px 40px;

4.4 针对性设置边框

分别用于设置元素的顶部，右侧，底部和左侧的边框

div
{
    border-top:2px solid black;
    border-right:3px dashed red;
    border-bottom:4px dotted blue;
    border-left:5px double green;
}

4.5 表格表现形式 border-collapse

border-collapse:collapse; /*表格内的边框是否重叠*/

它决定了表格单元格边框的表现方式。它的主要作用是控制表格单元格的边框是否合并（重叠）。

collapse	表格单元格的相邻边框会合并成一个单一的边框
separate	表格单元格的边框会分开显示，单元格之间会有一个边框间距; 由border-spacing属性控制

5. 背景属性

background

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];

5.1 background-color背景颜色

设置元素的背景颜色

background-color:[color];

5.2 background-image 背景图片

background-image: url('image.jpg');

也可以使用多个图片作为背景，使用逗号分隔多个URL

background-image: url('image1.jpg'), url('image2.jpg');

5.3 background-repeat 图片重复方式

background-repeat: [repeat-style];

repeat	默认在水平方向与垂直方向上重复
repeat-x	仅在水平方向上重复
repeat-y	仅在垂直方向上重复
no-repeat	背景图片不重复
space	背景图片重复且保持空隙
round	背景图片重复且拉伸到填满容器

初始位置 background-position