CSS 樣式是美化網頁元素必不可少的一部分，同時也是前端開發 里面十分重要且基礎的東西。CSS使用方式有2種，一種是寫在單獨的 CSS 文件里面，最后引入到 HTML 頁面里面，第二種也可以直接通過<style></style>標簽寫在 HTML 文件里面。由于 CSS 樣式及其豐富，今天我們先講字體和圖片的。一些字體和圖片基本的 CSS 樣式如下所示：

字體：

1.font-size：字體大小；

注意：字體大小單位種類繁多，常見的單位有：px、pc、pt、cm、em、rem等等，但是常用的一般是 px（像素）、cm（厘米）、rem（相對布局單位）這三個，這個 css 樣式通常用來為網頁中的字體設置大小。

2.font-family：字體類型；

注意：使用它可以改變字體的樣式，如我們生活中常見的 黑體、宋體、楷體 等等。除了可以設置英文字體外，它還可以設置中文字體。例如：font-size："宋體"；（設置中文字體）、font-size：ajax；（設置英文字體時可以不帶雙引號）。也可以同時設置中英文字體，但要注意前后順序之分，英文在前，中文在后，中間用英文狀態下的逗號區隔開，例如：font-family：ajax，"微軟雅黑"；。

3.font-style：字體風格；

注意：字體風格樣式常用的值有三個，第二個和第三個效果有點相似，只是叫法上有所不同。例如：font-style：normal；，normal（正常）、italic（斜體）、oblique（傾斜）。

4.font-weight：字體粗細；

注意：為字體設置粗細效果，值有兩種，一種是數字，一種是英文單詞。數字的范圍為100~900，數字越小越細，數字越大越粗，例如：font-weight：300；，英文單詞有以下幾個：?lighter（更細的字體）、normal（正常的字體，等同于數值范圍里的400）、bold（粗體）、bolder（更粗的字體），例如：font-weight：bold；。

5.font：字體綜合屬性；

注意：上述學過的4個屬性，當需要同時用倒時，一個一個寫過于復雜，代碼量偏多，可以并在一起寫。但是要注意先后順序，不然可能導致部分效果無法實現。先后順序為：字體風格----字體粗細----字體大小----字體類型。例如：font：italic? bold? 24px? "草書"；。

6.color：字體顏色；

注意：為字體設置顏色，三種方式，可以直接使用英文單詞，例如：color：red；；也可以使用 HTML 顏色模式，例如；color：#c0c0c0；還可以使用rgb色彩模式，例如：rgb（0，255，255）；。

7.text-align：文本水平對齊；

注意：設置某一標簽文本的水平對齊，有三個值。left（左對齊）、right（右對齊）、center（水平居中對齊）。

8.vertical-align：文本垂直對齊；

注意：設置某一標簽文本的垂直對齊，有三個值。top（上對齊）、bottom（下對齊）、middle（垂直居中對齊）。

9.line-height：行高；

注意：為兩行或兩行以上的多行文本設置行間距。通常以? px 或者是 rem 為單位，例如：line-height：30px；。

10.text-indent：首行縮進；

注意：文本設置首行縮進，通常以 em 和 px 為單位，這里使用 em 主要是為了好計算，因為1 em 代表1個字符的位置，2em 就是我們最常見的首行縮進2字符的文本段落排版。例如：text-indent：2em；。

圖片：

1.width：寬度；

2.height：高度；

注意：寬度和高度這兩個就不多說了，前面一篇文章講屬性的時候也說過，格式是一樣的，使用方式也和前面幾乎一樣。

3.background-color：背景顏色；

4.background-image：背景圖像；

注意：一個是背景顏色，為整個網頁設置背景顏色，另一個是背景圖片，把背景替換為一張圖片，他們不一樣。

5.background-position：背景圖像位置；

注意：背景圖像你想讓它在頁面的哪個位置顯示，它就可以在哪個位置顯示，但前提是你要使用這個屬性，通常同時設置 x 軸（橫軸）和 y 軸（縱軸）。例如： background-position：300px? 400px；。

6.background-size：背景圖像大小；

注意：為背景圖像設置大小，就像為普通圖片設置寬高一樣。例如：background-size：100px? 200px；。

7.background-repeat：背景圖像是否平鋪；

注意：默認背景圖像會根據你頁面的大小，從而產生平鋪方式，造成多背景同時顯示的效果。若你不想讓它平鋪，需使用這個屬性。這個屬性常用的值有下面4個：repeat（同時延 x、y 軸平鋪）、repeat-x（只延 x 軸平鋪）、repeat-y（只延 y 軸平鋪）、no-repeat（不平鋪）。

8.background：背景綜合屬性；

注意：跟字體的綜合屬性一樣，都是上述幾個屬性的集合，但是要注意使用順序。使用順序為：背景顏色----背景圖像----背景平鋪----背景位置。具體用法如下所示：background：red? url("123.png") no-repeat? 300px? 200px；。

總結

以上是生活随笔為你收集整理的CSS 基本样式大全（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。