使用js將相對路徑轉為絕對路徑

標題：使用JavaScript將相對路徑轉為絕對路徑。

小標題：使用JavaScript將相對路徑轉為絕對路徑。

本篇文章網址：https://corettainformation.blogspot.com/2021/06/js.html

今天要使用JavaScript將相對路徑轉為絕對路徑。

方法如下

首先，使用JavaScript建立A物件：

var A=document.createElement("A");

上述程式碼相當於建立HTML的<a></a>

然後將它的href指向相對路徑：

A.href="./image/anime/warrior/warrior-145597_1280_edit_small.png";

然後再將它的網址log出來：

console.log(A.href);

就會看見，輸入的相對路徑已經轉成絕對路徑了。

將pdf嵌入到blogger或HTML網頁

標題：[教學]如何將pdf嵌入到blogger或HTML網頁

今天要實作如何將pdf檔案嵌入到我的blogger。

首先，將pdf檔案上傳到Google雲端硬碟。

然後點開它，選擇共用。

設定共用為「公開」或「知道連結的使用者都能查看」

如果忽略此步驟，可能導致嵌入後的pdf只有自己能看到。

接著回到剛才的畫面，選擇在新視窗中開啟。

接著選擇嵌入項目...

會看到一段HTML程式碼，把它複製起來。

貼到你的blogger文章的HTML上。

貼完之後，發佈文章，就能看到pdf檔出現在blogger上了。

本篇文章網址：https://corettainformation.blogspot.com/2021/02/pdfbloggerhtml.html

如果覺得這篇文有幫助到你們的話，請留言或幫忙按個廣告吧。

您的支持是我寫文的最大動力。

如果依然失敗了，也請留言讓我知道，看看哪個環節出了問題，我有看到就會回。

希望這篇文有幫助到各位ξ( ✿＞◡❛)

如何更改VScode的每行長度上限

完整標題：如何更改Visual Studio Code自動縮排HTML時的每行長度上限。

最近在寫HTML程式，發現Visual Studio Code在自動縮排HTML時，太長的會自動換行。

如圖所示

如何解決呢。

首先按檔案/喜好設定/設定。

然後搜尋length或其他可以找到HTML>Format:Wrap Line Length的關鍵字，從圖中可以看到它預設超過120個字會自動換行，我們現在把它更改為140或其他長度，這樣一來，長度超過140字的HTML程式碼才會自動換行。

更改完成後，回到Visual Studio Code重新自動縮排一次，原本每行超過120長度的程式碼已經不會自動換行了。

[密技]兩個解決CSS transform在chrome破圖+閃爍的方法

在chrome中使用CSS transform旋轉影像時可能會出現破圖+畫面閃爍的問題(在firefox則不會)

這可能是因為他沒有真正發揮到硬體(GPU)加速

這時有兩個解決方式

[密技]如何把blogger文章嵌入到其他頁面或網站

網路上都很多把外部連接嵌入到blogger上，但是似乎找不到把自己blogger連接嵌入到其他網頁的方法。

這裡提供一個自行研發的方法。

首先，到自己要轉出的頁面
範例網址：https://corettainformation.blogspot.com/2019/06/cc_23.html

然後按F12開啟主控台，輸入：

 var mydgetdivdata=document.getElementsByClassName('blog-posts hfeed')[0].innerHTML;

document.write("<textarea id='getdivtest0001' cols='1024' rows='512'></textarea> <script>document.getElementById('getdivtest0001').value=mydgetdivdata<\/script>");

然後會跑出這串文字，就是你那篇文章的嵌入程式碼

現在試著把這串文字轉貼到自己的其他頁面

測試結果正常

現在把這串文字轉貼到其他網誌試試

轉貼成功

[小技巧]如何在Clip Studio Paint使用螢光筆

標題：[小技巧]如何在Clip Studio Paint使用螢光筆

最近一項新出現的繪圖軟體Clip Studio Paint(CSP)很快的在全世界已有上百萬的市占率，本篇將介紹如何用Clip Studio Paint模擬出螢光筆的功能。

首先，開啟你需要用螢光筆畫線的圖片，然後新增一個新的點陣圖層

新增完之後將圖層的混合模式設定為色彩增值

之後使用任一普通的畫筆(直線工具也可以)，此範例使用平塗筆，色彩設定為黃色

