一, 谷歌开发者工具其他特性 (谷歌浏览器快捷键 F12)
(1) 元素选择, 在里面我们可以看到某些行的具体代码
(2) 查看源代码
(3) 该元素的样式显示, 我们可以看到我们选中的元素的具体样式属性, 可以在里面进行更改, 但不会修改源代码, 只会当做临时查看
(4) 具体的样式代码
(5) 该行代码所在的文件的位置
二, CSS 三大特性之继承性
定义: 给父元素设置一些属性, 子元素也可以使用
例如: 谷歌开发者工具也可以给出验证, p 标签继承了 div 标签的属性
- <style> div{ color: red;
- }
- </style>
- </head>
- <body>
- <div>
- <p > 我是用来测试 div 工具的 </p>
- </div>
3. 注意:
(1) 并不是所有的属性都是可以继承的, 只有以 color/font-/text-/line 开头的属性才可以继承
如例子中所示, 这一属性是灰色的, 代表属性并非继承来的
(2) 在 CSS 的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
- div{
- color: red;
- font-size: 50px;
- background: skyblue;
- }
....... 省略代码.......... <div>
- <ul>
- <li>
- <p > 我是多层次的 </p>
- </li>
- </ul>
- </div>
web 前端开发学习 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. 作用: 用来设置网页上的共性的格式, 简约代码.
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/3f487a3c098c