5. 用CSS3美化區塊

一、將區塊標題部份改為自動樣板

1. 區塊標題其實有許多進階變化，例如用進階區塊即可替區塊標題加上圖片或隱藏區塊等效果。

2. 若要自己去轉換那些功能其實挺複雜，所以，可以用已經寫好的區塊標題樣板檔來取代之。

   <div class="blockHead">
       <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
   </div>

    

3. 該自動樣板檔只有處理一些特殊技法，並不會對標題外觀有任何處理。

4. 該樣板會也產生<h3 class="blockTitle">的內容。

二、新增網頁字體

1. 可在css檔中加入一些不同的網頁字型

   @import url("https://schoolweb.tn.edu.tw/uploads/fonts/woff2.css");

    

2. 若不夠用，可以至 https://github.com/max32002?tab=repositories 來取得更多字型

3. 以內海字體為例https://github.com/max32002/naikaifont，只要在css檔加入：

   @font-face {
       font-family: naikaifont;
       src: url(https://cdn.jsdelivr.net/gh/max32002/[email protected]/webfont/NaikaiFont-Regular-Lite.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/[email protected]/webfont/NaikaiFont-Regular-Lite.woff) format("woff");
   }

    

4. 如此，便可在font-family 中使用名稱為 naikaifont的字體

5. 範例：https://50plus.cwgv.com.tw/articles/19681

三、關於CSS前綴（或辨識碼）

1. 在CSS標準還未確定前，部分瀏覽器已根據草案先實現了部分功能，此時會先加上前綴讓使用者可以先使用該功能，等CSS定案，即可將前綴拿掉。

2. -ms為IE；-moz為Firefox；-webkit為chrome、Edge、Safari；-o為Opera

3. 若想知道某些宣告樣式在各個瀏覽器的支援程度如何，可以參考：https://caniuse.com

四、先大致修改區塊樣板樣式

1. 先讓每個區塊間隔開來，並指定好區塊標題的大小，剩下的細部樣式可後續再來慢慢調整：

   .block { margin-top: 1rem; margin-bottom: 3rem; }
   .blockTitle { height: 2.5rem; font-size: 1.5rem; }

    

五、用圖片或漸層當作文字顏色

1. 這是利用背景裁剪（background-clip）來做成的效果

   .blockTitle {
       font-family: HanWangMingBlack;
       background-image: linear-gradient(to right, #49533f, #A5BB8F);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   1. 首先，字型先挑選粗一點的字型，例如： HanWangMingBlack

   2. linear-gradient()則是CSS function之一，用來製作漸層效果，第一個參數是設定角度或方向，預設是to bottom（上到下），詳細請參考：http://www.w3big.com/zh-TW/css3/css3-gradients.html

   3. webkit-background-clip並不是一個所有瀏覽器的支持的樣式，所以，請加上前綴，設定text是設定依照文字的形狀來裁剪背景之意。

   4. -webkit-text-fill-color則是用來填入文字顏色，其作用和color一樣，但優先權比color高，我們用之來將文字設為透明，如此，才能看到被剪下的背景。

六、替文字加框

1. 若想讓文字可以更清楚，加外框是蠻常見作法：

   .blockTitle {
       font-family: naikaifont;
       color: #F5F4E9;
       text-shadow:  0px 2px #36626b, 2px 0px #36626b, -2px 0px #36626b, 0px -2px #36626b, -2px -2px #36626b, 2px 2px #36626b, 2px -2px #36626b, -2px 2px #36626b;
   }

   1. 主要是利用八次各個方向的 text-shadow文字陰影來兜成外框。

2. 用-webkit-text-stroke也可以做外框字，不過，該樣式會把框加在文字內緣，並不美觀。

七、讓同一區域的區塊可以輪流套用不同效果

1. 先準備幾張底圖，打算讓文字置中，並套用不同底圖，先將共同的部份設好：

   .blockHead {
       text-align: center;
   }
   
   .blockTitle {
       height: 2.5rem;
       font-size: 1.5rem;
       margin-bottom: 1rem;
       font-family: naikaifont;
       color: #F5F4E9;
   }

    

2. 當有標題時，height就會生效，height可以設為底圖的高度。若沒有文字，height為0，如此可避免標題被隱藏的區塊跑出一個空底圖。

3. 接著將套用的底圖設定及外框顏色分別做成四個樣式（.bbg1~.bbg4）：

   .bbg1 {
       text-shadow: 0px 2px #804454, 2px 0px #804454, -2px 0px #804454, 0px -2px #804454, -2px -2px #804454, 2px 2px #804454, 2px -2px #804454, -2px 2px #804454;
       background: url('../images/bbg1.png') no-repeat ;
   }

    

4. 配合底色，外框顏色分別設為：#804454、#36626b、#6b6b1e、#3c583d

5. 底圖設為不重複，並設為從左邊、下方為主來顯示完整底圖圖檔

6. 在樣板部份，修改xotpl\block.tpl，並利用Smarty的cycle語法來依序套入不同樣式：

   <div class="blockHead <{cycle values='bbg1,bbg2,bbg3,bbg4'}>">
       <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
   </div>

    

八、讓中間區域的標題靠左

1. 由於底圖並不大，但中間區域頗大，因此標題若置中，文字會跑出底圖之外，因此修正之：

   #page_center .blockHead { text-align: left; padding-left: 1rem; }

    

九、針對手機畫面自動調整標題對齊方式

1. 在電腦上看目前應該沒什麼問題，但手機模式看會發現標題置中並不美觀，因此，最好是電腦模式下標題置中，但在手機模式下標題可以靠左（類似中間區塊那樣）。

   @media only screen and (max-width: 768px) {
       .blockHead { text-align: left; padding-left: 1rem; }
   }

   1. 利用@media可以定義在某裝置於指定條件下自動套用定義好的樣式

   2. only screen設定僅作用在螢幕上當寬度小於768px時就將標題向左對齊，並空1字。

   3. http://www.w3big.com/zh-TW/cssref/css3-pr-mediaquery.html

十、CSS的擬類別（需注意順序，不然不會有效果）

1. :link 尚未瀏覽過的超鏈結

2. :visited 已經瀏覽過其內容的超鏈

3. :hover 滑鼠移到該元件上

4. :active 滑鼠點下該元件的瞬間

十一、CSS的偽元素 （用::和擬類別做出區隔，但其實一個:也是可以用的。 ）

1. ::first-line 元素中的第一行（僅用於區塊級元素）

2. ::first-letter 元素中的第一個字（僅用於區塊級元素）

3. ::before 在元素前（需和content一起使用）

4. ::after 在元素後插入內容（需和content一起使用）

5. ::placeholder 元素的佔位符號

6. ::selection 當元素被標記的狀態

十二、替區塊加上設定按鈕

1. 我們希望若目前的登入身份是有管理權限的，那麼，當滑鼠移過標題時，就顯示設定工具。

2. 修改xotpl\block.tpl，在引入標題樣板的下方加入按鈕設定：

   <div class="blockHead <{cycle values='bbg1,bbg2,bbg3,bbg4'}>">
       <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
       <{if $xoops_isadmin}>
           <a href="<{$xoops_url}>/modules/system/admin.php?fct=blocksadmin&op=edit&bid=<{$block.id}>" class="blocktool"></a>
       <{/if}>
   </div>

    

3. 記得判斷$xoops_isadmin的值，以確保只有管理員能看到

4. 區塊設定的連結位置為

   <{$xoops_url}>/modules/system/admin.php?fct=blocksadmin&op=edit&bid=<{$block.id}>

    

5. 記得加上class樣式，如： blocktool，以便作為CSS挑選器

6. 暫時不在連結中填入內容，因為我們希望它在特定情況下才出現

十三、利用::before 或::after讓網頁元素無中生有

1. 比較簡單的作法：先至https://www.flaticon.com下載個24x24的圖檔，如：gear.png

2. 利用::after，搭配 content，在挑選器後面新增該圖檔即可。

   .blockTitle { 略; display: inline-block; }
   .blocktool::after { content: url(../images/gear.png); }

    

3. 為了讓圖片可以排在標題右邊，標題的顯示模式必須改為 inline或 inline-block才行

十四、在CSS中使用FontAwesome圖示

1. https://fontawesome.com/v4.7.0/icon/cog

2. 若想在CSS中使用FontAwesome，可以用FontAwesome UniCode來達成。

3. 每個 FontAwesome的圖示都有對應一個UniCode，一樣利用 content，並於UniCode前加一個 \ 即可。

   .blocktool::after{
       font-family: "FontAwesome";
       content: "\f013";
       color: white;
       font-size: 1.5rem;
       margin-left: 1rem;
   }

    

4. 由於他是文字，所以，一樣設定大小及顏色，並可套用任何的文字樣式效果。

5. 若想滑過標題才出現設定按鈕，只要利用:hover即可做到此效果：

   .block:hover .blocktool::after { 略 }

    

十五、CSS的position位置概念

1. position:static「靜態」這是網頁的預設值。

2. position:relative 「相對」指的是相對該元素原來所在的位置（下一個元素並不會隨之起舞），可用 top、bottom、left、right來調整該元素位置。

3. position:absolute「絕對」指的是相對於整個網頁最左上角的位置（此元素會飄起來，下一個元素會當作它不存在一樣遞補其位置），一樣可用 top、bottom、left、right來調整該元素位置。position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。

4. position:fixed「固定」指的是相對於整個視窗最左上角的位置（此元素也會飄起來，下一個元素一樣當作它不存在而遞補其位置），可用 top、bottom、left、right來調整該元素位置，不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。

5. 當position:relative包著position:absolute的時候，後者就會以前者的位置為基準，而非整個視窗。

十六、讓滑鼠滑過標題時不再跳動

1. 先在.blockTitle的上一層.blockHead中加上position:relative

   .blockHead {
       position: relative;
       text-align: center;
   }

    

2. 然後在.blocktool::after中加入position: absolute即可

   .block:hover .blocktool::after {
       略
       position: absolute;
   }

    

3. 利用這種方法，可以替區塊加入許多工具喔！例如關閉區塊、或直接連到進階區塊等。