标签：Web repeat 填充 样式 text 超链接 background 背景图片
目录
1. CSS背景
1.1 基本属性
- background-color
背景颜色可以那些颜色值，包括RGB函数来设置它
- background-image
背景图片我们需要添加一个url函数，url括号双引号内是图片的完整路径和文件名，如果同时添加背景图片和背景颜色，那么背景图片会覆盖掉背景颜色，但是如果背景图片没有被显示出来，这个时候背景颜色就会起作用
注：当我们做一个空元素，它只有标签而没有里面的内容，这个时候我们要先定义这个元素它的高度和宽度，然后才能显示出来你所添加的背景颜色和背景图片的效果
- background-repeat
repeat：它表示的就是背景图片的一个填充方式，在做背景图片的时候，通常做很小的一幅背景图片，然后我们再填充的时候，要让它作为背景图片填充满整个页面，使用的是棋盘格填充,在水平和垂直的方向上重复填充整个网页
repeat-x：横向填充一行
repeat-y：纵向填充一列
no-repeat：只显示一次，不重复填充，适合使用一幅很大的背景图片填充
- background
上面所有属性可以用background属性来统一的设置，设置时按照背景颜色、背景图片、重复填充方式的顺序
1.2 文件组织形式
images内含名为bg1.gif的1px*30px的图片：
1.3 测试代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻页面</title>
<style type="text/css">
#newstitle{
height:30px;
background:url(images/bg1.gif) repeat-x;
}
#newstitle h1{
font: bold 16px "幼圆";
text-align: center;
line-height: 30px;/*垂直居中对齐*/
}
</style>
</head>
<body>
<div id = "newstitle"><!----新闻标题---->
<h1>金融危机下欧洲华商陷窘境 变思维逆境突破</h1>
</div>
</body>
</html>
1.4 效果图
图片高度为30px，因此设置div的高度为30px， 水平横向填充
2. CSS超链接
2.1 链接的四种状态
第四种状态超链接点击的时刻就是什么时候超链接被激活，就是当你按下鼠标的时候，这个时候超链接处于激活状态，还有如果这个超链接是需要下载文件，在整个文件下载过程中，超链接都属于活动的超链接
这四种样式的名字都是a开头一个冒号隔开，后面是一个状态，我们把这种超链接或者是这种选择器的类型，称为是伪类选择器，所以超链接的这四种状态下，我们用的是伪类选择器作为它的样式的名字，那么当然如果你要设置在任何状态下，超链接的样式挪么直接去设置a标签
2.2 链接的次序
可以用love and hate这两个单词来记住这个顺序，love里面的l就表示link，v表示visited，hate里面的就表hover，a就表示active。
2.2 测试代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#othernews {
text-align:left;
font-size:14px;
line-height:1.5em;
}
a:link {
color: #09f;/*浅蓝*/
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #935;/*红*/
}
a:hover {
text-decoration: underline;
color: #03c;/*深蓝*/
font-size:150%;
}
a:active {
text-decoration: none;
color: #03c;/*深蓝*/
}
</style>
</head>
<body>
<div id = "othernews">
相关阅读:
<p><a href="#" >迪拜华商财富缩水 瞻望前景信心犹豫</a></p>
<p><a href="#" >全球华商总资产恢复增至3.9万亿美元</a></p>
<p><a href="#" >华商基金胡宇权：行业不平衡将带来投资机会</a>
</div>
</body>
</html>
2.3 效果图
运行后显示的普通状态下全部是浅蓝色
鼠标悬停时会有下划线 ,且字号放大到150%
访问过则显示红色
OSurer
发布了37 篇原创文章 · 获赞 9 · 访问量 2万+
私信
关注
标签：Web,repeat,填充,样式,text,超链接,background,背景图片 来源： https://blog.csdn.net/wq_ocean_/article/details/104158537
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。