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

时间 2019-12-07

标签 html 连载谷歌开发者工具其它 css 继承性栏目 HTML 繁體版

原文原文链接

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

（1）元素选择，在里面咱们能够看到某些行的具体代码git

（2）查看源代码github

（3）该元素的样式显示，咱们能够看到咱们选中的元素的具体样式属性，能够在里面进行更改，但不会修改源代码，只会当作临时查看浏览器

（4）具体的样式代码微信

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

2、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.做用：用来设置网页上的共性的格式，简约代码。

2、源码：

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大数据学习视频礼包