CSS 中 inherit 的妙用

、前言

我們經常在對元素進行調色，有一種場景，就是我們希望有的元素之間的顏色是一致的。

如父子元素的字體顏色，一般做法是直接對兩個元素進行顏色設定，但是若子元素越來越多，我們所需要的設定的代碼也會增多，且當父元素顏色發生變化的時候，我們還需要批量地對子元素顏色進行重新設定。

那有沒有辦法，讓子元素字體顏色自動跟隨父元素嗎？答案是肯定，css中提供的inhreit便是為此而誕生！

二、案例

例如我們最常見的鏈接，它是默認帶藍色、下劃線的元素：

很多場景下，我們想讓它追隨父元素字體顏色，下面是具體代碼實現

test1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入css-->
    <link rel="stylesheet" href="test1.css" type="text/css">
</head>
<body>
<div class="parent">
    <h5>parent-color</h5>
    <div class="child">
        <h1><a href="#">https://www.baidu.com/</a></h1>
    </div>
    <div class="child child4">
        <h1><a href="#">https://www.baidu.com/</a></h1>
    </div>
    <h5>parent-color</h5>
</div>
</body>
</html>

test1.css

.parent{
    /*父元素字體顏色*/
    color: #666;
}
.child{
    background-color: aliceblue;
}
.child4 a{
    /*引用父元素字體顏色*/
    color: inherit;
}

效果如上圖，上面的鏈接是默認樣式，下面的鏈接是使用 inherit 引用父元素字體顏色的，具體可以看簡單的代碼。

些人會說語言學到最后不都差不多嗎？其實可以這樣講，也可以不這樣講。雖然每種語言的表達能力大部分是重合的，只是語法表現形式不一樣，但是由于歷史發展的原因，每種語言形成了自己的支撐環境，所以都有其主要的適用范圍。

C、C++、Python和Java四種是通用編程語言，JavaScript和PHP算是Web環境的專用編程語言。

C（令人崇拜的語言）

由于其底層操作特性和歷史的積累，在嵌入式領域是當之無愧的王者。

C++（神秘莫測的語言）

是一種支持最廣泛編程范式的復雜語言，在高級語言當中，處理運行速度是最快的，大部分的游戲軟件，系統都是由C++來編寫的。

Python（高端大氣上檔次的語言）

作為一種靈活的輕便的通用型腳本語言，使用范圍比較廣，從應用軟件到Web開發都有它的身影，由于其解釋語言的特點，比較適合輕量級或原型開發；

Java（有噱頭的語言）

Java由于其跨平臺可移植性，在Web開發領域大放異彩，特別是在企業級Web開發，同時由于Android系統采用Java來開發應用程序，所以也隨著Android的發展而應用越發廣泛；

JavaScript（有潛力的語言）

JavaScript語言由于其是瀏覽器內置的腳本語言，是Web前端開發的主流，近年來由于google的V8引擎開源，出現了Node.js之類JavaScript后臺開發框架，把JavaScript的應用領域擴展到了Web后臺。

PHP（低調奢華的語言）

獨特的語法混合了C、Java、Perl以及PHP自創的語法。它可以比CGI或者Perl更快速地執行動態網頁；還可以執行編譯后代碼，編譯可以達到加密和優化代碼運行，使代碼運行更快。

理清不同語言間主要語法特性的差異，才能更好的在合適的領域或場景下去應用合適的編程語言，以滿足我們所面對的需求。這六種語言都是從C語言發展而來，所以它們的語法都比較像C語言，下面我就主要語法特性對各個語言做一個對比。

1、常量定義

C：#define TEST 0

C++：#define TEST 0

或者

const test=0;

Python：test=0

C#：不支持

PHP：define('test', 1);

Java：final int test=0;

分析：JavaScript不支持常量，C、C++都用特有的預定義宏，PHP用特殊的define語法，其它的都用定義不變變量的方式。

2、變量定義

C：int test=0;

C++：int test=0;

Python：test=0

JavaScript：val test=0;

PHP：$test=0;

Java：int test=0;

分析：這個最基本的都支持了。

3、函數定義

C：int test(int param){}

C++：int test(int param){}

Python：def test(param):

JavaScript：function test(param){}

PHP：function test($param){}

Java：public class test{

public int test(int param){} }

分析：這個也是最基本的了，只是Java比較特殊，不支持定義類之外的函數。

4、類定義（含繼承）

C：不支持

C++：class test2: public test1{}

Python：class test2(test1):

JavaScript：function test2(){}

