Css第三天，让网页更美妙
2023-12-21 07:44:55
背景
背景是网页设计中不可或缺的一部分。它可以用来设置网页的整体色调，也可以用来划分不同的区域。在 CSS 中，背景可以通过多种方式设置。
1. 背景颜色
背景颜色是最简单的一种背景设置方式。可以使用以下代码设置背景颜色：
body {
background-color: #ffffff;
}
其中，#ffffff 是白色的十六进制代码。
2. 背景图片
背景图片也可以用来设置背景。可以使用以下代码设置背景图片：
body {
background-image: url(image.jpg);
}
其中，image.jpg 是背景图片的文件名。
3. 背景图片的平铺
背景图片可以平铺，也可以不平铺。平铺是指背景图片会重复排列，以填满整个页面。可以使用以下代码设置背景图片的平铺方式：
body {
background-repeat: repeat;
}
其中，repeat 表示背景图片会重复排列。
4. 背景图片的定位
背景图片也可以定位。可以使用以下代码设置背景图片的定位：
body {
background-position: center center;
}
其中，center center 表示背景图片会水平和垂直居中。
5. 背景图片的尺寸
背景图片也可以设置尺寸。可以使用以下代码设置背景图片的尺寸：
body {
background-size: cover;
}
其中，cover 表示背景图片会覆盖整个页面。
6. 背景的简写方式
背景可以简写为以下代码：
body {
background: #ffffff url(image.jpg) repeat center center;
}
其中，#ffffff 是背景颜色，url(image.jpg) 是背景图片，repeat 是背景图片的平铺方式，center center 是背景图片的定位。
渐变
渐变是指颜色从一种颜色逐渐过渡到另一种颜色。在 CSS 中，渐变可以使用以下代码设置：
body {
background: linear-gradient(to right, #ffffff, #000000);
}
其中，linear-gradient 表示线性渐变，to right 表示渐变方向，#ffffff 和 #000000 分别表示渐变的起始颜色和结束颜色。
渐变还可以设置其他参数，例如渐变角度、渐变类型、渐变重复方式等。
重复背景
重复背景是指背景会重复排列。可以使用以下代码设置重复背景：
body {
background-repeat: repeat;
}
其中，repeat 表示背景会重复排列。
重复背景也可以设置其他参数，例如重复方向、重复次数等。
多背景
多背景是指一个元素可以设置多个背景。可以使用以下代码设置多背景：
body {
background: url(image1.jpg), url(image2.jpg), #ffffff;
}
其中，url(image1.jpg) 和 url(image2.jpg) 是背景图片，#ffffff 是背景颜色。
多背景也可以设置其他参数，例如背景图片的平铺方式、定位、尺寸等。
文字
文字是网页设计中不可或缺的一部分。在 CSS 中，文字可以设置多种属性，包括文字颜色、文字样式、文字大小、文字对齐、文字装饰、文字换行和文字阴影。
1. 文字颜色
文字颜色可以使用以下代码设置：
body {
color: #000000;
}
其中，#000000 是黑色的十六进制代码。
2. 文字样式
文字样式可以使用以下代码设置：
body {
font-family: Arial, Helvetica, sans-serif;
}
其中，Arial, Helvetica, sans-serif 是文字样式的名称。
3. 文字大小
文字大小可以使用以下代码设置：
body {
font-size: 16px;
}
其中，16px 是文字的大小。
4. 文字对齐
文字对齐可以使用以下代码设置：
body {
text-align: center;
}
其中，center 表示文字会水平居中。
5. 文字装饰
文字装饰可以使用以下代码设置：
body {
text-decoration: underline;
}
其中，underline 表示文字会添加下划线。
6. 文字换行
文字换行可以使用以下代码设置：
body {
word-wrap: break-word;
}
其中，break-word 表示文字会自动换行。
7. 文字阴影
文字阴影可以使用以下代码设置：
body {
text-shadow: 2px 2px 2px #000000;
}
其中，2px 2px 2px #000000 表示文字阴影的偏移量、模糊半径和颜色。
