CSS（五）：背景、列表、超链接伪类、鼠标形状控制属性
一、背景属性
1、背景属性用来设置页面元素的背景样式。
2、常见背景属性
属性 |
描述 |
background-color |
用来设置页面的背景色，取值如red,#ff0000 |
background-image |
用来设置页面的背景图片，图片路径可以是绝对路径或相对路径，如：background-image: url("../image/arrow-right.gif"); |
background-position |
背景开始位置，包括水平方向(X轴)和垂直方向(Y轴)的设置。X轴取值：left、center、right或像素值或百分比。Y轴取值：top、center、bottom或像素值或百分比。 |
background-repeat |
背景填充方式，取值repeat-x(填充X轴)、repeat-y(填充Y轴)、no-repeat(不填充)。 |
background |
合写方式，如background: #fff url("bg.png") left top no-repeat; |
3、绝对路径和相对路径：
绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。
相对路径：相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。
3.1 相对路径使用的特殊符号
"./"：代表目前所在的目录。
"../":代表上一层目录。
以"/"开头：代表根目录。
举例说明相对路径的用法：
假设跟目录下面有web和image两个文件夹，web下有page1.html和page2文件夹，page2文件夹下有page2.html和page2image.jpg。image文件夹下面有image.jpg。
a、文件在当前目录
page2.html访问page2image.jpg
<img src="./page2image.jpg">或者<img src="page2image.jpg">
b、文件在上一层目录
page1.html访问image下的image.jpg
<img src="../image/image.jpg">
page2.html访问image下的image.jpg
<img src="../../image/image.jpg">
c、文件在下一层目录
page1.html访问page2文件夹下的page2image.jpg
<img src="./page2/page2image.jpg" >或者<img src="page2/page2image.jpg" >
d、根目录表示法，任何页面访问image下的image.jpg
<img src="/image/image.jpg">
3.2 常使用且需要注意的地方
a、css中的图片路径。
写css里的图片路径，url是图片针对样式文件的位置。
例如：同一目录下面存在index.html、image文件夹、css文件夹，css文件夹里面有style.css文件，image文件夹里面有image.jpg图片，index.html引用style.css文件，style.css文件引用image里面的image.jpg图片：
background-image:url(../image/image.jpg)
b、js中图片地址均相对于调用JS的页面的相对位置。
document.getElementById("IMG1").style.backgroundImage= "url(../Images/login.jpg)";
3.3、优缺点及使用的地方
1、绝对路径的优点
A、如果有人抄袭你的网站内容，里面的链接还会指向你的网站，有些抄袭的人比较懒，根本不会去改内容。其实也不局限于被抄袭，如果有人将你的网页保存到本地电脑中，里面的链接、图片、css、以及js仍然会连接到你的网站。
B、如果网页位置改变，里面的链接还是指向正确的URL。
2、绝对路径的缺点：
A、在编码编写时不方便使用绝对路径，因为链接应该指向真正的域名而不是开发站点。
相对路径的优缺点和绝对路径几乎相反。
3、相对路径的优点：
A、容易移动内容，可以整个目录移动。
B、测试方法比较灵活，本机测试时比较方便。
4、相对路径的缺点：
A、部分内容页面换了位置时，链接容易失效。
B、容易被人大面积采集抄袭。
示例：
css代码：
@chartset "utf-8";
div,ul,li,a,h3{
margin:;
padding:;
}
#nav{
width:;/*设置DIV的宽度*/
background-color: #D7D7D7;/*设置DIV的背景颜色*/
}
#nav h3{
font-size: 18px;
color: #fff;
line-height: 50px;/*设置行高*/
background-color: red;/*设置背景色*/
background-image: url(../image/arrow-down.gif);/*设置背景图片*/
background-repeat: no-repeat; /*图片不平铺*/
background-position: right center; /*水平垂直居中对齐*/
}
#nav ul li a{
margin: 0 4px;/*设置字体间距*/
font-size: 14px;/*设置字体大小*/
color: #000;/*设置字体颜色*/
text-decoration: none;/*设置超链接不显示下划线*/
} #nav ul li{
background-image: url(../image/arrow-right.gif);/*设置背景图片*/
background-repeat: no-repeat; /*图片不平铺*/
background-position: right center; /*水平垂直居中对齐*/
line-height: 30px;/*设置行高*/
}
html代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>全部商品分类</title>
<link rel="stylesheet" type="text/css" href="css/bgStyle.css" />
</head>
<body>
<div id="nav">
<h3>全部商品分类</h3>
<ul>
<li><a href="#">图书</a><a href="">音像</a><a href="">数字商品</a> </li>
<li><a href="#">手机</a><a href="">数码</a></li>
<li><a href="#">电脑</a><a href="#">办公</a></li>
<li><a href="">家居</a><a href="">家装</a><a href="">厨具</a></li>
<li><a href="">服装鞋帽</a><a href="">个护化妆</a></li>
<li><a href="">礼品箱包</a><a href="">钟表</a><a href="">珠宝</a></li>
<li><a href="">食品饮料</a><a href="">保健食品</a></li>
<li><a href="">彩票</a><a href="">旅行</a><a href="">充值</a><a href="">票务</a></li>
</ul>
</div>
</body>
</html>
二、列表属性
属性 |
描述 |
举例 |
list-style-image |
将列表设置为列表标志 |
list-style-image:url('./arrow.gif'); |
list-style-type |
设置列表项标志的类型：disc(实心圆) circle(空心圆) square(正方形) |
list-style-type：circle |
list-style |
以上属性的合并简写，或none去掉默认属性设置 |
list-style:square url('/i/arrow.gif'); |
三、超链接伪类
a:link{ color: red;} /*未访问的连接*/
a:visited{ color: blue;}/*已访问的连接*/
a:hover{ color: green;}/*当鼠标悬停在连接上*/
a:active{ color: yellow;}/*被选择的连接*/
示例：
css代码：
#nav a:link{ color: red;} /*未访问的连接*/
#nav a:visited{ color: blue;}/*已访问的连接*/
#nav a:hover{ color: green;}/*当鼠标悬停在连接上*/
#nav a:active{ color: yellow;}/*被选择的连接*/
#nav a{
text-decoration: none;/*设置超链接不显示下划线*/
}
#nav p{
line-height: 30px;/*设置行高*/
}
html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>超链接伪类</title>
<link rel="stylesheet" type="text/css" href="css/aStyle.css" />
</head>
<body>
<div id="nav">
<p><a href="http://www.baidu.com">打开百度</a></p>
<p><a href="http://www.sina.com.cn">打开新浪</a></p>
<p><a href="http://www.sohu.com">打开搜狐</a></p>
</div>
</body>
</html>
效果：
四、鼠标形状控制
cursor属性，其值如下图所示：
综合示例
html;
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>背景属性综合练习</title>
<link rel="stylesheet" type="text/css" href="css/trainStyle.css" />
</head>
<body>
<div id="nav">
<h3>家用电器</h3>
<h4><a href="#">大家电</a></h4>
<p>
<a href="">平板电视</a><a href="">洗衣机</a><a href="">冰箱</a><br/>
<a href="">空调</a><a href="">烟机/灶具</a><a href="">热水器</a><br/>
<a href="">冷柜/酒柜</a><a href="">消毒柜</a><a href="">家庭影院</a><br/>
</p> <h4><a href="#">生活电器</a></h4>
<p>
<a href="">电风扇</a><a href="">净化器</a><a href="">吸尘器</a><br/>
<a href="">净水设备</a><a href="">挂烫机</a><a href="">电话机</a><br/>
</p> <h4><a href="#">厨房电器</a></h4>
<p>
<a href="">榨汁机</a><a href="">电压力锅</a><a href="">电饭煲</a><br/>
<a href="">豆浆机</a><a href="">微波炉</a><a href="">电磁炉</a><br/>
</p> <h4><a href="#">五金家装</a></h4>
<p>
<a href="">淋浴/水槽</a><a href="">电动工具</a><a href="">手动工具</a><br/>
<a href="">仪器仪表</a><a href="">浴霸/排气</a><a href="">灯具</a><br/>
</p>
</div>
</body>
</html>
css:
#nav{
width: 300px;
background-color: white;
}
#nav h3{
font-size: 18px;
background-color: #0f7cbf;
font-weight: bold;
line-height: 35px;
color: white;
margin: 0px;
padding-left: 5px;
}
#nav h4{
font-size: 14px;
font-weight: bold;
line-height: 30px;
background-color: #e4f1fa;
color: #0f7cbf;
margin: 0px;
padding-left: 10px;
}
#nav h4 a{
text-decoration: none;
}
#nav p{
padding-left: 15px;
}
#nav p a{
margin: 0 5px;
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: #666666;
}
#nav p a:hover{color: #F60;text-decoration: underline;}
#nav h4 a:hover{text-decoration: underline;}
CSS（五）：背景、列表、超链接伪类、鼠标形状控制属性的更多相关文章
- Web标准：五、超链接伪类
Web标准:五.超链接伪类 知识点: 1.链接的四种样式 2.将链接转换为块状 3.用css制作按钮 4.首字下沉 1)链接的四种样式 超链接有四个伪类,分别是: a:link 未访问的链接 a: ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
- CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- web标准(复习)--5 超链接伪类
今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接 ...
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 0013 CSS复合选择器：后代、子代、交集、并集、超链接伪类
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
随机推荐
- (笔试题)N!尾部连续0的个数
题目: 对任意输入的正整数N,编写C程序求N!的尾部连续0的个数,并指出计算复杂度.如:18!＝6402373705728000,尾部连续0的个数是3. (不用考虑数值超出计算机整数界限的问题) 思路 ...
- angularjs中的数据绑定
这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-i ...
- T-SQL 之 表变量和临时表
一.表变量 表变量在SQL Server 2000中首次被引入.表变量的具体定义包括列定义,列名,数据类型和约束.而在表变量中可以使用的约束包括主键约束,唯一约束,NULL约束和CHECK约束(外键约 ...
- Scala数据类型中的Symbol（符号文本）
1.属于基本类型,被映射成scala.Symbol 2.当两个Symbol值相等时,指向同一个实例 3.Symbol类型存在的意义:作为不可变的字符串,同时不必重复地为相同对象创建实例,节省资源.这类 ...
- Python——极限编程
很cool的名字,极限编程(Extreme Programming,简写XP)是编程的一种流行趋势: (1)首先是对目标进行计划: (2)然后将测试用例集合编写为一种框架: (3)之后才编写实际的代码 ...
- OE context 传参数
来自:http://shine-it.net/index.php/topic,16360.0.html 有个需求想many2one字段关联显示的value在各个模块显示不同的值. 如果直接该rel_n ...
- 查看tomcat启动文件都干点啥
以下所写的都是基于Windows 操作系统,tomcat7.0版本.一直在使用tomcat但是老实说对于tomcat本身并没有一个系统的掌握,今天饶有兴致的随便看了看,做了一点笔记,写一点心得,我本人 ...
- AFNetworking2.0源代码解析
写在前面给大家推荐一个不错的站点 点击打开链接 本文測试样例源代码下载地址 近期看AFNetworking2的源代码.学习这个知名网络框架的实现.顺便梳理写下文章. AFNetworking的代码还在 ...
- ubuntu 将"/TMP"挂载到内存中
一.修改"/etc/fstab"文件: sudo gedit /etc/fstab 二.在文件中添加下列语句: 1, # / was on /dev/s ...
- LeetCode-344：Reverse String
This is a "Pick One" Problem :[Problem:344-Reverse String] Write a function that takes a ...