【CSS学习笔记三】背景和文本

最新推荐文章于 2024-09-24 12:57:22 发布

思索与猫

最新推荐文章于 2024-09-24 12:57:22 发布

阅读量159

点赞数

分类专栏： CSS学习文章标签： CSS 背景文本

本文链接：https://blog.csdn.net/qq_28997735/article/details/98003428

版权

CSS学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.背景

1.背景颜色

主要有三种方式定义

十六进制
RGB
颜色名称

例如：

body {background-color:#ff0000;} 
body {background-color:rgb(255,0,0);} 
body {background-color:red;}

2.背景图像

background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行水平平铺重复显示，以覆盖整个元素实体.
若想进行垂直平铺重复显示，使用background-repeat属性定义
也可以使用background-position属性改变图像位置
使用background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动(默认为滚动)。

body
{
	background-image:url('图片url');
	background-repat:repeat-x;			/*垂直平铺重复显示*/
	background-repeat:no-repeat；       /*不让图像平铺*/
	background-position:right top;      /*图片显示在右上方*/
	backgrount-attachment:fixed;        /*图像位置是固定的*/
	backgrount-attachment:scroll;	    /*背景图片随页面的其余部分滚动*/

}

3.背景简写

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

例如：

body
{
	background:#ff0000 url('demo.jpg') no-repeat fixed right top;
}

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			body
			{
				background:url('白.jpg') no-repeat left top;	
				background-size:600px;
			}			 
		</style>
		<meta charset = "utf-8"/>
		<title>背景图片</title>
	</head>
	<body>
		<h1>白真可爱</h1>
		<p>p站id:75255636</p>
	</body>
</html>

结果：
在这里插入图片描述

二.文本

1.文本颜色

使用color属性，定义方式与图片相同，有三种

十六进制
RGB
颜色名称

例如：

body{color:red;}
h1{color:blue;}
p.yellow{color:yellow;}		/*当段落属性制定为"yellow"时，段落字体为黄色，否则为红色*/

2.对齐方式

使用text-align属性

参考值：

center：居中
right：靠右
left：靠左
justfy:每一行被展开为宽度相等，左，右外边距是对齐(如杂志和报纸)

3.文本修饰

使用text-decoration 属性用来设置或删除文本的装饰
主要是用来删除链接的下划线

a{text-decoration:none;}  			 /*链接删除下划线*/
h1{text-decoration:overline;}		 /*在文字上方添加下划线*/
h2{text-decoration:line-through;}    /*在文字中间添加下划线，也就是删除线*/
h3{text-decoration:underline;}		 /*下划线*/

4.文本转换

使用text-transform属性设置文本字母大写，小写或首字母大写

参考值

uppercase：全部大写
lowercase：全部小写
capitalize：首字母大写

5.文本缩进

使用text-indent属性设置

举例：

p{text-indent:50px;}

与之相同用法的还有：

letter-spacing:设置字符间距
word-spacing:设置字间距
line-height:设置行高

6.文本阴影

使用text-shadow属性设置

h1{text-shadow:2px 2px red;}

从前到后的参考值分别为：

水平阴影的位置，可正可负
垂直阴影的位置，可正可负
颜色

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			h1
			{
				color:blue;
				text-align:center;
				text-shadow:2px 2px red;
			}
		</style>
		<meta charset = "utf-8"/>
		<title>文本</title>
	</head>
	<body>
		<h1>这个标题有阴影。</h1>
	</body>
</html>

结果：
在这里插入图片描述