整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
如果網(wǎng)頁只有一種顏色，那是非常可怕的，顏色的設(shè)置豐富了網(wǎng)頁，就如同多彩繽紛的世界。
在了解css顏色之前，我們回顧下計算機(jī)是如何顯示顏色的？計算機(jī)根據(jù)色光三原色的原理通過各種算法來顯示顏色。
網(wǎng)頁中使用顏色關(guān)鍵字、16進(jìn)制字符、rgb、rgba等表示紅，綠，藍(lán)三種顏色混合色，如下示例,幾種寫法都是指同一個顏色（紅色）：
color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)對于16進(jìn)制形式，每2位表示一個顏色，從左到右分別是紅、綠、藍(lán)，每種顏色取值從00 到 FF。
如下示例：
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍(lán)色*/對于rgb的表示法，由三個參數(shù)組成，分別是紅、綠、藍(lán)，每種顏色取值從0 到 255。
如下示例：
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍(lán)色*/紅，綠，藍(lán)值從0到255的結(jié)合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。
但是現(xiàn)代大多數(shù)顯示器能夠顯示至少16384種顏色。所以在使用顏色時要格外注意，避免設(shè)置不能夠顯示的顏色，可以參考網(wǎng)頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。
顏色除了有三原色紅綠藍(lán)組成，還有亮度層級，如下圖：
rgba 中的a是指透明度，這個是css3新增加的屬性，通過rgba可以設(shè)置更加漂亮的顏色。
通過background屬性可以設(shè)置元素的背景色、背景圖片，語法如下：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;background 在一個聲明中設(shè)置所有的背景屬性，可以在這里設(shè)置如下屬性：
各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個值。
建議使用background 簡寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當(dāng)然你也可以分開使用，比如：
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;1、背景顏色 —— background-color
background-color 和之前講的的color 一樣，可以使用16進(jìn)制、rgb、rgba等設(shè)置顏色。如下實例：
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>如下圖顯示：
注意：background-color: transparent; 指透明色，不顯示任何顏色。
2、背景圖片的使用——background-image
給html元素添加背景圖片，在早期網(wǎng)頁制作中被廣泛應(yīng)用，如今已不建議大量使用。如下實例：
body {background-image:url(/static/bg.gif);}這里使用了一個125*125大小的圖片，如下：
但是你會發(fā)現(xiàn)，整個網(wǎng)頁鋪滿了圖片，上面的代碼默認(rèn)會鋪滿整個頁面從左到右，從上到下 。如果不想被平鋪，可以使用background-repeat 設(shè)置。
背景圖片同時可以設(shè)置多個背景圖片，如下：
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);多個圖像以逗號隔開，在頁面中多個圖片會疊加顯示，第一張圖片顯示在最頂端。
如下效果：
3、背景重復(fù)方式 —— background-repeat
它有如下幾個屬性：
repeat | 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。 |
repeat-x | 背景圖像將在水平方向重復(fù)。 |
repeat-y | 背景圖像將在垂直方向重復(fù)。 |
no-repeat | 背景圖像不重復(fù)。 |
inherit | 從父元素繼承 background-repeat 屬性的設(shè)置。 |
實例如下：
4、背景圖的位置 —— background-position
背景圖片默認(rèn)顯示在左上角，語法如下：
background-position: x y; // x 距離左邊距離，y距離頂部距離如果要改變它的位置，可以使用關(guān)鍵字：top、bottom、left、right 和 center；或者使用長度值，如 100px 或 5cm；也可以使用百分?jǐn)?shù)值。
x 可以取值 百分比| 數(shù)值| left | center | right。
y 可以取值 百分比| 數(shù)值| top| center | bottom。
當(dāng)只設(shè)置一個值的時候，另一個會缺省為 center。
使用關(guān)鍵字，將背景圖片水平居中，垂直居中：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 使用百分比%：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 50% 50% 等同于 center center，顯示效果和上圖一樣。
還可以使用具體數(shù)值，比如 px、em、cm等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 顯示效果如下：
5、背景圖相對于容器的基準(zhǔn)點 —— background-origin
就是設(shè)置背景圖片相對于html元素什么位置作為初始坐標(biāo)點，語法：
background-origin: padding-box|border-box|content-box;幾種值得含義：
padding-box | 背景圖像相對填充框的位置 |
border-box | 背景圖像相對邊界框的位置 |
content-box | 背景圖像相對內(nèi)容框的位置 |
如下實例：
6、背景圖片大小 —— background-size
默認(rèn)會顯示背景圖原始尺寸，可以通過此屬性設(shè)置背景圖片在元素上的大小，語法：
background-size: width height;寬度和高度可以使用 數(shù)值、百分比%、cover 及 contain ;
數(shù)值：可以使用任何單位的數(shù)字，比如 px、em、cm等。如果設(shè)置一個值，第二個為"auto(自動)"。
百分比%：相對于其所在html原始寬度和高度，如果設(shè)置一個值，第二個為"auto(自動)"。
cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain：把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
如下示例：
7、背景圖像是否固定或者隨著頁面的其余部分滾動
background-attachment 屬性有以下幾個值：
scroll | 背景圖片隨頁面的其余部分滾動。這是默認(rèn) |
fixed | 背景圖像是固定的 |
inherit | 指定background-attachment的設(shè)置應(yīng)該從父元素繼承 |
local | 背景圖片隨滾動元素滾動 |
如設(shè)置一個固定的背景圖片，不跟隨頁面滾動：
background-attachment:fixed;滾動滾動條，會發(fā)下背景圖片始終固定在屏幕那個位置。
8、背景繪制區(qū)域 —— background-clip
語法如下：
background-clip: border-box|padding-box|content-box;border-box | 默認(rèn)值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）。 |
padding-box | 背景繪制在襯距方框內(nèi)（剪切成襯距方框）。 |
content-box | 背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。 |
這個屬性類似于 background-origin ，只不過它會裁剪背景圖片，如下示例：
9、背景層的混合模式 —— background-blend-mode
所謂混合模式就是將圖片與顏色或圖片與圖片進(jìn)行混合，語法：
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;屬性值：
示例如下：
正常模式
luminosity 亮度模式
color 顏色模式
其它模式可以自己試試，看下有什么區(qū)別。
到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡寫也可以分開寫，要想完全掌握，還得多練習(xí)，每種屬性進(jìn)行組合使用看看其效果。
一般建議使用 background 簡寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯誤，并補(bǔ)充。
上篇：前端入門——css鏈接樣式
眾號【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
一、HTML
1、<image>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應(yīng)用》
2、分別寫出以下幾個HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體
加粗：<b>、<strong>
下標(biāo)：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標(biāo)簽列表》
3、請寫出至少5個html5新增的標(biāo)簽，并說明其語義和應(yīng)用場景
section：定義文檔中的一個章節(jié)
nav：定義只包含導(dǎo)航鏈接的章節(jié)
header：定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標(biāo)題和導(dǎo)航性的目錄。
footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。
參考《HTML5 標(biāo)簽列表》
4、請說說你對標(biāo)簽語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
c. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
d. 便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。
5、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴(yán)格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。
6、你知道多少種Doctype文檔類型？
標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，
Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁。
7、HTML與XHTML——二者有什么區(qū)別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關(guān)閉。
c. 標(biāo)簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
h. sessionStorage 的數(shù)據(jù)在頁面會話結(jié)束時會被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術(shù)webworker, websocket等
移除的元素：
a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
9、iframe的優(yōu)缺點？
優(yōu)點：
a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務(wù)器的http請求
d. 會產(chǎn)生很多頁面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區(qū)別？
在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。
a. 盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
c. 設(shè)置百分比的高度：在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個百分比的高度是無效的用
d. 設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
11、請闡述table的缺點
a. 太深的嵌套，比如table>tr>td>h3，會導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過td
c. 代碼臃腫，當(dāng)在table中套用table的時候，閱讀代碼會顯得異常混亂
d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
12、簡述一下src與href的區(qū)別
src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置
href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接
公眾號【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈 測試 PPT JS HTML 簡歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
為室內(nèi)設(shè)計師的你
是不是時常對配色感到頭疼呢？
覺得配色難或是花費時間大？
今天蘭姨來分享幾個
好用的色彩搭配網(wǎng)站
大家收藏效果更佳~
https://uigradients.com/
Uigradients是以漸變色彩為主的網(wǎng)站，里面接近上百種漸變配色方案，可根據(jù)自己風(fēng)格來選擇搭配，點擊左上角，就可以瀏覽所有的配色圖，點擊你喜歡的圖片就可以查看大圖，右上角有免費下載的按鈕，選好你喜歡的配色就可以直接下載，還可以分享到你的社交賬號。
https://color.adobe.com/zh/
Adobe color 是一家在線色輪，提供RGB、CMYK、LAB、SHB、HEX五種色彩模式，非常人性化，用戶可以根據(jù)自己的配色要求進(jìn)行實時搭配，是配色的絕佳去處。
Nipponcolors
Nipponcolors日本傳統(tǒng)配色網(wǎng)站，網(wǎng)站直接給出了各種顏色的CMYK值，RGB值，以色卡的形式呈現(xiàn)，當(dāng)你點擊某個顏色的色卡時，整個網(wǎng)頁都會變成成你選擇的這個顏色，方便我們查看這種顏色是否適合大面積的使用。
http://www.flatuicolorpicker.com/
Flat Design應(yīng)該是設(shè)計師們必不可少的一個網(wǎng)站，這個網(wǎng)站能夠進(jìn)行顏色自動分類。
http://colorhunt.co/
該網(wǎng)站是以四色搭配板塊展現(xiàn)的，還可以通過PS拾取色彩信息。
http://www.peise.net
中文的配色網(wǎng)，內(nèi)有許多色彩知識提供學(xué)習(xí)。有HEX、RGB、CMYK三種模式，可以下載應(yīng)用到:Photoshop/AI 網(wǎng)頁端:HTML/CSS。
https://www.materialpalette.com/
Material Palette是一款提供Material Design配色的線上工具，它的用法很簡單，你只要找出想要搭配的兩種顏色，它就會顯示出兩種顏色搭配在一起的效果預(yù)覽，并提供你較深或較淺的顏色選項，以及其他你可能會用到的顏色代碼。
Coolors
Coolors是一個可以讓你簡單快速地選色生成工具，為你找出配色的靈感，該網(wǎng)站每次會為你挑選由五種顏色組合而成的調(diào)色盤，并顯示顏色的代碼，你可以快速選取使用，或是鎖定其中的幾種顏色。
http://zhongguose.com/
這是國內(nèi)相對較好的色彩搭配網(wǎng)站了，提供RGB和CMYK兩種色彩模式，十分有中國特色。
Skala Color
Skala Color是一款為設(shè)計師和開發(fā)者而生的優(yōu)質(zhì)取色工具。這款取色器小巧簡潔但功能豐富，適用于OS X系統(tǒng)，支持大量的格式（如十六進(jìn)制、CSS的RGBA模式或HSL模式、UIColor亦或是NSColor等等），在web、iOS、Android、或OS X開發(fā)商都能勝任。
https://colordrop.io/
四宮格配色，點一個就能顯示四個的色號，直接復(fù)制到ps或者是AI，使用起來非常方便。
http://webgradients.com
這里有很多漸變色的運用，有時候腦袋卡殼了，可以在這里尋找顏色的靈感。
https://color.hailpixel.com/
Color by Hailpixel這個網(wǎng)站可以調(diào)整色調(diào)、亮度、飽和度等等，使用起來十分便捷。
http://colrd.com/
這個網(wǎng)站可以根據(jù)顏色、漸變、調(diào)色板等尋找圖像資料。
ColorHexa
它能幫助我們擴(kuò)展這個色彩，搭配出數(shù)種方案，甚至還有色盲修正方案。如果你只能確定一個必須使用的顏色，選擇這個工具或許能獲得一些靈感。
Color Scheme Designer
這是一個在線的配色工具，相比于Adobe color ，它擁有詳細(xì)的色彩修改方法，和簡單的顏色演示工具。國內(nèi)有個舊版本的漢化版，不過還是建議去官網(wǎng)使用最新的。
LOL Colors
這是一個非常簡潔，但非常好用的配色網(wǎng)站，設(shè)計師們可以在這里找到很多色彩組合，把鼠標(biāo)移動到不同顏色的水滴上會提示色彩代碼(Hex Code)的顏色值。
Colorfavs
用戶只需要把一張圖片上傳到網(wǎng)站上，系統(tǒng)會自動分析圖片里的顏色，并生成色系值，系統(tǒng)根據(jù)圖片推測你喜歡的色盤搭配。
http://www.colourlovers.com/
色彩社區(qū)不僅可以配色，還可以共享他人的色彩，共同切磋學(xué)習(xí)。
https://brandcolors.net/
該網(wǎng)站總結(jié)各企業(yè)品牌主打的配色，從里面找尋家居配色靈感也是不錯的選擇。
今天就分享到這啦，希望以上的配色網(wǎng)站能夠激發(fā)你們配色靈感，在設(shè)計的時候，不再讓配色成為你煩惱所在！
該文為原創(chuàng)內(nèi)容
未經(jīng)授權(quán)不得隨意轉(zhuǎn)載
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
