给所有标签添加样式,*{css样式}
示意图 |
---|
多学一招:通常只是用来去掉所有代码的边距,因为每个浏览器的边距不同,有的8个像素,有的7个像素,所以干脆会全部去掉,重新设置,保证浏览器的每个边距都一致
选择元素里面的元素,外层元素和内层元素中间用空格隔开:外层 内层{css样式}
示意图 |
---|
选择元素的直接子元素,父和子之间用 >
隔开:父元素>子元素{css样式}
示意图 |
---|
案例题:
<div class="nav"> <!-- 主导航栏 -->
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 侧导航栏 -->
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
在不修改以上代码的前提下,完成以下任务:
选择相邻的元素,两个元素中间用 +
隔开:元素1 + 元素2{css样式}
示意图 |
---|
元素:link 正常连接时候的状态
元素:visited 点击以后的状态
元素:hover 当鼠标移动上去的状态-------重点、常用
元素:active 当鼠标按下去时候的状态
注意:不是所有元素都支持这4种写法,超链接支持4种,工作中用的hover比较多,别的可以做个了解