css樣式表屬性

對于一個元素，瀏覽器本身是有一套默認的樣式表的，如果服務器端沒有指定，那么就是使用瀏覽器的樣式設置；如果指定了，那么就使用服務器端指定的樣式。瀏覽器的樣式信息如下：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-i7M3kMnI-1692416019900)(images/browserDefaultCSS.png)]

color

用于設置元素內部文字的顏色，顏色的設置方式：

• 預設值：一些定義好的單詞，每個單詞都表征一種顏色。
• 三原色：光學三原色（紅、綠、藍），每個原色可以使用0 - 255之間的數字來表示，一共三個原色，稱之為色值。

  rgb表示法：
  rgb(0, 255, 0, 0.5) -- 順序為紅、綠、藍、透明度，紅綠藍數字為0 - 255，透明度為0 - 1(可以為小數)hex表示法
  #000000            -- 順序紅綠藍，用16進制表示數字0 - 255，這種好像不能表示透明度。
  淘寶紅：#FF4400，當紅綠藍三個數的16進制十位與個位數都相同，那么可以進行縮寫：#F40
  黑色：#000000，#000
  白色：#ff0000，#f00
  

background-color

背景顏色，用于設置元素的背景色

font-size

元素內部文字的大小；如果一個元素沒有字體大小，那么他就繼承父元素的字體大小；如果沒有父元素(html)，那么就使用基準字號，基準字號就是瀏覽器中設置的字號。

• px：像素，簡單的理解為文字的高度占多少個像素。
• em：相對單位，相對于父元素的字體大小，也就是em值 * 父元素字體大小；他最終顯示會計算為像素進行顯示。

font-weight

文字粗細程度，可以取值數字，可以取值預設值。
這個數值不能亂設，和具體字體有關，如果設置不當就無效果，一般就是使用預設值normal和bold：

<p style="font-weight: normal">設置font-weight: normal</p>
<p style="font-weight: bold">設置font-weight: bold</p>

strong標簽默認為粗體；

font-family

文字字體，font-family使用如下：

<p style="font-family: 華文楷體">設置font-family: 華文楷體</p>
<p style="font-family: 楷體">設置font-family: 楷體</p>

設置文字字體要正常顯示要注意設置的字體要存在目標主機上，并且對應字體中存在響應的字符，不然瀏覽器忽略字體設置；
可以設置多個字體，這樣瀏覽器會逐個檢測字體是否存在，并且字符是否存在該字體中，如果存在就進行顯示，否則跳過：

<p style="font-family: Consolas,華文楷體,sans-serif">設置font-family: Consolas,華文楷體,sans-serif</p>
<p style="font-family: AR PL UKai HK,Consolas,華文楷體,sans-serif">設置font-family: AR PL UKai HK,Consolas,華文楷體,sans-serif</p>
<p style="font-family: 'AR PL UKai HK',Consolas,華文楷體,sans-serif">設置font-family: 'AR PL UKai HK',Consolas,華文楷體,sans-serif</p>
<p style="font-family: 華文楷體">設置font-family: 華文楷體</p>
<p style="font-family: 楷體">設置font-family: 楷體</p>

最后加上一個sans-serif非襯線字體或者serif襯線字體；他們是字體的兩個大類，并不是表示某個具體的字體，瀏覽器遇到該字體會自動選擇該類字體中的一個字體進行顯示。

font-style

字體樣式，通常用于設置字體傾斜:

<p style="font-style: italic">設置font-style: italic</p>
<p style="font-style: normal">設置font-style: normal</p>

i、em元素默認為斜體;

text-decoration

文本修飾，給文本加線

<p style="text-decoration: line-through">設置text-decoration: line-through</p>
<p style="text-decoration: overline">設置text-decoration: overline</p>
<p style="text-decoration: underline">設置text-decoration: underline</p>
<p><a href="" style="text-decoration: none">鏈接去掉下劃線</a></p>
<p><a href="">鏈接保留下劃線</a></p>

