CSS 基础样式（二）

最新推荐文章于 2024-10-17 18:29:30 发布

YANG**

最新推荐文章于 2024-10-17 18:29:30 发布

阅读量105

点赞数 3

分类专栏：网页文章标签： css html html5

本文链接：https://blog.csdn.net/m0_61211769/article/details/119917842

版权

网页专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础样式，包括背景颜色、图片、平铺、大小及位置的设置；文本的对齐、装饰和缩进；字体大小、家族与样式的设定；以及定位中的相对、绝对和固定定位的用法。内容详实，适合初学者掌握CSS基本技巧。

摘要由CSDN通过智能技术生成

1、CSS 样式

1.1、背景样式：background

背景颜色：background-color

定义方式：
- 十六进制，如："#FF0000"
- RGB，如："rgb(255,0,0)"
- 颜色名称，如："red"

背景图片：background-image
- url()：引用图片
背景图片是否平铺：background-repeat
- repeat：垂直方向和水平方向平铺（默认）
- repeat-x：水平方向平铺
- repeat-y：垂直方向平铺
- no-repeat：不平铺
背景图片的大小：background-size

背景图片的位置：background-position（可以使用像素值）
- center：居中
- right：居右
- lift：居左
- top：居上
- bottom：居下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 400px;
				height: 200px;
				border: 5px solid #000000;
				/*背景样式*/
				background-color: pink;
				background-image: url(1.jpg);
				background-repeat: no-repeat;
				background-size: 400px;
				background-position: center;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

背景复合属性（background），可将多个背景样式写在一行，顺序，个数可以任意改变，但 background-size 需单独设置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 400px;
				height: 200px;
				border: 5px solid #000000;
				/*背景样式*/
				background: url(1.jpg) pink no-repeat center;
				background-size: 400px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

1.2、文本样式

水平对齐方式：text-align（元素中的内容在元素的宽度中的水平对齐方式，对行内元素无效）
- center：居中
- left：左对齐
- right：右对齐

文本装饰：text-decoration
- underline：下划线
- overline：上划线
- line-through：删除线
- none：标准文本（默认）
首行缩进：text-indent

1.3、字体样式

字体大小：font-size
字体样式：font-family

字体风格：font-style
- normal：标准字体（默认）
- italic：斜体
字体加粗：font-weight
- bold：加粗
- normal：正常

2、定位（position）

相对定位：relative

相对于元素原位置进行定位，在文档中位置没有改变，只是显示上的不同。

绝对定位：absolute

相对于浏览器的窗口进行定位，定位到文档中某个位置后不会改变。

子父级定位：

当父级元素上有设置 position:relative，当前元素的绝对定位就是相对于父级进行定位。

固定定位：fixed

定义在窗体的某个位置，不会改动

注意：绝对定位与固定定位是完全脱离文档的定位方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				height: 1600px;
				width: 500px;
				border: 5px solid red;
				/*父级: 相对定位*/
				position: relative;
				/*块元素水平居中*/
				margin: 0 auto;
			}

			#box div {
				width: 100px;
				height: 100px;
			}
			.item1 {
				background: yellow;
			}
			.item2 {
				background: greenyellow;
				/*相对定位*/
				position: relative;
				top: 100px;
				left: 100px;
			}
			.item3 {
				background: pink;
				/*绝对定位*/
				position: absolute;
				right: 0;
				bottom: 0;
			}
			.item4 {
				background: paleturquoise;
				/*固定定位*/
				position: fixed;
				top: 300px;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item1">div1</div>
			<div class="item2">div2</div>
			<div class="item3">div3</div>
			<div class="item4">div4</div>
		</div>
	</body>
</html>