梅花問路

梅花的語法筆記

痞客幫新手入門

一些位置的資訊也可以參考痞客邦官方釋出的CSS架構圖(由此進)

關於梅花與CSS語法的相遇

做了一張新的標示圖放在封面囉，舊的也留存在此

目錄

快速定位(目錄區)__點擊文字可到達相對應的筆記區

整體背景區(body{})、封面橫幅區(#banner、#header)、橫幅區的標題(#banner h1a、#header h1 a)、

整體區塊的位置(#container)、側欄區塊 (#links)、文章區  (#content)、修改字體需要知道的語法、

其他筆記、#margin、#padding

此處標示紅字的語法，要定位或是更改這些語法在自己樣式裡面的位置，進到自己的CSS路徑是

右上角點自己的頭像我的部落格後台樣式管理部落格CSS原始碼

搜尋語法的話可以按Ctrl+F搜尋即可~ 

如果梅花所提供的語法尋找名稱你怎麼樣都找不到的話請參考以下文章利用開發人員工具尋找可能的語法位置

【梅花的CSS學習】用「開發人員工具」檢視區塊語法的名稱

(筆記正文開始)

整體背景區(body{}) (推薦美美的背景素材網，註冊每日可以免費下載兩張)

更換圖片的做法可以參考下面介紹封面橫幅區更換圖片的設定方式，一樣的找出圖片網址帶入

或者也可以使用"我的部落格後台樣式管理文字背景設計工具基本設定背景圖片"的地方替換成自己想要的背景圖網址

底下的背景圖片固定可以針對這張背景圖做進階設定

如果你跟我的一樣圖片不夠大張，可以選擇"固定不捲動"

新發現！ 也可以加入一段語法 background-size:cover; 

     讓它變成全版圖片！！ (參考資料: http://blog.weibbb.com/2014/05/css.html )

封面橫幅區(#banner、#header) (推薦美美的天空系列橫幅_註冊每日可免費下載2張) (蒐集一些好看的橫幅Banner(❆持續更新))

我的是在 #banner 這段語法裡面找到，但有些人的可能也要找看看 #header

如果想要更換最上方橫幅的圖片，可以直接更改CSS這段語法，或是加入這段語法

background:url(輸入圖片的網址);

裡面的圖片大家可以挑選自己喜歡的圖之後存到相簿，再找出圖片的網址(通常是.jpg、.png、.gif之類的圖片檔)

找好喜歡的圖存到相簿之後，按底下的

複製出來的東西通常長這樣

我們把紅框處標示的這種.jpg、.png、.gif之類結尾的圖片檔複製出來貼到我們的樣式CSS語法理面就可以囉!

若是你的banner套用之後跟我遇到的狀況一樣，寬度不夠，圖片的網址https://pic.pimg.tw/你的帳號/XXXXXXXXX_I.png

把這個『_I』大膽的移除吧! 你就可以得到一張原尺寸的圖片網址，用在banner就可以成功變成原始檔大小的圖片囉!

上傳到相簿的照片可能會有這些結尾，分別代表的意思如下(參考出處: 圖片大小迷思)

新發現！ 也可以加入一段語法 background-size:cover; 

     讓它變成原始檔大小的圖片！！

調整橫幅區的大標題（#banner h1）、副標題（#banner h2）

調整字體字型、大小、粗細等等的設定，詳細看這裡

我想讓標題跟內文有點區分，給他加個陰影上去

加上這段語法 text-shadow:3px 3px 3px #cccccc; 就可以做到囉!

來看一下標題加上陰影前後的變化！

Before                                                           After

如果你調整#banner h1或是#header h1都沒有改變

可以試試看調整 #banner h1 a或是#header h1 a

我的部落格標題字體大小就是在#header h1 a才有反應

因為每個人套用的版型語法寫法都有一點不太一樣，所以可以都試試看喔！

橫幅區的標題(#banner h1a、#header h1 a)

#header h1 a:hover 這是指游標經過標題的時候會產生的變化

                                我套用的是Dribs&Drabs教學的這段語法

                                #banner h1 a:hover{color: #fc3a63; position: relative; top: 1px; left: 1px;}

                                但發現只套用一個地方好像不行

                               也稍微改一下.... #header h1 a:hover{color: #fc3a63; position: relative; top: 1px; left: 1px;}

整體區塊的位置(#container)

我不知道自己幹了啥讓我的整個區塊往下了，“跳到主文”的上面那段空間有點高

經過我不懈的努力終於找到這段語法在#container裡面

就是修改這一段margin(上邊界)，我把它上邊界調成20px試試看，終於成功長高囉~~

側欄區塊 (#links)  (其他CSS名稱搜尋請參考此)

三欄式樣式的第一欄 #links-row-1

             三欄式樣式的第二欄 #links-row-2

誰來我家 (#visitor.box)

  .box-title      區塊標題

  .box-text      區塊內容

  .li a img        訪客頭像

  .box-more

  .a                  所有訪客列表

搜尋區塊

#search                    搜尋

#search .box-title    搜尋標頭

#search .box-text    搜尋內容區塊

#search-target        搜尋輸入文字欄位

#search-send            搜尋確定鈕

參觀人氣區塊

#counter.box           參觀人氣

  .box-title                 側欄區塊標題

  .box-text                 側欄區塊內容

#countr .box-text span    人氣數字

所有側欄自訂欄位

  .folder    所有自訂欄位

  .folder .box-title    所有自訂欄位標頭

  .folder .box-text    所有自訂欄位內容區塊

文章區  (#content)

調整文章標題 .title h2 a

調整文章內文.article-content{     

line-height    調整文章內文行距 (單位可能是px、em、%)

margin          文章內文和邊界之間的距離(單位可能是px、em)

或是直接設定在同一行 margin:上邊界 右邊界 下邊界 左邊界;

padding        留白的距離

或是直接設定在同一行 padding:上留白 右留白 下留白 左留白;

修改字體需要知道的語法:

color : #999999 ;                  文字色彩(色碼可以參考對照表 https://www.ifreesite.com/color/ )

                                              色碼也可以我的部落格後台樣式管理文字背景設計工具背景顏色   在這裏面也可以挑顏色找出對應色碼

                                               
font-family : 標楷體 ;              文字字型(可以有 新細明體、標楷體、Arial、 Impact、 monospace、 Microsoft JhengHei )

                                               (點我看更多字體)
font-size : 9pt ;                      文字大小
font-weight:bold ;                   粗體(設定字體厚度bold (厚)、bolder (更厚)、及 normal (正常))
font-style:italic ;                     斜體
vertical-align:super ;                文字上標
vertical-align:sub ;                   文字下標
text-decoration:underline ;     文字加下底線
text-decoration:overline ;       文字上加上一條線
text-decoration:line-through ; 刪除線
text-align:right ;                     文字靠右對齊 
text-align:left ;                       文字靠左對齊 
text-align:center ;                  文字置中對齊 

border-style:solid   實線邊框  (預覽參照)

border-width:          設定邊框寬度(可以是thin (薄)、medium (中等)、thick (厚)或是直接設定數字) (預覽參照)

關於字體（有一些系統可以認得中文，如果中文無法辨識，就加進英文的名稱喔！）

微軟正黑體=Microsoft JhengHei
新細明體 =PMingLiU
細明體=MingLiU
標楷體=DFKai-sb

關於圖片(尚未實作，先留存筆記)

可以讓圖片不占版面，滑鼠過去自動變大(不會有晃動或是被裁掉的情況)  https://www.blog3c.net/blog/post/306506060

關於排名

提高SEO、提高網站排名(尚未實作，先留存筆記)  https://www.blog3c.net/blog/post/322856362

---------------------------------

彈出式語法研究(尚未嘗試)

在#links-row-1增加縮進去的數值
left: -100px;
加上滑鼠移過去欄位回正的數值
#links-row-1:hover{
left: 0px;
}

文章最後面有補充上方藍色BAR右上五個選項(我原本以為是字但其實它是圖)更改的方式(尚未嘗試)

https://smallwu36.pixnet.net/blog/post/46006311

8種自學Python的資源  https://tammy-discovery.com/best-python-resources/

筆記參考資料

-1  CSS語法學習網站:  https://www.1keydata.com/css-tutorial/tw/syntax.php

-2  小白鯨 初心小格 不懂CSS語法也可以輕鬆修改痞客邦部落格  https://sinea100.pixnet.net/blog/post/170605818

-3 靜茉帕然 簡易CSS語法整理  https://mopa.pixnet.net/blog/post/42506008

-4 Dribs&Drabs教學-連結特效的語法設定  https://www.dribs-drabs.com/blog/post/321563384

-5 自訂ICON

自訂部落格ICON  https://www.favicon.cc/

一堆可以下載的ICON(需要自行轉檔成.ico)  https://icons8.cn/icons/set/%E6%A2%85%E8%8A%B1

圖標產生器(可以匯入圖片產生.ico)  https://www.ifreesite.com/favicon/

-6 製作FB粉專iframe  https://woowohsu.pixnet.net/blog/post/351271084-css-editor

-7 推薦的背景、橫幅素材蒐集網站(免費註冊每日可以下載兩張的扣打)  https://zh.pngtree.com/free-backgrounds-photos/%E7%B4%94%E7%99%BD%E8%83%8C%E6%99%AF?pattern=vertical#masList

-8 痞客邦官方CSS架構圖  http://pic.pimg.tw/pixnetvisual/1187010393.gif

-9用CSS做出漸層顏色背景  https://www.wibibi.com/info.php?tid=CSS3_Gradients_%E6%BC%B8%E5%B1%A4%E6%95%88%E6%9E%9C

-10 各種用語法做出來的觸發式圖片特效 (hover應用)  https://www.imagehover.io/

   質感級的hover應用    https://miketricking.github.io/bootstrap-image-hover/