2018.03.27
author：wills
上一篇文章中對HTML中常見的標籤，進行了瞭解，但是僅僅只是瞭解哪些標籤是不夠的，我們如果需要對網頁進一步進行更高級的渲染，就需要用到層疊樣式表。下面是一些粗淺的層疊樣式表的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*樣式表，行內的 內嵌的，外部的*/
/*border表示邊界，solid表示顏色*/
/* {border:1px solid blue;}*/
/*rgb使用三原色，rgba的a表示透明度，0表示透明，1表示不透明*/
/*設置字體時，給上備選項防止客戶端沒有相應字體*/
@font-face{
/*強行讓客戶端使用服務器的漂亮字體*/
font-family: '字體名'
src:url(字體文件的路徑);
}
.fee{
/* 類選擇器*/
}
#f{
/* id選擇器 還有標籤選擇器什麼都不加就用標籤名*/
/* 在優先級相同的時候就近原則，當id選擇器與類選擇器衝突時id優先級高此外還有！important表示最重要，優先級更高*/
}
*fkj{
color: green !important
}
.foo {
color:rgba(255,0,0,0.5);
height: 200px;
width:1000px;
background-color: lightgray;
}
.bar{
/*當字母和漢字在同一行時，一般設置兩種字體選擇*/
/* font-family:Courier,宋體;
font-size:300%;
font-weight: bold;
font-style: italic;*/
/*寫到一起必須注意順序：斜體否-變體否-粗體否-大小/行高-字體*/
font:italic small-caps bold 300%/200px Courier,黑體;
/*line-height: 300px;*/
/*10px表示10個像素的距離*/
letter-spacing: 10px;/*字符空格*/
word-spacing: 50px; /*單詞間隔*/
text-align: center; /*文本居中*/
/*overflow:scroll;*/
text-decoration: line-through;/*文本裝飾，下劃線，刪除線*/
}
/*對p標籤寫一個樣式first line表示第一行生效*/
p:first-line{
font-size: 36px;
font-weight: bolder;
/*text-transform: capitalize（首字母大寫）;*/
text-transform: uppercase（所有字母大寫）;
}
</style>
//上面所有包含於<style></style>之中的內容都可以拿出來單獨放到一個文本文件中器後綴名爲.css然後使用link來進行鏈接調用。
<link rel="stylesheet" type="text/css" href="css/styl.css">
</head>
<body>
<p >niha1 adhfjs kha sj kbr!<br>
slkd jgs lj lalk ajlfal<br>
lsdjl sjdgls ajg dlsjal
</p>
<h1 class="foo bar">Hello world 時間是永恆的!</h1><br>
I will become a great programmer<br>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<img src="1.jpg" alt="美女" width="400">
<img src="1.jpg" alt="美女" width="300">
<img src="1.jpg" alt="美女" width="200">
<h1 style="color:cyan">美女漂亮吧，想不想嫖啊，只要998額</h1>
</body>
</html>以上只是一些粗淺應用，如要更近一步的瞭解學習，推薦runoob進行系統全面的學習，所有層次樣式表的用法都有，並且可以馬上呈現出來。