2024-03-14|閱讀時間 ‧ 約 30 分鐘

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

前言

那麼今天要來教大家，如何實現各種排版，以及不同的 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 設計一個卡片。

分享至

成為作者繼續創作的動力吧！

2024 讓你 8分鐘懂機器學習

追蹤

從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

2024 網頁x人因xDjango 實務課程 11 選擇器

咖啡因學習教室的其他內容

你可能也想看

發表回應

成為會員後即可發表留言

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

前言

字體相關

color

文字排版

text-align

line-height

letter-spacing

word-spacing

背景

background-image

background-color