a元素默認加下劃線，del元素、s元素默認是line-through;

text-indent

indent – 縮進，text-indent表示文本縮進，也就是段落中第一行的縮進方式。

<p style="text-indent: 2em">鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線</p>

text-indent設置距離，可以為px，也可以為em，rem，一般使用2em，即首行縮進2個字符。

line-height(line-height的概念)

<p style="line-height: 2em">鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線</p>

<p style="text-align: center; line-height: 5em; height: 5em; background: #008c8c; color: white;">鏈接保留下劃線鏈接保留下劃線鏈接保留下劃線鏈接保留</p>

p{line-height: 1.5em;}
p{line-height: 1.5;}
p{line-height: 150%;}

.parent1{font-size:14px;line-height: 1.5em;background: #999;padding:10px
}
.parent2{font-size:14px;line-height: 1.5;background: #999;padding:10px
}
.parent3{font-size:14px;line-height: 150%;background: #999;padding:10px
}
.child{font-size:26px;background: #ccc;
}

width、height

box盒子模型中的內容區寬度以及高度的設置，顯示的時候整個元素占據的大小還會有內邊距、邊框和外邊距這幾個屬性的參與。
如果文本數據內容數量在font-size的影響下超過了width、height設置的大小，那么整體上的排版依舊按照width、height進行排版，而文字輸出也會進行輸出，此時就是文字會越過設置的大小，如果此時對應的位置有排版內容，那就會出現文字覆蓋的情況。

letter-spacing

文字間隙，就是文本水平方向的間隔

text-align

元素內部內容水平方向的排列方式，默認靠左排列；
這個和line-height一樣，也會被子元素進行繼承。

• justify 除最后一行外，分散對齊，最后一行就是左對齊，也就是兩端對齊；
  每一行都分散對齊可以使用::after添加一個width為100%的行塊盒

direction

開始和結束時相對的，該屬性設置的就是開始到結束的方向

writing-mode

font-variant

variant – 變體，可以設置字體變體：

border-radius

邊框弧度

opacity

設置透明度，設置整個元素的透明度，取值范圍0 ~ 1

cursor

設置鼠標樣式，默認auto，讓瀏覽器決定使用什么樣式。
設置后移動到對應區域就會產生鼠標指針變化。
cursor可以設置ico資源：

cursor: url("images/test.ico"), auto;

注意此時：

1. cursor: url后要加上auto
2. 圖片應為是32*32的ico格式

vertical-align

指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。

• baseline 默認方式，基線對齊基線，這種方式下，行內塊元素中如果沒有數據，直接設置寬高，那么行內塊元素的底邊就會處于基線位置，于是行內塊會看著高出文字一段距離。
• text-bottom 使元素的底部與父元素的字體底部對齊。

min-width、max-width

最小寬度與最大寬度，最小寬度是針對盒模型說的，瀏覽器是沒有這個最小寬度的概念的，當瀏覽器伸縮為最小寬度，再縮小就會出現橫向滾動條。

overflow

對于內容溢出的元素采取的顯示方案

• visible 默認方式，直接越界顯示
• auto 如果沒有內容溢出，就不出現滾動條顯示，如果內容溢出就出現滾動條顯示。

margin

對于塊盒，使用margin: auto;可以實現水平方向的居中，但是無法實現垂直方向的居中，理由如下：

auto的意義是自動填充剩余空間

塊級元素，即便我們設置了寬度，他還是自己占一行，在css的規范中，元素他的左外邊距+左邊框寬度+左內邊距+內容的寬度+右內邊距+右邊框+右外邊距=包含塊的寬度，如果我們給他的左右外邊距設置為auto的時候，他會實現平分剩下的距離，從而達到一個水平居中的效果

但是塊級元素的高度并不會自動擴充（可以在chrome中檢查看到），所以他的外部尺寸是不自動充滿父元素的，也沒有剩余的空間，因此margin上下設置auto不能實現垂直居中‘

可以使用絕對定位進行垂直居中。

