CSS語言基礎
字體和文本樣式
- 一般我們將需要重點突出的字段，使用 span標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
我 <span id="title1">愛</span> 你
</body>
</html>
- 字體樣式
font-family: "楷體" ; （字體）
font-size: 50px; （字體大小）
font-weight: normal;(默認值,定義標準的字符),bold;(粗體),bolder;(更粗的),lighter;(更細的) （字體粗細）
color: green/red... （字體顏色）
- 文本樣式
/*字體顏色*/
color:red;green;... /*直接color後面跟顏色的單詞*/
color:#00ff00; /*#十六進制值的顏色*/
color:rgb(0,0,255); /*rgb()代碼的顏色*/
/*排版*/
text-align:center /*居中*/
text-align:left /*左對齊*/
text-align:right /*右對齊*/
/*首行縮進*/
text-indent:50px;2em; /*使用px、cm 等單位定義高度, 2em:代表兩個字符*/
/*段落的高度和寬度*/
height:100px; /*高度*/
width:100px; /*寬度*/
/*行高*/
line-height: /*使用px、cm 等單位定義高度*/
/*下劃線*/
text-decoration: underline;
/*中劃線*/
text-decoration: line-through;
/*上劃線*/
text-decoration: overline;
/*超鏈接去除下劃線*/
text-decoration: none;
/*垂直對齊圖像*/
vertical-align:sub /*垂直對齊文本的下標*/
super /*垂直對齊文本的上標*/
top /*把元素的頂端與行中最高元素的頂端對齊*/
middle /*把此元素放置在父元素的中部*/
bottom /*把元素的底端與行中最低的元素的頂端對齊*/
text-bottom /*把元素的底端與父元素字體的底端對齊*/
/*使用vertical-align:需要對照參照物*/
- 字體陰影
/*text-shadow: 陰影顏色，水平偏移，垂直偏移，陰影半徑*/
text-shadow: red 10px -10px 2px;
背景和漸變
- 背景
/*元素的背景顏色*/
background-color: blue
/*元素的背景圖像,默認情況下:背景圖像是平鋪重複顯示的*/
background-image: url ("這裏是圖片的路徑")
/*設置圖像定位與不平鋪*/
background-repeat:repeat-x; /*圖像只在水平方向平鋪*/
background-repeat:repeat-y; /*圖像只在豎直方向平鋪*/
background-repeat:no-repeat; /*圖像不平鋪*/
/*改變圖像在背景中的位置*/
background-position:left top;left center;...
/*CSS3以前,背景圖像大小由圖像的實際大小決定,CSS3中可以指定背景圖片*/
background-size:30px 50px;
/*設置不同屬性*/
background: blue url ("圖片路徑") 350px 10px no-repeat;
- 漸變
漸變（Gradients）：指在兩個或多個指定的顏色之間顯示平穩的過渡
- 線性漸變（Linear Gradients）：向下/向上/向左/向右/對角方向
/*爲了實現漸變的效果必須至少定義兩種顏色結點，也可以設置一個起點和一個方向（或一個角度）*/
/*1.線性漸變（默認是從上向下進行漸變）*/
background-image: linear-gradient(blue,pink);/*從頂部開始的線性漸變，起點是藍色，慢慢過渡到粉色*/
/*從左邊開始的線性漸變，起點是紅色，慢慢過渡到黃色*/
background-image: linear-gradient(to right, red , yellow);
/*使用多個顏色結點:從左向右漸變的“彩虹”*/
background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
- 徑向漸變（Radial Gradients）：由它們的中心定義
/*默認情況下,漸變的中心是 center,漸變的顏色節點均勻分佈,漸變的圖形是橢圓形;
如果需要不均勻分佈可以在每個顏色後面設置%值,形狀也可以設置，如circle(圓形)...*/
background-image: radial-gradient(red, yellow, green);
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
background-image: radial-gradient(circle, red, yellow, green);
默認漸變：
圓形漸變：
- 注意： Internet Explorer 9 及之前的版本不支持漸變。
//下篇再見…謝謝