CSS基礎屬性

【三】基礎屬性

【1】高度和寬度

（1）參數

width（寬度）：用于設置元素的寬度。可以使用具體的數值（如像素值）或百分比來指定寬度。
height（高度）：用于設置元素的高度，使用方式與 width 屬性類似。
max-width（最大寬度）：用于設置元素的最大寬度，防止元素的寬度超過指定的值。
max-height（最大高度）：用于設置元素的最大高度，防止元素的高度超過指定的值。
min-width（最小寬度）：用于設置元素的最小寬度，確保元素的寬度不會小于指定的值。
min-height（最小高度）：用于設置元素的最小高度，確保元素的高度不會小于指定的值。
單位：像素（px）、百分比（%）

（2）注意事項

行內標簽無法設置高度和寬度，寫了也無法生效
行內標簽的高度是由其內容決定的，并且會根據內容的大小自動調整

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><meta charset="UTF8"><style>div, span{background-color: green;height: 50px;width: 50px;}</style>
</head>
<div>塊級標簽</div>
<br>
<span>行內標簽</span>
</html>

請添加圖片描述

【2】字體屬性

字體屬性用于控制文本的字體樣式和外觀

（1）參數

font-family（字體系列）：用于指定文本的字體系列。您可以通過指定多個字體名稱來創建字體回退機制，以確保在用戶計算機上找不到第一個字體時能夠使用備用字體。
font-size（字體大小）：用于設置文本的字體大小。可以使用像素（px）、百分比（%）或其他單位來指定字體大小。
font-weight（字體粗細）：用于設置文本的字體粗細。常用的取值包括 normal（普通）、bold（粗體）、bolder（更粗）和 lighter（更細）。
font-style（字體樣式）：用于設置文本的字體樣式，常用的取值包括 normal（普通）、italic（斜體）和 oblique（傾斜）
color （顏色）：可以使用預定義的顏色名稱（如 red、blue、green 等），也可以使用十六進制值（如 #ff0000 表示紅色）或 RGB 值（如 rgb(255, 0, 0) 也表示紅色）來指定顏色。

（2）示例

如果用戶計算機上安裝了 Arial 字體，則使用 Arial 字體顯示文本；如果沒有 Arial 字體，則使用 Helvetica 字體；如果連 Helvetica 字體也沒有，則使用 sans-serif 字體作為備選

p {font-family: Arial, Helvetica, sans-serif;
}

字體：大小24像素、加粗、斜體

p {font-size: 24px;font-weight: bold;font-style: italic;
}

【3】文字屬性

文字屬性用于控制文本的布局、間距和裝飾等

（1）參數

text-align（文本對齊）：用于設置文本在容器中的對齊方式。常用的取值包括 left（左對齊）、right（右對齊）、center（居中對齊）和 justify（兩端對齊）。
text-decoration（文本裝飾）：用于設置文本的裝飾效果，如下劃線、刪除線等。常用的取值包括 none（無裝飾）、underline（下劃線）、overline（上劃線）和 line-through（刪除線）。
text-transform（文本轉換）：用于控制文本的大小寫轉換。常用的取值包括 none（不轉換）、uppercase（轉換為大寫字母）和 lowercase（轉換為小寫字母）。
letter-spacing（字間距）：用于設置字母之間的間距。可以使用像素（px）或其他單位來指定間距值
text-indent （首行縮進）：該屬性用于指定文本塊中首行相對于其余行的縮進量。可以使用像素（px）、百分比（%）或其他單位來指定縮進值。

（2）示例

文本上劃線、轉換為大寫、字間距5個像素
首行縮進兩個字符、居中（比縮進優先級高）

p {text-align: center;text-decoration: overline;text-transform: uppercase;letter-spacing: 5px;text-indent: 2em;
}

【4】背景屬性

背景屬性用于設置元素的背景樣式，包括背景顏色、背景圖片、背景重復等

（1）參數

