2018-10-16
URL相對(duì)路徑
https://cdn2.jianshu.io/assets/web/icon_nocontent-00c423de394b9184d467f2f2a7284b54.png
https://cdn2.jianshu.io表示服務(wù)器地址
assets/web/icon_nocontent-00c423de394b9184d467f2f2a7284b54.png表示路徑
URL錯(cuò)誤寫法
1、帶本地地址 ;2、帶IP地址 ;
添加樣式
在head中添加樣式
<style>
.poem
{
color:#029323;
font-family: "微軟雅黑";
font-size: 30;
}
</style>
使用時(shí)添加樣式:<h1 class="poem">“假死騙保案”曝光</h1>
樣式具體信息科參考W3School
檢查樣式
使用Google
常用樣式
background-color: #FF0;
padding: 10PX;
margin: 10px 10px auto 10px;
border-bottom: 1px solid #000;
border-radius: 4px;
text-align: center;
樣式單CSS
添加CSS文件 ,內(nèi)容為樣式
.poem
{
color:#029323;
font-family: "微軟雅黑";
font-size: 30;
}
在使用文件中使用LINK調(diào)用<link rel="stylesheet" href="css/new_file.css" />
然后正常使用或使用<p style="font-family: serif;">10月16日</p>臨時(shí)使用樣式
DOM文檔結(jié)構(gòu)模型
body內(nèi)全部標(biāo)簽的樹形結(jié)構(gòu)
類選擇器
<link rel="stylesheet" href="css/new_file.css" />
<style>
.a{background-color: red;}
</style>
調(diào)用<h1 class="poem a">“假死騙保案”</h1>,樣式優(yōu)先級(jí)為定義順序
標(biāo)簽選擇器
<style>
button//所有button都適用
{
color: blue;
background-color: red;
}
button.set//調(diào)用樣式時(shí)適用
{
font-size: 30px;
}
</style>
<button class="set">發(fā)送</button>
標(biāo)簽選擇器不再贅述。
ID選擇器
<style>
button
{
color: blue;
background-color: red;
font-size: 30px;
}
()#ok
//調(diào)用ID時(shí)適用
{
font-size: 20px;
}
</style>
<button style="color: yellow;" id="ok">發(fā)送</button>
優(yōu)先級(jí):臨時(shí)樣式>id>button
偽類選擇器
不同狀態(tài)
鼠標(biāo)移動(dòng)hover
聚焦focus
<style>
button
{
color: blue;
background-color: white;
font-size: 30px;
}
button:hover
{
border-color: red;
}
button:focus
{
border-color: blue;
}
</style>
子選擇器

這個(gè)大家可以自己去試試哦,以后還是都以圖片形式上傳吧,不然也不好描述。