CSS继承性&谷歌开发者工具其它作用
一、谷歌开发者工具其他特性(谷歌浏览器快捷键F12)(1)元素选择, 在里面我们可以看到某些行的具体代码(2)查看源代码(3)该元素的样式显示,我们可以看到我们选中的元素的具体样式属性,可以在里面进行更改,但不会修改源代码,只会当做临时查看(4)具体的样式代码(5)该行代码所在的文件的位置二、CSS三大特性之继承性定义:给父元素设置一些属性,子元素也可以使用例如:谷歌开发者工具也...
一、谷歌开发者工具其他特性(谷歌浏览器快捷键F12)
(1)元素选择, 在里面我们可以看到某些行的具体代码
(2)查看源代码
(3)该元素的样式显示,我们可以看到我们选中的元素的具体样式属性,可以在里面进行更改,但不会修改源代码,只会当做临时查看
(4)具体的样式代码
(5)该行代码所在的文件的位置
二、CSS三大特性之继承性
定义:给父元素设置一些属性,子元素也可以使用
例如:谷歌开发者工具也可以给出验证,p标签继承了div标签的属性
<style> div{ color: red;
}
</style>
</head>
<body>
<div>
<p>我是用来测试div工具的</p>
</div>
学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程,学习工具,职业规划 )
3.注意:
(1)并不是所有的属性都是可以继承的,只有以color/font-/text-/line开头的属性才可以继承
如例子中所示,这一属性是灰色的,代表属性并非继承来的
(2)在CSS的继承中不仅仅是儿子可以继承,只要是后代都可以继承
div{
color: red;
font-size: 50px;
background: skyblue;
}
.......省略代码.......... <div>
<ul>
<li>
<p>我是多层次的</p>
</li>
</ul>
</div>
学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程,学习工具,职业规划 )
(3)CSS继承性的特殊性
i.a标签的文字颜色和下划线是不能继承的
ii.h标签的文字大小是不能继承的
div{
color: red;
text-decoration: none;
font-size: 30px;
}
......省略代码........ <div>
<a href="#">测试a标签</a>
<h1> 我是用来测试h标签的 </h1>
</div>
解释:a标签颜色不是红的而且带下划线,h标签的字体大小也不是我们设置的
4.作用:用来设置网页上的共性的格式,简约代码。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)