CSS第二課
簡單的css語句
| 用處 | 語法 | 注意 |
|---|---|---|
| 設置字體大小 | font-size | 添加的內容和買衣服大小一樣，xl大於l，大於s，也可以使用數值設置字體大小，選擇需要的單位 |
| 字體是否加粗 | font-weight | 添加內容爲bold加粗，bolder（比加粗稍微粗一點）lighter（比加粗細一點）或者加粗數值，爲有幾個選項可供選擇 |
| 字體是否傾斜 | font-style | 如果是添加italic |
| 設置字符字體 | font-family | 需要用什麼字體就添加什麼字體就行了，如果字體爲多個單詞拼寫，需要單引號括起來，可以直接寫中文字體名字，可以添加多個，按照就近原則 |
| 小型大寫字母 | font-variant | 把小寫的字母轉換成大寫字母，但是個頭不變，如果存在小寫字母。後面加入small-caps就可以 |
| 設置文本縮進 | text-indent | 添加縮進字符，一般設置首行縮進兩個字符2em |
| 設置文本對齊 | text-align | center居中對齊\left左對齊\right右對齊\justy兩端對齊 |
| 設置行間距 | text-align | 可以添加數值，最好是用em形式的，em和word裏面的倍數一樣，比如1.5em就是1.5倍行間距 |
| 修飾文本 | text-decoration | 可以給文本增加線條，overline上劃線，underline下劃線，line-through刪除線。還可以設置樣式和顏色，去掉超鏈接的下劃線需要加none |
| 大小寫轉換 | text-transform | capitalize首字母大寫，lowercase字母小寫，uppercase字母大寫 |
| 修改顏色 | color | 後面可以直接添加顏色的英文名稱，還可以使用RGB形式，或者16進制的形式 |
| 字符間距 | letter-spacing | 添加數值即可 |
| 英文單詞間距 | word-spacing | 添加數值即可，只對英文單詞纔有用 |
| 設置文字方向 | direction | ltr默認。文本方向從左到右，rtl文本方向從右到左。 |
| 添加背景，對body進行添加 | background-color | 添加需要添加的顏色即可 |
| 添加背景圖片 | background-image:url（圖片地址） | 圖片地址中加入自己的圖片地址即可 |
| 背景圖片平鋪 | background-repeat | repeat水平和垂直都平鋪， repeat-x水平方向平鋪，repeat-y垂直方向平鋪，no-repeat不平鋪 |
| 背景圖片位置 | background-position | center居中平鋪\left左平鋪\right右平鋪\right top右上角\right bottom右下角\left top左上角\left bottom左下角，也可以使用數值的方式，相對方式50% 50%代表位於寬百分之50的與長百分之50的地方，60px 30px代表寬60px與長30px的地方 |
| 設置背景圖片大小 | background-size | 100% 100%代表水平100%垂直100%，contain代表不失真的情況下佔比最大，cover也是最大，只不過不管失真不失真 |
| 背景圖片靜止 | background-attachment: fixed; | 這樣的話，就不會隨着齒輪滑動而動，會固定 |
實例代碼應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body{
background-color:#cccccc;
}
h1{
color: white;
font-weight:lighter;
background-color: red;
}
.c0{
color: white;
font-family:楷體;
font-style:italic;
direction:rtl;
}
.c1{
color: red;
font-size:24px;
font-weight: 500;
font-family: 宋體;
font-weight:bold;
}
</style>
</head>
<body>
<h1>日 志</h1>
<hr />
<p class="c0">分類：心情點滴</p>
<p class="c1">女性的美麗</p> 摘要：魅力女性是美麗的.她使世界變得溫馨,使世界永遠保持青春和活力,使世界永遠充滿迷人和浪漫。魅力是什麼?字典上的解釋是，能吸引人的力量.常聽有人這麼評價某個女人：她不漂亮，可她很有魅力.魅力是一種深層次的美，比一切外在的美都更富有生命力，讓人一見難以忘懷....... 查看全文
<br />
<br />
<p class="c2">2007.3.8 13:27 作者：詩香雅韻 引用:6 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 評論：56 </p>
<p class="c0">分類：情感驛站</p>
<p class="c1">情感解析：寫給三十左右男人的一些密語</p> 摘要：一、不放棄理想，不放棄夢想。有夢的生活，纔會有顏色；二、有一套頂級的西服，或者一隻經典的手錶，或者有一個奢華的打火機，或者。總之，有一個可以傳給自己孩子的並值得講述歷史的東西；三、重新甄選自己的朋友。留一兩個知己，用一生去維護;四、三十歲。知道很多的細節。包括穿西服的時候... 查看全文
<br />
<br />
<p class="c2">2011.11.9 00:17 作者：詩香雅韻 引用:0 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 評論：1</p>
<p class="c0">分類：精品賞析</p>
<p class="c1">美麗如畫!世界海洋攝影佳作揭曉(組圖) </p> 摘要：據國外媒體報道，近日世界優秀海洋攝影照片揭曉，從中我們可以欣賞到美麗的海洋景色、認識許多奇特的海洋生物，此外攝影師精湛的攝影技術也令人讚歎。以下就是2010年海洋攝影優秀作品。攝影師評價：“在晚上，小巴哈馬海岸的斑點海豚會潛入深海尋找烏賊... 查看全文
<p class="c2"> 2011.10.28 23:53 作者：詩香雅韻 引用:1 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 評論：1 </p>
</body>
</html>
效果圖
如若有和我一樣的初學者，不懂的可以在評論區評論出來，我們一起解決！