整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網站和應用氣質倍增,中國風古典顏色手冊,淡雅優美的色彩

          本文介紹的是一個非常漂亮的在線古典顏色手冊,為程序員和設計師提供中國古典顏色設計提供色彩和靈感,特別是對于一些古典項目非常適合使用它,有了它能為你的網站或者應用提供卓然的氣質,對熱愛古風的程序員和設計師尤為有用!



          Github

          https://github.com/zerosoul/chinese-colors



          特性

          • 使用 React 構建
          • 支持 PWA


          • 適配移動端展現 (Mobile First)


          • 顏色選中高亮
          • 顏色分類
          • 可復制 HEX
          • 可收藏喜歡的顏色
          • 搭配顯示詩詞
          • 可生成壁紙/圖片卡片,屏幕多大,截圖就有多大


          涉及技術棧和其他開源項目

          • create-react-app: 大家都在用的 react 項目構建架子
          • react: 最流行的前端 UI 構建語言
          • styled-components: react 中 css 解決方案,CSS-IN-JS 最佳實踐
          • eslint + prettier: 為了更好地編碼
          • husky + commitlint: 為了更好地 GIT 提交
          • html2canvas
          • pinyin: 漢字轉拼音
          • react-copy-to-clipboard: 開啟復制功能
          • iconfont.cn: 阿里系的圖標庫,很豐富,很方便
          • https://www.transparenttextures.com/: 非常好看的紋理背景圖
          • 今日詩詞

          本地開發

          常規操作:

          克隆到本地:git clone https://github.com/zerosoul/chinese-colors.git
          初始化:cd chinese-colors && npm install
          運行:npm run start
          訪問: http://localhost:8099/
          

          截圖欣賞

          • 蒼色

          本類顏色包括蒼色、蒼翠色、蒼黃色、蒼青色、蒼黑色、蒼白色(以下按順序截圖,后續相同)


          紅色包括粉紅色、妃色、品紅色、桃紅色、海棠紅、石榴紅、櫻桃紅、銀紅色、大紅色、絳紫等幾十種顏色,此處展示這十色,感興趣的直達手冊


          • 藍色

          藍色有靛藍、靛青、碧藍、蔚藍、寶藍、藍灰、藏青藏藍等


          水色、水紅色、水綠色、水藍色、淡青色、湖藍、湖綠


          • 黑色

          玄色、玄青、烏色、烏黑、漆黑、、墨色、墨灰色、黑色、緇色等


          赤金、金色、銀白色、老銀、烏金、銅綠

          總結

          以上有你喜歡的顏色么,中國古典顏色確實很漂亮,不管是你的網站主題還是應用主題,配上中國風會很美觀、耐看、有氣質,有你喜歡的顏色么?

          在線體驗地址

          https://colors.ichuantong.cn/

          SS 是自定義網頁呈現的語言。它用于添加顏色、背景圖像和紋理,以及在頁面上排列元素。然而,CSS 不僅僅是繪制漂亮的圖片。它還能增強網站的可用性。下圖顯示了 YouTube 的首頁。左邊是頁面的常規渲染,右邊是沒有 CSS 的頁面。

          右側的圖像不僅不那么有趣,而且使用起來也更加困難

          在這個簡短的指南中,我們將介紹 CSS、演示 CSS 語法、解釋 CSS 的工作原理、向您展示如何將 CSS 標記添加到 HTML 文檔中,并為您提供來自網絡的大量資源,您可以在其中了解有關 CSS 的更多信息。

          什么是 CSS?

          CSS 代表層疊樣式表,它是用于設置網頁視覺呈現樣式的語言。CSS 是告訴 Web 瀏覽器如何呈現網頁的不同部分的語言。

          網頁上的每個項目或元素都是以標記語言編寫的文檔的一部分。在大多數情況下,HTML 雖然是標記語言,但也有其他語言在使用,例如 XML。在本指南中,我們將使用 HTML 來演示 CSS 的實際應用,請記住,如果您使用 XML或不同的標記語言,同樣的原則和技術也適用。

          CSS 與 HTML 有何不同?

          談到 CSS 提問題時,首先要了解的是何時使用 CSS 等樣式語言以及何時使用 HTML 等標記語言。

          • 所有重要的網站內容都應使用 HTML 等標記語言添加到網站。
          • 網站內容的呈現應該由樣式語言定義,例如 CSS。

          不屬于網頁演示的博客文章、頁面標題、視頻、音頻和圖片都應使用 HTML 添加到網頁中。背景圖像和顏色、邊框、字體大小、排版以及網頁上項目的位置都應該由 CSS 定義。

          做出這種區分很重要,因為未能使用正確的語言可能會導致將來難以對網站進行更改,并為使用純文本瀏覽器或屏幕閱讀器的網站訪問者造成可訪問性和可用性問題。

          CSS 語法

          CSS 語法包括選擇器、屬性、值、聲明、聲明塊、規則集、at 規則和語句。

          • 選擇器是一個代碼片段,用于標識受樣式影響的網頁元素或元素。
          • 屬性是要受影響的元素的方面。例如,顏色、內邊距、邊距和背景是一些最常用的顏色 CSS 屬性。
          • 值用于定義屬性。例如,屬性顏色可能被賦予紅色值,如下所示color: red;
          • 屬性的組合稱為聲明。
          • 在許多情況下,多個聲明應用于單個選擇器。聲明塊是用于指代應用于單個選擇器的所有聲明的術語。
          • 單個選擇器和緊隨其后的聲明塊組合稱為規則集。
          • At-rules類似于規則集,但以**@符號而不是selector開頭。最常見的@media規則是通常用于創建基于查看網頁的設備大小應用的 CSS 規則塊的規則。
          • 規則集at-rules都是CSS語句。

          CSS 語法示例

          讓我們使用一段 CSS 來闡明這些項目是什么。

          h1 { 
              color: red; 
              font-size: 3em; 
              text-decoration: underline; 
              }

          在本例中,h1是選擇器。選擇器后跟一個包含三個聲明的聲明塊。每個聲明與下一個聲明之間用分號分隔。制表符和換行符是可選的,但大多數開發人員使用它來使 CSS 代碼更易于閱讀。

          通過h1用作選擇器,我們是說網頁上的每個 1 級標題都應遵循此規則集中包含的聲明。

          規則集包含三個聲明:

          • color:red;
          • font-size: 3em;
          • text-decoration: underline;

          colorfont-sizetext-decoration都是性質。您可以使用數百個 CSS 屬性,但常用的只有幾十個。

          我們將值red3emunderline應用于我們使用的屬性。每個 CSS 屬性都被定義為接受以特定方式格式化的存在。

          對于color屬性,我們可以使用顏色關鍵字或 HexRGBHSL 格式的顏色公式。在這種情況下,我們使用了 color 關鍵字red。CSS3 中有幾十個顏色關鍵字可用,但其他顏色模型可以訪問數百萬種顏色。

          我們將 的值應用于3em屬性font-size。我們可以使用多種尺寸單位,包括像素、百分比等

          最后,我們將值添加underline到屬性text-decoration中。我們也可以使用overlineorline-through作為 的值text-decoration。此外,CSS3 允許使用純線、雙線、點線、虛線和波浪線樣式,這些都是文本裝飾顏色的規范。我們可以通過使用這樣的聲明一次應用所有三個值:

          text-decoration: blue double underline;
          

          該規則將導致h1我們最初示例中的 用藍色雙線下劃線。color文本本身將保持為我們屬性中定義的紅色。

          為樣式準備 HTML 標記

          CSS 應該用于向網頁添加內容。該任務最好由 HTMLXML等標記語言處理。相反,CSS 用于選擇網頁上已經存在的項目并定義每個項目的顯示方式。

          為了盡可能容易地選擇網頁上的項目,應將標識符添加到網頁上的元素中。這些標識符,在 CSS 上下文中通常稱為鉤子,可以更容易地識別應該受 CSS 規則影響的項目。

          類和 ID 用作 CSS 樣式的掛鉤。雖然 CSS 的呈現方式不受使用類和鉤子的影響,但它們使開發人員能夠精確定位他們希望設置樣式的 HTML 元素。

          類和 ID 不可互換。知道何時使用它們很重要。

          何時使用類

          當單個網頁上有多個元素需要設置樣式時,請使用類。例如,假設您希望頁面頁眉和頁腳中的鏈接以一致的方式設置樣式,但與頁面正文中的鏈接不同。要查明這些鏈接,您可以為每個鏈接或包含鏈接的容器添加一個類。然后,您可以使用該類指定樣式,并確保它們僅應用于具有該類屬性的鏈接。

          何時使用 ID

          對僅在網頁上出現一次的元素使用 ID。例如,如果您使用 HTML 無序列表進行站點導航,則可以使用nav等 ID為該列表創建唯一的掛鉤。

          這是一個用于基本電子商務網站的簡單導航欄的 HTMLCSS 代碼示例。

          <style>
              #nav { 
                   background: lightgray; 
                   overflow: auto; 
                   } 
               #nav li {
                   float: left; 
                   padding: 10px;
                   } 
                #nav li:hover {
                   background: gray; 
                   } 
            </style> 
            <ul id="nav"> 
                <li><a href="">Home</a></li>
                <li><a href="">Shop</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li> 
            </ul>
          

          該代碼將生成一個從頁面左側開始的淺灰色背景的水平導航菜單。每個導航項目的四周都有 10 像素的間距,當您將鼠標懸停在每個項目的背景上時,它的背景會變暗。

          同一網頁上的任何其他列表都不會受到該代碼的影響。

          #example-nav {
          background: lightgray;
          overflow: auto;
          }
          #example-nav li {
          float: left;
          padding: 10px;
          }
          #example-nav li:hover {
          background: gray;
          }
          

          何時不使用 Hooks

          您不必為 HTML元素添加類或 ID 即可使用 CSS對其進行樣式設置。如果您知道要為網頁上特定元素的每個實例設置樣式,則可以使用元素標簽本身。

          例如,假設您要創建一致的標題樣式。與向每個標題添加類或 ID 相比,使用標題標簽簡單地設置所有標題元素的樣式會容易得多。

          <style> 
             ul { 
                 list-style-type: upper-roman; 
                 margin-left: 50px; 
                 } 
               p { 
                 color: darkblue 
                 } 
           </style> 
           <p>Some paragraph text here. Two short sentences.</p> 
           <ul> 
           <li>A quick list</li>
           <li>Just two items</li> 
           </ul> 
           <p>Additional paragraph text here. This time let's go for three sentences. Like this.
           </p>
          

          該代碼顯示的效果如下:

          .code_sample ul {
          list-style-type: upper-roman;
          左邊距:50px;
          }
          .code_sample p {
          顏色:深藍色
          }
          
          這里有一些段落文本。兩個短句。
          
          快速列表
          只有兩個項目
          此處附加段落文本。這次讓我們來三句話。像這樣。
          
          另一個清單
          仍然只有兩個項目
          

          在這種情況下,即使我們只為ulp元素編寫了一次樣式規則,但會影響多個項目。通過在網站的每個頁面上創建一致的標題、列表和段落文本樣式,使用元素選擇器是創建有吸引力、可讀性和一致的網站體驗的好方法。

          為樣式準備標記的最佳實踐

          既然您知道如何將類、ID 和元素標簽用作 CSS 規則集的鉤子,那么您如何才能最好地利用這些知識來編寫標記,以便輕松定位特定元素?

          • 自由而一致地應用課程。對應該在一個方向或另一個方向對齊的項目以及在單個網頁上重復出現的任何元素使用類。
          • 將 ID 應用于在網頁上僅出現一次的項目。例如,在div包含您的網頁內容的ul、包含導航菜單的 以及div包含您的網頁標題的 上使用 ID。

          將 CSS 規則鏈接到 HTML 文檔的方法

          向網頁添加 CSS 規則的方法有以下三種:

          • 內聯樣式
          • 內部樣式表
          • 外部樣式表

          在絕大多數情況下,應該使用外部樣式表。但是,在某些情況下可以使用內聯樣式或內部樣式表。

          內聯樣式

          內聯樣式應用于特定的 HTML 元素。HTML 屬性style用于定義僅適用于該特定元素的規則。下面看一下編寫內聯樣式的語法。

          <h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>
          

          該代碼將導致該標題以紅色下劃線文本和所有邊的 10 像素填充呈現。在極少數情況下應該使用內聯樣式。在幾乎所有情況下,都應該避免它們并將樣式添加到樣式表中。

          內部樣式表

          前面的示例使用了內部樣式表。內部樣式表是添加到 HTML 文檔head元素的 CSS 塊。style元素用于開始和結束標簽之間,head所有的 CSS 聲明都添加在style標簽之間。

          我們可以使用這種語法在內部樣式表中復制上面代碼中的內聯樣式。

          <head> 
               <style> 
                   h1 { 
                        color: red; 
                        padding: 10px; 
                        text-decoration: underline;
                       } 
                </style> 
             </head> 
          <body> 
                 <h1>Example Heading</h1>
          </body>
          

          該代碼將產生與內聯樣式相同的結果。但是,使用內部樣式表而不是內聯樣式的好處是h1頁面上的所有元素都會受到樣式的影響。

          外部樣式表

          外部樣式表是只包含 CSS 語句的文檔。文檔中定義的規則通過使用 HTML 文檔元素中的link標記鏈接到一個或多個 HTML文檔。head

          要使用外部樣式表,首先要創建 CSS 文檔

          /************************************************* 
          Save with a name ending in .css such as styles.css 
          *************************************************/
          h1 { 
              color: red; 
              padding: 10px; 
              text-decoration: underline;
              }
          

          現在我們有了一個帶有一些樣式的外部樣式表,我們可以使用該link元素將它鏈接到一個 HTML 文檔。

          <head>
               <link rel="stylesheet" type="text/css" href="styles.css">
          </head> 
          <body> 
              <h1>Example Heading</h1>
          </body>
          

          加載此 HTML 文檔時,該link標記將導致將文件styles.css中*的樣式加載到網頁中。因此,所有 1 級標題元素都將顯示為紅色文本、帶下劃線,并且每邊都應用了 10 像素的填充。

          何時使用每種方法

          在幾乎所有情況下,外部樣式表都是設置網頁樣式的正確方法。使用外部樣式表的主要好處是它們可以鏈接到任意數量的 HTML 文檔。因此,可以使用單個外部樣式表來定義整個網站的呈現方式。

          設計簡單的單頁網站時可以使用內部樣式表。如果網站永遠不會超出使用內部樣式表的單個初始頁面是可以接受的。

          內聯樣式可以在兩種情況下使用:

          1. 編寫僅應用于單個網頁上的單個元素的 CSS 規則時。
          2. 當被集成到內容管理系統(如 WordPress)中的 tinyMCE 編輯器等所見即所得編輯器應用時。

          在所有其他情況下,應避免使用內聯樣式以支持外部樣式表。

          CSS 是如何工作的

          在編寫 CSS 時,很多時候編寫的規則相互沖突。例如,在設置標題樣式時,以下所有規則都可能適用于h1元素。

          • h1在網站的所有頁面上創建一致呈現的元素級規則。
          • 定義在特定位置呈現的元素的類級別規則h1——例如博客文章的標題。
          • 一個 id 級別的元素,定義了一個h1元素在一個或多個網頁上的一個地方的渲染——例如網站名稱。

          開發人員如何編寫足夠通用的規則以涵蓋每一個h1又足夠具體的規則,以定義只應出現在給定元素的特定實例上的樣式?

          CSS 樣式遵循兩個規則,您需要了解這些規則才能編寫有效的 CSS。了解這些規則將幫助您編寫在需要時可以廣泛使用的 CSS,但在需要時卻可以非常具體。

          控制 CSS 行為方式的兩個規則是繼承和特異性。

          級聯繼承

          為什么CSS 樣式被稱為級聯?當編寫多個相互沖突的規則時,將執行最后編寫的規則。通過這種方式,樣式向下級聯并應用最后寫入的規則。

          讓我們看一個例子。讓我們在一個內部樣式表中編寫兩個直接相互矛盾的 CSS 規則

          <head>
               <style> 
                   p {color: red;} 
                   p {color: blue;} 
                </style> 
          </head> 
          <body> 
          <p>What color will the text of this paragraph be?</p> 
          </body>
          
          

          瀏覽器將級聯樣式并應用遇到的最后一個樣式,推翻所有以前的樣式。結果,標題是藍色的。

          .code_sample_p {顏色:紅色;}
          .code_sample_p {顏色:藍色;}
          
          這一段的文字是什么顏色的?
          

          當使用外部樣式表時,同樣的級聯效應也會發揮作用。使用多個外部樣式表是很常見的。head發生這種情況時,樣式表會按照它們在 HTML 文檔元素中出現的順序加載。如果樣式表規則之間發生沖突,則每個樣式表中包含的 CSS 規則將覆蓋先前加載的樣式表中包含的那些規則。以下面的代碼為例:

          <head>
          <link rel="stylesheet" type="text/css" href="styles_1.css">
          <link rel="stylesheet" type="text/css" href="styles_2.css">
          </head>
          

          如果這兩個樣式表中包含的樣式之間存在沖突,則將應用styles_2.css中的規則。

          樣式的繼承是 CSS 樣式級聯行為的另一個例子。

          當您為父元素定義樣式時,子元素會收到相同的樣式。例如,如果我們將顏色樣式應用于無序列表,則子列表項將顯示相同的樣式。

          <head>
              <style>
                  ul {color: red;} 
              </style>
           </head> 
           <body> 
             <ul> 
           <li>Item 1</li> 
           <li>Item 2</li>
             </ul> 
           </body>

          以下是該代碼的呈現方式。

          .code-sample-ul {顏色:紅色;}
          項目 1
          第 2 項

          并非每個屬性都從父元素傳遞到其子元素。瀏覽器將某些屬性視為非繼承屬性。邊距是不從父元素傳遞到子元素的屬性的一個示例。

          特異性

          確定對每個 HTML 元素應用哪些規則的第二個規則是[特異性規則。

          具有更多特定選擇器的CSS 規則將覆蓋具有較少特定選擇器CSS 規則,無論哪個先出現。正如我們所討論的,三個最常見的選擇器是元素標簽、類和 ID。

          • 最不具體的選擇器類型是元素級別選擇器。
          • 當一個類被用作選擇器時,它會否決使用元素標簽作為選擇器編寫的 CSS 規則。
          • 當一個 ID 用作選擇器時,它會否決使用元素或類選擇器編寫的 CSS 規則。

          影響特異性的另一個因素是編寫 CSS 樣式的位置。與屬性內聯style編寫的樣式會覆蓋在內部或外部樣式表中編寫的樣式。

          增加選擇器特異性的另一種方法是使用一系列元素、類和 ID 來精確定位您要處理的元素。例如,如果您想精確定位列表上的無序列表項目,其中包含divid 為“example-div”的類“example-list”,您可以使用以下選擇器來創建具有高度特異性的選擇器。

          div#example-div > ul.example-list > li {styles here}

          雖然這是創建非常具體的選擇器的一種方法,但建議限制使用這些類型的選擇器,因為它們比簡單的選擇器需要更多的時間來處理。

          一旦您了解了繼承和特異性的工作原理,您將能夠高度準確地定位網頁上的元素。

          CSS 能做什么?

          一個更好的問題可能是:“CSS 不能做什么?”

          CSS 可用于將 HTML 文檔轉換為專業、精美的設計。下面是一些你可以通過 CSS 完成的事情:

          • 創建一個靈活的網格,用于設計在任何設備上都能呈現精美的完全響應式網站。
          • 從排版到表格,再到表格等,應有盡有。
          • float使用諸如、positionoverflowflex和等屬性將網頁上的元素相對于彼此定位box-sizing
          • 將背景圖像添加到任何元素。
          • 創建形狀、交互和動畫。

          這些概念和技術超出了本入門指南的范圍,但以下資源將幫助您解決這些更高級的主題。

          盒子模型

          如果您打算使用 CSS 來構建網頁布局,那么首先要掌握的主題之一就是盒子模型。盒子模型是一種可視化和理解網頁上每個項目如何組合內容、填充、邊框和邊距的方法。

          了解這四個部分如何組合在一起是一個基本概念,在繼續討論其他 CSS 布局主題之前必須掌握它。

          了解盒子模型的兩個好地方包括:

          • 來自萬維網聯盟的盒子模型的解釋。
          • 來自 Mozilla 開發者網絡的CSS 盒子模型介紹。

          創建布局

          有許多技術和策略用于使用 CSS 創建布局,理解盒子模型是每個策略的先決條件。掌握了盒子模型后,您將準備好學習如何操作網頁上的內容盒子。

          Mozilla 開發者網絡對 CSS 布局進行了很好的介紹]。這篇簡短的閱讀涵蓋了 CSS 布局背后的基本概念,并快速介紹了諸如text-alignfloatposition.

          W3C 提供了更廣泛、更深入的 CSS 布局指南:CSS 布局模型。本文檔是面向專業開發人員的資源,因此如果您是 CSS 新手,請花點時間查看它。這不是快速閱讀。但是,您需要了解的有關創建 CSS 布局的所有信息都包含在本文檔中。

          多年來,網格布局一直是設計響應式布局的首選策略。CSS 網格已經從零開始創建多年,市場上有許多不同的網格生成網站和開發框架。然而,在幾年內,對網格布局的支持將成為 CSS3 規范的一部分。您可以通過閱讀 W3C 網站上的主題來了解很多關于網格的知識。有關網格布局的更輕松、更簡短的介紹。

          幾年之內,CSS3靈活框或flexbox有望成為設計網站布局的主導模型。flexbox 規范還沒有完全完成和最終確定,并且瀏覽器之間對 flexbox 的支持并不一致。然而,每個初露頭角的 CSS 開發者都需要熟悉flexbox并準備在不久的將來實現它。

          網頁字體和排版

          可以做很多事情來增加個性并提高網站內容的可讀性。在我們的字體和網頁排版指南中了解有關為網絡選擇字體和排版的更多信息。

          創建一致的跨瀏覽器體驗

          每個瀏覽器對 HTML 規范的解釋略有不同。因此,當在兩個不同的瀏覽器中呈現相同的代碼時,呈現代碼的方式通常會存在細微差別。

          以這段簡短的代碼為例。

          <h1>Heading 1</h1> 
          <p>A short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p> 
          <h2>Heading 2</h2>
          <ul>
             <li>Just a short list</li>
             <li>Three items on this list</li> 
             <li>We'll make it an unordered list</li>
           </ul>
            <h3>Heading 3</h3>
            <p>One final short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>

          如果我們在兩個不同的瀏覽器中渲染該代碼,我們會看到細微的差別。以下是 Mozilla Firebox 和 Microsoft Edge 呈現該代碼的方式。

          你能看出細微的差別嗎?左邊的 Firefox 在每個標題元素周圍增加了一點邊距。此外,在 Edge 中渲染時,項目符號點會小一些。雖然這些差異不是必然的,但在某些情況下,瀏覽器之間的這些微小差異可能會產生問題。

          CSS 可用于解決這些跨瀏覽器兼容性問題。一種流行的方法是實現一個名為normalize.css的樣板 CSS 文檔。這個免費提供的 CSS 文件可以鏈接到任何 HTML 文檔,以幫助最小化跨瀏覽器的呈現差異。

          在您的設計工作中包含normalize.css的最簡單方法是鏈接到Google 托管的副本。為此,只需將這行代碼放入HTML 文檔的元素中。head

          <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

          TML(網頁)

          Web領域的一些基本概念。

          WEB

          Web(World Wide Web)叫全球廣域網,俗稱萬維網(www)。

          W3C

          W3C(World Wide Web Consortium)叫萬維網聯盟,是國際最著名的標準化組織,制定了web標準。

          WEB標準

          一個網頁包含了html元素 Css JavaScript,Html元素決定了網頁結構,Css進行了修飾美化,JavaScript控制了交互行為和動態效果。

          web標準包含了下面三個方面:

          • 結構標準(HTML):用于對網頁元素進行整理和分類。
          • 表現標準(CSS):用于設置網頁元素的版式、顏色、大小等外觀樣式。
          • 行為標準(JavaScript):用于定義網頁的交互和行為。

          HTML定義

          Html不是一種編程語言,而是描述性的標記語言,主要作用是定義內容的結構。

          2014年10月萬維網聯盟(W3C)完成了HTML5標準制定,是目前最新的HTM版本。

          HTML5的出世,標志著web進入一個富客戶端(具有很強的交互性和體驗的客戶端程序)時代,像APP網頁,小程序都是HTML5的應用場景。

          Html5新特性:

          • 用于繪畫的 canvas 元素。
          • 用于媒介回放的 video 和 audio 元素。
          • 對本地離線存儲的更好的支持。
          • 新的特殊內容元素,比如 article、footer、header、nav、section。
          • 新的表單控件,比如 calendar、date、time、email、url、search。

          頁面基本結構

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8"> <!--字符集-->
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
              <meta name="Author" content="">
              <meta name="Keywords" content="關鍵詞" />
              <meta name="Description" content="頁面描述" />
              <title>頁面標題</title>
          </head>
          <body>
          
          </body>
          </html>

          關于viewport

          viewport用戶網頁的可視區域,一個針對移動網頁優化的頁面 viewport meta 標簽如下:

          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          • width:控制 viewport 的大小,可以指定的一個值,如 600,或者特殊的值,如 device-width 為設備的寬度(單位為縮放為 100% 時的 CSS 的像素)。
          • height:和 width 相對應,指定高度。
          • initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。
          • maximum-scale:允許用戶縮放到的最大比例。
          • minimum-scale:允許用戶縮放到的最小比例。
          • user-scalable:用戶是否可以手動縮放。

          常見元素

          head區域元素:

          meta title style link script base。

          body區域元素:

          • div、section、article、aside、header、footer
          • p
          • span、em、strong
          • table、thead、tbody、tr、td
          • ul、ol、dl、dt、dd
          • a
          • form、input、select、textarea、button

          元素分類

          塊級元素:每個元素都是獨占一行

          • address – 地址
          • blockquote – 塊引用
          • center – 舉中對齊塊
          • dir – 目錄列表
          • div – 常用塊級容易,也是css layout的主要標簽
          • dl – 定義列表
          • fieldset – form控制組
          • form – 交互表單
          • h1-h6 – 標題
          • hr – 水平分隔線
          • isindex – input prompt
          • menu – 菜單列表
          • noframes – frames可選內容,(對于不支持frame的瀏覽器顯示此區塊內容)
          • noscript – )可選腳本內容(對于不支持script的瀏覽器顯示此內容)
          • ol – 排序表單
          • p – 段落
          • pre – 格式化文本
          • table – 表格
          • ul – 非排序列表

          行內元素:元素在同一行水平排列

          • a – 錨點
          • abbr – 縮寫
          • acronym – 首字
          • b – 粗體
          • big – 大字體
          • br – 換行
          • em – 強調
          • font – 字體設定(不推薦)
          • i – 斜體
          • img – 圖片
          • input – 輸入框
          • label – 表格標簽
          • s – 中劃線(不推薦)
          • select – 項目選擇
          • small – 小字體文本
          • span – 常用內聯容器,定義文本內區塊
          • strike – 中劃線
          • strong – 粗體強調
          • sub – 下標
          • sup – 上標
          • textarea – 多行文本輸入框
          • tt – 電傳文本
          • u – 下劃線
          • var – 定義變量

          inline-block:元素可以排列在同一行顯示,并且可以設置一些塊元素屬性

          通過Css:display:inline-block 改變元素。

          元素默認樣式

          很多元素都自帶了默認樣式,不同瀏覽器下默認樣式表現不一致,為了統一或者滿足一些需求我們需求將所有默認樣式清空,這種處理方式又稱為 Css Reset,比如:

          *{
              margin: 0;
              padding: 0;
          }

          另外一種方案使用normalize.css,它將不同瀏覽器下的默認樣式進行了統一,

          https://github.com/necolas/normalize.css

          CSS(層疊樣式表)

          Css的單位

          html中的單位是像素px

          絕對單位

          • in:英寸,1in = 2.54cm = 96px
          • pc:皮卡,1皮卡 = 1/16英寸
          • pt:點,1點 = 1/72英寸
          • px:像素,1點 = 1/96英寸

          相對單位

          • em:font-size中相對于父元素的字體大小,在元素屬性中使用是相對于自身字體大小
          • rem:根元素的字體大小,在元素屬性中使用是相對于根元素字體大小
          • 1h:元素的line-height
          • vw:視窗寬度的1%
          • vh:視窗高度的1%
          • vmin:視窗較小尺寸的1%
          • vmax:視圖大尺寸的1%

          字體屬性

          屬性:字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性(粗體、斜體、下劃線)

          p{
              font-size: 20px;        /*字體大小*/
              line-height: 30px;      /*行高*/
              font-family: PingFang SC;   /*字體類型:顯示PingFang SC,沒有就顯示默認*/
              font-style: italic ;        /*italic表示斜體,normal表示不傾斜*/
              font-weight: bold;  /*粗體或寫(400|500|600)*/
              font-variant: small-caps;  /*小寫變大寫*/
          }

          行高(line-height)

          一般約定行高、字號都是偶數,這樣保證它們的差一定偶數除2得到整數,如下圖所示:

          line-height

          文本垂直居中

          對于單行文本可以設置行高 = 盒子高度

          對于多行元素的垂直對齊,我們可以使用vertical-align: middle屬性,不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

          vertical-align

          vertical-align: baseline;
          vertical-align: sub;
          vertical-align: super;
          vertical-align: text-top;
          vertical-align: text-bottom;
          vertical-align: middle;
          vertical-align: top;
          vertical-align: bottom;
          /* 指定長度值 */
          vertical-align: 10em;
          vertical-align: 4px;
          /* 使用百分比 */
          vertical-align: 20%;
          /* 全局值 */
          vertical-align: inherit;
          vertical-align: initial;
          vertical-align: revert;
          vertical-align: unset;

          文本屬性

          • letter-spacing: 0.5em ; 單個字母之間的間距。
          • word-spacing: 1em; 單詞之間的間距。
          • text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
          • color:red; 字體顏色。
          • text-align: center; 文字對齊方式,屬性值可以是:left、right、center、justify。
          • text-transform: lowercase; uppercase(大寫)、lowercase(小寫)capitalize(首字母大寫)。
          • text-indent:10px; 文本首行縮進。
          • text-shadow:2px 2px #ff0000; 文字陰影效果。
          • white-space: normal; 設置元素空白處理,normal,nowrap,break-spaces。

          Overflow屬性

          內容溢出處理

          • visible:默認值,多余的內容會全部顯示出來。
          • hidden:超過元素的內容隱藏。
          • auto:內容超出顯示滾動條。
          • scroll:Windows總是顯示滾動條。Mac和auto 屬性相同。

          濾鏡

          filter:gray()

          背景屬性

          • background-color:#fff; 設置背景顏色。
          • background-image:url(img.png); 設置圖像為背景。
          • background-repeat: no-repeat; no-repeat不要平鋪,repeat-x橫向平鋪;repeat-y縱向平鋪。
          • background-position:center top; 設置背景圖片在容器的位置,top,bottom,left,right,center。
          • background-attachment:scroll; 設置背景圖片隨滾動條移動,scroll(跟隨滾動),fixed(固定)。
          • background-origin:border-box; css3,border-box(背景相對于邊框框定位),padding-box(背景相對于填充框定位),content-box(背景相對于內容框定位)。
          • background-clip:border-box; css3,背景裁切。
          • background-size:cover; css3,調整尺寸,contain(在不裁剪或拉伸圖像的情況下,在其容器內盡可能大地縮放圖像),cover(盡可能大地縮放圖像以填充容器,必要時拉伸圖像。),auto(在相應的方向上縮放背景圖像,以保持其固有比例。)。

          優先級

          理解優先級很重要,有助于我們排查一些問題。瀏覽器將優先級分為兩部分:HTML的行內樣式和選擇器的樣式。

          行內樣式

          行內樣式是直接作用在元素,它的優先級高于選擇器樣式,使用!important可以提高樣式表的優先級。

          <div style="font-size:16px">
          </div>

          選擇器樣式

          <style type="text/css">
              p{
                font-size: 16px;
              }
          </style>
          <link rel="stylesheet" href="style/app.css">

          優先級規則如下:

          • 如果選擇器的ID數量最多的勝出。
          • 如果ID數量一致,那么擁有最多類的選擇器勝出。
          • 如果以上兩次比較都一致,那么擁有最多標簽名的選擇器勝出。

          優先級

          我們通過下圖這種標記方式,就可以判斷出選擇器的優先級。

          優先級

          兩條經驗法則

          1. 盡量不要使用ID選擇器,因為它會大幅提升優先級。當需要覆蓋這個選擇器時,通常找不到另一個有意義的ID,于是就需要復制原來的選擇器加上另一個類來讓它區別于想要覆蓋的選擇器。
          2. 不要使用!important。它比ID更難覆蓋,一旦用了它,想要覆蓋原先的聲明,就需要再加上一個!important,而且依然要處理優先級的問題。

          基礎選擇器

          • 類型或標簽選擇器,匹配目標元素的標簽名,如 :p,input[type=text],優先級(0,0,1)。
          • 類選擇器,匹配class屬性中有指定類名的元素,如:.box,優先級(0,1,0)。
          • ID選擇器,匹配擁有指定ID屬性的元素,如:#id, 優先級(1,0,0)。
          • 通用選擇器(*),匹配所有元素 ,優先級(0,0,0)。

          組合選擇器

          由多個基礎選擇器組合成的復雜選擇器。

          • 后代組合器(單個空格()表示),比如 .nav li,表示li是一個擁有nav類的元素的后代。
          • 子組合器(>),匹配的元素是直接后代,.parent > .child。
          • 相鄰兄弟組合器(+),匹配的元素緊跟在后面其它元素后面,div + p。
          • 通用兄弟組合器(~),匹配所有跟隨在指定元素之后的兄弟元素,它不會選中目標元素之前的兄弟元素,li.active ~ li。

          復合選擇器

          多個基礎選擇器連起來(中間沒有空格)組成一個復合選擇器(如:ul.nav)。復合選擇器選中的元素將匹配其全部基礎選擇器,.box.nav 可以選中 class="box nav" ,但是不能選中 class="box"。

          偽類選擇器

          用于選中某種特定狀態的元素,優先級(0,1,0)。

          • :first-child——匹配的元素是其父元素的第一個子元素。
          • :last-child——匹配的元素是其父元素的最后一個子元素。
          • :only-child——匹配的元素是其父元素的唯一一個子元素(沒有兄弟元素)。
          • :nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數,該公式指定要選中哪個元素。要了解一個公式的工作原理,請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。

          :nth-child(an+b)

          • :nth-last-child(an+b)——類似于:nth-child(),但不是從第一個元素往后數,而是從最后一個元素往前數。括號內的公式與:nth-child()里的公式的規則相同。
          • :first-of-type——類似于:first-child,但不是根據在全部子元素中的位置查找元素,而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。
          • :last-of-type——匹配每種類型的最后一個子元素。
          • :only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個子元素。
          • :nth-of-type(an+b)——根據目標元素在特定類型下的數字順序以及特定公式選擇元素,類似于:nth-child。
          • :nth-last-of-type(an+b)——根據元素類型以及特定公式選擇元素,從其中最后一個元素往前算,類似于:nth-last-child。
          • :not(<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器,它只能指定元素本身,無法用于排除祖先元素,同時不允許包含另一個排除選擇器。
          • :focus——匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。
          • :hover——匹配鼠標指針正懸停在其上方的元素。
          • :root——匹配文檔根元素。對HTML來說,這是html元素,但是CSS還可以應用到XML或者類似于XML的文檔上,比如SVG。在這些情況下,該選擇器的選擇范圍更廣。還有一些表單域相關的偽類選擇器。
          • :disabled——匹配已禁用的元素,包括input、select以及button元素。
          • :enabled——匹配已啟用的元素,即那些能夠被激活或者接受焦點的元素。
          • :checked——匹配已經針對選定的復選框、單選按鈕或選擇框選項。
          • :invalid——根據輸入類型中的定義,匹配有非法輸入值的元素。例如,當<inputtype="email">的值不是一個合法的郵箱地址時,該元素會被匹配。

          更多參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS

          偽元素選擇器

          偽元素選擇器可以向HTML標記中未定義的地方插入內容,優先級(0,0,1)。

          • ::before——創建一個偽元素,使其成為匹配元素的第一個子元素。該元素默認是行內元素,可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現,如:.nav::before。
          • ::after——創建一個偽元素,使其成為匹配元素的最后一個子元素。該元素默認是行內元素,可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現,如:.nav::after。
          • ::first-letter——用于指定匹配元素的第一個文本字符的樣式,如:h1::first-letter。
          • ::first-line——用于指定匹配元素的第一行文本的樣式。
          • ::selection——用于指定用戶使用鼠標高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數屬性可以使用,包括color、background-color、cursor、text-decoration。

          屬性選擇器

          屬性選擇器用于根據HTML屬性進行匹配元素,優先級(0,1,0)。

          • [attr]——匹配的元素擁有指定屬性attr,無論屬性值是什么,如:input[disabled]。
          • [attr="value"]——匹配的元素擁有指定屬性attr,且屬性值等于指定的字符串值,如:input[type="radio"]。
          • [attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值的開頭是指定的字符串值,例如:a[href^="https"]。
          • [attr*="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值包含指定的字符串值,如:[class*="sprite-"]。
          • [attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值是一個空格分隔的值列表,列表中的某個值等于指定的字符串值,如:a[rel="author"]。
          • [attr|="value"]——匹配的元素擁有指定屬性attr,且屬性值要么等于指定的字符串值,要么以該字符串開頭且緊跟著一個連字符(-)。

          小結

          本文要點回顧,歡迎留言交流。

          • Web中的一些基本概念介紹。
          • Html頁面結構,元素分類。
          • Css優先級。
          • Css選擇器,(基礎選擇器,組合選擇器,復合選擇器,偽類選擇器,偽元素選擇器,屬性選擇器)。

          主站蜘蛛池模板: 精品一区二区三区无码视频| 国产AV午夜精品一区二区三| 色综合视频一区中文字幕| 美女视频在线一区二区三区| 国产成人一区二区三区精品久久| 亚洲a∨无码一区二区| 亚洲一区二区三区丝袜| 蜜臀AV在线播放一区二区三区| 中文字幕精品一区二区日本| 国产香蕉一区二区在线网站| 亚洲高清毛片一区二区| 无码人妻一区二区三区免费| 日韩a无吗一区二区三区| 色一情一乱一伦一区二区三区日本 | 久久精品一区二区三区日韩| 国产无线乱码一区二三区| 日本一区二区免费看| 3d动漫精品一区视频在线观看| 亚洲一区AV无码少妇电影| 日韩精品一区二区三区毛片| 无码人妻精品一区二区三区99性| 国产激情精品一区二区三区| 国产成人一区在线不卡| 中文字幕一区二区日产乱码| 亚洲色欲一区二区三区在线观看| 中文字幕Av一区乱码| 久久99精品一区二区三区| 久久久久人妻一区精品色| 日本视频一区在线观看免费| 国产精品视频一区麻豆| 无码人妻aⅴ一区二区三区| 国产人妖视频一区二区破除| 国产福利电影一区二区三区久久老子无码午夜伦不 | 久久国产精品无码一区二区三区 | 一区二区三区无码视频免费福利| 蜜桃传媒视频麻豆第一区| 乱精品一区字幕二区| 成人免费一区二区无码视频| 乱色熟女综合一区二区三区| 久久久久无码国产精品一区 | 无码AV一区二区三区无码|