test2.prototype=inherit(test1.prototype){}

PHP：class test2 extend test1{}

Java：class test2 extends test1{}

分析：C由于是傳統面向過程的語言不支持類，其他的都支持了，只是JavaScript的類模型比較特殊，把函數作為類來使用。

5、對象定義

C：不支持

C++：test2 obj=new test2();

Python：obj=test2()

JavaScript：var obj=new test2();

PHP：$obj=new test2();

Java：test2 obj=new test2();

分析：除了C外其它語言都是通過new一個對象。

6、數組定義

C：int a[]={1, 2, 3};

C++：int a[]={1, 2, 3};

Python：a=[1, 2, 3]

JavaScript：var a=[1, 2, 3];

PHP：$a=array("1", "2", "3");

Java：int a[]={1, 2, 3};

分析：數組是語言的基本特性，都支持了，只是PHP通過類似函數調用的語法來完成。

7、條件語句

C：if (test > 0){}

else if (test < 0){}

else{}

C++：if (test > 0){}

else if (test < 0){}

else{}

Python：if test > 0:

elif test < 0:

else:

JavaScript：if (test > 0){}

else if (test < 0){}

else{}

PHP：if ($test > 0){}

elseif ($test < 0){}

else{}

Java：if (test > 0){}

else if (test < 0){}

else{}

分析：這是最基本的語句，都支持了。

8、循環語句

C：for (idx=0; idx<num; idx++){}

C++：for (idx=0; idx<num; idx++){}

Python：for idx in range(1,10):

JavaScript：for (var idx=0; idx<num; idx++){}

PHP：for ($idx=0; $idx<$num; $idx++){}

Java：for (idx=0; idx<num; idx++){}

分析：這個也是基本的語句，都支持了。

9、foreach語句

C：不支持

C++：不支持

Python：for i in a:

或者

for key in d:

d[key]

JavaScript：for(i in a){}

PHP：foreach($a as $i){}

Java：for(int i : a){}

分析：foreach算是循環語句的一個變種，在操作順序容器的時候非常有用，可以看到C和C++不支持，其它的都語言內置支持了。

10、打印語句

C：printf("test: %d", val);

C++：cout<<"test: "<<val<<endl;

Python：print "test: "+val

JavaScript：不支持

PHP：echo "test: $val";

Java：System.out.println("test :"+val);

分析：打印算是語言所運行環境的支持庫功能，除了JavaScript外都支持了，因為JavaScript主要使用來操控DOM樹的，沒有自己的輸出窗口所以也沒必要支持。

11、字符串定義

C：char test[]={"helloworld"};

C++：String test="helloworld";

Python：test="helloworld"

JavaScript：var test="helloworld";

PHP：$test="helloworld";

Java：String test="helloworld";

分析：這個都支持了，其中C++、Java都是用標準庫來現實的。

12、字符串串接

C：test=strcat(test1, test2);

C++：test=test1 + test2;（STL庫）

Python：test=test1 + test2

JavaScript：var test=test1 + test2;

PHP：$test=$test1 .=$test2;

Java：test=test1 + test2;

分析：很有用的功能，除了C是用標準庫函數來實現，其它都是語言內置支持了。

13、字符串分割

C：不支持

C++：test.substr(3, 8);

Python：test[3:8]

JavaScript：test.slice(3, 5);

PHP：substr($test, 3, 5);

Java：test.substring(3, 8);

分析：常用的功能，C不支持，Python是語言內置支持，其他的都依靠庫來完成。

14、字符串正則表達式

C：不支持

C++：不支持

Python：test.replace("test1", "test2")

JavaScript：test.replace(/test1/gi, "test2");

PHP：str_replace($test, "test1", "test2");

Java：test.replaceAll("test1", "test2");

分析：常用的功能，可惜C、C++不支持，其他都有標準庫來支持。

15、內置容器類型

C：數組

C++：數組

順序容器 Vector

關聯容器 Pair MapSet

Python：列表/元組

字典

JavaScript：數組

對象

PHP：數組（含關聯數組）

Java：數組

序列 Collection

映射表 Map

分析：C最簡單只支持數組，其他都支持容器，不過主要還是順序容器和關聯容器兩大類。

16、注釋方式

C：/* */

C++：//

Python：#

JavaScript：/* */

PHP：/* */

Java：/* */

分析：大概就/**/、//、#三種方式，各自支持情況不一。

17、多線程支持

C：支持

C++：支持

Python：支持

JavaScript：不支持

PHP：不支持

