使用Chrome开发者工具
-
找到开发者工具
1.png
2.png
-
标签查询方式
标签+mdn -
在线编辑工具codepen
-
层叠
标签重叠起来
颜色
-
RGBA(红，绿，蓝，透明度)
-
一般用十六进制表示
3.png
链接的样式
Link 没有访问过的
Visited 已经访问过的
Hover 用户的鼠标光标刚好停留在这个链接
Focus 一个链接被选中的时候
Active 一个链接被激活的时候
如：
a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}
语义化
提高原来标签的level，参考好的网站具体化
<ul>
<li></li>
</ul>
cssreset
- 修改浏览器默认样式
body,ul,ol,li {
padding:0;
margin:0;
}
- 网页的默认字体通常是16
选择器
- 通配符选择器 *
- 类选择器
<head>
<style>
.box { //英文格式. + 类名
color: pink;
}
</style>
</head>
<body>
<p>
<span class="box">类选择器</span>
</p>
</body>
- 后代选择器
<head>
<style>
p .box { //span标签是p标签的后代，这里包含孙子重孙等等
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>
网友评论