HTML连载26-谷歌开发者工具其它作用&CSS继承性

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

（2）查看源代码

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

（4）具体的样式代码

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

二、CSS三大特性之继承性

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

例如：谷歌开发者工具也可以给出验证，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继承性的更多相关文章

[转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇
前端-chromeF12 谷歌开发者工具详解 Sources篇原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...
[转帖]前端-chromeF12 谷歌开发者工具详解 Console篇
前端-chromeF12 谷歌开发者工具详解 Console篇 https://blog.csdn.net/qq_39892932/article/details/82655866 趁着搞 cloud ...
chrome谷歌开发者工具（hover时候的css样式怎么在浏览器调试）
很多小伙伴在开发的时候,大多是在用谷歌开发者工具调试代码(快捷键F12 或 Ctrl-Shift-i). 可能会经常遇到需要调试hover样式的时候,一般都是直接改代码,然后在页面上刷新查看效果. 其 ...
[转帖]前端-chromeF12 谷歌开发者工具详解 Network篇
前端-chromeF12 谷歌开发者工具详解 Network篇 https://blog.csdn.net/qq_39892932/article/details/82493922 blog 也是原作 ...
Chrome/谷歌开发者工具分析
Chrome/谷歌开发者工具还是要好好掌握一下,对于前端开发超级有用:https://developers.google.com/web/tools/chrome-devtools/ 1.js内存使用 ...
F12谷歌开发者工具preserve log
谷歌开发者工具里面这个preserve log :保留请求日志,跳转页面的时候勾选上,可以看到跳转前的请求,也可适用于chrome开发者工具抓包的问题
【转】Chrome——F12 谷歌开发者工具详解
Chrome——F12 谷歌开发者工具详解 console source network
Chrome——F12 谷歌开发者工具详解
我们这里介绍主要的几块:Console.Source.Network Console 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的, ...
Chrome 谷歌开发者工具使用窍门
我们这里介绍主要的几块:Console.Source.Network Console 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的, ...

随机推荐

[转] 基于PHP Stream Wrapper开发有趣应用场景
PHP Stream Wrapper 原文:http://blog.sina.com.cn/s/blog_502c8cc40100k40e.html ,主要是基于SAE环境讲述相应的应用场景,本文经过 ...
POJ 1064 Cable master
Cable master Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37865 Accepted: 8051 Des ...
Symmetric Tree——LeetCode
Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...
Sencha Touch 2 在MAC下详细的开发流程
在不久的将来我相信Web App会流行的非常广, 能看到未来才能主宰未来.对于我们开发人员来说我觉得想成就一件伟大的事情,需要过硬的技术和好的想法,再加上决不放弃的精神,一定可以成功的. 以下在Mac ...
mysql 子查询优化
今天用到要查询七天内都没有装机的门店信息,首先想到了用not in,先把装机的userid查出来,然后再id not in,但是这样就必须使用子查询,数据量少还可以,数据量大了的话,肯定效率特别低,因 ...
修改haproxy配置文件
需求: 1.查输入:www.oldboy.org 获取当前backend下的所有记录 2.新建输入: arg = { 'bakend': 'www.oldboy.org', 'record':{ ...
Flask 中关于&OpenCurlyQuote;蓝图’ 的使用-------------------
Blueprint是一个存储操作方法的容器,这些操作在这个Blueprint被注册到一个应用之后就可以被调用,Flask可以通过Blueprint来组织URL以及处理请求 Blueprint使用时应先 ...
REdis Asynchronous AOF fsync is taking too long
redis.conf中的no-appendfsync-on-rewrite默认值为no,表示在重写AOF文件或RDB文件时阻塞fsync. 如果重写AOF或RDB文件时长过长,则在日志中可以看到如下信 ...
使用ES6的Promise完美解决回调地狱
相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...
POJ 1144 Network（tarjan 求割点个数）
Network Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 17016 Accepted: 7635 Descript ...