百度前端学院·第二天学习笔记+CSS权重问题总结

最新推荐文章于 2022-03-07 08:42:35 发布

weixin_40463018

最新推荐文章于 2022-03-07 08:42:35 发布

阅读量94

点赞数

分类专栏：前端学院笔记文章标签：前端笔记

本文链接：https://blog.csdn.net/weixin_40463018/article/details/91899032

版权

前端学院笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

练习是做一个个人简历
看之前觉得挺简单的，毕竟要求也简单，用H5和CSS3弄个简单的表格就成了，
写的时候，忘记在style标签声明类型，导致一开始的时候表格的边框样式没弄进去，，，
然后顺便加上今天写的时候总结CSS中优先级（权重）的问题
优先级，我所简化的总结就是样式的覆盖问题，比如在style中声明了背景是红色，写着写着，得，我又在标签中又声明了背景是红色，那到底声明哪个类型呢？
最简单的方法就是打开F12开发模式拯救一切，没有实现的类型，会在Elements中Style窗口中画条线
F12开发者模式下
覆盖的顺序也就是权重就是下面的排列，权重值就不写了，非得弄懂权值？我弄懂顺序不就一样的吗，新手上来就造火车？

使用了！important声明的规则（不管权重值有多大还有样式位置的远近，都具有最大优先级）
内嵌在style下的属性声明
使用ID选择器
. 使用类选择器，属性选择器，伪元素和伪类选择器的规则
使用了元素选择器的规则
包含一个选择器的规则
同一类选择器的就近原则

没了，再贴上练习的代码

<!DOCTYPE html>

<html>

<head>
  <title>简历练习</title>
  <h1 align="center"  >简历</h1>
  <style type="text/css">
  	table{
		border:solid 1px #000;
		border-collapse:collapse;}
	tr{
		border:solid 1px #CCC
	}
  </style>
  
</head>
<body>
	<div class="table-a"> 
      <div align="center" style="background-color:#666">
        <table width="401" border="0" cellspacing="0" cellpadding="0"> 
          <tr > 
            <td width="146" height="42" bordercolor="#000000">姓名</td> 
            <td width="255">XXXX</td> 
          </tr> 
          <tr> 
            <td height="51">年龄</td> 
            <td>23</td>  
          </tr> 
          <tr> 
            <td height="48">联系方式</td> 
            <td>www.w3c.com</td>  
          </tr> 
          <tr>
          	<td>技能简介</td>
            <td>精通C/C++，JAVA，HTML+CSS+JS的书写以及WINDOWS，IOS的开机方法</td>
          </tr>
          
        </table> 
      </div>
</div> 
</body>



</html>

weixin_40463018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端学院·第二天学习笔记+CSS权重问题总结

练习是做一个个人简历看之前觉得挺简单的，毕竟要求也简单，用H5和CSS3弄个简单的表格就成了，写的时候，忘记在style标签声明类型，导致一开始的时候表格的边框样式没弄进去，，，然后顺便加上今天写的时候总结CSS中优先级（权重）的问题优先级，我所简化的总结就是样式的覆盖问题，比如在style中声明了背景是红色，写着写着，得，我又在标签中又声明了背景是红色，那到底声明哪个类型呢？最简单的方...
复制链接

扫一扫