整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。
花了一點(diǎn)時(shí)間研究了一下各家的編輯器，規(guī)則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關(guān)鍵詞，或者要求代碼塊里必須包含至少一個(gè) <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進(jìn)，或者丟失顏色樣式。
所以，這就難了。先得找個(gè)支持代碼高亮的編輯器，仔細(xì)地選擇并復(fù)制代碼塊，復(fù)制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個(gè)轉(zhuǎn)換工具了。
因?yàn)闉g覽器操作系統(tǒng)剪貼板可能不太方便，下面用 aardio 寫一個(gè)工具軟件。
先看軟件成品演示：
軟件用法：
1、輸入編程語(yǔ)言名稱（支持自動(dòng)完成）。
2、然后在輸入框中粘貼要轉(zhuǎn)換的編程代碼。
3、點(diǎn)擊「復(fù)制高亮代碼塊」按鈕。
然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。
下面是這個(gè)軟件的 aardio 源代碼：
import win.ui;
/*DSG{{*/
var winform = win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語(yǔ)言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復(fù)制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網(wǎng)頁(yè)編輯器直接粘貼";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="請(qǐng)選擇語(yǔ)言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/
import web.view;
var wb = web.view(winform.webCtrl);
import win.clip.html;
wb.export({
onHighlight = function(html,background,foreground){
html = `<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
+ html + `</code></pre>`;
html,count = string.replace(html,'\n',"<br>");
if(!count){
html = string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
}
var cb = win.clip.html();
cb.write(html);
winform.setTimeout(
function(){
winform.editCode.show(true);
winform.webCtrl.show(false);
winform.text = "HTML 代碼塊生成工具 - 已復(fù)制高亮代碼塊到剪貼板，可在網(wǎng)頁(yè)直接粘貼";
},1000);
};
setLanguages = function(langs){
winform.languages = langs;
}
})
winform.cmbLangs.onEditChange = function(){
var text = string.lower(winform.cmbLangs.text);
var items = table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) );
winform.cmbLangs.autoComplete(items);
}
winform.cmbLangs.editBox.disableInputMethod();
import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer = wsock.tcp.asynHttpServer();
httpServer.run(web.prism,{
["/index.html"] = /*****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
<script src="prism.js"></script>
<script>
function computedColorStyle(element, options = {}) {
Array.prototype.forEach.call(element.children,child => {
computedColorStyle(child, options);
});
const computedStyle = getComputedStyle(element);
element.style["color"] = computedStyle.getPropertyValue("color");
}
highlight = function(code,language){
var html = Prism.highlight(code, Prism.languages[language], language);
var codeEle = document.getElementById("code");
codeEle.innerHTML = html;
computedColorStyle(codeEle);
const computedStyle = getComputedStyle(codeEle);
onHighlight(codeEle.innerHTML
,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
,computedStyle.getPropertyValue("color"));
}
setLanguages( Object.keys(Prism.languages) );
</script>
</body>
</html>
*****/
});
wb.go( httpServer.getUrl("/index.html"));
winform.button.oncommand = function(id,event){
winform.text = "HTML 代碼塊生成工具 - 本工具使用 aardio 語(yǔ)言編寫"
winform.editCode.show(false);
winform.webCtrl.show(true);
wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}
winform.show();
win.loopMessage();打開 aardio 創(chuàng)建工程，然后復(fù)制粘貼上面的代碼到 main.aardio 里面就可以直接運(yùn)行，或生成獨(dú)立 EXE 文件：
這個(gè)軟件的原理：
1、首先通過(guò) WebView2 調(diào)用 Prism.js 高亮代碼。為了可以內(nèi)存加載 Prism.js （ 支持生成獨(dú)立 EXE ），我寫了一個(gè) aardio 擴(kuò)展庫(kù) web.prism 。關(guān)于 WebView2 請(qǐng)參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發(fā)獨(dú)立 EXE 程序
2、因?yàn)?Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調(diào)用 getComputedStyle 獲取最終渲染的字體顏色屬性。
3、最后在 JavaScript 里調(diào)用 aardio 函數(shù)處理生成的 HTML 代碼塊，aardio 的任務(wù)是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問(wèn)題。然后調(diào)用 win.clip.html 將處理好的 HTML 復(fù)制到系統(tǒng)剪貼板：
import win.clip.html;
var cb = win.clip.html();
cb.write(html); 然后只要愉快地粘貼代碼塊就可以。
如果是 aardio 代碼不需要用這個(gè)工具，在 aardio 編輯器里右鍵直接點(diǎn)『 復(fù)制全部到 HTML 代碼塊 』就可以了：
值工具與不透明度。
可以來(lái)看一下，比如在這里取了一個(gè)顏色，取了這樣的紫色，可以在這里去設(shè)計(jì)軟件里面把這個(gè)值復(fù)制過(guò)來(lái)，復(fù)制了之后在這里去寫一下，記得要加一個(gè)井號(hào)，16進(jìn)制，這個(gè)顏色就會(huì)在這里展示出來(lái)了。
這個(gè)顏色其實(shí)可以用vscode自帶的調(diào)色板工具去切換顏色色值的模式，當(dāng)點(diǎn)擊這里的時(shí)候能切換好幾種。當(dāng)去調(diào)整透明度的時(shí)候會(huì)發(fā)現(xiàn)后面16進(jìn)制的多了兩位，包括其他的顏色模式也會(huì)把它變成a的，加了透明度a字母的模式，RGBA。
這里可以看到這里還有個(gè)HWB，這個(gè)也是從來(lái)沒有用過(guò)，有興趣可以自己去研究一下。所以可以點(diǎn)擊這里去切換不同的顏色模式，下面的代碼的設(shè)定也會(huì)隨之的更改。
當(dāng)去調(diào)整顏色的時(shí)候會(huì)發(fā)現(xiàn)調(diào)節(jié)的面板顏色就斷成了兩邊，左邊這里就是當(dāng)前調(diào)整變成的顏色，右邊這里就是調(diào)整之前的顏色。如果調(diào)完半天之后發(fā)現(xiàn)效果不滿意，想回到原來(lái)那個(gè)，可以點(diǎn)擊一下就回去了。
有時(shí)候如果想用16進(jìn)制的顏色的寫法，但是透明度又感覺不太好設(shè)置，其實(shí)可以先把它切換為RGBA模式。比如現(xiàn)在一開始這里是16進(jìn)制的寫法，想讓它變成20%(不透明度)的顏色，先把鼠標(biāo)放這里，讓顏色色板出現(xiàn)之后先把它轉(zhuǎn)成RGBA的模式，調(diào)透明度，調(diào)到比如20%的透明度，0.2，再切回去，再切回到這個(gè)模式。這個(gè)就不就是16進(jìn)制的帶不透明度設(shè)置的寫法，一個(gè)顏色值了。
所以這些小技巧大家都可以去用一下。當(dāng)然很多時(shí)候去給某個(gè)顏色設(shè)置不透明度相對(duì)來(lái)說(shuō)會(huì)比較少用，比較常用的去設(shè)置不透明度其實(shí)很多時(shí)候是之前給大家介紹過(guò)的，給整個(gè)元素用opacity去設(shè)置一個(gè)不透明度。
比如把它設(shè)置到父元素上，不透明度跟顏色的不透明度是有非常大的區(qū)別的。不透明度(opacity)是整個(gè)元素的整體，包括它的子元素也會(huì)受影響的，會(huì)看到它整體，包括內(nèi)部的子元素也好，它的整體變成了很不明顯的效果了。
但是顏色的設(shè)置只會(huì)影響到設(shè)置顏色的部分(或者方面)，比如設(shè)置不透明度，它只影響到了子元素的背景顏色的不透明度。比如字體，color是給文字設(shè)置顏色的，不透明度其實(shí)也可以設(shè)置，比如把字體的不透明度降到這么低，就會(huì)發(fā)現(xiàn)字體自己的顏色就會(huì)變得不透明度的狀態(tài)。
比如這里來(lái)個(gè)red，就明顯能感覺到它這些都是對(duì)應(yīng)各自影響的部分去產(chǎn)生作用的。所以有時(shí)候如果希望背景顏色有一個(gè)不透明度，但是整體的元素不想讓它有任何的半透明的效果，就可以通過(guò)特定的背景顏色的顏色色值的不透明度的設(shè)置達(dá)到想要的效果，而不影響到整體的元素。
如果網(wǎng)頁(yè)只有一種顏色，那是非常可怕的，顏色的設(shè)置豐富了網(wǎng)頁(yè)，就如同多彩繽紛的世界。
在了解css顏色之前，我們回顧下計(jì)算機(jī)是如何顯示顏色的？計(jì)算機(jī)根據(jù)色光三原色的原理通過(guò)各種算法來(lái)顯示顏色。
網(wǎng)頁(yè)中使用顏色關(guān)鍵字、16進(jìn)制字符、rgb、rgba等表示紅，綠，藍(lán)三種顏色混合色，如下示例,幾種寫法都是指同一個(gè)顏色（紅色）：
color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)對(duì)于16進(jìn)制形式，每2位表示一個(gè)顏色，從左到右分別是紅、綠、藍(lán)，每種顏色取值從00 到 FF。
如下示例：
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍(lán)色*/對(duì)于rgb的表示法，由三個(gè)參數(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é)合，給出了總額超過(guò)1600多萬(wàn)不同的顏色（256 × 256 ×256）。
但是現(xiàn)代大多數(shù)顯示器能夠顯示至少16384種顏色。所以在使用顏色時(shí)要格外注意，避免設(shè)置不能夠顯示的顏色，可以參考網(wǎng)頁(yè)安全色：https://www.w3school.com.cn/cssref/css_colors.asp。
顏色除了有三原色紅綠藍(lán)組成，還有亮度層級(jí)，如下圖：
rgba 中的a是指透明度，這個(gè)是css3新增加的屬性，通過(guò)rgba可以設(shè)置更加漂亮的顏色。
通過(guò)background屬性可以設(shè)置元素的背景色、背景圖片，語(yǔ)法如下：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;background 在一個(gè)聲明中設(shè)置所有的背景屬性，可以在這里設(shè)置如下屬性：
各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個(gè)值。
建議使用background 簡(jiǎn)寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當(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è)置顏色。如下實(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è)制作中被廣泛應(yīng)用，如今已不建議大量使用。如下實(shí)例：
body {background-image:url(/static/bg.gif);}這里使用了一個(gè)125*125大小的圖片，如下：
但是你會(huì)發(fā)現(xiàn)，整個(gè)網(wǎng)頁(yè)鋪滿了圖片，上面的代碼默認(rèn)會(huì)鋪滿整個(gè)頁(yè)面從左到右，從上到下 。如果不想被平鋪，可以使用background-repeat 設(shè)置。
背景圖片同時(shí)可以設(shè)置多個(gè)背景圖片，如下：
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);多個(gè)圖像以逗號(hào)隔開，在頁(yè)面中多個(gè)圖片會(huì)疊加顯示，第一張圖片顯示在最頂端。
如下效果：
3、背景重復(fù)方式 —— background-repeat
它有如下幾個(gè)屬性：
repeat | 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。 |
repeat-x | 背景圖像將在水平方向重復(fù)。 |
repeat-y | 背景圖像將在垂直方向重復(fù)。 |
no-repeat | 背景圖像不重復(fù)。 |
inherit | 從父元素繼承 background-repeat 屬性的設(shè)置。 |
實(shí)例如下：
4、背景圖的位置 —— background-position
背景圖片默認(rèn)顯示在左上角，語(yǔ)法如下：
background-position: x y; // x 距離左邊距離，y距離頂部距離如果要改變它的位置，可以使用關(guān)鍵字：top、bottom、left、right 和 center；或者使用長(zhǎng)度值，如 100px 或 5cm；也可以使用百分?jǐn)?shù)值。
x 可以取值 百分比| 數(shù)值| left | center | right。
y 可以取值 百分比| 數(shù)值| top| center | bottom。
當(dāng)只設(shè)置一個(gè)值的時(shí)候，另一個(gè)會(huì)缺省為 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、背景圖相對(duì)于容器的基準(zhǔn)點(diǎn) —— background-origin
就是設(shè)置背景圖片相對(duì)于html元素什么位置作為初始坐標(biāo)點(diǎn)，語(yǔ)法：
background-origin: padding-box|border-box|content-box;幾種值得含義：
padding-box | 背景圖像相對(duì)填充框的位置 |
border-box | 背景圖像相對(duì)邊界框的位置 |
content-box | 背景圖像相對(duì)內(nèi)容框的位置 |
如下實(shí)例：
6、背景圖片大小 —— background-size
默認(rèn)會(huì)顯示背景圖原始尺寸，可以通過(guò)此屬性設(shè)置背景圖片在元素上的大小，語(yǔ)法：
background-size: width height;寬度和高度可以使用 數(shù)值、百分比%、cover 及 contain ;
數(shù)值：可以使用任何單位的數(shù)字，比如 px、em、cm等。如果設(shè)置一個(gè)值，第二個(gè)為"auto(自動(dòng))"。
百分比%：相對(duì)于其所在html原始寬度和高度，如果設(shè)置一個(gè)值，第二個(gè)為"auto(自動(dòng))"。
cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。
contain：把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
如下示例：
7、背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
background-attachment 屬性有以下幾個(gè)值：
scroll | 背景圖片隨頁(yè)面的其余部分滾動(dòng)。這是默認(rèn) |
fixed | 背景圖像是固定的 |
inherit | 指定background-attachment的設(shè)置應(yīng)該從父元素繼承 |
local | 背景圖片隨滾動(dòng)元素滾動(dòng) |
如設(shè)置一個(gè)固定的背景圖片，不跟隨頁(yè)面滾動(dòng)：
background-attachment:fixed;滾動(dòng)滾動(dòng)條，會(huì)發(fā)下背景圖片始終固定在屏幕那個(gè)位置。
8、背景繪制區(qū)域 —— background-clip
語(yǔ)法如下：
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)容方框）。 |
這個(gè)屬性類似于 background-origin ，只不過(guò)它會(huì)裁剪背景圖片，如下示例：
9、背景層的混合模式 —— background-blend-mode
所謂混合模式就是將圖片與顏色或圖片與圖片進(jìn)行混合，語(yǔ)法：
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;屬性值：
示例如下：
正常模式
luminosity 亮度模式
color 顏色模式
其它模式可以自己試試，看下有什么區(qū)別。
到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡(jiǎn)寫也可以分開寫，要想完全掌握，還得多練習(xí)，每種屬性進(jìn)行組合使用看看其效果。
一般建議使用 background 簡(jiǎn)寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯(cuò)誤，并補(bǔ)充。
上篇：前端入門——css鏈接樣式
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
