學完HTML基礎入門后，大致了解了網頁布局的一些規則和屬性。接下來學習了頁面樣式的表達程序-CSS。并且整理了一些常用且基礎的表達，如下。
1、什么是CSS
1.1什么是CSS
全稱：Cascading Style Sheets：層疊樣式表，用來表現HTML等文件樣式。
用大白話解釋，就是用來寫頁面樣式，定義頁面長什么樣子的。將CSS的代碼和HTML代碼整合到一起后，就能將頁面本身的樣式呈現出來。但這是的頁面是靜態，無法點擊和產生交互動作的。
1.2HTML中的CSS
1.2.1 HTML中的CSS
在HTML中加入css的屬性：style，來描述HTML的樣式，包括名字和值，比如：
<p style="background-color:yellow">
我愛這個世界
</p>
p style="background-color:yellow"是指『我愛這個世界』這段文字的樣式為：『背景顏色是黃色』。
當然，這里的值可以換成其他顏色。（在輸入顏色值時，目前常規的做法是直接從一些設計工具或者吸色工具將顏色的值取出來，格式為#+顏色值，比如：#FFFFFF為白色，#000000為黑色；）
1.2.2 背景樣式
在css中，背景可以加純色或者圖像2種，同時可以在整個頁面或者某個段落中添加背景。
<b>顏色背景</b>
<body style="background-color:gray">
</body>
body style="background-color:gray"（整個頁面的樣式=背景顏色為灰色）
<b>圖片背景</b>
<body style="background-color:#FFFFFF">
</body>
<p style="background-image:url(shouye.jpg);
background-repeat:no-repeat;
background-position:top right;
background-attachment:fixed">
</p>
<p style="background">
</p>
p style="background-image:url(shouye.jpg);（這一段內容的背景圖片：地址是：shouye.jpg，這里的圖片地址是保存在電腦的文件名）
background-repeat:no-repeat;（背景重復：不重復）
background-position:top right;（背景位置：頂部、右側）
background-attachment:scroll/lfixed；（背景附加：滾動的/固定）
2、基礎樣式
2.1 段落樣式
2.1.1 段落縮進
<p style="text-indent:2em">
</p>
<p style="text-indent:2em；
padding:2em;">
</p>
text-indent:2em;（首行縮進：2em/字符，-2em/反向縮進2個字符』）
padding:2em;"( 懸掛縮進:2個字符，是指除了首行不縮進以外，下方每行都縮進2個字符）
2.1.2 間距與對齊
<p style="text-indent:-2em;
line-hight:1.5/normal;">
</p>
<p style="text-indent:-2em;
text-align:center/justify;
word-spacing:10px ；
letter-spacing:10px；">
</p>
line-hight:1.5/normal;（行高：1.5倍/正常）
text-align:center/justify;（對齊方式為：居中對齊/兩端對齊）
word-spacing；（英文單詞間距：10個像素點）
letter-spacing:10px；（字間距：10個像素點）
2.2 文本樣式
2.2.1 文字修飾與空格處理
<p style="text-indent:2em;
text-align:justify;
word-spacing:10px;
letter-spacing:10px;
text-transform:lowercase/capitalize;
text-decoration:underline overline line-through;
white-space:normal/pre/pre-wrap/no-wrap;
direction:rtl;">
</p>
text-transform:lowercase/capitalize;
text-decoration:underline overline line-through;（文本裝飾：下劃線/上劃線/穿插線）
white-space:normal/pre/pre-wrap/no-wrap;（空白字符處理：默認（連續空格去除掉）/空格及回車字符都直接顯示且不做自動卷繞/顯示空格且自動卷繞/不做卷繞）
direction:rtl/ltr;（對齊方式：左對齊/右對齊）
2.2.2 字體
<p style="text-indent:2em;
font-family:serif/sans-serif/monospace/cursive/fantasy;">
</p>
font-family:（字體系列）；
serif/sans-serif/monospace/cursive/fantasy;（5種字體類型），這些字體類型都是大類，輸入字體類型的情況下，系統會根據瀏覽器來顯示具體的字體樣式。比如sans-sarif是非襯線字體，但具體的樣式，每個瀏覽器可能會不一樣。
當然，也可以輸入具體的字體類型，比如很常見的：Times
2.2.3 文字修飾
<p style="text-indent:2em;
font-family:serif/sans-serif/monospace/cursive/fantasy;
font-style:italic/obique；
font-variant:small-caps；
font-weight:900/bold;
font-size:2em;">
</p>
font-style:italic/obique；（字體樣式：斜體。italic是指固定的斜體樣式、obique是根據不同瀏覽器計算的斜體樣式，顯示上會有不同）
font-variant:small-caps；（字體變化：小的大寫字母，出現字母時，均使用變小的大寫字母）
font-weight:900/bold;（字體加粗；bold是一個可根據瀏覽器顯示不同的加粗效果，輸入數值時，比如900，則是顯示固定的加粗樣式；
font-size:2em;（字體大小：2個字符，不建議使用2px）
2.2.4 文字效果
<p style="text-indent:2em;
text-shadow:3px 5px 5px #000000">
</p>
<p style="text-indent:2em;
text-shadow:3px 5px 5px #000000, 0px 1px 3px #606060;
color:606060;
outline-color:red;
outline-style:solid/dotted/dashed/double/groove/inset;
outline-width：thin/10">
</p>
text-shadow（字體陰影效果）；
3px 5px 5px #000000（第一個3px是指：x軸方向從3個像素點后開始有陰影；第二個5px是指：y軸方向從5個像素點后開始有陰影；第三個5px是指：陰影擴散范圍超過文字5個像素點；#000000是指：陰影顏色）；
以上是最簡單的陰影效果，如果想要更炫酷的效果，可以再寫入更多樣式。比如，繼續添加0px 1px 3px #606060;（是指第二種陰影效果）
color:#606060（字體本身的顏色：606060）；
outline-color:red（字四周的線框顏色：紅色）；
outline-style:solid/dotted（線形：實線/點線）；
outline-width：thin/10（線框寬度：thin/10）；
以上是CSS最基礎的一些語法，一共大致花了3個小時來了解，相對來說比較簡單。這部分結束后，就開始做一些簡單的頁面啦~
