2024 網頁x人因xDjango 實務課程 12 CSS 大全

閱讀時間約 13 分鐘

前言

那麼今天要來教大家,如何實現各種排版,以及不同的 CSS 可以做出怎樣的效果。

整理好你的思緒,深深吸口氣,讓我們在 2024 這嶄新的一年當中,開始新的學習之旅吧。



字體相關

color

設定文字的顏色。

<p style="color: blue;">這是藍色文字。</p>
raw-image


font-size

定義文字的大小。

<p style="font-size: 20px;">這是20px大小的文字。</p>
raw-image


font-family

指定文字的字體系列。

<p style="font-family: Arial, sans-serif;">這是Arial字體的文字。</p>
raw-image



font-style

設置文字的風格,如正常、斜體或傾斜。

  • normal:正常字體樣式,不使用斜體。
  • italic:斜體字體樣式,使用字體的斜體版本(如果有的話)。
  • oblique:傾斜的字體樣式,與斜體相似,但少用。在某些字體中,oblique可能與italic看起來相同,這取決於字體自身的設計。
<p style="font-style: italic;">這是斜體文字。</p>
raw-image


文字排版

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>
raw-image


line-height

設置行間距,即行的基線之間的距離。

<p style="line-height: 2;">這是行高為2的文字。</p>
<p >這是行高為0的文字。</p>
raw-image


letter-spacing

調整字符間的間距。

<p style="letter-spacing: 4px;">每個字母間距4px。</p>
raw-image


word-spacing

調整單詞之間的間距。

<p style="word-spacing: 20px;">單詞 間距20px。</p>
raw-image


背景

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>
raw-image




background-color

指定元素的背景顏色。

<div style="background-color: lightblue; width: 100px; height: 100px;"></div>
raw-image


排版大小

margin

設定元素外邊距,即元素邊框外的空間。

<div style="margin: 20px; border: 1px solid black;">外邊距20px。</div>
raw-image


padding

設定元素內邊距,即元素內容與邊框之間的空間。

<div style="padding: 20px; border: 1px solid black;">內邊距20px。</div>
raw-image


border

定義元素邊框的樣式、寬度和顏色。

<div style="border: 5px solid red;">5px紅色邊框。</div>
raw-image


width / height

指定元素的寬度和高度。

<div style="width: 100px; height: 100px; background-color: lightgray;"></div>
raw-image


區塊內排版

flex-direction

決定Flex容器中子元素的排列方向,如橫向或縱向。

  • row:橫向排列子元素。
  • column:縱向排列子元素。
<div style="display: flex; flex-direction: row;">
<div>第一行</div>
<div>第二行</div>
</div>
raw-image


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>
raw-image


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>
raw-image


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>
raw-image


特殊效果

文本區塊透明背景

將文本放在一個透明背景的容器中,並設置文字居中對齊。

<!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>
raw-image


彈性盒子排版

使用彈性盒子布局來排列一組元素。

<!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>
raw-image


結論

感謝你看到這邊,把這些內容持之以恆地讀完肯定不容易,你辛苦啦!

今天我們學到了各種 css 屬性的用法,以及看見實際的樣子。

接下來,我們將實際體驗,利用 css 設計一個卡片。

    8會員
    18內容數
    這裡是來自 高科大 資管系二年級的學生,希望能在學習的過程中,也分享這些知識給大家。
    留言0
    查看全部
    發表第一個留言支持創作者!
    你可能也想看
    2024年網頁設計的5大新興趨勢2024年網頁設計將帶來一系列新興趨勢,包括3D互動元素的應用、深色模式的普及、超越扁平設計、進階動畫的重要性和模板的普及化。這些趨勢將為網頁設計帶來更多的創造力和可能性,同時提升用戶體驗和吸引力。
    Thumbnail
    avatar
    littledog littlemonkey
    2024-03-11
    網頁設計軟體熱門問題總結Q:什麼是Frontpage網頁設計軟體? Microsoft FrontPage曾是微軟公司推出的一款網頁設計與管理工具,目前已不再生產。它一度作為入門級網頁設計者的首選,而微軟隨後推出了Expression Web和Microsoft SharePoint Designer來取代...
    Thumbnail
    avatar
    Arthur
    2024-03-10
    網頁設計公司:全方位維護和售後服務的重要性擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要,他們擁有豐富的經驗和技能,以提升客戶的在線存在感和業務成果。
    Thumbnail
    avatar
    Janet
    2024-02-27
    學校網頁設計的重要性和最佳實踐在數位時代,擁有一個設計良好且使用者友善的網站對學校來說至關重要,能夠有效地與學生、家長和更廣泛的社區進行溝通。學校網站作為一個數位樞紐,提供重要資訊、展示成就,並培養社群感。本文將探討學校網頁設計的重要性,主要元素和最佳實踐,以幫助學校打造引人入勝的線上存在感。
    Thumbnail
    avatar
    Kant Chan
    2024-02-17
    WordPress網頁設計:大品牌使用的考慮因素這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面,提供了對於WordPress在大品牌中使用的觀點和見解。
    Thumbnail
    avatar
    Kant Chan
    2024-02-16
    WordPress 網頁設計教學大全WordPress 是一個開源的內容管理系統,提供了豐富的功能和擴展性,成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後,提供了一些常見問題解答。
    Thumbnail
    avatar
    Kant Chan
    2024-02-04
    網頁製作平台比較:9個免費平台特色、優缺點及難易度這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly,有助於讀者找到適合自己的網站製作工具。
    Thumbnail
    avatar
    Arthur
    2024-01-19
    專業網頁設計服務專業網頁設計服務能夠提升企業形象,增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
    Thumbnail
    avatar
    Kant Chan
    2024-01-12
    網頁設計全攻略,一文教你從基礎到進階,新手也OK!在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
    Thumbnail
    avatar
    數位知識百科
    2024-01-12
    【網頁數據追蹤/分析】沒有帳戶自學GA4? 輕鬆取得免費Google Analytics Demo帳戶,搭配實用的分析小本文介紹了 Google Analytics 4(GA4)示範帳戶的取得方式,並提供了幾種 GA4 分析小練習,讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習,旨在幫助讀者更熟悉 GA4 這個工具。
    Thumbnail
    avatar
    Josie數位行銷打滾記|廣告投放x數據追蹤分析
    2024-01-09