然後在色彩增值的圖層上畫線，會發現筆刷變成螢光筆了

如果這篇的觸擊率高的話將另外發幾篇關於這項軟體的介紹

css選擇器是什麼？該怎麼用

css又被稱為網頁的美容/化妝師，今天來介紹一下怎麼給html添加樣式

閱讀這篇文章前需要對標籤選擇器，類選擇器和ＩＤ選擇器有基本概念，並且閱讀過上一篇文（css優先級）

如果已經有概念或是曾經使用過，那麼就達到學習門檻囉

這是一個html標籤的結構圖

當我們想要給hello,world添加顏色的時候，我們可以選擇這樣做

沒錯，這就是所謂的行內樣式，這樣做的缺點就是如果有很多

個div，就要寫很多次行內樣式，如果要修改的話會找很久，

而優點就是立即見效，因為他的優先級很高，也不用考慮結構

問題，如果配上ＵＩ庫來使用的話，能夠很快的產出東西，對

維護性不要求的場合非常方便，這也是一般初學者最先接觸的

設置樣式的方法

如果遇到很多個div， 他們有共通的樣式，就可以考慮標籤選

擇器，只要把標籤名寫上去就大功告成，他的效果為全部的

div都套用紅色字體

再來是比較進階一點的情境，div一層包一層的時候，上圖可

以發現一層包了一層又包一層，在html裡面，標籤是有關係

的，包來包去的關係，就叫父子級，我們把最外層的div命名

為outer（外），而裡面（中），就叫做outer的子級，而更裡面

（內）就叫做outer的孫子級，今天我們只想給子元素（中）添

加顏色，不想動到孫子級（內）的時候，這時就可以選用  > 

這個符號，叫做子級選擇器， 他的效果就是輩份比自己小一

階的元素能夠得到效果，而小兩階或三階等孫輩份元素都套用

不到

那麼，如果我想讓所有我的後代都能得到效果呢，這時可以這

樣寫，只要加個空格就ＯＫ，意思就是輩份比outer小的div都

能得到效果

如果我想讓某個元素有顏色，但我又不想用行內樣式，我能怎麼做呢？

可以選擇類選擇器或ＩＤ選擇器，而類選擇器的優點是效能高

速度快，可複用性強，ＩＤ選則器的優點是優先級高，立即見

效，缺點是這個元素在網頁上的身份必須獨一無二（比方說Ｌ

ＯＧＯ圖，或主標題），如果我只是想添加藍色，而且我確定

我會使用很多次藍色，那麼就不是獨一無二的元素，所以這裡

用類選擇器比較適合

類選擇器和ＩＤ選擇器我都知道了，還有沒有其他方法？

有，li:nth-child(２)

意思就是li元素裡的所有子元素的第二個，套用效果

當使用這種方法的時候，可能會遇到一些問題，比方說新增

或刪除標籤結構的時候，這時原本的第二個元素可能就變成

第三個元素或第一個元素，要怎麼辦呢？

這時就可以使用nth-of-type，就不是ul內的所有子元素的第二

個，而是ul內class相同或tag相同的元素的第二個，這樣一

來，就算新增元素，只要他不是相同的類型，就不會影響計

數

而數字可以寫成n，2n，3n-1等等的方式，製作有規律樣式的表格很方便，比方說條紋顏色

接下來介紹的這個我都稱呼為兄弟選擇器，或比鄰選擇器，他

就是可以選到鄰居，範例的意思就是.first後面（只有後面，前

面沒用）緊跟著的span元素能得到效果（對，只能對一個元素

有效），需要注意的地方是他們是兄弟關係，不是父子關係

＊，這個東西叫做通配符，或是通用選擇器，意思就是，全部，我全都要.jpg

不管你是tag還是class還是id啥的，只要你在文檔裡面，就連

html和body標籤都無法倖免，通通都設為藍色文字顏色，但

相對的，這個選擇器的優先級很低

＊除了拿來初始化tag的margin和border和padding以外就沒有用了？

are you sure?

其實可以這麼用，就是某個部分裡面的全部我都一次設定，也是相當實用的寫法

有時候，我需要選擇一大包東西，但有些不是我想要的，怎麼辦呢？

這時候就輪到not選擇器出場了，not的括號裡面可以寫各種

條件，讓你過濾掉不想要的元素