display

• list-item 設置為該屬性值的盒子，本質上仍然是一個塊盒，但同時該盒子會附帶另一個盒子
  元素本身生成的盒子叫做主盒，附帶的盒子稱為次盒子，次盒子和主盒子水平排列（最終的效果就是li元素的效果），以下屬性可以發生繼承。
  • list-style-type 設置次盒子中內容的類型
  • list-style-position 設置次盒子和主盒子的相對位置，默認outside。
  • list-style: none; 清空次盒子

list-style

設置有序列表和無序列表的前面序號的顯示格式

• list-style-type: decimal;
  設置為數字顯示
• list-style-position: inside;
  設置到內部顯示

盒子顯示隱藏

1. display: none; 不生成盒子，此時可能會對排版造成影響。
2. visibility: hidden; 生成盒子，只是視覺上移除盒子，盒子仍然占據空間。默認為visible。JS可以控制這個來實現閃爍效果；

背景圖

img元素是屬于HTML概念，背景圖屬于css概念；

1. 當圖片屬于網頁內容時，必須使用img元素
2. 當圖片僅用于美化頁面時，必須使用背景圖

使用屬性

1. background-image: url("images/test.png")
   設定背景圖片，背景圖默認情況下會在橫坐標和縱坐標中進行重復

2. background-repeat: no-repeat;
   設置是否重復

3. background-size: ;

   • contain 圖片完全顯示在邊框中，保持比例不變，可能會有一些空白
   • cover 圖片撐滿區域，保持比例不變，背景圖可能會有一些丟失
   • auto 以背景圖片的比例縮放背景圖片。
   • 數值或百分比 直接設置背景圖大小，可能會造成圖片壓縮或者伸展，參考img的width設置，設置了width，height應該也會進行相應的等比例調整
     • 只設置一個數值，此次數值設置為width，height為auto，如果設置兩個，那么第二個參數為auto；

4. background-position
   設置背景圖的位置，默認左上

   • 預設值
   • 數值與百分比
     應用：雪碧圖取圖片：首先將需要的圖片移動到顯示區域左上角，然后設置長和寬。

5. background-attachment
   通常用該屬性表示圖片是否固定。

   • fixed 固定背景圖在視口上方

6. background-clip
   設置元素的背景（背景圖片或顏色）是否延伸到邊框、內邊距盒子、內容盒子下面。

   • border-box 背景延伸到邊框
   • padding-box 背景延伸到內邊距盒子
   • content-box 背景延伸到內容盒子
   • text 僅在文字下面顯示背景，搭配color: transparent;有奇效。

背景圖和背景顏色混用

可以混用，然后背景圖沒覆蓋到的地方會由背景顏色填充

background

速寫屬性，background-*對應的值可以直接在background屬性中；
由于background-position和background-size都會出現數字形式，寫在一起會混亂，因此規定，寫的時候先寫位置，后寫大小，而且使用/隔開。

outline

設置外邊框(輪廓)，與border的區別就在于外邊框的寬度是不占用類似margin、padding的計算的。但是有個弊端就是他只能同時設置4個邊，不能像border一樣設置某條邊。

outline-offset

當outline默認樣式設置為auto時，該css屬性無效(個人測試發現outline樣式為auto時也有效)，當設置了寬度，該屬性意義為outline與border之間的間隔值(默認為0)，可以為負數

line-height的概念

基本概念

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JG5kjjst-1692416019901)(images/word.png)]
上面這四條線，從上到下分別是頂線、中線、基線、底線，vertical-align屬性中有top、middle、baseline、bottom；

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6iftUtUF-1692416019901)(images/word_2.png)]

• 行高(line-height)
  行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。他包含了兩個部分，一個是字體，一個是行距；
• 行距
  行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。
• 半行距
  半行距是行距的一半，即區域3垂直距離/2，區域1，2，3，4的距離之和為行高，而區域1，2，4距離之和為字體size，所以半行距也可以這么算：（行高-字體size）/2