CSS学习系列2—背景、文本和字体

最新推荐文章于 2022-04-06 16:21:25 发布

diyuzhiwaicc

最新推荐文章于 2022-04-06 16:21:25 发布

阅读量111

点赞数

分类专栏： # CSS学习系列

本文链接：https://blog.csdn.net/diyuzhiwaicc/article/details/103158064

版权

CSS学习系列专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS背景属性、文本属性和字体属性分别用于定义HTML元素的背景，文本和字体。

1.背景属性（background）

CSS属性定义背景效果：

background-color（背景颜色）
background-image（背景图像）
background-repeat（背景图像水平或垂直平铺）
background-attachment（背景图像是否固定或滚动）
backdround-position（设置背景图像起始位置）
背景颜色：
background-color属性定义了元素的背景颜色，页面的背景颜色使用在body的选择器中，其他元素也可以使用。

<head>
<meta charset="utf-8"> 
<title>CSS教程</title> 
<style>
	div{
		background-color: yellow;
	}
	h1{
		background-color: blue;
	}
	p{
		background-color: red;
	}
</style>
</head>
<body>
	<h1>我的标题</h1>
	<div>
	div开始
	<p>我的段落</p>
	div结束
	</div>
</body>

运行结果：
在这里插入图片描述
颜色值通常可以有三种定义方式：第一种是十六进制，如"#ff0000"，第二种是RGB，如"rgb(255,0,0)"，第三种是颜色名称，如"red"。
背景图像：
background-image属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体：

body {background-image:url('paper.gif');}

背景图像-水平或垂直平铺：
默认情况下background-image属性会在页面的水平或者垂直方向平铺，可能出现不协调的情况，background-repeat可以设置图像只在水平方法（repeat-x），只在垂直方法（repeat-y）平铺或者不平铺（no-repeat），页面背景会更好些。

body {background-image:url('paper.gif');
background-repeat:repeat-x;}

背景图像-定位：
backdround-position属性是为了改变图像在背景中的位置，让页面排版更加合理。如果仅指定一个关键字，其他值将会是"center"。

body {background-image:url('paper.gif');
background-repeat:no-repeat;
background-position:right top;}

背景-简写属性：
对于以上的所有关于背景的属性，我们可以将这些属性合并到同一个属性"background"中去：

body {background:#ffffff url('paper.gif') no-repeat right top;}

简写属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
backdround-position
以上属性无需全部使用，可以按照页面的实际需要使用。

2.文本属性（text）

在CSS中定义的文本属性主要包括文本颜色，文本对齐方式，文本修饰，文本转换和文本缩进等。
文本颜色：
文本颜色主要是通过color属性去体现：

<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>

文本对齐方式：
文本排列属性是用来设置文本的水平对齐方式，文本可居中，可左对齐，右对齐或两端对齐，当text-align设置为"justify"时，每行被展开为宽度相等，左右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰：
text-decoration 属性是用来设置或删除文本的装饰，从设计的角度来看，该属性主要是用来删除链接的下划线：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
a {text-decoration:none}

几乎所有的主流浏览器都不支持text-decoration 属性的text-decoration-color和text-decoration-style属性。
文本转换：
用text-transform属性将指定文本中的所有字母大写，小写或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进：
文本缩进属性text-indent是用来指定文本的第一行的缩进。

p {text-indent:50px;}

还有其他一些文本属性：

letter-spacing用来指定字符之间的空间；
line-height（用比例）用来指定行与行之间的空间；
word-spacing用来增加单词之间的空间；
direction用来改变元素的文本方向；

3.文本字体（font）

文本字体属性主要包括字体系列font-family，字体样式font-style，字体大小font-size，字体粗细font-weight等。也可直接通过font属性设置所有的字体属性。
可设置的属性是（按顺序）：
“font-style font-variant font-weight font-size/line-height font-family”
其中font-size和font-family的值是必须的。