background-color（背景顏色）：用于設置元素的背景顏色。可以使用顏色名稱、十六進制值或 RGB 值來指定顏色。
background-image（背景圖片）：用于設置元素的背景圖片。可以使用圖片的 URL 來指定背景圖片。
background-repeat（背景重復）：用于設置背景圖片的重復方式。常用的取值包括 repeat（默認，水平和垂直重復）、repeat-x（水平重復）、repeat-y（垂直重復）和 no-repeat（不重復）
background-position（背景位置）：用于設置背景圖片的位置。可以使用關鍵詞（如 top、bottom、left、right）或像素（px）來指定位置。第一個參數控制左邊的距離，第二個參數是上距離。
background-attachment （背景附著）：該屬性用于指定背景圖片是否隨元素的滾動而滾動，或者固定在視口中的位置不動。
- scroll（默認值）：背景圖片會隨元素的滾動而滾動。
- fixed：背景圖片會固定在視口中的位置，不隨元素的滾動而滾動。
- local：背景圖片會隨元素內部內容的滾動而滾動，即背景圖片不會超出元素的邊界。
- inherit：從父元素繼承 background-attachment 的值。
- 注意：在移動設備上，fixed 值可能會導致背景圖片無法正常顯示
background-size 控制背景圖片的縮放比例和大小，屬性接受兩個參數，分別用于指定背景圖片的寬度和高度。常用的取值包括：
- auto（默認值）：保持背景圖片的原始大小。
- cover：將背景圖片等比例縮放，使其完全覆蓋背景區域。可能會裁剪圖片。
- contain：將背景圖片等比例縮放，使其完全適應背景區域。可能會在背景區域內留有空白。
- <length>：使用具體的長度值（如像素或百分比）來指定背景圖片的寬度和高度。
- <percentage>：使用百分比值來指定背景圖片的寬度和高度，相對于背景區域的大小。

（2）示例

背景圖片image、背景圖片重復（默認）
背景附著固定、圖片大小等比例縮放完全適應

div {width: 400px;height: 400px;background-image: url("image.jpg");background-attachment: fixed;background-size: contain;
}

【5】邊框屬性

設置元素的邊框樣式、寬度和顏色

（1）參數

border-width（邊框寬度）：可以使用具體的長度值（如像素）或預定義的關鍵字來指定邊框的寬度。常用的關鍵字包括 thin、medium 和 thick，分別代表細、中等和粗的邊框寬度。
border-style（邊框樣式）：可以使用預定義的樣式關鍵字或具體的樣式值來指定邊框的樣式。常用的樣式關鍵字包括 solid（實線）、dashed（虛線）、dotted（點線）、double（雙線）等。
border-color（邊框顏色）：可以使用顏色名稱、十六進制值、RGB 值或 HSL 值來指定邊框的顏色。
border-radius （邊框圓角）：
- 單個長度值：指定所有四個角的圓角半徑，例如 border-radius: 10px;。
- 兩個長度值：第一個值指定左上角和右下角的圓角半徑，第二個值指定右上角和左下角的圓角半徑，例如 border-radius: 10px 20px;。
- 四個長度值：分別指定左上角、右上角、右下角和左下角的圓角半徑，順序為順時針方向，例如 border-radius: 10px 20px 30px 40px;。

（2）示例

四周邊框
寬2個像素、虛線、紅色、圓角10像素

/*兩種方式等價，參數順序無所謂*/
div{border-width: 2px;border-style: dashed;border-color: red;border-radius: 10px;
}
div {border: 2px dashed red;border-radius: 10px;
}

僅左邊有邊框
寬4個像素、實線、藍色

div{border-left: 4px solid blue;
}

【6】顯示屬性display

控制元素在頁面中的顯示方式

（1）參數

block：將元素顯示為塊級元素，會獨占一行，并且默認情況下會在上下方向上產生一定的間距。塊級元素可以設置寬度、高度、內邊距和外邊距。
inline：將元素顯示為內聯元素，不會獨占一行，會在同一行內盡可能占據所需的空間。內聯元素不能設置寬度、高度、上下內邊距和上下外邊距。
inline-block：將元素顯示為內聯塊級元素，不會獨占一行，但可以設置寬度、高度、內邊距和外邊距。內聯塊級元素會在同一行內盡可能占據所需的空間。
none：將元素隱藏，不會在頁面中顯示。隱藏的元素不會占據空間，并且對頁面布局沒有影響。
table：用于設置元素的顯示類型為表格。該元素將按照表格的方式進行布局和顯示，類似于HTML中的<table>元素

（2）示例

