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>