1. 什麼是 HTML 和 CSS ？
1-1. HTML（Hypertext Markup Language）: HTML 是網頁的基本結構語言，用來定義網頁的內容和結構。
● 功能：負責建立文字、圖片、表格、連結等元素，並把它們組織成網頁的基本骨架。
● 例子：使用標籤如 <h1>、<p>、<a> 來定義標題、段落和超連結。
1-2. CSS（Cascading Style Sheets）: CSS 是用來控制網頁的外觀樣式。
● 功能：負責美化網頁，設置顏色、字型、排版和各種視覺效果，使網頁呈現更具吸引力的外觀。
● 例子：使用 CSS 可以為標題設置顏色，為按鈕設置動畫效果，或調整不同螢幕尺寸下的排版樣式。
在痞客邦使用 HTML 和 CSS 可以大幅提高部落格的設計靈活性，讓每位創作者根據喜好自訂風格。
2. 在痞客邦使用 HTML 的基礎教學
2-1. 痞客邦HTML設定
▼ 痞客邦html設定要至 "側欄管理" 中做設定
▼ 你可以從設定圖標中嵌入html語法，再用css語法做裝飾擺放，或是你也可以直接新增版位自訂一個版位
2-2. HTML基本標籤介紹
常用的HTML標籤包括：
- <h1> ~ <h6>：標題標籤，<h1>是最大標題，依序排列。
- <p>：段落標籤，多為放入一般文字。
- <a href="URL">：超連結標籤。
- <img src="URL" alt="圖片描述">：圖片標籤，顯示圖片並且標註圖片名稱。
- <div>和 <span>：容器標籤，分別適合區塊和行內元素的排版。
2-3. HTML 在痞客邦的應用範例
我們開啟一個新增版位，並輸入以下HTML語法
|
<h2>歡迎來到我的痞客邦部落格</h2> |
你就會得到以下的版位，會根據你目前版位設置的CSS顏色、大小、間距而有所不同。
3. CSS 基礎與常用樣式
3-1. CSS選擇器介紹
CSS 選擇器可以針對特定元素進行設計：
- 元素選擇器：針對標籤名稱，如 p { color: blue; }
- 類別選擇器：使用.classname 來設定，適合重複設計的元素。
- ID 選擇器：使用#idname，適合獨一無二的元素。
3-2. 常用 CSS 屬性
常用的樣式屬性有：
- color：文字顏色。
- font-size：字體大小。
- background-color：背景顏色。
- margi和padding：外距和內距。
3.3 CSS 在痞客邦中設定CSS
在痞客邦中，CSS 可用於自訂部落格版面：
進入痞客邦「樣式管理」的 CSS 自訂區塊。
加入自訂的 CSS 代碼來改變文字顏色或背景。
如果你想要一個屬於自己的痞客邦，你則需要懂一些基本的html及css，再一個個做調整了解變化，這樣才能更了解編排的效果。
4. 痞客邦 HTML/CSS 設定步驟
4-1. 開啟側欄管理並選擇 HTML 模式
痞客邦支援「HTML」和「簡單排版」兩種模式，建議選擇 HTML 模式以取得更高的自訂權限。
4-2. 加入自訂 CSS
進入「自訂 CSS」區域後，可使用自訂 CSS 來調整部落格整體風格，例如更改字體、背景顏色、標題大小等。
4-3. HTML 與 CSS 的同步應用
透過 <div class="classname"> 和 CSS 搭配使用，可精確設計區塊的佈局和樣式。
5. 進階應用：自訂版面配置與元素設計
5-1. 如何利用網格系統進行排版
可以運用 CSS Flexbox 或 Grid 排版技術來創建響應式的版面。
5-2. 圖片和影片的自訂設計
加入圖片或影片時，可透過 CSS 控制大小、邊框樣式和間距，提升視覺效果。
6. 最佳化設計：提升部落格的閱讀體驗
6-1. 增加可讀性：字體和字距的設計
選擇合適的字體大小、行距和字距，讓文章內容更清晰易讀。
6-2. 配色建議
以簡約、清爽的配色為主，並在文字與背景顏色上保持對比，讓訪客閱讀時更輕鬆。
6-3. 對應不同裝置的響應式設計
使用 CSS 媒體查詢 (Media Queries)，確保部落格在手機和平板上都能完美呈現。
7. 在首頁中查看原始碼
▼ 在部落格首頁時按下鍵盤上的F12，即可查看目前頁面的編碼及設定，這就是開發者工具。
▼ 點選開發者右上角鼠標圖示及可選取網頁中所有的原件。
▼ 點選任一元件就會出現元件名稱及HTML設定等等，如果要做修改就可以參照元件名稱逐一做更動。
▼ 或許你第一次看到會一頭霧水，但其實你可以看一下痞客邦的HTML架構圖，就會發現其實都有規律可循。
▼ 我們用滑鼠點擊定部橫條，可以看到他分類於<div class="pixnavbar__top-bar">
▼那我們在css中就能以 .pixnavbar__top-bar{} 來對頂部橫條做修改
▼ 我們用滑鼠點擊部落格標題，可以看到他分類於<div id="banner">中
▼那我們在css中就能以 #banner{} 來對部落格做修改
本篇文章就主要介紹痞客邦的HTML應用及CSS語法應用，下一篇介紹如何在部落格中插入FB粉絲團視窗。維特學習筆記主要作為維特上網爬文了解，以及逐步試錯練習成果展示，維特參考的文章連結也都會放置在文章最末端，大家也要多多去支持原作者。也歡迎各位先進，如果有更好的方式或是你覺得如何更好，都請不要吝嗇多多指教。
打造屬於自己的痞客邦 - 維特學習筆記 - 目前瀏覽 Ep.1
3. 在側欄、文章中插入FB粉絲團 - Ep.2
4. 頁尾樣式修改 - Ep.3
5. 移除文章底部熱搜、猜你喜歡小廣告 – Ep.4
6. 移除、修改閒置廣告樣式 – Ep.5
7. 簡易快速更換文章間分隔線 – Ep.6
留言列表
遊戲攻略 (6)