行內標簽也可以設置寬度和高度

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><meta charset="UTF8"><style>
div, span {background-color: aqua;height: 50px;width: 50px;
}
span{display: block;
}</style>
</head>
<div>塊級標簽</div>
<br>
<span>行內標簽</span>
</html>

請添加圖片描述

隱藏

display:none    隱藏標簽(重點)  頁面上不會保留位置也不顯示
visibility:hidde  也是隱藏標簽 但是位置會保留

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><meta charset="UTF8"><style>p, div, span{background-color: aqua;}p {display: none;}div {visibility: hidden;}</style>
</head>
<p>段落標簽</p>
<div>塊級標簽</div>
<br>
<span>行內標簽</span>
</html>

請添加圖片描述

【7】溢出屬性overflow

溢出屬性（overflow property）用于控制當內容超出容器尺寸時的處理方式。
應用于具有限定尺寸的容器

（1）參數

visible：默認值。當內容超出容器尺寸時，會顯示在容器外部，可能會覆蓋其他元素。這意味著溢出的內容會在容器外部可見。
hidden：當內容超出容器尺寸時，會被裁剪隱藏，不會顯示在容器外部。溢出的內容將被隱藏，無法通過滾動或其他方式查看。
scroll：當內容超出容器尺寸時，會顯示滾動條，以便用戶可以通過滾動來查看溢出的內容。即使內容沒有超出容器尺寸，也會顯示滾動條，但是處于禁用狀態。
auto：當內容超出容器尺寸時，會根據需要顯示滾動條。如果內容沒有超出容器尺寸，不會顯示滾動條。

（2）示例

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><meta charset="UTF8"><style>div {height: 100px;width: 100px;border: 5px solid red;float: left;margin: 20px;}.d1 {overflow: visible;}.d2 {overflow: hidden;}.d3 {overflow: scroll;}.d4 {overflow: auto;}</style>
</head>
<body>
<span><div class="d1">人類文明可能發生技術突變的領域有：物理學、生物學、計算機科學、尋找外星文明。其中尋找外星文明是所有技術領域中變數最大的，一旦發生，其影響力將超過另外三個領域的總和。</div><div class="d2">人類文明可能發生技術突變的領域有：物理學、生物學、計算機科學、尋找外星文明。其中尋找外星文明是所有技術領域中變數最大的，一旦發生，其影響力將超過另外三個領域的總和。</div><div class="d3">人類文明可能發生技術突變的領域有：物理學、生物學、計算機科學、尋找外星文明。其中尋找外星文明是所有技術領域中變數最大的，一旦發生，其影響力將超過另外三個領域的總和。</div><div class="d4">人類文明可能發生技術突變的領域有：物理學、生物學、計算機科學、尋找外星文明。其中尋找外星文明是所有技術領域中變數最大的，一旦發生，其影響力將超過另外三個領域的總和。</div>
</span></body>
</html>

請添加圖片描述

頭像

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><meta charset="UTF8"><style>body {margin: 0;background-color: #4e4e4e;}#d1 {height: 200px;width: 200px;border-radius: 50%;border: 3px solid white;margin: 0 auto;overflow: hidden;}#d1 > img {width: 100%; /* 占標簽100%比例 */}</style>
</head>
<body>
<div id="d1"><img src="image.jpg" alt="">
</div></body>
</html>

【8】透明度opacity

指元素或顏色的可見程度

（1）參數

opacity 屬性：
- opacity 屬性用于設置元素的整體透明度。
- 它的取值范圍是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
- 透明度的值會影響元素及其內容的可見程度。
- 例如，設置 opacity: 0.5; 將使元素半透明，即可見度為 50%。
rgba() 函數：
- rgba() 函數用于設置顏色的透明度。
- 它接受四個參數：紅色值、綠色值、藍色值和透明度值。
- 透明度值的范圍是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
- 例如，background-color: rgba(255, 0, 0, 0.5); 將設置背景色為紅色，并將透明度設置為 50%。

（2）示例

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><meta charset="UTF8"><style>#p1 {opacity: 0.5;}#p2 {background-color: rgba(255, 0, 0, 0.5);}</style>
</head>
<body>
<p id="p1">段落二</p>
<p id="p2">段落一</p>
</body>
</html>