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進行系統全面的學習,所有層次樣式表的用法都有,並且可以馬上呈現出來。