最後再來介紹一下中括號三兄弟，他的缺點是效能差，但優點

是對付表單元素很好用，有時候也會有class取的沒有那麼統一

的時候，總體來說還是非常有機會能派上用場的

*=的意思就是  "包含"  class*='funny'就是class裡面有包含funny的元素都能套用到效果

而  ^= 的意思就是，開頭為，也就是funny開頭的都套用效果

而   $= 的意思是，結尾為，也就是結尾為last的元素都套用效果

CSS選擇器的權重大小一覽

閱讀這篇文章前   請先具備

CSS Selectors

實際撰寫與嘗試的經驗

在開發時，常常會發現給標籤添加樣式，卻沒效果的這種情況

這種情況分成兩種

1.選擇器寫錯、選錯標籤

2.選對了、但被其他的樣式覆蓋掉了

CSS的樣式被覆蓋的現象、就是權重問題

對權重問題理解不夠深的話，很容易就進入一段時間沒有產出的情況

#被覆蓋的樣式可透過F12看到，他們是被槓掉的

那麼來寫一下範例

body{

    margin: 0;

}

選到了body標籤，此時的權重假設為1、代表他能幹掉權重小於1的樣式

此時打開F12，會發現body{margin: 8px;}被幹掉了，這個樣式是chrome瀏覽器的預設樣式

也就是說body本身就有預設的margin，這個樣式被稱為預設樣式，權重為0

接著

body{

    margin: 0;

}

body{

    margin: 5px;

}

此時，body的margin為5px

在相同權重下，後面添加的樣式會幹掉前面的，我們假設他為1.1

再來

body{

    margin: 0;

}

body{

    margin: 5px;

}

html  body{

    margin: 10px;

}

此時，body的margin為10px

標籤是有疊加權重的，選到html底下的body，也就是說途中標籤選取器經過（但不選取）html，選到底下的body，此時的權重會是2，也就是1+1，但很重要的事情是，不管這個權重怎麼加，也不會超過class或id這兩種選取器

基礎觀念都有了、那接下來就一併列出吧

body{//1

}

body{//1.1

}

html body{//2

}

html body{//2.1，因為後寫的關係，所以增加0.1

}

.body{//10，你沒看錯，就是10，但標籤選取器的權重怎麼疊加都幹不掉這個10

}

html .body{//1+10=11

}

.html .body{//10+10=20

}

.html .body{//10+10=20，與上方權重相同，因為後寫的關係，所以為20.1

}

#body{//100

}

#html .body{//100+10=110

}

.html #body{//10+100=110，與上方權重相同，因為後寫的關係，所以為110.1，如果後寫的是#html .body，那麼#html .body就能幹掉.html #body

}

#html #body{//100+100=200

}

#html #div div .body{//100+100+1+10=211

}

行內樣式//權重1000

<body margin='20px'></body>

body{

    margin: 0px !important;//這樣寫，權重10000

}

標籤的秘密

上一回介紹的是h1~h6的標籤

h開頭的標籤有著標題的意思，也能達到改變文字大小與粗細的效果

標籤的秘密就是在於它有著一體雙效的力量，"意思"與"造型"

絕大多數的標籤都具有意思，比方說strong標籤的意思是重點強調，p標籤的意思是段落

造型方面，前者能讓文字變得更粗，後者能讓畫面變寬敞變好看

但是實際做網站的時候呢，造型方面會由CSS統一負責，而html只要負責意思的部分就好了。

所以說，不要為了讓畫面變寬敞而使用p標籤，不要為了讓文字變粗而使用strong標籤，不要為了讓字變大而使用h1標籤，而是要依照意義使用。

之後再統一由CSS來做造型的修改

這樣才能兼顧到網站的SEO與視覺畫面，行銷和設計師才不會哭哭喔

html標籤介紹 h1到h6

h1~h6的標籤

h1的標籤字體很大很粗
h2的字體比h1小一點  也比較細一點
h6的字體最小最細

h1是長這樣的

hi我是h1

h6是長這樣的

hi我是h6

h1的意義是網站主標題
這個標籤在網站內的權重是非常大的
搜尋引擎在抓網站內容的時候會被這個標籤吸取注意力
所以不要重複使用h1標籤
這樣搜尋引擎會不知道這個網站的哪裡是重點

用法:h1 整個網站一個 h2:每個頁面一個 h3:每個頁面多個