整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本文介紹的是一個非常漂亮的在線古典顏色手冊，為程序員和設計師提供中國古典顏色設計提供色彩和靈感，特別是對于一些古典項目非常適合使用它，有了它能為你的網站或者應用提供卓然的氣質，對熱愛古風的程序員和設計師尤為有用！
https://github.com/zerosoul/chinese-colors
常規操作：
克隆到本地：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 是告訴 Web 瀏覽器如何呈現網頁的不同部分的語言。
網頁上的每個項目或元素都是以標記語言編寫的文檔的一部分。在大多數情況下，HTML 雖然是標記語言，但也有其他語言在使用，例如 XML。在本指南中，我們將使用 HTML 來演示 CSS 的實際應用，請記住，如果您使用 XML或不同的標記語言，同樣的原則和技術也適用。
談到 CSS 提問題時，首先要了解的是何時使用 CSS 等樣式語言以及何時使用 HTML 等標記語言。
不屬于網頁演示的博客文章、頁面標題、視頻、音頻和圖片都應使用 HTML 添加到網頁中。背景圖像和顏色、邊框、字體大小、排版以及網頁上項目的位置都應該由 CSS 定義。
做出這種區分很重要，因為未能使用正確的語言可能會導致將來難以對網站進行更改，并為使用純文本瀏覽器或屏幕閱讀器的網站訪問者造成可訪問性和可用性問題。
CSS 語法包括選擇器、屬性、值、聲明、聲明塊、規則集、at 規則和語句。
讓我們使用一段 CSS 來闡明這些項目是什么。
h1 {
color: red;
font-size: 3em;
text-decoration: underline;
}在本例中，h1是選擇器。選擇器后跟一個包含三個聲明的聲明塊。每個聲明與下一個聲明之間用分號分隔。制表符和換行符是可選的，但大多數開發人員使用它來使 CSS 代碼更易于閱讀。
通過h1用作選擇器，我們是說網頁上的每個 1 級標題都應遵循此規則集中包含的聲明。
規則集包含三個聲明：
color、font-size 和text-decoration都是性質。您可以使用數百個 CSS 屬性，但常用的只有幾十個。
我們將值red、3em和underline應用于我們使用的屬性。每個 CSS 屬性都被定義為接受以特定方式格式化的存在。
對于color屬性，我們可以使用顏色關鍵字或 Hex、RGB 或 HSL 格式的顏色公式。在這種情況下，我們使用了 color 關鍵字red。CSS3 中有幾十個顏色關鍵字可用，但其他顏色模型可以訪問數百萬種顏色。
我們將 的值應用于3em屬性font-size。我們可以使用多種尺寸單位，包括像素、百分比等。
最后，我們將值添加underline到屬性text-decoration中。我們也可以使用overlineorline-through作為 的值text-decoration。此外，CSS3 允許使用純線、雙線、點線、虛線和波浪線樣式，這些都是文本裝飾顏色的規范。我們可以通過使用這樣的聲明一次應用所有三個值：
text-decoration: blue double underline;
該規則將導致h1我們最初示例中的 用藍色雙線下劃線。color文本本身將保持為我們屬性中定義的紅色。
CSS 應該用于向網頁添加內容。該任務最好由 HTML 和 XML等標記語言處理。相反，CSS 用于選擇網頁上已經存在的項目并定義每個項目的顯示方式。
為了盡可能容易地選擇網頁上的項目，應將標識符添加到網頁上的元素中。這些標識符，在 CSS 上下文中通常稱為鉤子，可以更容易地識別應該受 CSS 規則影響的項目。
類和 ID 用作 CSS 樣式的掛鉤。雖然 CSS 的呈現方式不受使用類和鉤子的影響，但它們使開發人員能夠精確定位他們希望設置樣式的 HTML 元素。
類和 ID 不可互換。知道何時使用它們很重要。
當單個網頁上有多個元素需要設置樣式時，請使用類。例如，假設您希望頁面頁眉和頁腳中的鏈接以一致的方式設置樣式，但與頁面正文中的鏈接不同。要查明這些鏈接，您可以為每個鏈接或包含鏈接的容器添加一個類。然后，您可以使用該類指定樣式，并確保它們僅應用于具有該類屬性的鏈接。
對僅在網頁上出現一次的元素使用 ID。例如，如果您使用 HTML 無序列表進行站點導航，則可以使用nav等 ID為該列表創建唯一的掛鉤。
這是一個用于基本電子商務網站的簡單導航欄的 HTML 和 CSS 代碼示例。
<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;
}
您不必為 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 {
顏色：深藍色
}
這里有一些段落文本。兩個短句。
快速列表
只有兩個項目
此處附加段落文本。這次讓我們來三句話。像這樣。
另一個清單
仍然只有兩個項目
在這種情況下，即使我們只為ul和p元素編寫了一次樣式規則，但會影響多個項目。通過在網站的每個頁面上創建一致的標題、列表和段落文本樣式，使用元素選擇器是創建有吸引力、可讀性和一致的網站體驗的好方法。
既然您知道如何將類、ID 和元素標簽用作 CSS 規則集的鉤子，那么您如何才能最好地利用這些知識來編寫標記，以便輕松定位特定元素？
向網頁添加 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 文檔。因此，可以使用單個外部樣式表來定義整個網站的呈現方式。
設計簡單的單頁網站時可以使用內部樣式表。如果網站永遠不會超出使用內部樣式表的單個初始頁面是可以接受的。
內聯樣式可以在兩種情況下使用：
在所有其他情況下，應避免使用內聯樣式以支持外部樣式表。
在編寫 CSS 時，很多時候編寫的規則相互沖突。例如，在設置標題樣式時，以下所有規則都可能適用于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 樣式的位置。與屬性內聯style編寫的樣式會覆蓋在內部或外部樣式表中編寫的樣式。
增加選擇器特異性的另一種方法是使用一系列元素、類和 ID 來精確定位您要處理的元素。例如，如果您想精確定位列表上的無序列表項目，其中包含divid 為“example-div”的類“example-list”，您可以使用以下選擇器來創建具有高度特異性的選擇器。
div#example-div > ul.example-list > li {styles here}雖然這是創建非常具體的選擇器的一種方法，但建議限制使用這些類型的選擇器，因為它們比簡單的選擇器需要更多的時間來處理。
一旦您了解了繼承和特異性的工作原理，您將能夠高度準確地定位網頁上的元素。
一個更好的問題可能是：“CSS 不能做什么？”
CSS 可用于將 HTML 文檔轉換為專業、精美的設計。下面是一些你可以通過 CSS 完成的事情：
這些概念和技術超出了本入門指南的范圍，但以下資源將幫助您解決這些更高級的主題。
如果您打算使用 CSS 來構建網頁布局，那么首先要掌握的主題之一就是盒子模型。盒子模型是一種可視化和理解網頁上每個項目如何組合內容、填充、邊框和邊距的方法。
了解這四個部分如何組合在一起是一個基本概念，在繼續討論其他 CSS 布局主題之前必須掌握它。
了解盒子模型的兩個好地方包括：
有許多技術和策略用于使用 CSS 創建布局，理解盒子模型是每個策略的先決條件。掌握了盒子模型后，您將準備好學習如何操作網頁上的內容盒子。
Mozilla 開發者網絡對 CSS 布局進行了很好的介紹]。這篇簡短的閱讀涵蓋了 CSS 布局背后的基本概念，并快速介紹了諸如text-align、float和position.
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" />Web領域的一些基本概念。
Web（World Wide Web）叫全球廣域網，俗稱萬維網（www）。
W3C（World Wide Web Consortium）叫萬維網聯盟，是國際最著名的標準化組織，制定了web標準。
一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。
web標準包含了下面三個方面：
Html不是一種編程語言，而是描述性的標記語言，主要作用是定義內容的結構。
2014年10月萬維網聯盟（W3C）完成了HTML5標準制定，是目前最新的HTM版本。
HTML5的出世，標志著web進入一個富客戶端（具有很強的交互性和體驗的客戶端程序）時代，像APP網頁，小程序都是HTML5的應用場景。
Html5新特性：
<!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 meta 標簽如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">head區域元素：
meta title style link script base。
body區域元素：
塊級元素：每個元素都是獨占一行
行內元素：元素在同一行水平排列
inline-block：元素可以排列在同一行顯示，并且可以設置一些塊元素屬性
通過Css：display:inline-block 改變元素。
很多元素都自帶了默認樣式，不同瀏覽器下默認樣式表現不一致，為了統一或者滿足一些需求我們需求將所有默認樣式清空，這種處理方式又稱為 Css Reset，比如：
*{
margin: 0;
padding: 0;
}另外一種方案使用normalize.css，它將不同瀏覽器下的默認樣式進行了統一，
https://github.com/necolas/normalize.css
html中的單位是像素px
絕對單位
相對單位
屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）
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;內容溢出處理
filter:gray()理解優先級很重要，有助于我們排查一些問題。瀏覽器將優先級分為兩部分：HTML的行內樣式和選擇器的樣式。
行內樣式
行內樣式是直接作用在元素，它的優先級高于選擇器樣式，使用！important可以提高樣式表的優先級。
<div style="font-size:16px">
</div>選擇器樣式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">優先級規則如下：
優先級
我們通過下圖這種標記方式，就可以判斷出選擇器的優先級。
優先級
兩條經驗法則
由多個基礎選擇器組合成的復雜選擇器。
多個基礎選擇器連起來（中間沒有空格）組成一個復合選擇器（如：ul.nav）。復合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。
用于選中某種特定狀態的元素，優先級（0，1，0）。
:nth-child(an+b)
更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS
偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先級（0，0，1）。
屬性選擇器用于根據HTML屬性進行匹配元素，優先級（0，1，0）。
本文要點回顧，歡迎留言交流。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
