立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 6124|回复: 0

[DIV+CSS 教程笔记02] 第三节 div+ css中文字和图片背景的常用css熟悉详解

[复制链接]
发表于 2014-11-29 16:31:24 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 asp老师 于 2014-11-30 22:40 编辑

控制背景图片的CSS属性有很多,只要与图片的相关的,大多都会用的上。
这里不详细说,大家看教程就可以知道了。耐心一点,慢慢认真学,千万别前面的不想学,后面的学不会,
那么我们来先回忆一下,第二节课程的内容,第二节课程的代码如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <!--下面就是css的编写方法<stye type="text/css"> </style>-->
  7. <style type="text/css">
  8. P{color:#F00; font-size:24px; background:#9C6;}
  9. body{background:#F30;}
  10. span{color:#00F; font-size:45px;}

  11. </style>
  12. </head>

  13. <body>


  14. 大家好,<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p><p>本节视频由 道勤网  提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!<p>为各位新手站长提供学习交流的互助平台,还可以学到网站推广的<p>知识,如:seo等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!<p><span>QQ群226547332</span>

  15. </body>
  16. </html>
复制代码
我们熟悉了在css当中,如何使用多个标签,之后同时也学会了如何对这个<span></span>标签,通过css的控制来实习对其颜色和大小..属性的设定。
好我们来看今天的课程:首先呢!我们在body 标签里面写几个h标签,如果您对h标签还没有听懂的话,可以返回这里看我们HTml的基础教程!
地址如下:011 在html当中 H标签的详细应用和属性的讲解
好添加的代码如下;
  1. <body>


  2. 大家好,<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p><p>本节视频由 道勤网  提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!<p>为各位新手站长提供学习交流的互助平台,还可以学到网站推广的<p>知识,如:SEO等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!<p><span>QQ群226547332</span>

  3. <h1>道勤网免费学习</h1>
  4. <h2>天道酬勤,要学习,来道勤!</h2>
  5. <h3>免费交流学习!</h3>



  6. </body>
复制代码
那么此时的效果如下;
01.jpg 下面的几个字体就是我们分别用<h1><h2><h3>写出来的效果

此时,我们在返回到css中 设置h1 h2 h3的属性,css代码如下:
  1. <style type="text/css">
  2. P{color:#F00; font-size:24px; background:#9C6;}
  3. body{background:#F30;}
  4. span{color:#00F; font-size:45px;}
  5. h1{color:#FF0;}
  6. h2{color:#0C3;}
  7. h3{color:#0F3; background:#000;}

  8. </style>
复制代码
那么此时的效果如下;
02.jpg

我们给第一个文字<h1></h1>添加属性:代码如下:
  1. h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
复制代码
那么这句话的意识是:
color:#FF0; 表示的颜色为#F00font-family:Verdana, Geneva, sans-serif;   表示的是字体为:Verdana, Geneva, sans-serif(这个是一种字体的类型)
font-size:9px;  将这个h1内的文字变为9px的大小;
font-weight:800;  这个表示的是将这个h1标签内的字体加粗!800大家可以先理解为一个数值。
那么这样效果如下;
030.jpg
那么此时我们看这个css当中的body的属性,我们把这个背景的红色去掉,给它添加一个背景图片:(需要我们事先先把图片准备好才可以的)
代码如下:
  1. body{ background:url(xml.jpg); }
复制代码
这个是我们更改了body的代码:
css中的全部代码如下:
  1. <style type="text/css">
  2. P{color:#F00; font-size:24px; background:#9C6;}
  3. body{ background:url(xml.jpg); }
  4. span{color:#00F; font-size:45px;}
  5. h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
  6. h2{color:#0C3;}
  7. h3{color:#0F3; background:#000;}

  8. </style>
复制代码
那么此时我们的效果如下:
011.jpg
那么这个body{background:url(xml.jpg);} 这个url(这里写上你图片的地址就可以的)。这个就表示图片的链接方式;
如果您对相对路径和绝对路径不大清楚的话,可以点击查看这个文章:
URI和URL区别以及相对路径和绝对路径的区别


在这里我们看这个代码:body{background:url(xml.jpg);} 此时我们在继续控制他默认的图片是有个属性的好看代码;
  1. body{ background:url(xml.jpg) no-repeat; }
复制代码
那么此时当中的图片则是不重复的效果,我们看下这个效果;默认的是图片自己拉伸的
033.jpg 那么这个no-repeat是可以自己定义的,我们写为这样的repeat-x  repeat-y分别看下是什么效果
repeat-x这个表示是让图片按照x横着排练,repeat-y是让图片按照y轴竖着排练
03030.jpg 0101010.jpg

那么全部的代码如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <!--下面就是css的编写方法<stye type="text/css"> </style>-->
  7. <style type="text/css">
  8. P{color:#F00; font-size:24px; background:#9C6;}
  9. body{ background:url(xml.jpg) repeat-y; }
  10. span{color:#00F; font-size:45px;}
  11. h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
  12. h2{color:#0C3;}
  13. h3{color:#0F3; background:#000;}

  14. </style>
  15. </head>

  16. <body>


  17. 大家好,<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p><p>本节视频由 道勤网  提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!<p>为各位新手站长提供学习交流的互助平台,还可以学到网站推广的<p>知识,如:SEO等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!<p><span>QQ群226547332</span>

  18. <h1>道勤网免费学习</h1>
  19. <h2>天道酬勤,要学习,来道勤!</h2>
  20. <h3>免费交流学习!</h3>




  21. </body>
  22. </html>
复制代码

一般情况下;用到图片的话,我们一般选着默认就可以了,如果要不重复就加一个no-repeat



点击查看其他DIV+CSS教程
第一节 div css基本书写规则和原理详细解答
第二节在div css当中并列标签的应用规则详解
第三节 div+ css中文字和图片背景的常用css熟悉详解
第四节div+css当中的 内联样式和外联的区别讲解
第五节div+css当中 class类别选择符的应用详解
第六课. DIV +CSS当中的 id选择器的应用和匹配原理详解
第七课 div css当中 组合选择符的应用和原理详解
第八课 div css 通配选择符和包含选择器的用法技巧
第九课 div css里面 常用选择器的课程总结
第十课 div css 中css伪类元素的讲解和应用原理详解

第十一课 div css当中的 背景图片的定位概念


道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程 ( 皖ICP备15000319号-1 )

GMT+8, 2024-12-23 15:02

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表