2024 網頁x人因xDjango 實務課程 12 CSS 大全
閱讀時間約 13 分鐘
前言
那麼今天要來教大家，如何實現各種排版，以及不同的 CSS 可以做出怎樣的效果。
整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。
字體相關
color
設定文字的顏色。
<p style="color: blue;">這是藍色文字。</p>
font-size
定義文字的大小。
<p style="font-size: 20px;">這是20px大小的文字。</p>
font-family
指定文字的字體系列。
<p style="font-family: Arial, sans-serif;">這是Arial字體的文字。</p>
font-style
設置文字的風格，如正常、斜體或傾斜。
normal：正常字體樣式，不使用斜體。italic：斜體字體樣式，使用字體的斜體版本（如果有的話）。oblique：傾斜的字體樣式，與斜體相似，但少用。在某些字體中，oblique可能與italic看起來相同，這取決於字體自身的設計。
<p style="font-style: italic;">這是斜體文字。</p>
文字排版
text-align
控制元素內文本的水平對齊方式，如左對齊、右對齊、居中或兩端對齊。
left：文本左對齊。right：文本右對齊。center：文本居中對齊。justify：文本兩端對齊，自動調整字間距來達到對齊效果。
<p style="text-align: left;">這段文本左對齊。</p>
<p style="text-align: right;">這段文本右對齊。</p>
<p style="text-align: center;">這段文本居中對齊。</p>
<p style="text-align: justify;">這段文本兩端對齊，自動調整字間距來達到對齊效果。</p>
line-height
設置行間距，即行的基線之間的距離。
<p style="line-height: 2;">這是行高為2的文字。</p>
<p >這是行高為0的文字。</p>
letter-spacing
調整字符間的間距。
<p style="letter-spacing: 4px;">每個字母間距4px。</p>
word-spacing
調整單詞之間的間距。
<p style="word-spacing: 20px;">單詞 間距20px。</p>
背景
background-image
設置元素的背景圖像。
<div style="background-image: url('https://d2a6d2ofes041u.cloudfront.net/resize?norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2Fce230140-ac2b-4965-850d-233b2f747cd8.jpg&width=140&sign=wjOQGc4bYUn26rZrhFSRiERuf0GvDApLoJdBLkXMJ7w'); height: 200px; width: 200px;"></div>
background-color
指定元素的背景顏色。
<div style="background-color: lightblue; width: 100px; height: 100px;"></div>
排版大小
margin
設定元素外邊距，即元素邊框外的空間。
<div style="margin: 20px; border: 1px solid black;">外邊距20px。</div>
padding
設定元素內邊距，即元素內容與邊框之間的空間。
<div style="padding: 20px; border: 1px solid black;">內邊距20px。</div>
border
定義元素邊框的樣式、寬度和顏色。
<div style="border: 5px solid red;">5px紅色邊框。</div>
width / height
指定元素的寬度和高度。
<div style="width: 100px; height: 100px; background-color: lightgray;"></div>
區塊內排版
flex-direction
決定Flex容器中子元素的排列方向，如橫向或縱向。
row：橫向排列子元素。column：縱向排列子元素。
<div style="display: flex; flex-direction: row;">
<div>第一行</div>
<div>第二行</div>
</div>
flex-wrap
控制Flex容器是單行顯示還是多行顯示，以及如何處理子元素的換行。
nowrap：不換行。wrap：自動換行。
<div style="display: flex; flex-wrap: wrap; width: 200px;">
<div style="width: 100px; height: 100px; background-color: lightblue;">1</div>
<div style="width: 100px; height: 100px; background-color: lightcoral;">2</div>
<div style="width: 100px; height: 100px; background-color: lightgreen;">3</div>
</div>
justify-content
在Flex容器的主軸上對齊Flex子項，如啟動、結束、中心、兩端對齊或均勻分佈。
flex-start：子元素對齊容器的開始位置。center：子元素居中對齊。space-between：子元素間距平均分布。
<div style="display: flex; justify-content: space-between; width: 300px;">
<div style="width: 100px; height: 100px; background-color: lightblue;">1</div>
<div style="width: 100px; height: 100px; background-color: lightcoral;">2</div>
</div>
align-items
在Flex容器的交叉軸上對齊Flex子項，如啟動、結束、中心、基線對齊或拉伸填滿。
flex-start：子元素在交叉軸的開始位置對齊。center：子元素在交叉軸居中對齊。stretch：子元素拉伸填滿交叉軸方向的高度。
<div style="display: flex; align-items: center; height: 100px;">
<div style="width: 100px; height: 50px; background-color: lightblue;">低</div>
<div style="width: 100px; height: 100px; background-color: lightcoral;">高</div>
</div>
特殊效果
文本區塊透明背景
將文本放在一個透明背景的容器中，並設置文字居中對齊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Background Text</title>
<style>
.text-container {
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="text-container">
<p>This is a text with transparent background</p>
<p>More text here...</p>
</div>
</body>
</html>
彈性盒子排版
使用彈性盒子布局來排列一組元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #ff7e5f;
color: white;
text-align: center;
line-height: 100px;
font-family: Arial, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
結論
感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！
今天我們學到了各種 css 屬性的用法，以及看見實際的樣子。
接下來，我們將實際體驗，利用 css 設計一個卡片。
留言0
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
2024年網頁設計將帶來一系列新興趨勢，包括3D互動元素的應用、深色模式的普及、超越扁平設計、進階動畫的重要性和模板的普及化。這些趨勢將為網頁設計帶來更多的創造力和可能性，同時提升用戶體驗和吸引力。
Q：什麼是Frontpage網頁設計軟體？
Microsoft FrontPage曾是微軟公司推出的一款網頁設計與管理工具，目前已不再生產。它一度作為入門級網頁設計者的首選，而微軟隨後推出了Expression Web和Microsoft SharePoint Designer來取代...
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要，他們擁有豐富的經驗和技能，以提升客戶的在線存在感和業務成果。
在數位時代，擁有一個設計良好且使用者友善的網站對學校來說至關重要，能夠有效地與學生、家長和更廣泛的社區進行溝通。學校網站作為一個數位樞紐，提供重要資訊、展示成就，並培養社群感。本文將探討學校網頁設計的重要性，主要元素和最佳實踐，以幫助學校打造引人入勝的線上存在感。
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面，提供了對於WordPress在大品牌中使用的觀點和見解。
WordPress 是一個開源的內容管理系統，提供了豐富的功能和擴展性，成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後，提供了一些常見問題解答。
這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly，有助於讀者找到適合自己的網站製作工具。
專業網頁設計服務能夠提升企業形象，增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
本文介紹了 Google Analytics 4（GA4）示範帳戶的取得方式，並提供了幾種 GA4 分析小練習，讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習，旨在幫助讀者更熟悉 GA4 這個工具。
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
2024年網頁設計將帶來一系列新興趨勢，包括3D互動元素的應用、深色模式的普及、超越扁平設計、進階動畫的重要性和模板的普及化。這些趨勢將為網頁設計帶來更多的創造力和可能性，同時提升用戶體驗和吸引力。
Q：什麼是Frontpage網頁設計軟體？
Microsoft FrontPage曾是微軟公司推出的一款網頁設計與管理工具，目前已不再生產。它一度作為入門級網頁設計者的首選，而微軟隨後推出了Expression Web和Microsoft SharePoint Designer來取代...
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要，他們擁有豐富的經驗和技能，以提升客戶的在線存在感和業務成果。
在數位時代，擁有一個設計良好且使用者友善的網站對學校來說至關重要，能夠有效地與學生、家長和更廣泛的社區進行溝通。學校網站作為一個數位樞紐，提供重要資訊、展示成就，並培養社群感。本文將探討學校網頁設計的重要性，主要元素和最佳實踐，以幫助學校打造引人入勝的線上存在感。
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面，提供了對於WordPress在大品牌中使用的觀點和見解。
WordPress 是一個開源的內容管理系統，提供了豐富的功能和擴展性，成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後，提供了一些常見問題解答。
這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly，有助於讀者找到適合自己的網站製作工具。
專業網頁設計服務能夠提升企業形象，增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
本文介紹了 Google Analytics 4（GA4）示範帳戶的取得方式，並提供了幾種 GA4 分析小練習，讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習，旨在幫助讀者更熟悉 GA4 這個工具。