使用Chrome開發(fā)者工具
-
找到開發(fā)者工具
1.png
2.png
標(biāo)簽查詢方式
標(biāo)簽+mdn在線編輯工具codepen
層疊
標(biāo)簽重疊起來
顏色
RGBA(紅，綠犬第，藍，透明度)
-
一般用十六進制表示
3.png
鏈接的樣式
Link 沒有訪問過的
Visited 已經(jīng)訪問過的
Hover 用戶的鼠標(biāo)光標(biāo)剛好停留在這個鏈接
Focus 一個鏈接被選中的時候
Active 一個鏈接被激活的時候
如：
a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}
語義化
提高原來標(biāo)簽的level仓洼，參考好的網(wǎng)站具體化
<ul>
<li></li>
</ul>
cssreset
- 修改瀏覽器默認樣式
body,ul,ol,li {
padding:0;
margin:0;
}
- 網(wǎng)頁的默認字體通常是16
選擇器
- 通配符選擇器 *
- 類選擇器
<head>
<style>
.box { //英文格式. + 類名
color: pink;
}
</style>
</head>
<body>
<p>
<span class="box">類選擇器</span>
</p>
</body>
- 后代選擇器
<head>
<style>
p .box { //span標(biāo)簽是p標(biāo)簽的后代宦言，這里包含孫子重孫等等
color: pink;
}
</style>
</head>
<body>
<p>
<span class="box">后代選擇器</span>
</p>
</body>
- 子元素選擇器
<head>
<style>
li >span { //選擇li的子元素span，這里只能選擇到子元素span换可，孫子重孫span選不到
color: pink;
}
</style>
</head>
<body>
<ul>
<li>
<p>
<span>子元素選擇器</span>
</p>
</li>
<li>
<span>子元素選擇器</span>
</li>
<li>
<span>子元素選擇器</span>
</li>
<li>
<span>子元素選擇器</span>
</li>
</ul>
</body>
- 毗鄰元素選擇器
<head>
<style>
p + span{ //選擇p元素鄰居span椎椰，只能選擇一個
color: pink;
}
</style>
</head>
<body>
<p>毗鄰元素選擇器</p>
<p>毗鄰元素選擇器</p>
<span>毗鄰元素選擇器</span>
<span>毗鄰元素選擇器</span>
</body>
- 兄弟元素選擇器
<head>
<style>
p ~ span{ //選擇所有兄弟元素span
color: pink;
}
</style>
</head>
<body>
<p>兄弟元素選擇器</p>
<p>兄弟元素選擇器</p>
<span>兄弟元素選擇器</span>
<span>兄弟元素選擇器</span>
</body>
- 多元素選擇器
<head>
<style>
div,p,span { //用英文,隔開
color: pink;
}
</style>
</head>
<body>
<div>
<p>多元素選擇器</p>
<p>多元素選擇器</p>
<span>多元素選擇器</span>
<span>多元素選擇器</span>
</div>
</body>
