Web應用課 第三講 文字、字型、背景、邊框、展示格式

安河桥北i發表於2024-06-06
Web

文字

對齊方式 text-align

CSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。text-align 並不控制塊元素自己的對齊，只控制它的行內內容的對齊。

  • left 把文字排列到左邊。預設值：由瀏覽器決定。
  • right 把文字排列到右邊。
  • center 把文字排列到中間。
  • justify 實現兩端對齊文字效果。
  • inherit 規定應該從父元素繼承 text-align 屬性的值。
h1{
    text-align: center;
}

行高 line-height

CSS 屬性用於設定多行元素的空間量，如多行文字的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。對於非替代的 inline 元素，它用於計算行盒（line box）的高度。
行高可用與對文字進行豎直居中，當行高與塊的高度相同時

.mydiv{
    text-align: center;
    background-color: aquamarine;
    font-size: 50px;
    line-height: 200px;
    height: 200px;
}

補充：長度單位

image
vh、vw在實際開發中使用較多

縮排 text-indent

text-indent屬效能定義一個塊元素首行文字內容之前的縮排量。一般使用em為單位

.mydiv{
    font-size: 20px;
    text-indent: 2em;
}

文字的修飾線外觀 text-decoration

image
案例：去除超連結預設自帶的下劃線

a{
    text-decoration:none;
}

text-decoration: none;                     /*沒有文字裝飾*/
text-decoration: underline red;            /*紅色下劃線*/
text-decoration: underline wavy red;       /*紅色波浪形下劃線*/

陰影 text-shadow

text-shadow為文字新增陰影。可以為文字與 text-decorations 新增多個陰影，陰影值之間用逗號隔開。每個陰影值由元素在X和Y方向的偏移量、模糊半徑和顏色值組成。
image

p:nth-child(1){
    text-shadow: 5px 5px 1px gold,
    5px -5px 2px red;
}

字型

大小 font-size

font-size CSS 屬性指定字型的大小。因為該屬性的值會被用於計算em和ex長度單位，定義該值可能改變其他元素的大小。

樣式 font-style

font-style CSS 屬性允許你選擇 font-family 字型下的 italic 或 oblique 樣式。

加粗 font-weight

font-weight CSS 屬性指定了字型的粗細程度。 一些字型只提供 normal 和 bold 兩種值。

字型 font-family

背景

background-color

CSS屬性中的background-color會設定元素的背景色, 屬性的值為顏色值或關鍵字”transparent”二者選其一。

background-image

CSS background-image 屬性用於為一個元素設定一個或者多個背景影像。
漸變色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))

background-size

background-size 設定背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。
cover是一定用圖片覆蓋div
contain 是圖片不能超div

background-position

為背景圖片設定初始位置。

background-attachment

CSS 屬性決定背景影像的位置是在視口內固定，或者隨著包含它的區塊滾動。

邊框

邊框樣式 border-style

border-style 是一個 CSS 簡寫屬性，用來設定元素所有邊框的樣式。
image

border-style: solid dotted dashed outset;
/* top | right | bottom | left */

border-style: dashed;
/* Apply to all four sides */

/* horizontal | vertical */
border-style: dotted solid;

/* top | horizontal | bottom */
border-style: hidden double dashed;

邊框寬度 border-width

border-width屬性可以設定盒子模型的邊框寬度。

/* 頂部 | 右側 | 底部 | 左側 */
border-width: 1px 2em 0 4rem;

邊框顏色 border-color

CSS屬性border-color 是一個用於設定元素四個邊框顏色的快捷屬性： border-top-color, border-right-color, border-bottom-color, border-left-color

邊框角半徑 border-radius

CSS 屬性 border-radius 允許你設定元素的外邊框圓角。當使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓。這個(橢)圓與邊框的交集形成圓角效果。
該屬性是一個 簡寫屬性，是為了將這四個屬性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 簡寫為一個屬性。

border-radius: 50%;
/*半徑為邊長的一半，此時邊框是圓形*/

表格邊框是否緊鄰 border-collapse

border-collapse CSS 屬性是用來決定表格的邊框是分開的還是合併的。在分隔模式下，相鄰的單元格都擁有獨立的邊框。在合併模式下，相鄰單元格共享邊框。

td{
    width: 20px;
    height: 20px;
    border-width: 10px;
    border-style: solid;
}
table{
    border-style: solid;
    border-collapse: collapse;
    border-width: 10px;
}

元素展示格式

display屬性

block 塊級 div預設為塊級

  • 獨佔一行
  • width、height、margin、padding均可控制
  • width預設100%

inline 行級 span預設為行級

  • 可以共佔一行
  • width與height無效，水平方向的margin與padding有效，豎直方向的margin與padding無效
  • width預設為本身內容寬度

inline-block img預設

  • 可以共佔一行
  • width、height、margin、padding均可控制
  • width預設為本身內容寬度

white-space空白處理

white-space CSS 屬性是用來設定如何處理元素中的 空白 (en-US)。
image

overflow + text-overflow 處理未顯示的溢位內容

overflow 是 CSS 的簡寫屬性，其設定了元素溢位時所需的行為——即當元素的內容太大而無法適應它的區塊格式化上下文時。它是 overflow-x 和overflow-y的 簡寫屬性 。
示例：滾動視窗顯示溢位內容

div{
    width: 100px;
    height: 100px;
    background-color: lightblue;
    overflow: scroll;
}

示例：用省略號表示橫向溢位內容

div{
    width: 100px;
    height: 100px;
    background-color: lightblue;
    white-space: nowrap;
    overflow:hidden;/*超出內容隱藏*/
    text-overflow: ellipsis;/*用一個省略號來表示被截斷的文字，只對橫向超出起作用*/
}

問題搜尋教學

如何豎直居中一個位於div中的img?
Google搜尋 Stack Overflow

div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    text-align: center;
}

img{
    width: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

相關文章