立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 3125|回复: 0

[DIV+CSS 教程笔记02] 第七课 div css当中 组合选择符的应用和原理详解

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

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

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

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

上几节课我们看了这个class和id选择器的用法,那么我们现在来看今天的课程内容;我们先新建一个名称为07.html的文件,在建立一个07.css的文件,之后把07.css引入(link href="07.css" rel="stylesheet"  type="text/css")我们的07.html当中,并且我们在07.html当中,写上我们的
<h></h>标签;好07.html的代码如下:
  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. < link href="07.css" rel="stylesheet" type="text/css">
  7. </head>

  8. <body>


  9. <h1>道勤网</h1>
  10. <h2>道勤网</h2>
  11. <h3>道勤网</h3>
  12. <h4>道勤网</h4>
  13. <h5>道勤网</h5>

  14. </body>
  15. </html>
复制代码
那么此时效果如下:
01.jpg
我们在到07.css当中定义<h>标签当中的属性;代码如下
  1. h1{color:#F00; background:#330;}
  2. h2{color:#963; background:#330;}
  3. h3{color:#C0C; background:#330;}
  4. h4{color:#000; background:#330;}
  5. h5{color:#3F0; background:#330;}
复制代码
那么效果如下:
30.jpg
如果我们在07.css当中 来这样写:
  1. h1,h2,h3,h4,h5{color:#3F0; background:#330; font-weight:900;}
复制代码
这样呢 就是通过h1,h2,h3,h4,h5{}也可以进行一起起到效果,
当然也可以把里面的p span等标签进行一起组合。

h1,42,p,span,h5{color:#F00;}
span,h1{color:#F00;}

这样呢,不同的标签就可以通过在07.css当中进行定义。组合来进行起到不一样的效果,同时这样呢,可以加快我们的网页访问的速度。

点击查看其他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-3-29 07:43

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

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