HTML连载26-谷歌开发者工具其它作用&CSS继承性
2019-07-28 00:36
1176 查看
一、谷歌开发者工具其他特性(谷歌浏览器快捷键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、css以及其它工具的进一步学习
- HTML&CSS 表格:组织数据的工具
- 【web&nbsp;html&nbsp;css】调试工具谷…
- HTML/CSS/Javascript/json代码在线压缩&格式化常用工具
- 《Head first html&css》笔记
- HTML/CSS控制div垂直&&水平居中屏幕
- 10007---HTML&CSS--简介
- HTML & CSS设计与构建网站
- F12开发者工具新功能-内存分析的作用
- HTML&CSS基础学习笔记1.22-一个简单的注册页面
- HTML&CSS 第二天 笔记
- 学习html&css&JavaScript记录
- HTML&CSS 第四天 笔记
- 积累小知识 (JS&HTML&CSS)
- HTML&CSS 【一】
- CSS 概念 & 作用
- 前端基础进阶(六):在chrome开发者工具中观察函数调用栈、作用域链与闭包
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- 使用 F12 开发人员工具调试 HTML 和 CSS(IE浏览器)