CSS基礎（二）
阿新 • • 發佈：2018-10-05
color 聲明 但是 css基礎 字符 att 一行 實體 nowrap 一、css背景
css背景屬性用於定義HTML元素的背景
背景效果（屬性順序）：
- background-color：設置元素的背景元素
- background-image：設置背景圖片
- background-repeat：設置背景圖像是否及如何重復
- background-attachment：背景圖像是否固定或者隨著頁面的其余部分滾動
- background-position：設置圖像的起始位置（定位）
1. 背景顏色
background-color屬性定義了元素的的背景顏色
CSS中，顏色值通常以以下方式定義:
十六進制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
顏色名稱 - 如："red"
2. 背景圖像
三、CSS字體
CSS字體屬性定義字體、加粗、大小、文字樣式。
1. 字體系列
font-family 屬性設置文本的字體系列，在使用的時候我們應當設置幾個字體名稱作為一種"後備"機制，如果瀏覽器不支持第一種字體，將會嘗試下一種。
註意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family："宋體"。
多個字體系列是用一個逗號分隔指明：
body {background-image:url(‘paper.gif‘);}設置圖像只在水平方向平鋪（repeat-x）
body { background-image:url(‘gradient2.png‘); background-repeat:repeat-x; }background-repeat屬性可以設置背景圖像是否平鋪 background-position屬性可以給背景圖像定位
body { background-image:url(‘img.png‘)3. 簡寫屬性 在以上實例中我們可以看到頁面的背景顏色通過了很多的屬性來控制。 為了簡化這些屬性的代碼，我們可以將這些屬性合並在同一個屬性中. 背景顏色的簡寫屬性為 "background":; /*設置為不平鋪*/ background-repeat:no-repeat; /*定位：右 上*/ background-position:right top; }
body { background:#ffffff url(‘img.png‘) no-repeat right top; margin-right:200px; }二、CSS文本 1. 文本顏色 顏色屬性被用來設置文字的顏色
body2. 對齊方式 文本排列屬性是用來設置文本的水平對齊方式 文本可居中或者對齊到左或右，兩端對齊 當text-align設置為“justify”，每一行被展開為寬度相等，左、右外邊距是對齊的{color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}3. 文本修飾 text-decoration屬性用來設置或刪除文本的裝飾（主要用來刪除鏈接得下劃線）
a {text-decoration:none;}當然也可以用來裝飾文字，但是不建議強調指出不是鏈接得文本，容易混淆
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}4. 文本轉換 文本轉換屬性是用來指定在一個文本中的大寫和小寫字母 可用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫
<style> /*全部大寫*/ p.uppercase {text-transform:uppercase;} /*全部小寫*/ p.lowercase {text-transform:lowercase;} /*首字母大寫*/ p.capitalize {text-transform:capitalize;} </style>
<body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body>5. 文本縮進 用來指定文本的第一行縮進
p {text-indent:50px;}6. 所有CSS文本屬性
p{font-family:"Times New Roman", Times, serif;}2. 字體樣式 主要是用於指定斜體文字的字體樣式屬性。 這個屬性有三個值： - 正常 - 正常顯示文本 - 斜體 - 以斜體字顯示的文字 - 傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
/*正常*/ p{font-style:normal;} /*斜體*/ p{font-style:italic;} /*傾斜的文字*/ p{font-style:oblique;}3. 字體大小 font-size 屬性設置文本的大小 字體大小的值可以是絕對或相對大小 絕對大小： - 設置一個指定大小的文本 - 不允許用戶在所有瀏覽器中改變文本大小 - 確定了輸入的物理尺寸時絕對大小很有用 相對大小： - 相對於周圍的元素來設置大小 - 允許用戶在瀏覽器中改變字體大小 默認：如果不指定一個字體的大小，默認和普通文本段落一樣，是16像素（16px=1em） px和em：
/*px*/ h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} /*em*/ h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */px設置可以通過瀏覽器的縮放工具調整文本大小，但是，這種調整是整個頁面，而不僅僅是文本 em設置可以在所有瀏覽器中調整文本大小（IE有偏差） 百分比和em： 在所有瀏覽器的解決方案中，設置<body>元素的默認字體大小是百分比：
body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;}在所有瀏覽器中，可以顯示相同的文本大小，並允許所有瀏覽器縮放文本的大小。 4. 所有CSS字體屬性
CSS基礎（二）