初識CSS
1.什么是CSS?
CSS的名稱叫做“層疊樣式表”陌僵，說的直白點据悔，就是改變HTML元素的樣式，比如顏色机杜、大小客情、邊框等其弊。
2.style屬性
設(shè)置字體顏色：
<h1 style="color:blue;">看我變色</h1>
設(shè)置樣式高度：
<hr style="height:5px;">
px是網(wǎng)頁中的一個長度單位
設(shè)置字體大小
還有寬度，背景色膀斋，字體大小的設(shè)置：
<h1 style="color:blue;">看我變色</h1>
<hr style="height:5px; width:5000px;">
<p style="background-color:pink;">我在崖邊跌落</p>
<p style="font-size:10px"></p>
<p><i>你在說什么梭伐，什么都不懂</i></p>
<p><u style="front-size:20px;">從什么都沒有的地方</u></p>
加邊框：
<div style="border-width:1px;border-color:blue;border-style:dotted;">
<h2>聽莫文蔚唱歌</h2>
<ul>
<li>孩子離開了秋千最快要到七月才回來蕩</li>
<li>影劇場依然沸沸揚(yáng)揚(yáng)像極了槍聲大作的靶場</li>
</ul>
</div>
上面div里面的style屬性也可以寫成：style="border:1px blue dotted;
延伸
邊框樣式：
none：無邊框。與任何指定的border-width值無關(guān)
hidden：隱藏邊框仰担。IE不支持
dotted：在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線糊识。否則為實線（常用）
dashed：在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）
solid：實線邊框（常用）
double：雙線邊框摔蓝。兩條單線與其間隔的和等于指定的border-width值
groove：根據(jù)border-color的值畫3D凹槽
ridge：根據(jù)border-color的值畫菱形邊框
inset：根據(jù)border-color的值畫3D凹邊
outset：根據(jù)border-color的值畫3D凸邊
提問：怎么限制邊框大新该纭？
設(shè)置邊距(margin-top/right/bottom/left)：
<li style="margin-top:20px;">孩子離開了秋千最快要到七月才回來蕩</li>
<li style="margin-top:20px;">影劇場依然沸沸揚(yáng)揚(yáng)像極了槍聲大作的靶場</li>
<li style="margin-top:20px;">工作了一整天只喝了一碗冷湯</li>
也可以組合margin:10px 10px 10px 10px 代表上右下左各邊距為10px
為表格添加邊框：
<table border="1" style="border-color:blue;">
<tr>
<td>我的夢想</td>
<td>環(huán)游世界</td>
</tr>
<tr>
<td>我的愛好</td>
<td>吃喝玩樂</td>
</tr>
</table>
用border='1'規(guī)定圍繞表格的邊框?qū)挾取?/p>
試試完整網(wǎng)頁：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>你的名字</title>
</head>
<body>
<h1 style="color:blue;">看我變色</h1>
<hr style="height:5px; width:5000px;">
<p style="background-color:pink;">我在崖邊跌落</p>
<p style="font-size:10px"></p>
<p><i>你在說什么贮尉，什么都不懂</i></p>
<p><u style="front-size:20px;">從什么都沒有的地方</u></p>
<p><b>忘了關(guān)那扇門拌滋，那扇窗</b></p>
<div style="border-width:1px;border-color:blue;border-style:dotted;">
<h2>聽莫文蔚唱歌</h2>
<ul>
<li style="margin-top:20px;">孩子離開了秋千最快要到七月才回來蕩</li>
<li style="margin-top:20px;">影劇場依然沸沸揚(yáng)揚(yáng)像極了槍聲大作的靶場</li>
<li style="margin-top:20px;">工作了一整天只喝了一碗冷湯</li>
</ul>
</div>
<table border="1" style="border-color:blue;">
<tr>
<td>我的夢想</td>
<td>環(huán)游世界</td>
</tr>
<tr>
<td>我的愛好</td>
<td>吃喝玩樂</td>
</tr>
</table>
</body>
</html>
