200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > Web前端开发——CSS样式(Ⅱ)背景 超链接样式

Web前端开发——CSS样式(Ⅱ)背景 超链接样式

时间:2020-08-19 04:33:39

相关推荐

Web前端开发——CSS样式(Ⅱ)背景 超链接样式

目录

1. CSS背景

1.1 基本属性

1.2 文件组织形式

1.3 测试代码

1.4 效果图

2. CSS超链接

2.1 链接的四种状态

2.2 测试代码

2.3 效果图

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%

访问过则显示红色

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。