一、谷歌开发者工具其他特性（谷歌浏览器快捷键F12）

（1）元素选择， 在里面我们可以看到某些行的具体代码

（2）查看源代码

（3）该元素的样式显示，我们可以看到我们选中的元素的具体样式属性，可以在里面进行更改，但不会修改源代码，只会当做临时查看

（4）具体的样式代码

（5）该行代码所在的文件的位置

二、CSS三大特性之继承性

定义：给父元素设置一些属性，子元素也可以使用

例如：谷歌开发者工具也可以给出验证，p标签继承了div标签的属性

    <style>

        div{

            color: red;

        }

</style>

</head>

<body>

<div>

    <p>我是用来测试div工具的</p>

</div>

3.注意：

（1）并不是所有的属性都是可以继承的，只有以color/font-/text-/line开头的属性才可以继承

如例子中所示，这一属性是灰色的，代表属性并非继承来的

（2）在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承

div{

            color: red;

            font-size: 50px;

            background: skyblue;

        }

 .......省略代码..........

<div>

    <ul>

        <li>

            <p>我是多层次的</p>

        </li>

    </ul>

</div>

（3）CSS继承性的特殊性

i.a标签的文字颜色和下划线是不能继承的

ii.h标签的文字大小是不能继承的

       div{

            color: red;

            text-decoration: none;

            font-size: 30px;

        }

      ......省略代码........

<div>

<a href="#">测试a标签</a>

<h1>

我是用来测试h标签的

</h1>

</div>

解释：a标签颜色不是红的而且带下划线，h标签的字体大小也不是我们设置的

4.作用：用来设置网页上的共性的格式，简约代码。

二、源码：

d84_inherit_character.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d84_inherit_character.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载26-谷歌开发者工具其它作用&CSS继承性的更多相关文章

  1. [转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇

    前端-chromeF12 谷歌开发者工具详解 Sources篇 原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...

  2. [转帖]前端-chromeF12 谷歌开发者工具详解 Console篇

    前端-chromeF12 谷歌开发者工具详解 Console篇 https://blog.csdn.net/qq_39892932/article/details/82655866 趁着搞 cloud ...

  3. chrome谷歌开发者工具（hover时候的css样式怎么在浏览器调试）

    很多小伙伴在开发的时候,大多是在用谷歌开发者工具调试代码(快捷键F12 或 Ctrl-Shift-i). 可能会经常遇到需要调试hover样式的时候,一般都是直接改代码,然后在页面上刷新查看效果. 其 ...

  4. [转帖]前端-chromeF12 谷歌开发者工具详解 Network篇

    前端-chromeF12 谷歌开发者工具详解 Network篇 https://blog.csdn.net/qq_39892932/article/details/82493922 blog 也是原作 ...

  5. Chrome/谷歌开发者工具分析

    Chrome/谷歌开发者工具还是要好好掌握一下,对于前端开发超级有用:https://developers.google.com/web/tools/chrome-devtools/ 1.js内存使用 ...

  6. F12谷歌开发者工具preserve log

    谷歌开发者工具里面这个preserve log :保留请求日志,跳转页面的时候勾选上,可以看到跳转前的请求,也可适用于chrome开发者工具抓包的问题

  7. 【转】Chrome——F12 谷歌开发者工具详解

    Chrome——F12 谷歌开发者工具详解 console source network

  8. Chrome——F12 谷歌开发者工具详解

    我们这里介绍主要的几块:Console.Source.Network Console 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的, ...

  9. Chrome 谷歌开发者工具使用窍门

    我们这里介绍主要的几块:Console.Source.Network Console 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的, ...

随机推荐

  1. Logstash：Data转换，分析，提取，丰富及核心操作

    Logstash:Data转换,分析,提取,丰富及核心操作 Logstash plugins Logstash是一个非常容易进行扩张的框架.它可以对各种的数据进行分析处理.这依赖于目前提供的超过200 ...

  2. LinuxShell——正则表达式

    LinuxShell——正则表达式 摘要:本文主要学习了Shell中的正则表达式. 简介 含义 正则表达式,也称作正规表示法,是用于描述字符排列和匹配模式的一种语法规则,它主要用于字符串的模式分割.匹 ...

  3. Java自学-集合框架 Collection

    Java集合框架 Collection Collection是一个接口 步骤 1 : Collection Collection是 Set List Queue和 Deque的接口 Queue: 先进 ...

  4. JDK1.8 —— 接口定义增强

    使用default和static定义接口方法 JDK1.8(jre8)以后,接口中不在仅仅只允许定义抽象方法,开始允许定义普通方法了:而普通方法需要用default声明. interface IMes ...

  5. Android软件架构

    08_29_Android软件架构 架构的本质 本质, 类似图纸, 不是建筑物: 明确范围 软件设计中, 架构不等于框架: 底层的编码,到设计模式, 到框架,再到架构(微服务,SOA) 好的架构 做好 ...

  6. LNK1104 无法打开文件“xxx.lib”

    尝试解决方法: 1.找到这个库,把这个库移动到特定的文件夹下,在属性中添加这个库: 具体来说:打开VS项目->项目属性->配置属性->C/C+±>附加包含目录->编辑-& ...

  7. c# 第17节 二维数组声明、使用

    本节内容: 1:为什么要有二维数组 2:二维数据 3:实例二维数组声明 4:二维数组的使用 1:为什么要有二维数组 2:二维数据声明 3:实例二维数组声明 4:二维数组的使用 foreach遍历 5: ...

  8. 20180706模拟赛T3——神经衰弱

    文件名: card 题目类型: 传统题 时间限制: 1秒 内存限制: 128MB 编译优化: 无 题目描述 天然少女小雪非常喜欢玩一个叫做神经衰弱的游戏. 游戏规则是,有若干种牌,每种牌有若干对,开始 ...

  9. 如何做到MySQL高扩展性？

    高并发及其关注要点 近年来,随着互联网.移动互联网的飞速发展,业务系统的互动性日益增强,用户规模不断攀升,电商.游戏.直播.在线教育.短视频等一系列新兴移动端应用如雨后春笋般涌现出来,这些应用 “高并 ...

  10. zz1998_Efficient Backprop笔记

    1998_Efficient Backprop笔记 A few practical tricks 1. Stochastic vs Batch learning 在最小值附近震荡的幅度与学习速率成比例 ...