Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲国产精品成熟老女人,国产成人亚洲精品影院,午夜欧美视频

          整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          D3.js實戰(zhàn)教程:2 操作DOM

          章涵蓋

          • 為D3項目設(shè)置本地開發(fā)環(huán)境
          • 從 DOM 中選擇元素
          • 將 HTML 或 SVG 元素添加到選區(qū)
          • 設(shè)置和修改DOM元素的屬性和樣式

          現(xiàn)在我們已經(jīng)確定了 D3 的角色及其工具生態(tài)系統(tǒng),是時候開始工作了!在本章中,我們將為第一個可視化奠定基礎(chǔ),同時學(xué)習(xí)如何使用 D3 操作 DOM(文檔對象模型)。

          DOM 操作是任何 D3 項目的根源,并且您將在本章中學(xué)習(xí)的技術(shù)可能是您作為 D3 開發(fā)人員最常使用的技術(shù)。首先,我們將介紹選擇,它允許我們從 DOM 中獲取單個或多個元素。您會發(fā)現(xiàn) D3 使選擇變得非常簡單和直觀。然后,一旦我們做出選擇,我們就會想用它做一些事情。我們在 D3 項目中經(jīng)常執(zhí)行的一項操作是將 HTML 或 SVG 元素添加到選擇中。例如,為了創(chuàng)建可視化效果,我們經(jīng)常將 SVG 形狀附加到 SVG 容器內(nèi)。最后,我們調(diào)整這些 SVG 形狀的位置、大小和顏色。我們通過設(shè)置它們的屬性和樣式來做到這一點。

          由于本書重點關(guān)注在本地開發(fā)環(huán)境中構(gòu)建項目,因此在我們深入研究 D3 技術(shù)之前,您需要擁有一個。在 2.2 節(jié)中,我們將解釋如何使用 VS Code 及其 Live Server 擴展在幾分鐘內(nèi)準(zhǔn)備好本地環(huán)境。

          2.1 您的第一個 D3 可視化

          在本章和下一章中,您將開發(fā)第一個 D3 可視化:如圖 2.1 所示的條形圖。盡管我們在第 1 章中提到 D3 不一定是制作簡單、經(jīng)典圖表的最有效工具,但條形圖非常適合介紹 D3 的基本概念。堅持使用我們,很快您就會擁有堅實的基礎(chǔ),使您能夠輕松構(gòu)建復(fù)雜的可視化。

          我們的條形圖背后的數(shù)據(jù)來自數(shù)據(jù)可視化協(xié)會 ( datavisualizationsociety.org )主辦的2021 年數(shù)據(jù)可視化 - 行業(yè)狀況調(diào)查。

          圖2.1 數(shù)據(jù)可視化從業(yè)者最流行的技術(shù)。我們將在本章中開始構(gòu)建這個條形圖。



          2,181 名數(shù)據(jù)可視化從業(yè)者(從專業(yè)人士到學(xué)生再到業(yè)余愛好者)回答了 2021 年行業(yè)狀況調(diào)查。我們將可視化調(diào)查中一個問題的答案:“您經(jīng)常使用哪些技術(shù)來可視化數(shù)據(jù)?”,受訪者可以從預(yù)定義列表中選擇所有適用的工具。在圖 2.1 中,您可以看到生成的條形圖,其中工具垂直列出,每個條形的長度代表選擇該工具的受訪者數(shù)量。根據(jù)這項調(diào)查,D3 躋身數(shù)據(jù)可視化工具前 10 名。讓我們開始吧!

          2.2 準(zhǔn)備環(huán)境

          在開始使用 D3 之前,我們需要決定在哪里構(gòu)建和運行我們的項目。我們可以使用在線代碼編輯器,例如 Observable ( observablehq.com ) 或 Codepen ( codepen.io ),這些選項非常適合快速測試和共享代碼。但由于本書的目標(biāo)是幫助您準(zhǔn)備好將 D3 項目發(fā)送到網(wǎng)站和 Web 應(yīng)用程序中,因此我們將選擇本地開發(fā)環(huán)境。

          現(xiàn)在,如果設(shè)置開發(fā)環(huán)境的想法讓您感到畏縮,請不要擔(dān)心。那種需要花半天的時間流汗、哭泣的日子已經(jīng)一去不復(fù)返了。借助現(xiàn)代工具,您的整個設(shè)置第一次不會超過幾分鐘,之后只需單擊按鈕即可啟動并運行。

          此時,您可能想知道為什么我們不能簡單地使用瀏覽器打開 HTML 文件,就像我們在第 1 章中的 SVG 形狀庫練習(xí)中所做的那樣。雖然這種方法有時可以很好地工作,但最終會導(dǎo)致瀏覽器拒絕執(zhí)行具體任務(wù)和拋出錯誤。出于安全原因,某些瀏覽器阻止使用 JavaScript 加載本地文件,而是需要通過 Web 服務(wù)器加載它們。由于在 D3 項目中,我們通常需要加載數(shù)據(jù)文件,因此我們確實需要一個 Web 服務(wù)器。

          在本書中,我們將使用代碼編輯器Visual Studio Code(也稱為 VS Code),通常與其 Live Server 擴展結(jié)合使用,后者提供本地 Web 服務(wù)器。但如果您已經(jīng)有了首選設(shè)置,請隨意使用它并跳至第 2.2.1 節(jié)。

          筆記

          我們將在本書第一部分中使用的項目結(jié)構(gòu)非常簡單,而且有點老式。我們的目標(biāo)是讓環(huán)境盡可能簡單,以便您可以專注于學(xué)習(xí) D3。但是,如果您是一名更高級的開發(fā)人員并且希望使用基于模塊的項目,那么您完全可以這樣做。有關(guān)通過 npm 安裝 D3 并將庫導(dǎo)入文件的說明,請參閱第 8 章的開頭(第 8.2 節(jié))。

          VS Code 在開發(fā)人員中廣受歡迎。它是免費、開源、易于使用且功能強大的。它具有內(nèi)置的 Git 命令(無需在側(cè)面打開終端窗口!)并且高度可定制。如果您的計算機上尚未安裝 VS Code,可以從 Visual Studio Code 官方網(wǎng)站(https://code.visualstudio.com/Download)下載。擁有 VS Code 后,您將需要安裝其Live Server 擴展。

          如果您需要安裝幫助,請參閱附錄 A。本附錄還包含有關(guān)如何使用 Live Server 擴展啟動和停止本地 Web 服務(wù)器的說明。

          筆記

          如果您還沒有下載代碼文件,請在本書的 Github 存儲庫 ( https://github.com/d3js-in-action-third-edition/code-files ) 上下載。從現(xiàn)在到本章結(jié)束,我們將使用該chapter_02/start文件夾。如果您在任何時候遇到困難并需要查看解決方案,您可以在該chapter_02/end文件夾中找到它。使用本章的代碼文件時,僅打開一個開頭或一個結(jié)尾代碼編輯器中的文件夾。如果您一次打開所有章節(jié)的文件并使用 Live Server 擴展來為項目提供服務(wù),則某些路徑將無法按預(yù)期工作,尤其是當(dāng)我們將數(shù)據(jù)集加載到項目中時。代碼文件分為多個部分。當(dāng)我們轉(zhuǎn)到本書中的新部分時,您可以繼續(xù)處理初始代碼文件或從專用于該部分的文件夾重新開始。兩種選擇都應(yīng)該導(dǎo)致相同的結(jié)果。

          2.2.1 我們第一個D3項目的結(jié)構(gòu)

          我們將在下一章中處理的 D3 項目都將具有類似的結(jié)構(gòu),如圖 2.2 所示。

          圖2.2 我們的第一個D3項目的文件夾結(jié)構(gòu)


          在項目的根目錄下,我們有一個index.html文件,其中包含項目的初始標(biāo)記。在本書的第一部分中,我們也將在此處將 D3 庫、JavaScript 文件和 CSS 文件加載到項目中。

          然后我們有三個文件夾:

          • 該/css文件夾包含與項目相關(guān)的所有 CSS 文件。雖然本書不重點介紹 CSS,但我們偶爾會使用它。為簡單起見,我們還將樣式分組到最少量的文件中。但請記住,在專業(yè)項目中,CSS 文件夾的結(jié)構(gòu)可能更加復(fù)雜,并且通常涉及 SASS 或 LESS 等 CSS 預(yù)處理器。
          • 該/data文件夾包含我們的數(shù)據(jù)集。對于條形圖,我們的數(shù)據(jù)集是一個 CSV 文件,其中值用逗號分隔。數(shù)據(jù)集的每一行都包含一種技術(shù),后面是計數(shù),或者調(diào)查受訪者選擇該技術(shù)的次數(shù)。
          • 最后,該/js文件夾包含我們的 JavaScript 文件。為了簡單起見,我們將把 D3 代碼寫入一個文件main.js. 但稍后,我們將討論如何將代碼拆分為多個文件或組件,以獲得更好的可維護性和可測試性。

          2.2.2 將D3加載到項目中

          在開始之前,請通過查看 VS Code 窗口的左下角來檢查您的 Web 服務(wù)器是否正在運行。它應(yīng)該顯示“端口 5500”,表明服務(wù)器正在運行。如果顯示“上線”,請單擊以啟動實時服務(wù)器。現(xiàn)在我們已經(jīng)啟動并運行了 Web 服務(wù)器,在開始使用 D3 編碼之前我們還需要做一件事:將 D3 庫加載到我們的項目中。在本書中,我們將使用兩種主要方法。第一個是添加一個腳本標(biāo)簽來index.html鏈接到最新版本的 D3。我們可以使用這種方法加載整個 D3 庫或僅加載特定模塊。第二種方法是將 D3 作為 NPM 模塊加載,主要適合使用 React 或其他 JavaScript 框架構(gòu)建的站點。

          在本章中,我們將選擇第一種方法,因為它是最簡單的。隨著本書的進展,我們將開始使用第二種方法,它更能代表當(dāng)今專業(yè) D3 項目的構(gòu)建方式。

          在 VS Code 或您選擇的代碼編輯器中,打開index.html位于文件夾根目錄的文件。在結(jié)束正文標(biāo)記 ( </body>) 之前,使用標(biāo)記加載 D3 庫的版本 7,這是撰寫本書時的最新版本script。main.js添加另一個腳本標(biāo)簽以加載位于文件夾中的文件/js并保存您的項目。您可以在清單 2.1.a 中了解如何繼續(xù)。

          <script src="https://d3js.org/d3.v7.min.js"></script>
          <script src="js/main.js"></script>

          筆記

          d3js.org的主頁始終包含如何將最新版本的 D3 庫加載到項目中的說明和代碼片段。

          瀏覽器按照與 中列出的腳本標(biāo)簽相同的順序讀取 JavaScript 文件index.html。我們必須先加載D3庫main.js。否則,瀏覽器將無法訪問main.js. 它會拋出錯誤并且代碼不會執(zhí)行。

          我們還希望腳本成為網(wǎng)頁上最后加載的內(nèi)容,因此我們將腳本標(biāo)簽放置在結(jié)束正文標(biāo)簽 ( ) 之前</body>。通過這種方法,我們可以減少頁面的加載時間,而不必在顯示 DOM 之前等待腳本加載。在嘗試從腳本文件中操作 DOM 之前,我們還要確保 DOM 可用。

          清單 2.1.a 在腳本標(biāo)簽中加載整個 D3 庫 - index.html

          <!DOCTYPE html>
          <html>
          <head> ... </head>
          <body>
            <div class="container">
              <h1>You are about to start working with D3!</h1>
            </div>
           
            <script src="https://d3js.org/d3.v7.min.js"></script> #A
           
            <script src="js/main.js"></script> #B
           
          </body> #C
          </html>

          現(xiàn)在,讓我們測試 D3 庫和main.js文件是否已正確加載到我們的項目中。在代碼編輯器中,轉(zhuǎn)到/js文件夾并打開main.js. 將以下代碼片段復(fù)制粘貼到 中main.js,然后保存文件。

          d3.select("h1").style("color", "plum");

          在下一節(jié)中,我們將詳細解釋此代碼片段中的 D3 方法的用途,但現(xiàn)在,我們假設(shè)我們已選擇標(biāo)題 h1 并將其顏色更改為 CSS 顏色名稱“plum”。如果你在瀏覽器中查看你的項目,標(biāo)題的顏色應(yīng)該已經(jīng)改變,如圖 2.3 所示。

          圖2.3 D3修改的標(biāo)題顏色


          現(xiàn)在我們已經(jīng)確認 D3 已加載到我們的項目中,您可以從 中刪除片段main.js和 h1 標(biāo)題index.html。在下一節(jié)中,我們將介紹 D3 選擇。

          2.3 選擇元素

          在構(gòu)建 D3 項目時,我們不斷地操作 DOM,任何 DOM 操作都是從選擇開始的。選擇就像從 DOM 中抓取一個元素并準(zhǔn)備好進行進一步操作。D3 有兩種選擇方法:d3.select()和d3.selectAll()。

          該方法d3.select()采用選擇器作為參數(shù),并返回與該選擇器匹配的第一個元素。此方法鏈接到d3對象并用于選擇一個元素。如圖2.4所示,選擇器參數(shù)可以是類屬性、id、標(biāo)簽名稱或上述的任意組合,就像我們在CSS中使用的選擇器一樣。

          圖2.4 select()方法


          讓我們以圖 2.5 所示的虛構(gòu) DOM 示例為例。它由一個包含 h1 標(biāo)題的 div 元素、一個帶有 class 的段落元素intro和另一個帶有 id 的 div組成viz-container。該 div 將另一個段落和一個 SVG 容器包裝在一起。最后,SVG 容器包含三個圓形元素。這些圓圈中的第一個和最后一個有類faded。

          圖 2.5 一個虛構(gòu)的 DOM 示例



          如果我們想要選擇 h1 標(biāo)題,我們可以使用它的標(biāo)簽名稱作為傳遞給該d3.select()方法的選擇器,如下所示:

          d3.select("h1");

          同樣,如果我們想選擇帶有 class 的段落intro或帶有 id 的 div viz-container,我們可以使用它們各自的 class 或 id 屬性作為選擇器。與 CSS 選擇器一樣,類名前面有一個點 ( .), ID 前面有一個主題標(biāo)簽 ( #)。

          d3.select(".intro");
          d3.select("#viz-container");

          我們還可以使用選擇器的組合。例如,如果我們想選擇 div 內(nèi) id 為 的段落元素viz-container,我們在兩個選擇器之間留一個空格。

          d3.select("#viz-container p");

          需要記住的一件重要事情是,該方法d3.select()僅返回 DOM 中與其選擇器匹配的第一個元素。例如,我們的 DOM 示例中有三個圓形元素,如圖 2.6 所示。但選擇d3.select("circle")只返回第一個,而忽略其他。

          圖2.6 d3.select()方法返回的DOM元素


          那么,如果我們需要在選擇中包含多個元素,我們該怎么辦呢?這就是我們使用該d3.selectAll()方法的時候。d3.selectAll()工作原理與 類似d3.select(),只不過它返回與其選擇器匹配的所有 DOM 元素。例如,如果我們回到虛構(gòu)的 DOM 示例,d3.selectAll("circle")則返回 DOM 中包含的所有圓形元素。

          圖2.7 d3.selectAll()方法返回的DOM元素

          有時了解這一點也很有幫助,就像在 CSS 中一樣,我們可以將多個選擇器字符串分組,并用逗號分隔。例如,在下面的代碼片段中,我們選擇h1類為 的標(biāo)題和段落intro。

          d3.selectAll("h1, .intro");

          圖 2.8 用逗號對選擇器進行分組


          大多數(shù)時候,您需要將您的選擇存儲到 JavaScript 常量中,以便以后可以重用和操作它們。您可以像使用任何 JavaScript 常量 ( const) 或變量 ( let) 一樣存儲 D3 選擇。

          const myCircles = d3.selectAll("circle");

          2.4 將元素添加到選擇中

          選擇固然很好,但如果我們不對它們做任何事情,它們就沒有多大用處。D3 中的典型模式是執(zhí)行選擇以將另一個元素附加到其中。盡管普通 JavaScript 已經(jīng)允許我們附加元素,但 D3 使其變得更加容易。

          用于將元素添加到選擇的主要 D3 方法是selection.append()。該append()方法添加一個新元素作為選擇的最后一個子元素,并采用元素的類型或標(biāo)簽的名稱作為參數(shù)。

          圖2.9append()方法

          讓我們回到我們虛構(gòu)的 DOM 示例。如果我們想添加一個矩形元素作為 SVG 容器的最后一個子元素,我們首先選擇 SVG 容器,然后將追加方法鏈接到選擇。要附加的節(jié)點類型(元素)作為參數(shù)rect傳遞給該方法。append()

          d3.select("svg").append("rect");

          圖2.10 使用selection.append()方法添加一個元素作為選擇的最后一個子元素


          我們還可以d3.selectAll("div")選擇 DOM 中的每個 div 節(jié)點,并向每個節(jié)點添加一個段落元素,如圖 2.11 所示。

          d3.selectAll("div").append("p");

          圖 2.11 當(dāng)與 d3.selectAll() 結(jié)合使用時,append 方法將節(jié)點添加到選擇的每個元素中。


          為了將我們所學(xué)到的知識付諸實踐,讓我們開始構(gòu)建本章簡介中描述的條形圖。

          確保start第 2 章代碼文件的文件夾在代碼編輯器中仍然打開,并且本地 Web 服務(wù)器正在運行。如果您需要回顧如何使用 VS Code 的 Live Server 擴展啟動 Web 服務(wù)器,請參閱附錄 A。打開該文件index.html并注意它包含一個帶有 class 的 div 元素responsive-svg-container。

          正如第 1 章中所討論的,大多數(shù) D3 可視化都是使用 SVG 元素構(gòu)建的,我們的條形圖也不例外。為此,我們需要一個 SVG 容器,用于制作圖表的 SVG 形狀將放入其中。我們現(xiàn)在將添加這個 SVG 元素。

          main.js打開文件夾中包含的文件/js。使用方法d3.select(),選擇類為 的 divresponsive-svg-container并在該 div 中添加一個 SVG 元素。由于 div 是空的,因此可以使用append()或insert()方法。它們將具有完全相同的效果。以下代碼片段顯示了該append()方法如何鏈接到選擇。

          d3.select(".responsive-svg-container")
            .append("svg");

          保存文件main.js并在瀏覽器中查看項目。視口中看不到任何變化,但如果打開檢查器,您將看到 SVG 元素已添加到 DOM,這正是我們想要的!

          圖2.12 添加到DOM樹的SVG元素

          在下一節(jié)中,我們將通過給 SVG 一個viewBox屬性來使其具有響應(yīng)能力。

          2.5 設(shè)置和修改屬性

          在第一章中,我們廣泛討論了主要的 SVG 元素以及決定其位置和大小的屬性。我們還解釋說,作為 D3 開發(fā)人員,您將需要在代碼中設(shè)置和修改這些屬性。現(xiàn)在是學(xué)習(xí)如何做的時候了!

          可以使用D3方法設(shè)置和修改屬性selection.attr(),其中“attr”代表“屬性”。如圖2.13所示,該attr()方法有兩個參數(shù),第一個是屬性的名稱,第二個是屬性的值。該值可以直接設(shè)置,也可以通過訪問器函數(shù)設(shè)置,我們將在第 3 章中討論。

          圖 2.13 attr() 方法

          在我們的條形圖練習(xí)中,圍繞 SVG 容器的 div 元素具有類responsive-svg-container。main.css如果您打開文件夾中的文件/css,您將看到此類應(yīng)用了響應(yīng)式 SVG 元素容器所需的所有樣式,如第 1.2.2 節(jié)中所述。這里,容器的max-width屬性為 1200px,這也是條形圖的最大寬度。

          為了讓我們的 SVG 容器在適應(yīng)其容器的同時保持其寬高比,我們只需要設(shè)置其 viewBox 屬性。我們將使用attr()該方法。正如您在下一個代碼片段中看到的,傳遞給該方法的第一個參數(shù)attr()是屬性的名稱,在本例中為viewBox。請注意該屬性名稱的“B”字母是大寫字母。表示屬性區(qū)分大小寫,必須遵守viewBox屬性的駝峰式大小寫表示法,以便瀏覽器識別它。

          第二個參數(shù)是屬性的值viewBox,它是四個數(shù)字的列表。前兩個數(shù)字是viewBox坐標(biāo)系的原點,位于(0,0)。最后兩個數(shù)字是 viewBox 的寬度和高度。寬度對應(yīng)于max-width容器 div 的屬性,因此為 1200px,讓我們估計高度為 1600px。如果需要的話,我們可以稍后調(diào)整。我們的 viewBox 屬性的值為"0 0 1200 1600"。

          d3.select(".responsive-svg-container")
            .append("svg")
              .attr("viewBox", "0 0 1200 1600");

          設(shè)置 SVG 元素的 viewBox 屬性,保存main.js并在檢查器中查看您的項目。您將看到該viewBox屬性已添加到 SVG 元素中,如圖 2.14 所示。此外,如果您縮小瀏覽器的視口,SVG 元素將進行調(diào)整,同時保持其縱橫比為 1200:1600。

          圖 2.14 具有 viewBox 屬性的 SVG 元素



          讓我們將最新的代碼保存到一個名為svg我們很快就會使用的 JavaScript 常量中。

          const svg = d3.select(".responsive-svg-container")
            .append("svg")
              .attr("viewBox", "0 0 1200 1600");

          每次我們使用.append()或.insert()方法向選擇添加新元素時,我們都會更改選擇返回的元素。例如,當(dāng)我們重用constant時svg,它不會返回帶有類的div responsive-svg-container,而是返回我們添加到其中的SVG容器。

          D3 縮進約定

          在進一步討論之前,我們先討論一下 D3 縮進約定。在我們最后的代碼片段中,您可能已經(jīng)注意到每個鏈接的方法都寫在一個新行上。這樣做有助于提高可讀性,尤其是當(dāng)超過 2 或 3 個方法鏈接在一起時。您可能還注意到該append()方法縮進了兩個空格,而 attr() 方法使用了四個縮進空格,因此遵循縮進約定。

          在 D3 中,每次我們將新元素附加到選擇時,我們都會更新選擇所針對的 DOM 元素。當(dāng)我們設(shè)置新添加元素的屬性和樣式時,適當(dāng)?shù)目s進可以幫助我們了解屬性和樣式應(yīng)用于哪個選擇。

          D3 縮進約定



          當(dāng)多個元素一個接一個地附加時,縮進約定特別方便。想象一下,添加 SVG 元素并設(shè)置 viewBox 屬性后,我們將一個 group 元素附加到 SVG 容器中,其類為my-group. 然后,我們將一個矩形元素附加到組中并設(shè)置其所需的屬性。正如您在上圖中看到的,我們需要鏈接多個方法才能實現(xiàn)這一點。但是,由于縮進約定,鏈很容易閱讀,我們一目了然地看到每個屬性應(yīng)用于哪個選擇或元素。

          條形圖,就像我們正在構(gòu)建的那樣,由矩形組成,而 SVG 矩形是使用元素創(chuàng)建的rect。為了練習(xí)選擇和attr()方法,我們將在條形圖中添加一個矩形,該矩形將代表在調(diào)查中選擇 D3.js 工具的數(shù)據(jù)可視化從業(yè)者的數(shù)量。data.csv如果你打開文件夾中的文件/data,你會發(fā)現(xiàn)有414名練習(xí)者表示他們經(jīng)常使用D3。

          在 中main.js,首先調(diào)用常量svg,它返回 SVG 容器。rect在 SVG 容器內(nèi)添加一個元素。在下面的代碼片段中,我們使用了append()方法來添加 rect 元素,但我們也可以使用方法insert()。保存您的項目并確認該rect元素已添加到 SVG 中。

          const svg = d3.select(".responsive-svg-container")
            .append("svg")
              .attr("viewBox", "0 0 1200 1600");
           
          svg
            .append("rect");

          該rect元素存在于 DOM 中,但在屏幕上尚不可見,因為尚未設(shè)置其所需的屬性。我們知道 SVG 矩形需要四個屬性才能出現(xiàn)在屏幕上。您可以參考 1.2.2 節(jié)來回顧這些概念。和x屬性y控制矩形左上角的位置。我們(10, 10)暫時將其放置在。矩形的寬度對應(yīng)于有多少練習(xí)者選擇 D3 作為工具,即 414,其高度可以是任意數(shù)字,我們將使用 16。通過分別給出 414 和 16 的 和 屬性值,我們的矩形width將height寬度為 414 像素,高度為 16 像素。這四個屬性的值以數(shù)字形式傳遞。

          svg
            .append("rect")
              .attr("x", 10)
              .attr("y", 10)
              .attr("width", 414)
              .attr("height", 16);

          最后,矩形的 fill 屬性設(shè)置為 CSS 顏色名稱"turquoise"并作為字符串傳遞。

          svg
            .append("rect")
              .attr("x", 10)
              .attr("y", 10)
              .attr("width", 414)
              .attr("height", 16)
              .attr("fill", "turquoise");

          請注意我們在這里如何使用縮進約定:當(dāng)我們追加矩形時創(chuàng)建的新選擇使用兩個縮進空格,而方法attr()使用四個空格。這樣,我們就可以清楚地看出屬性已應(yīng)用于元素rect。

          保存項目后,該矩形將在瀏覽器的視口中可見。

          圖 2.15 附加到 SVG 容器中的矩形元素

          2.6 設(shè)置和修改樣式

          為了使我們的可視化元素具有我們想要的外觀和感覺,我們需要能夠?qū)ζ鋺?yīng)用樣式。傳統(tǒng)的 CSS 樣式表方法是一種很好的方法,而且通常是出于可維護性目的的更好選擇。但有時,直接使用 D3 設(shè)置和修改樣式屬性很方便,特別是當(dāng)樣式旨在表示數(shù)據(jù)時。

          D3允許我們用方法設(shè)置和修改元素的樣式屬性selection.style()。該方法有兩個參數(shù)。第一個是樣式屬性的名稱,第二個是其值。

          圖2.16 style()方法


          回到我們的條形圖練習(xí),在 中main.js,將一個style()方法鏈接到 SVG 容器選擇,該方法存儲在名為 的常量中svg。就像下面的代碼片段一樣,使用該style()方法將邊框應(yīng)用到 SVG 容器。您可以給它任何您想要的值。這里我們使用簡寫屬性來應(yīng)用寬度為 1px 的黑色邊框。

          const svg = d3.select(".responsive-svg-container")
            .append("svg")
              .attr("viewBox", "0 0 1200 1600")
              .style("border", "1px solid black");

          SVG 容器周圍的邊框?qū)椭覀兛梢暬覀冋诠ぷ鞯目臻g。它還將幫助我們理解該style()方法是如何工作的。

          保存您的項目并在瀏覽器中查看它。在 DOM 檢查器中找到 SVG 容器。您應(yīng)該看到在 style 屬性中添加了 border 屬性,如圖 2.17 所示。這意味著該style()方法注入內(nèi)聯(lián)樣式。

          圖 2.17 使用 style() 方法應(yīng)用邊框

          使用 SVG 元素時,某些樣式可以作為屬性或使用內(nèi)聯(lián)樣式應(yīng)用,例如 和fill屬性stroke。沒有嚴格的規(guī)則表明我們應(yīng)該使用 theattr()或 thestyle()方法來應(yīng)用此類屬性,但一些開發(fā)人員更喜歡保持一致,并且始終將表示屬性應(yīng)用為 CSS 或內(nèi)聯(lián)樣式,而不是使用屬性。這可能是一個好主意,特別是當(dāng)我們希望通過將生成形狀的代碼與指示形狀的代碼分開來使級聯(lián)樣式易于管理時。在本書中,我們將使用 attr() 和 style() 方法以及外部 CSS 文件來設(shè)置 SVG 元素的表示屬性。

          讓我們用一個例子來說明這一點。在 中main.js,將一個style()方法鏈接到矩形選擇,并使用此方法對矩形應(yīng)用不同顏色的第二個填充。在下面的代碼片段中,我們使用 CSS color "plum"。

          svg
            .append("rect")
              .attr("x", 10)
              .attr("y", 10)
              .attr("width", 414)
              .attr("height", 16)
              .attr("fill", "turquoise")
              .style("fill", "plum");

          現(xiàn)在,打開main.css文件并向矩形添加第三個填充屬性。這里我們使用了CSS顏色"orange"。

          rect {
            fill: orange;
          }

          圖 2.18 填充作為屬性、來自永恒樣式表和內(nèi)聯(lián)樣式應(yīng)用

          我們的矩形現(xiàn)在具有三個填充屬性,應(yīng)用方式不同。它有一個 color 填充"turquoise",作為屬性應(yīng)用,另一個 color 填充"plum",作為內(nèi)聯(lián)樣式,最后一個 color 填充"orange",從外部 CSS 樣式表應(yīng)用。這當(dāng)然不是我們在現(xiàn)實生活中會做的事情,僅用于演示目的。

          保存您的項目并注意使用樣式屬性應(yīng)用的填充如何覆蓋其他兩個。在圖 2.19 中,您可以看到如何應(yīng)用級聯(lián)樣式。內(nèi)聯(lián)樣式會覆蓋任何其他樣式,后跟從外部 CSS 樣式表應(yīng)用的樣式。填充屬性排在最后。牢記這條規(guī)則將幫助您制定適合您的習(xí)慣、團隊和項目的策略,同時避免困惑為什么一種風(fēng)格在屏幕上可見而另一種風(fēng)格不可見。

          我們現(xiàn)在知道如何執(zhí)行選擇、向 DOM 添加元素以及如何定位它們并設(shè)置它們的樣式。但是像我們在這里所做的那樣將矩形一一添加到我們的條形圖中根本沒有效率。在下一章中,我們將學(xué)習(xí)數(shù)據(jù)綁定如何幫助我們一次添加所有矩形。main.js在我們到達那里之前,請從和 中刪除與矩形相關(guān)的代碼main.css。文件 main.js 現(xiàn)在僅包含清單 2.1.b 中的代碼。

          清單 2.1.b 第 2 章末尾的 main.js 內(nèi)容

          const svg = d3.select(".responsive-svg-container")
            .append("svg")
              .attr("viewBox", "0 0 1200 1600")
              .style("border", "1px solid black");

          訪問 D3 模塊文檔

          D3 包含一系列模塊,我們可以獨立使用這些模塊,也可以根據(jù)項目的需要進行組合。每個模塊包含多個執(zhí)行相關(guān)任務(wù)的方法。

          我們在本章中討論的所有方法都是模塊d3-selection ( https://github.com/d3/d3-selection ) 的一部分。該模塊托管在 github 上,是值得信賴且始終最新的資源。

          如果您是 Web 開發(fā)新手,此類 API 文檔一開始可能會令人生畏,但您參考它的次數(shù)越多,您就會開始更好地理解其技術(shù)語言。

          2.7 總結(jié)

          • D3 項目需要 Web 服務(wù)器才能正常運行。在本地開發(fā)環(huán)境中訪問 Web 服務(wù)器的一種快速簡便的方法是使用 VS Code 的 Live Server 擴展。
          • 有兩種方法可以將 D3 庫加載到項目中:通過index.html向庫鏈接添加腳本標(biāo)記或作為 NPM 模塊。在本書的第一章中,為了簡單起見,我們使用腳本標(biāo)簽方法。
          • D3庫可以全部加載,也可以只加載我們需要的D3模塊,這樣可以提高我們項目的性能。
          • 通過腳本標(biāo)簽加載文件和庫時,腳本標(biāo)簽列出的順序與瀏覽器讀取腳本的順序相同。這意味著鏈接到 D3 庫的腳本標(biāo)簽必須出現(xiàn)在加載我們使用 D3 的 JavaScript 文件的腳本標(biāo)簽之前。否則,瀏覽器將無法訪問 JavaScript 文件中使用的 D3 方法,并且會引發(fā)錯誤。
          • d3.select()在 D3 中,我們可以使用和方法從 DOM 中選擇元素d3.selectAll()。第一個方法僅返回第一個元素,而第二個方法則返回與其選擇器匹配的所有 DOM 元素。
          • 作為參數(shù)傳遞給select()和selectAll()方法的選擇器字符串與 CSS 樣式表中使用的選擇器相同。它們使用標(biāo)簽名稱、類名稱、id 或這些名稱的組合來標(biāo)識 DOM 元素。
          • 該append()方法允許添加一個元素作為選擇的最后一個子元素。該insert()方法的工作原理類似,但添加一個元素作為選擇的第一個子元素。兩種方法都將元素的類型作為參數(shù)。
          • 該attr()方法用于向元素添加或修改屬性。它需要兩個參數(shù):屬性的名稱及其值。
          • 該style()方法允許設(shè)置和修改 DOM 元素的樣式屬性。它還需要兩個參數(shù):樣式屬性的名稱及其值。
          • 通過該style()方法,我們應(yīng)用內(nèi)聯(lián)樣式,覆蓋從外部 CSS 樣式表和表示屬性應(yīng)用的樣式。

          戰(zhàn)wxPython系列-056

          GDI系統(tǒng)中的設(shè)備上下文包含一些基本元素,例如顏色,畫刷,畫筆或字體等等。wx.Colour定義設(shè)備上下文中對象顯示的顏色。wx.Brush是一個用于填充區(qū)域的繪圖工具,它用于繪制形狀的背景,它有顏色和風(fēng)格。wx.Pen用于繪制形狀的輪廓,它有顏色、寬度和樣式。wx.Font則是一個決定文本外觀的對象。

          一、wx.Colour簡介

          wx.Colour是表示紅、綠、藍(RGB)強度值和Alpha值組合的對象,用于確定繪圖顏色。有效的RGB和Alpha值范圍為0 ~ 255。

          可以使用wx.Colour類來定義各種各樣的顏色。例如可以使用SetTextForeground和SetTextBackground函數(shù)來定義一個設(shè)備上下文中文本的顏色,也可以使用wx.Colour來創(chuàng)建畫筆和刷子。

          有多種方法來創(chuàng)建wx.Colour對象,例如可以使用RGB三元色的值(0到255)來構(gòu)建wx.Colour,或者通過一個標(biāo)準(zhǔn)的字符串,比如WHITE或者CYAN,或者從另外一個wx.Colour對象創(chuàng)建。還可以直接使用系統(tǒng)預(yù)定的顏色對象指針: wx.BLACK, wx.WHITE, wx.RED, wx.BLUE, wx.GREEN, wx.CYAN,和 wx.LIGHT_GREY等。使用wx.NullColour對象用來代表未初始化的顏色對象。

          可以使用wx.SystemSettings類可以獲取很多系統(tǒng)默認的顏色,比如3D表面顏色,默認的窗口背景顏色,菜單文本顏色等等。

          下面列出了目前支持的標(biāo)準(zhǔn)顏色:aquamarine, black, blue, blue violet, brown, cadet blue, coral, cornflower blue, cyan, dark gray, dark green, dark olive green, dark orchid, dark slate blue, dark slate gray, dark turquoise, dim gray, firebrick, forest green, gold, goldenrod, gray, green, green yellow, indian red, khaki, light blue, light gray, light steel blue, lime green, magenta, maroon, medium aquamarine, medium blue, medium forest green, medium goldenrod, medium orchid, medium sea green, medium slate blue, medium spring green, medium turquoise, medium violet red, midnight blue, navy, orange, orange red, orchid, pale green, pink, plum, purple, red, salmon, sea green, sienna, sky blue, slate blue, spring green, steel blue, tan, thistle, turquoise, violet, violet red, wheat, white, yellow, 和 yellow green。

          wx.Colour常用方法

          • Red(self):返回紅色值。
          • Green(self):返回綠色值。
          • Blue(self):返回藍色值。
          • Alpha(self):返回alpha值,在不支持alpha的平臺上,它總是返回wx.ALPHA_OPAQUE。
          • GetRed(self):返回紅色值。
          • GetGreen(self):返回綠色值。
          • GetBlue(self):返回藍色值。
          • GetRGB(self):獲取單個32位值的RGB或RGBA顏色值。注意,GetRGB返回的值以0作為其最高字節(jié),獨立于Alpha實際返回的值。所以對于完全不透明的顏色,GetRGBA的返回值是0xFFBBGGRR,而GetRGB的返回值是0x00BBGGRR。
          • GetRGBA(self):獲取單個32位值的RGB或RGBA顏色值。注意,GetRGB返回的值以0作為其最高字節(jié),獨立于Alpha實際返回的值。所以對于完全不透明的顏色,GetRGBA的返回值是0xFFBBGGRR,而GetRGB的返回值是0x00BBGGRR。
          • GetLuminance(self):返回顏色亮度值(公式: 0.299*R+0.587*G+0.114*B)。
          • Set (self, red, green, blue, alpha=ALPHA_OPAQUE):使用給定值設(shè)置RGB值。
          • Set (self, RGB):使用給定值設(shè)置RGB值。
          • Set (self, str):使用類似html的語法:”#”后面跟著6個十六進制數(shù)字,分別表示紅、綠、藍分量的字符串來設(shè)置RGB值, 或者使用系統(tǒng)預(yù)定義的顏色字符串如wx.Colour(“pale green”)來設(shè)置。
          • SetRGB(self, colRGB):從單個32位值設(shè)置RGB或RGBA顏色值。數(shù)colRGB和colRGBA應(yīng)該分別采用0x00BBGGRR和0xAABBGGRR的形式,其中0xRR、0xGG、0xBB和0xAA是紅色、綠色、藍色和alpha分量的值。
          • SetRGBA(self, colRGBA):從單個32位值設(shè)置RGB或RGBA顏色值。數(shù)colRGB和colRGBA應(yīng)該分別采用0x00BBGGRR和0xAABBGGRR的形式,其中0xRR、0xGG、0xBB和0xAA是紅色、綠色、藍色和alpha分量的值。

          二、演示

          下面的例子演示了如何使用顏色值。

          #顏色(wx.Colour)
          
          import wx
          
          class SampleColour(wx.Frame):
          
              def __init__(self, *args, **kw):
                  super(SampleColour, self).__init__(*args, **kw)
          
                  self.InitUi()
          
              def InitUi(self):
                  self.SetTitle("實戰(zhàn)wxPython: GDI-顏色")
                  self.SetSize(400, 320)
          
                  self.Bind(wx.EVT_PAINT, self.OnPaint)
          
                  self.Centre()
          
              def OnPaint(self, e):
                  dc = wx.PaintDC(self)
                  dc.SetPen(wx.Pen("#d4d4d4"))
          
                  dc.SetBrush(wx.Brush(wx.BLUE))
                  dc.DrawRectangle(30, 15, 90, 60)
          
                  dc.SetBrush(wx.Brush(wx.GREEN))
                  dc.DrawRectangle(150, 15, 90, 60)
          
                  dc.SetBrush(wx.Brush(wx.RED))
                  dc.DrawRectangle(270, 15, 90, 60)
          
                  dc.SetBrush(wx.Brush(wx.Colour("dark gray")))
                  dc.DrawRectangle(30, 105, 90, 60)
          
                  dc.SetBrush(wx.Brush(wx.Colour("magenta")))
                  dc.DrawRectangle(150, 105, 90, 60)
          
                  dc.SetBrush(wx.Brush(wx.Colour("medium goldenrod")))
                  dc.DrawRectangle(270, 105, 90, 60)
          
                  dc.SetBrush(wx.Brush('#5f3b00'))
                  dc.DrawRectangle(30, 195, 90, 60)
          
                  dc.SetBrush(wx.Brush('#4c4c4c'))
                  dc.DrawRectangle(150, 195, 90, 60)
          
                  dc.SetBrush(wx.Brush('#785f36'))
                  dc.DrawRectangle(270, 195, 90, 60)
          
          def main():
              app = wx.App()
              sample = SampleColour(None)
              sample.Show()
              app.MainLoop()
          
          if __name__ == "__main__":
              main()

          上面的實例我們使用三種不同的顏色設(shè)置方法進行畫刷的顏色填充,使用DrawRectangle()方法繪制矩形。

          圖1:wx.Colour演示

          三、本文知識點

          • 了解設(shè)置wx.Colour演示的三種方法。
          • 了解系統(tǒng)內(nèi)建顏色字符串。
          • 為畫筆和畫刷設(shè)置顏色。

          前一篇:wxPython - GDI系統(tǒng)簡介

          歡迎關(guān)注,評論,收藏,點贊,和轉(zhuǎn)發(fā)。

          二部分 CSS


          第八章 css基礎(chǔ)知識


          • css基礎(chǔ)知識:
          • css樣式表的定義
          • css:(Cascading Style Sheets)層疊樣式表;
          • 分類及位置:內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
          • 外部樣式-link調(diào)用
          • 內(nèi)聯(lián)樣式-標(biāo)簽元素里面
          • css內(nèi)的注釋:/*注釋內(nèi)容*/
          • css樣式表的語法
          • CSS規(guī)則由兩個主要的部分構(gòu)成:要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。
          • 盒子名或者標(biāo)簽名{屬性:值;}
          • CSS中幾種顏色的表示方法
          • 用顏色名表示
          • 有17個預(yù)先確定的顏色,它們是
          • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
          • olive, orange, purple, red, silver, teal, white, and yellow
          • 用十六進制的顏色值表示(紅、綠、藍)
          • #FF0000或者#F00
          • 用rgb(r,g,b)函數(shù)表示
          • 如:rgb(255,255,0)
          • 用hsl(Hue,Saturation,Lightness)函數(shù)表示(色調(diào)、飽和度、亮度)
          • 如:hsl(120,100%,100%),色調(diào)0代表紅色,120代表綠色,240代表
          • 藍色
          • 用rgba(r,g,b,a)函數(shù)表示
          • 其中a表示的是改顏色的透明度,取值范圍是0~1,其中0代表完全透明
          • 用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示
          • 色調(diào)、飽和度、亮度、透明度
          • 例子
           <div style="position:absolute;top:0px">
          	<div style="background-color:gray;">background-color:gray</div>
          	<div style="background-color:#F00;">background-color:#F00</div>
          	<div style="background-color:#ffff00;">background-color:#ffff00</div>
          	<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
          	<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
          	<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
          	<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
          </div>
          
          • 內(nèi)部樣式表
          • 當(dāng)單個頁面需要設(shè)置樣式時,就應(yīng)該使用內(nèi)部樣式表。
          • 使用 <style></style>標(biāo)簽在文檔<head></head>里面定義內(nèi)部樣式表
          <head>
           <style type="text/css" >
           p{color:red;}
           </style>
          </head>
          
          • 從外部引入到樣式分為兩種:(注意寫在head標(biāo)簽里面)
          • 當(dāng)樣式需要應(yīng)用于很多頁面時,就需要用到外部樣式表,首先需要創(chuàng)建一個css文件,然后引用到我們的頁面中。
          • Link樣式表式: <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
          • Html式: <style type="text/css">@import url("css.css");></style>
          • 內(nèi)聯(lián)樣式表(優(yōu)先級高)
          • 寫在標(biāo)簽里面的樣式
          • 如:<p style="color:red;"></p>
          • 表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色
          • 區(qū)別:外鏈樣式與導(dǎo)入樣式
          • link標(biāo)簽是屬于xhtml范疇,而@import則是css2.1中特有的。link標(biāo)簽除了可以加載CSS外,還可以做很多其它的事情,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了。
          • 加載的順序的區(qū)別,link加載的css時,是一種并行(沒有嘗試是否是這樣)加載CSS方式,而@impor則在整個頁面加載完成后才加載。
          • 兼容性的區(qū)別,因@import``CSS2.1才特有的,所以對于不兼容CSS2.1的瀏覽器來說,無效。
          • 在樣式控制上(比如動態(tài)改變網(wǎng)頁的布局時,使用javascript操作DOM)的區(qū)別,此時@import就無能為力了。

          • 樣式的優(yōu)先級補充
          • 相同權(quán)值情況下,CSS樣式的優(yōu)先級總結(jié)來說,就是——就近原則(離被設(shè)置元素越近優(yōu)先級別越高):
          • 內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部) > 嵌入樣式表(當(dāng)前文件中)> 外部樣式表(外部文件中)
          • 權(quán)值不同時,瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的,哪種樣式權(quán)值高就使用哪種樣式
          • 層疊優(yōu)先級是:
          • 瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式
          • 其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
          • 派生選擇器以前叫上下文選擇器,所以完整的層疊優(yōu)先級是:
          • 瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器< 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式…共12個優(yōu)先級
          • 另外,如果同一個元素在沒有其他樣式的作用影響下,其Class定義了多個并以空格分開,其優(yōu)先級順序為:
          • 一個元素同時應(yīng)用多個class,后定義的優(yōu)先(即近者優(yōu)先),加上!important者最優(yōu)先!

          第九章 css選擇器(上)

          • css選擇器:
          • class類選擇器可以重復(fù)利用
          • id選擇器唯一
          • 標(biāo)簽選擇器
          • 什么是選擇器:css選擇器就是要改變樣式的對象
          • 選擇器{屬性:值;屬性:值;}
          • 標(biāo)簽選擇器:頁面中所有的標(biāo)簽都是一個選擇器 p{color:red;}
          • ID選擇器
          • 選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}
          • 類選擇器
          • class選擇器,選擇clas命名的元素 以.開頭 .first{color:#00f;}
          • css代碼寫完后上線前要經(jīng)過壓縮處理
          • 本地和服務(wù)器分兩個css版本(備份)
          • 壓縮后注釋都清除,空間體積減少
          • 群組選擇器
          • 選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
          • 包含選擇器
          • 選擇某元素的后代元素,也稱后代選擇器,父類與子類間以空格隔開p
          • span{color:red;}
          • 屬性選擇器
          • 選擇包含某一屬性的元素
          • a[title]{color:red;} 選擇包含title的a標(biāo)簽
          • a[title][href]{color:red;} 選擇包含title和href的a標(biāo)簽
          • > + 選擇器子類選擇器:只選擇子元素(只選擇兒子)(相當(dāng)于包含元素)
          • p > span{color:red;}
          • 相鄰兄弟選擇器:只選擇后面的相鄰兄弟元素
          • p + span{color:red;}

          第十章 css選擇器(下)


          • <a>偽類選擇器
          • a:link {color:#FF0000;} / 未訪問的鏈接 / (只用于a標(biāo)簽)
          • a:visited {color:#00FF00;} / 已訪問的鏈接 / (只用于a標(biāo)簽)
          • a:hover {color:#FF00FF;}/* 鼠標(biāo)移動到鏈接上
          • */(可和其他標(biāo)簽結(jié)合一起用)
          • a:active {color:#0000FF;} / 選定的鏈接 /
          • 注意
          • 偽類選擇器的排序很重要,a:link a:visited a:hover a:active,記作lvha
          • 輸入偽類選擇器(針對表單)
          • input:focus{color:red;} / 鍵盤輸入焦點 /
          • 其他偽類選擇器
          • p:first-child{color:red;} /* 第一個p */
          • :before 在元素之前添加內(nèi)容。
          • :after 在元素之后添加內(nèi)容。
          • css優(yōu)先規(guī)則
          • 內(nèi)聯(lián)樣式表-> ID 選擇器—> Class 類選擇器->標(biāo)簽選擇器

          第十一章 背景屬性


          • 背景屬性:
          • 背景的添加 :
          • 背景顏色的添加:
          • background:red;
          • backgronnd-color:red;
          • 背景圖片的添加:
          • background:url(“images/1.jpg”);
          • backgronnd-image:url(“images/1.jpg”);
          • 背景的平鋪
          • 什么是平鋪?平鋪就是圖片是否重復(fù)出現(xiàn)
          • 不平鋪:background-repeat:no-repeat;
          • 水平方向平鋪:background-repeat:repeat-x;
          • 垂直方向平鋪:background-repeat:repeat-y;
          • 完全平鋪:默認為完全平鋪
          • 背景圖片的定位
          • 背景圖片的定位就是可以設(shè)置顯示背景圖片的位置,通過屬性background-position來實現(xiàn)
          • background-position的取值可為英文單詞或者數(shù)值和百分值。
          • background-positon的英文單詞取值
          • top left
          • top center
          • top right
          • center left
          • center center
          • center right
          • bottom left
          • bottom center
          • ottom right
          • background-positon的數(shù)值取值
          • background-position:x y;
          • positon的百分值取值
          • background-position:x% y%;
          • 背景圖片的大小
          • 背景圖片的大小可以通過屬性background-size來設(shè)置background-size的取值可為數(shù)值和百分值。
          • background-size的數(shù)值取值
          • background-size:x y;
          • background-size的數(shù)值取值
          • background-size:x% y%;
          • 背景圖片的滾動
          • 背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設(shè)置
          • background-attachment:fixed; 固定,不隨內(nèi)容的滾動而滾動
          • background-attachment:scroll; 滾動,隨內(nèi)容的滾動而滾動

          第十二章 文字文本屬性


          • css文字文本屬性:
          • 文字屬性
          • color:red; 文字顏色
          • font-size:12px; 文字大小
          • font-weight:“bold” 文字粗細(bold/normal)
          • font-family:“宋體” 文字字體
          • font-variant:small-caps小寫字母以大寫字母顯示
          • 文本屬性
          • text-align:center; 文本對齊(right/left/center)
          • line-height:10px; 行間距(可通過它實現(xiàn)文本的垂直居中)
          • text-indent:20px; 首行縮進
          • text-decoration:none;
          • 文本線(none/underline/overline/line-through)
          • letter-spacing: 字間距

          第十三章 盒子模型


          • 盒子模型
          • 盒子模型就是一個有高度和寬度的矩形區(qū)域
          • 所有html標(biāo)簽都是盒子模型
          • div標(biāo)簽自定義盒子模型
          • 所有的標(biāo)簽都是盒子模型
          • class和id的主要差別是:class用于元素組(類似的元素,或者可以理解為某一類元素),而id用于標(biāo)識單獨的唯一的元素。
          • 盒子模型的組成
          • 盒子模型組成部分:
          • 自身內(nèi)容:width、height 寬高
          • 內(nèi)邊距: padding
          • 盒子邊框: border 邊框線
          • 與其他盒子距離: margin外邊距
          • 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
          • border 邊框
          • 常見寫法 border:1px solid #f00;
          • 單獨屬性:
          • border-width:
          • border-style:
          • dotted 點狀虛線
          • dashed(虛線)
          • solid(實線)
          • double(雙實線)
          • border-color (顏色)
          • padding 內(nèi)邊距
          • 值:像素/厘米等長度單位、百分比
          • padding:10px; 上下左右
          • padding:10px 10px; 上下 左右
          • padding:10px 10px 10px; 上 左右 下
          • padding:10px 10px 10px 10px; 上 右 下 左(設(shè)置4個點–>順時針方向)
          • 單獨屬性:
          • padding-top:
          • padding-right:
          • padding-bottom:
          • padding-left:
          • 當(dāng)設(shè)置內(nèi)邊距的時候會把盒子撐大,為了保持盒子原來的大小,應(yīng)該高度和寬度進行減小,根據(jù)width和height減小
          • margin 外邊距
          • 值:與padding相同
          • 單獨屬性:與padding相同
          • 外邊距合并:兩個盒子同時設(shè)置了外邊距,會進行一個外邊距合并

          補充盒子模型內(nèi)容


          • 標(biāo)準(zhǔn)盒子模型
          • 盒子模型是css中一個重要的概念,理解了盒子模型才能更好的排版。其實盒子模型有兩種,分別是 ie盒子模型和標(biāo)準(zhǔn) w3c 盒子模型。他們對盒子模型的解釋各不相同,先來看看我們熟知的標(biāo)準(zhǔn)盒子模型
          • 從上圖可以看到標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin、border、padding、content,并且 content部分不包含其他部分
          • IE盒子模型
          • 從上圖可以看到 ie盒子模型的范圍也包括 margin、border、padding、content
          • 和標(biāo)準(zhǔn) w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border和 padding
          • IE盒子模型width = padding+border+內(nèi)容
          • 標(biāo)準(zhǔn)盒子模型 = 內(nèi)容的寬度(不包含border+padding)
          • 例:
          • 一個盒子的 margin為 20px,border 為 1px,padding為 10px,content 的寬為 200px、高為 50px,假如用標(biāo)準(zhǔn) w3c 盒子模型解釋,那么這個盒子需要占據(jù)的位置為:寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的實際大小為:寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px;假如用ie 盒子模型,那么這個盒子需要占據(jù)的位置為:寬 20*2+200=240px、高 20*2+50=70px,盒子的實際大小為:寬 200px、高 50px
          • 那應(yīng)該選擇哪中盒子模型呢?當(dāng)然是“標(biāo)準(zhǔn) w3c 盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c盒子模型”呢?很簡單,就是在網(wǎng)頁的頂部加上 doctype 聲明。
          • 假如不加doctype 聲明,那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁,即 ie瀏覽器會采用 ie 盒子模型去解釋你的盒子,而 ff會采用標(biāo)準(zhǔn)w3c 盒子模型解釋你的盒子,所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。
          • 反之,假如加上了 doctype 聲明,那么所有瀏覽器都會采用標(biāo)準(zhǔn) w3c盒子模型去解釋你的盒子,網(wǎng)頁就能在各個瀏覽器中顯示一致了。

          • 用 jquery 做的例子來證實一下
          <html>
          <head>
          <title>你用的盒子模型是?</title>
          <script language="javascript" src="jquery.min.js"></script>
          <script language="javascript">
          var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";
          document.write("您的頁面目前支持:"+sbox+"盒子模型");
          </script>
          </head>
          <body>
          </body>
          </html>
          
          • 上面的代碼沒有加上 doctype 聲明,在 ie 瀏覽器中顯示 ie盒子模型,在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c盒子模型”。
          <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
          <html>
          <head>
          <title>你用的盒子模型是標(biāo)準(zhǔn)w3c盒子模型</title>
          <script language="javascript" src="jquery.min.js"></script>
          <script language="javascript">
          var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";
          document.write("您的頁面目前支持:"+sbox+"盒子模型");
          </script>
          </head>
          <body>
          </body>
          </html>
          
          • 代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn) w3c盒子模型”
          • 所以為了讓網(wǎng)頁能兼容各個瀏覽器,讓我們用標(biāo)準(zhǔn) w3c 盒子模型
          • 擴展
          • 學(xué)會使用box-sizing布局

          第十四章 塊元素、行元素與溢出


          • 基本概念
          • 塊級元素:默認情況下獨占一行的元素,可控制寬高、上下邊距;
          • 行內(nèi)元素:默認情況下一行可以擺放多個的元素,不可控制寬高和上下邊距
          • 行塊轉(zhuǎn)換
          • display:none; 不顯示
          • display:block; 變成塊級元素
          • display:inline; 變成行級元素
          • display:inline-block; 以塊級元素樣式展示,以行級元素樣式排列
          • 溢出
          • overflow:hidden; 溢出隱藏
          • overflow:scroll; 內(nèi)容會被修剪,瀏覽器會顯示滾動條
          • overflow:auto; 如果內(nèi)容被修剪,則產(chǎn)生滾動條
          • 文本不換行:white-space:nowrap;
          • 長單詞換行:word-wrap:break-word;
          • 行內(nèi)元素和快級元素小結(jié)
          • 一、塊級元素:block element
          • 每個塊級元素默認占一行高度,一行內(nèi)添加一個塊級元素后無法一般無法添加其他元素(float浮動后除外)。兩個塊級元素連續(xù)編輯時,會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內(nèi)元素;
          • 塊級元素一般作為容器出現(xiàn),用來組織結(jié)構(gòu),但并不全是如此。有些塊級元素,如只能包含塊級元素。
          • DIV 是最常用的塊級元素,元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現(xiàn)出來,并且跟同級的兄弟塊依次豎直排列,左右撐滿。
          • 二、行內(nèi)元素:inline element
          • 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等;行內(nèi)元素一般都是基于語義級(semantic)的基本元素,只能容納文本或其他內(nèi)聯(lián)元素,常見內(nèi)聯(lián)元素 “a”。比如 SPAN元素,IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素,各個字母 之間橫向排列,到最右端自動折行。
          • 三、block(塊)元素的特點:
          • ①、總是在新行上開始;
          • ②、高度,行高以及外邊距和內(nèi)邊距都可控制;
          • ③、寬度缺省是它的容器的100%,除非設(shè)定一個寬度。
          • ④、它可以容納內(nèi)聯(lián)元素和其他塊元素
          • 四、inline元素的特點
          • ①、和其他元素都在一行上;
          • ②、高,行高及外邊距和內(nèi)邊距不可改變;
          • ③、寬度就是它的文字或圖片的寬度,不可改變
          • ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
          • 對行內(nèi)元素,需要注意如下:
          • 設(shè)置寬度width 無效。 設(shè)置高度height無效,可以通過line-height來設(shè)置。 設(shè)置margin
          • 只有左右margin有效,上下無效。
          • 設(shè)置padding只有左右padding有效,上下則無效。注意元素范圍是增大了,但是對元素周圍的內(nèi)容是沒影響的。
          • 五、常見的塊狀元素
          • address – 地址
          • blockquote – 塊引用
          • center – 舉中對齊塊
          • dir – 目錄列表
          • div – 常用塊級容易,也是CSS layout的主要標(biāo)簽
          • dl – 定義列表
          • fieldset – form控制組
          • form – 交互表單
          • h1 – 大標(biāo)題
          • h2 – 副標(biāo)題
          • h3 – 3級標(biāo)題
          • h4 – 4級標(biāo)題
          • h5 – 5級標(biāo)題
          • h6 – 6級標(biāo)題
          • hr – 水平分隔線
          • isindex – input prompt
          • menu – 菜單列表
          • noframes – frames可選內(nèi)容,(對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
          • noscript – 可選腳本內(nèi)容(對于不支持script的瀏覽器顯示此內(nèi)容)
          • ol – 有序表單
          • p – 段落
          • pre – 格式化文本
          • table – 表格
          • ul – 無序列表
          • 六、常見的內(nèi)聯(lián)元素
          • a – 錨點
          • abbr – 縮寫
          • acronym – 首字
          • b – 粗體(不推薦)
          • bdo – bidi override
          • big – 大字體
          • br – 換行
          • cite – 引用
          • code – 計算機代碼(在引用源碼的時候需要)
          • dfn – 定義字段
          • em – 強調(diào)
          • font – 字體設(shè)定(不推薦)
          • i – 斜體
          • img – 圖片
          • input – 輸入框
          • kbd – 定義鍵盤文本
          • label – 表格標(biāo)簽
          • q – 短引用
          • s – 中劃線(不推薦)
          • samp – 定義范例計算機代碼
          • select – 項目選擇
          • small – 小字體文本
          • span – 常用內(nèi)聯(lián)容器,定義文本內(nèi)區(qū)塊
          • strike – 中劃線
          • strong – 粗體強調(diào)
          • sub – 下標(biāo)
          • sup – 上標(biāo)
          • textarea – 多行文本輸入框
          • tt – 電傳文本
          • u – 下劃線
          • 七,可變元素
          • 可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
          • applet - java applet
          • button - 按鈕
          • del- 刪除文本
          • iframe - inline frame
          • ins - 插入的文本
          • map - 圖片區(qū)塊(map)
          • object - object對象
          • script - 客戶端腳本
          • 八、行內(nèi)元素與塊級元素有什么不同
          • 區(qū)別一:
          • 塊級:塊級元素會獨占一行,默認情況下寬度自動填滿其父元素寬度
          • 行內(nèi):行內(nèi)元素不會獨占一行,相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化。
          • 區(qū)別二:
          • 塊級:塊級元素可以設(shè)置寬高
          • 行內(nèi):行內(nèi)元素不可以設(shè)置寬高
          • 區(qū)別三:
          • 塊級:塊級元素可以設(shè)置margin,padding
          • 行內(nèi):行內(nèi)元素水平方向的margin-left; margin-right;
          • padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
          • 區(qū)別四:
          • 塊級:display:block;
          • 行內(nèi):display:inline;
          • 替換元素有如下:(和img一樣的設(shè)置方法)
          • <img>、<input>、<textarea>、<select>
          • <object>都是替換元素,這些元素都沒有實際的內(nèi)容
          • 可以通過修改display屬性來切換塊級元素和行內(nèi)元素

          第十五章 定位


          • static靜態(tài)定位(不對它的位置進行改變,在哪里就在那里)
          • 默認值。沒有定位,元素出現(xiàn)在正常的流中(忽略 top,bottom, left, right 或者 z-index 聲明)。
          • fixed固定定位(參照物–瀏覽器窗口)—做 彈窗廣告用到
          • 生成固定定位的元素,相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規(guī)定。
          • relative(相對定位 )(參照物以他本身)
          • 生成相對定位的元素,相對于其正常位置進行定位。
          • absolute(絕對定位)(除了static都可以,找到參照物–>與它最近的已經(jīng)有定位的父元素進行定位)
          • 生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。
          • 元素的位置通過 “l(fā)eft", "top", "right" 以及 "bottom" 屬性進行規(guī)定
          • z-index
          • z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
          • 定位的基本思想: 它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置,或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
          • 一切皆為框
          • 塊級元素: div、h1或p元素 即:顯示為一塊內(nèi)容稱之為 “塊框“ ;
          • 行內(nèi)元素: span,strong,a等元素 即:內(nèi)容顯示在行中稱 “行內(nèi)框”;
          • 使用display屬性改變成框的類型 即:display:block; 讓行內(nèi)元素設(shè)置為塊級元素,display:none; 沒有框
          • 相對定位:
          • 如果對一個元素進行相對定位,它將出現(xiàn)在它所在的位置上。
          • 通過設(shè)置垂直或水平位置,讓這個元素“相對于”它的起點進行移動
          • .adv_relative { position: relative; left: 30px; top: 20px; }
          • 絕對定位:
          • 元素的位置相對于最近的已定位祖先元素,如果元素沒有已定位 的祖先元素,它的位置相對于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }


          第十六章 框架


          • frameset框架:
          • <frameset> —- 用來定義一個框架;雙標(biāo)簽
          • 不能和 <body> 一起使用
          • rows、cols屬性
          • rows 定義行表示框架有多少行(取值 px/%/ * )
          • cols 定義列表示框架有多少列(取值px/ %/ * )
          • frame子框架
          • <frame> —- 表示框架中的某一個部分;單標(biāo)簽,要跟結(jié)束標(biāo)志
          • src 顯示的網(wǎng)頁的路徑
          • name 框架名
          • frameborder 邊框線(取值 0 / 1)
          • <noframes>屬性
          • <noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容;雙標(biāo)簽
          <frameset>
           <frame src=“” />
           <frame src=“” />
           <frame src=“” />
           <noframes>
           <body>內(nèi)容</body>
           </noframes>
          </frameset>
          
          • <iframe>內(nèi)聯(lián)框架
          • iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架(即行內(nèi)框架)
          • 允許和 body 一起使用
          • width 寬(取值 px / %)
          • height 高(取值 px / %)
          • name 框架名
          • frameborder 邊框線(取值 0 / 1)
          • src 顯示的網(wǎng)頁的路徑

          第十七章 css高級屬性


          • opacity透明屬性
          • opacity
          • 對于IE6/7/,使用filter:alpha(opacity:值;) 值為0-100
          • 對于Webkit,Opera,F(xiàn)irefox,IE9+,使用opacity:值; 值為0-1
          • 對于早期火狐,使用-moz-opacity:值; 值為0-1
          • 所以寫透明屬性時,一般寫法是
           {	
           opacity:0.5;
           filter:alpha(opacity:50);/*0-100*/
           -moz-opacity:0.5;	/*取值0-1*/-->針對早起版本的火狐兼容問題的解決
          }
          
          • border-radius圓角邊框?qū)傩?/li>
          • 向 div 元素添加圓角邊框
          • border-radius:10px;
          • box-shadow陰影屬性
          • box-shadow屬性向框添加陰影效果,后面跟4個參數(shù)。
          • box-shadow:0px 0px 10px #000;
          • <embed>屬性
          • 是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽,可以通過<embed>插入音頻或視頻
          • <embed src=“media/music.mp3” />
          • 格式.mid .wav .mp3等

          • CSS部分導(dǎo)圖總結(jié)




          • css常見簡寫

          主站蜘蛛池模板: 蜜臀AV无码一区二区三区| 亚洲一区二区三区偷拍女厕| 综合久久一区二区三区| 国产福利电影一区二区三区久久久久成人精品综合 | 精品乱码一区二区三区在线| 精品永久久福利一区二区| 中文字幕亚洲一区二区va在线| 无码国产精品一区二区免费I6| 国产精品一区二区三区99| 国产一区二区精品久久岳√| 一区二区无码免费视频网站 | 日本精品少妇一区二区三区| 精品国产a∨无码一区二区三区| 激情内射亚州一区二区三区爱妻| 日韩AV片无码一区二区不卡 | 黑人大战亚洲人精品一区| 国产一区二区三区在线影院| 中文字幕色AV一区二区三区| 韩日午夜在线资源一区二区| 日本一区二区三区免费高清 | 红桃AV一区二区三区在线无码AV| 精品国产高清自在线一区二区三区| 人妖在线精品一区二区三区| 日韩爆乳一区二区无码| 中文字幕一区在线观看| 亚洲福利精品一区二区三区| 日韩福利视频一区| 精品国产一区二区三区| 国模无码视频一区二区三区| 无码人妻精品一区二区三区9厂 | 精品一区二区三区无码免费直播| 精品日韩一区二区三区视频| 国产精品亚洲一区二区三区| 日本在线视频一区| 一区二区精品在线观看| 亚洲乱码一区二区三区在线观看 | 激情亚洲一区国产精品| 成人无码精品一区二区三区| 国产成人午夜精品一区二区三区| 国产主播一区二区三区| 国产免费私拍一区二区三区|