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
查看全部