Java：支持

分析：四種通用編程語言都支持了，兩種專用編程語言都不支持。

18、socket支持

C：支持

C++：支持

Python：支持

JavaScript：不支持

PHP：支持

Java：支持

分析：除了JavaScript以外都支持，這也是JavaScript的應用領域限制所決定的。

19、垃圾回收機制

C：不支持

C++：不支持

Python：支持

JavaScript：支持

PHP：支持

Java：支持

分析：這是現代語言的重要機制，C和C++不支持，其他的都支持了。

20、引入其他文件中的函數

C：export int test();

C++：export int test();

Python：from test import *

JavaScript：<script language='javascript' src="test.js"charset="utf-8"></script>

PHP：require_once('test.php');

或者

include_once('test.php');

Java：import java.util.test.*;

分析：都支持，C和C++用export，Python和Java用import，JavaScript依靠HTML腳本，PHP用自己的函數調用。

21、將字符串作為指令執行

C：不支持

C++：不支持

Python：eval("port=5060")

JavaScript：eval("port=5060;");

PHP：eval("port=5060;");

Java：Porcess proc=new ProcessBuilder(“test”).start();

分析：很有用的一個動態語言特性，C和C++都不支持，Java要類庫來支持，其它的語言內置eval關鍵字.

C/C++資料分享：

需要的小伙伴們可以【點擊下方】鏈接哦~

么是CSS

層疊樣式表，定義如何顯示HTML元素；簡單來說就是，給HTML頁面進行美化。

CSS的用途

CSS的使用

CSS放置在style元素中

<div></div>

<style>
 // 設置樣式
</style>

CSS放置在需要設置樣式的元素上

<div style="樣式"></div>

引入外部的css文件，如style.css

<!-- 引入方式 -->
<link rel="stylesheet" href="style.css">

style.css文件內容

//  設置樣式

如何設置CSS屬性

針對標簽設置CSS屬性

如：設置根元素HTML的屬性和body的屬性，同時設置多個的時候，使用逗號分開。

<style>
    html,body{
        // 設置CSS屬性
    }
</style>

針對設置了class屬性的元素，設置CSS屬性

<div class="test-div"></div>
<style>
    .test-div {
        // 設置CSS屬性
    }
</style>

CSS的常用屬性

width寬度

設置元素的寬度，可以使用具體的尺寸和百分比。

例如：

width: 100%; // 寬度鋪滿
width: 50px; // 寬度50像素

height高度

設置元素的高度，可以使用具體的尺寸和百分比。

例如：

height: 100%; // 高度鋪滿
height: 50px; // 高度50像素

float浮動

設置元素浮動，可以設置值為：left 浮動向左，right 浮動向右，none默認值元素不浮動，inherit繼承元素父級的浮動屬性

例如：

float: left; 
float: right;
float: none;
float: inherit;

使用屬性-搭建簡單布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body,.layout-wrap{
            width: 100%;
            margin: 0;
            color: white;
        }
        .layout-wrap {
            text-align: center;
        }
        .layout-wrap .top{
            width: 100%;
            height: 80px;
            background-color: cadetblue;
        }
        .layout-wrap .left{
            width: 70%;
            height: 600px;
            float: left;
            background-color:brown;
        }
        .layout-wrap .right{
            float: left;
            height: 600px;
            width: 30%;
        }
        .layout-wrap .right-top{
            height: 300px;
            background-color: burlywood;
        }
        .layout-wrap .right-bottom{
            height: 300px;
            background-color: seagreen;
        }
    </style>
</head>
<body>
    <div class="layout-wrap">
        <div class="top">
            頂部
        </div>
        <div class="left">
            左側
        </div>
        <div class="right">
            <div class="right-top">右側頂部</div>
            <div class="right-bottom">右側底部</div>
        </div>
    </div>
</body>
</html>

代碼效果：

（本期完）

小成講前端---本系列將隔天不定時更新

歡迎點贊，關注我！！

在線咨詢

上一篇：UI界面中的網格系統
下一篇：網站視頻課程：第一講 dreamweaver基礎知識

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 中 inherit 的妙用

、前言

二、案例

C（令人崇拜的語言）

C++（神秘莫測的語言）

Python（高端大氣上檔次的語言）

Java（有噱頭的語言）

JavaScript（有潛力的語言）

PHP（低調奢華的語言）

么是CSS

CSS的用途

CSS的使用

如何設置CSS屬性

CSS的常用屬性

使用屬性-搭建簡單布局

您的項目需求