HTML&CSS基礎-内聯樣式和内部樣式表
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則将追究法律責任。
一.CSS(Cascading Style Sheets)簡介
層疊樣式表(Cascading Style Sheets)
css可以用來為網頁建立樣式表，通過樣式表可以對網頁進行裝飾。
所謂層疊，可以将整個網頁想象成一層一層的結構，層次高的将會覆寫層次低的。
而CSS就可以分為網頁的各個層次設定樣式。 二.使用火狐(Mozilla Firefox)浏覽器的Tilt插件的3D效果來看層疊樣式表
1>.如下圖所示,按住"alt"鍵，點選"工具"，選擇"Web 開發者"後再點選"Tilt"
2>.會進入到一個如下圖所示的界面
3>.我們可以旋轉目前網頁
4>.發現我們看到的圖竟然是一層一層累加起來的，于是我們将網頁轉動到側面，如下圖所示
三.demo.html源代碼
<!DOCTYPE html>
<html>
<head>
<title>尹正傑的網頁</title>
<meta charset="utf-8"/>
<!--
内部樣式表:
也可以即将CSS樣式編寫到head中的style标簽裡,注意:type屬性是MIME的類型，建議大家顯示寫上，如果不寫可能會在一些較老的浏覽器無法識别CSS代碼。
将樣式表編寫在style标簽中，然後通過CSS選擇器選中指定的元素,然後可以同時為這些元素一起樣式，這樣可以使樣式進一步複用;
将樣式表編寫到style标簽中，也可以使标簽和結構進一步分離它也是我們推薦的使用方式;
-->
<style type="text/css">
p {
color:red;
font-size:40px;
}
</style>
<head>
<body>
<!--
雖說font标簽可以将字型設定為紅色，但我們并不推薦這樣使用，而是推薦使用css來修飾。
-->
<h1>我的部落格位址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1>
<!--
可以将CSS樣式編寫到元素的style屬性當中
将樣式直接編寫到style屬性中，這中樣式我們成為内聯樣式;
内聯樣式隻對目前的元素中的内容起作用，内聯樣式不友善複用;
内聯樣式屬于結構與表現耦合，不友善後期的維護，不推薦使用;
-->
<p><<靜夜思>></p>
<p style="color:yellow; font-size:80px">窗前明月光，疑是地上霜</p>
<p>舉頭望明月，低頭思故鄉</p>
</body>
</html> 四.浏覽器打開以上代碼渲染結果
當你的才華還撐不起你的野心的時候，你就應該靜下心來學習。當你的能力還駕馭不了你的目标的時候，你就應該沉下心來曆練。問問自己，想要怎樣的人生。
歡迎加入基礎架構自動化運維：598432640，大資料SRE進階之路：959042252，DevOps進階之路：526991186