同一个超级连接,根据用户的点击状况,有本身样式:
css
超级连接根据用户点选状况,有4种状态:
a:link
没有访问的超级连接
a:visited
已经访问的超级连接
a:hover
鼠标悬停的时候
a:active
鼠标按下的时候html
<style type="text/css"> a:link{ color:orange; } a:visited{ color:green; } a:hover{ color:black; font-size: 20px; border: 1px solid black; } a:active{ font-size: 30px; } </style>
在css里面叫作类,这个东西是工程师加的,能够明确的指定某一个标签是什么类;
可是:link、:visited,是用户指定的状态,在页面编辑的时候,咱们只能定义,可是不知道是属于什么类,因此叫作“伪类”。前端
先爱了,才能恨。
css有规定,四个伪类的顺序必须是:
link、visited、hover、active
和love hate的顺序同样,因此能够帮助记忆,叫作“爱恨准则”。
若是顺序不同,那么就有可能一些样式会错乱。css3
注意,能够省略某个,可是顺序不能变。好比咱们省略visited,那么:link、hover、active网站
通常的,咱们都会把a:link、a:visited写在一块儿, 这样点过和没有点过样式同样:搜索引擎
<style type="text/css"> a:link,a:visited{ text-decoration: underline; color:#333; } a:hover{ color:red; } </style>
若是a要转块、设置宽高,那么咱们通常习惯把盒模型的属性写在a这个选择器里。把关于文字的属性,写在伪类选择器中。特别的,必定要记住text-decoration
必定要写在伪类里面,或者a标签里,绝对不能从父亲继承,由于父亲继承来的text-decoration:none;
干不掉超级连接默认的下划线。url
.nav ul li a{ display: block; width: 120px; height: 40px; } .nav ul li a:link , .nav ul li a:visited{ text-decoration: none; color:white; } .nav ul li a:hover{ background-color: gold; }
a这个选择器,“暗含”了a:link
、a:visited
,因此也能够不写a:link
、a:visited
,直接写a:hover
3d
.nav ul li a{ display: block; width: 120px; height: 40px; text-decoration: none; color:white; } .nav ul li a:hover{ background-color: gold; }
伪类的权重和类同样,若是增长了一个类选择器。code
背景颜色属性background-color:#f00;
没有什么好说的,咱们一直在用,记住,padding区域也有背景颜色!border之内的地方都有颜色。orm
背景图片属性background-image:url(images/1.jpg);
url是uniform resource locator统一资源定位器的意思,说人话就是“网站”。
url里面没有引号,是相对路径、绝对路径都是能够的。
和插入图片不同
<img src=”” />
背景图片会默认的横向、纵向铺不少个。
repeat就是重复的意思
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-image: url(images/libai.png); background-repeat: repeat-y;
图片位置属性。
background-position:100px 200px;
表示让背景图片在盒子中向右移动100px,向下移动200px。
若是想向左、向下移动,要写负数。
background-position
最多见的用处就是“CSS精灵”css sprite,有些人叫作“CSS雪碧技术”。
就是指把多个小杂碎图片,合成一张图片,而后用background-position
定位只显示其中某一部分。
这样可以显著下降HTTP请求数。原来10个背景须要用10张图片,可是如今只须要1个。
background-position
不单单能够用两个数字来定位,还能够用单词来定位。
在左右层面,咱们用left、center、right来表示左、中、右
在上下层面,咱们用top、center、bottom来表示上、中、下
先左右后上下
background-position:left bottom;
能够用百分比来表示background-position
backgrond-position:50% 0;
等价于 background-position:center top;
假设盒子如今宽度是600px,背景图的宽度是121px,因此
background-position:center top;
等价于:background-position:50% 0;
等价于:background-position:239.5px 0;
怎么计算来的?
600 / 2 - 121 /2 = 239.5px
应用:
1) 大背景
2) 通栏banner
banner的尺寸通常都很是宽,是为了照顾有钱的用户,他们使用的是宽屏显示器,分比率达到1920,因此banner的宽度基本都是1920的。咱们要用背景来作banner,写上
background-image: url(images/banner160223.jpg); background-repeat: no-repeat; background-position: center top; background-color: #E0B895;
无论多大的分辨率,咱们的banner都是通栏的:
背景附属属性,attachment就是附属的意思。它的一个值比较有用fixed;
background-attachment: fixed;
css2.1层面,就这些。css3中又要增长background另外5个属性,等到时候再说。
咱们能够合写:
background-color:red; background-image:url(1.jpg); background-repeat:no-repeat; background-position:-10px -100px; background-attachment:fixed;
等价于:
background:red url(1.jpg) no-repeat -10px -100px fixed;
咱们要插入logo:
<h1> <img src="images/logo.png" alt="" /> </h1>
这种插入logo的方式,对搜索引擎不友好。咱们但愿的是h1里面是文字,而不是图片。搜索引擎是没法识别图上的文字的。
因此,比较好的方法,就是用背景图来呈递这个图片,标签中写上文字,标签中的文字是搜索引擎能抓取的。
<h1>爱前端-专业前端开发培训</h1>
.header h1{ width: 221px; height: 68px; background:url(images/logo.png); text-indent: -999em; → 赶走文字,让用户看不到文字 }
也能够:
.header h1{ width: 221px; height: 68px; background:url(images/logo.png); line-height: 400px; overflow: hidden; }
全部要成为先导符号的小图标,必定要放到精灵图的最右边。