CSS背景与样式设置指南-优快云博客

背景颜色设置

英文单词表示，整体页面背景设置

body{background-color: indianred;}

十六进制设置
h1{background-color:#7FFFD4}
rgb形式设置
h2{background-color:rgb(250,0,255)}
透明色设置
p{background-color: transparent;}
内边距设置
p.no2{background-color: gray; padding: 20px;}

引用方式
css文件

a.no2{background-color:yellow;padding: 20px;}

html文件

<a class="no2">我是文本内容3</a>

背景图片不重复设置，横排，竖排，一般默认重复图片

background-repeat=no-repeat/repeat-x/repeat-y

链接去掉下划线

text_decoration:none

例子

css文件

body{background-color: indianred;}
h1{background-color:#7FFFD4}
h2{background-color:rgb(250,0,255)}
p{background-color: transparent;}
a.no1{background-color:yellow;padding: 20px;text-decoration: none;}
a.no2{background-color:blue;padding:1.25rem}

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我是主标题</title>
		<link rel="stylesheet" type="text/css" href="../css/1.css"/>
	</head>
	<body>
		<h1>我是小标题</h1>
		<h2>我是文本内容1</h2>
		<a class="no1" href="../">我是文本内容2
		<a class="no2">我是文本内容3</a></a>
	</body>
</html>

效果图
在这里插入图片描述

文本高亮显示
css：

span.highlight{background-color:black}

html；

<span class="highlight">wenenenenneneeeeeeeeeeenenennenenenne</span>wenenenenneneeeeeeeeeeenenennenenenne
		<span class="highlight">dddddddddddddddddddd</span>

将图片设置为背景

body{background-image:url(地址链接)}

背景图片固定

background-attachment：fixed

背景位置

background-position：20% 40%或center或50px 100px

备注：需要和background-attachment：fixed一起使用，先固定图片，否则图片会在边界地带，同时background-attachment：fixed可以使图像不会随着页面文字滚动

所有背景在一个声明中

body{
	background-color: #000000;
	background-image:url(../img/t018cf71a3dc744c5a7.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
}

简化为

body{
background:#000000 url(../img/t018cf71a3dc744c5a7.jpg) no-repeat fixed  center;}

css 背景设置

背景颜色设置

所有背景在一个声明中