前端 CSS基礎理論總結(三)
阿新 • • 發佈:2019-01-10
有序列表
- 使用ol和li來建立一個有序列表
<ol>
<li>列表項1</li> 1.列表項1
<li>列表項2</li> 2.列表項2
<li>列表項3</li> 3.列表項3
</ol>
無序列表
- 使用ul和li來建立一個無序列表。
- <ul> <li>列表項1</li> ●列表項1 <li>列表項2</li> ●列表項2 <li>列表項3</li> ●列表項3
定義列表
- 使用dl、dd、dt來建立一個定義列表
<dl>
<dt>定義項1</dt> 定義項1
<dd>定義描述1</dd> 定義描述1
<dt>定義項2</dt> 定義項2
<dd>定義描述2</dd> 定義描述2
<dt>定義項3</dt> 定義項3
<dd>定義描述3</dd> 定義描述3
單位
- px
- 如果我們將一個圖片放大的話,我們會發現一個圖片是有一個一個的小色塊構成的,這一個小色塊就是一個畫素,也就是1px,對於不同的顯示器來說一個畫素的大小是不同的
- 百分百
- 也可以使用一個百分數來表示一個大小,百分比是相對於父元素來說的,如果父元素使用的大小是16px,則100%就是16px,200%就是32px
- em
- em和百分比類似,是相對於font-size說的
- 1em=1font-size
- em和百分比類似,是相對於font-size說的
顏色
- 在CSS中可以直接使用顏色的關鍵字來代表一種顏色
- 17中顏色:aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,orange,purple,red,silver,teal,white,yellow
- 還有147種svg顏色,這裡就不一一列舉了,但是明顯即使這些顏色程式設計double,也不足以描繪我們世界中所有顏色
十六進位制顏色
- 用的最多的顏色是十六進位制符號。一個顏色值,比如:#6600ff實際上包含了三組十六進位制的數字
- 上邊的例子種66代表紅色的濃度,00代表綠色的濃度,ff代表了藍色的濃度。最後的顏色是由這些指定濃度的紅綠藍混合而成的。
- 如果每一組數種的兩個數字都相同,就可以把十六進位制的數字縮短為只有3個字元,如將#6600ff縮短為#60f
RGB值
- 也可以使用計算機種常用的RGB值來表示顏色。可以使用0-255的數值,也可以使用0%-100%的百分比數。
- RGB(100%,0%,0%)
- RGB(0,255,0)
- 第一個數表示紅色的濃度,第二個數表示綠色濃度,第三個數表示藍色的濃度
RGBA
- RGBA表示一個顏色和RGB類似,只不過比RGB多了一個A(alpha)來表示透明度,透明度需要一個0-1的值。0表示完全透明,1表示完全不透明。
- RGBA(255,100,5,0.5)
文字大小
- font-size用來指定文字的大小
字型(一)
- 通過font-family可以指定標籤種文字使用的字型。
- 例如:
p{font-family:Arial}
上邊這行程式碼指定了p標籤種使用名為arial作為字型 - 一般來說只有使用者計算機種安裝了我們指定了字型時,它才會顯示,否則這行程式碼是沒有意義的
字型(二)
- 通過font-family可以同時指定多個字型
- 例如:
p{font-family:Arial,Helvetica,sans-serif} - 如上實際上指定了三種字型,那麼到底使用的是哪個呢?瀏覽器會優先使用第一個,如果沒有找到則使用第二個,以此類推
- 這裡面sans-serif並不是指的具體某個字型。而是一類字型
字型分類
- serif(襯線字型)
- sans-serif(非襯線字型)
- monospace(等寬字型)
- cursive(草書字型)
- fantasy(虛幻字型)
- 以上這些分類都是一些大的分類,並沒有涉及具體的型別,如果將字型指定為這些格式,瀏覽器會自己選擇指定型別的字型
斜體和粗體
- font-style用來指定文體的斜體
- 指定斜體:font-style:italic
- 指定非斜體:font-style:normal
- font-weight用來指定文字的粗體
- 指定粗體:font-weight:bold
- 指定非粗體:font-weight:normal
小型大寫字母
- font-variant屬性可以將字母型別設定為小型大寫。在該樣式中,字母開起來像是稍微縮小了尺寸的大寫字母
- font-variant:small-caps
字型屬性的簡寫
- font可以一次性同時設定多個字型的樣式
- 語法:font:加粗 斜體 小型大寫 大小/行高 字型
- 這裡前邊幾個加粗、斜體和小型大寫的順序無所謂,也可以不寫,但是大小和字型必須寫且必須寫到後兩個
行間距
- line-height 用於設定行高,行高越大則行間距越大
- 行間距:line-height -(減法)font-size
大寫化
- text-transform樣式用於將元素中的字母全都變成大寫
- 大寫:text-transform:uppercase
- 小寫:text-transform:lowercase
- 首字母大寫:text-transform:capitalize
- 正常:text-transform:none
文字的修飾
- text-decoration屬性,用來給文字新增各種修飾,通過它可以為文字的上方、下方或者種鍵新增線條
- 可選值:
- underline
- overline
- line-through
- none
字母間距和單詞間距
- letter-spacing用來設定字元之間的間距
- word-spacing用來設定單詞之間的間距
- 這兩個屬性都可以直接指定一個長度或百分數作為值。正數代表的是增加距離,而負數代表減少距離
對齊文字
- text-align用於設定文字的對齊方式
- 可選值:
- left:左對齊
- right:右對齊
- justify:兩邊對齊
- center:居中對齊
首行縮排
- text-indent用來設定首行縮排
- 該樣式需要指定一個長度,並且只對第一行生效