2017-6-7background和a标签

背景属性和a标签属性

行高和字号

  • 行高
    CSS中所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在"行"上的.

  1. line-height:40px; 

enter description here

1496838306341.jpg

font属性能够将font-size、line-height、font-family合三为一：

  1. font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; 

超级链接(a标签)的美化

  • 伪类

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>a标签的使用</title> 
  6. <style type="text/css"> 
  7. *{ 
  8. font-family: 微软雅黑; 
  9. font-size: 24px; 
  10. } 
  11. /*a:link{*/ 
  12. /*color: red;/!*表示用户还没有点击这个链接的样式*!/*/ 
  13. /*}*/  
  14. a:link{ 
  15. color: red; 
  16. } 
  17. a:visited{ 
  18. color: orange;/*表示用户访问过了这个链接的样式*/ 
  19. } 
  20. a:hover{ 
  21. color: green;/*表示鼠标悬停的时候链接的样式*/ 
  22. } 
  23. a:active{ 
  24. color: black;/*表示鼠标点击这个链接,但是不松手此刻的样式*/ 
  25. } 
  26. </style> 
  27. </head> 
  28. <body> 
  29. <a href="http://www.563.com/" target="_blank">点击我去363</a> 
  30. <a href="http://www.163.com/" target="_blank">点击我去网易</a> 
  31. </body> 
  32. </html> 

enter description here

1496843954557.jpg

p 记住，这四种状态，在css中，必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序，那么将失效。“爱恨准则”love hate。必须先爱，后恨。

background系列属性

  • 背景颜色属性。
    css2.1中，颜色的表示方法有哪些？一共有三种：单词、rgb表示法、十六进制表示法

  • background-image
    用于给盒子加上背景图片:

  1. background-image:ulr(images/bg.jpg); 

url()表示网址，uniform resouces locator 同意资源定位符
images/wuyifan.jpg 就是相对路径。
enter description here
背景天生是会被平铺满的。
padding的区域有背景图。

background-repeat属性

设置背景图是否重复的，重复方式的。
repeat表示“重复”。
enter description here

background-position属性

背景定位属性，是最难的属性。一定要好好学。
enter description here
position就是“位置”的意思。background-position就是背景定位属性。
1background-position:向右移动量 向下移动量;

定位属性可以是负数：
enter description here

  • css精灵
    enter description here

p “css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

  • 用fireworks精确控制精灵：
    enter description here

background-attachment

背景是否固定。

  1. background-attachment:fixed;  

背景就会被固定住，不会被滚动条滚走。

background综合属性

background属性和border一样，是一个综合属性：

  1. 1background:red url(1.jpg) no-repeat 100px 100px fixed; 
  2. 等价于： 
  3. background-color:red; 
  4. background-image:url(1.jpg); 
  5. background-repeat:no-repeat; 
  6. background-position:100px 100px; 
  7. background-attachment:fixed;  
  8. 可以任意省略部分： 
  9. background: red; 
  10. background: blue url(images/wuyifan.jpg) no-repeat 100px 100px; 

enter description here

1496883933177.jpg

精灵的使用:

  1. background: url(images/taobao.png) no-repeat 0 -133px; 
posted @ 2017-06-08 11:06  shuiyaodongwu  阅读(391)  评论(0)  编辑  收藏  举报