HTML中的css，新手上路。。。

css文件

.abc{

color: blue; /*!important; 设置优先级最高*/
}

.rr{
  width: 40px;
  height: 40px;
  border: 1px solid green ;/*!important 调整优先级*/
}

*{
/*这是一个通用选择器*/
}
.tt{
  width: 50px;
  height: 50px;
  border: 1px solid yellow;

}

#yy{
  width: 60px;
  height: 60px;
  border: 1px solid white;
}

.uu,.ii,.oo,.pp{
  width: 80px;
  height: 80px;
  border: 1px solid cadetblue;

}
.ss01 .ss02{
  width: 90px;
  height: 90px;
  border: 1px solid darkblue;
}
.dd01>.dd02>.dd03{
  width: 100px;
  height: 100px;
  border: 1px solid darkorchid;
}

a:link{
/*伪类选择器 link匹配未访问过的超链接*/
color: green;
}
a:hover{
  /*鼠标悬停在元素上时的状态*/
  color: white;
}
a:active{
  /*元素被激活时的状态当点击时的状态*/
  color: yellow;
}
a:visited{
  /*匹配访问过的超链接*/
  color: blue;
}

.ff{
  width: 110px;
  height: 110px;
  border: 1px solid azure;
  /*overflow: auto;*/
  /*auto 自动设置溢出有滚轮不溢出无滚轮*/
  /*overflow: hidden; 对溢出的做隐藏处理*/
  /*overflow: scroll; 溢出添加滚轮*/
  /*overflow-x 横向溢出处理方式*/
  /*overflow-y 纵向溢出处理方式*/
}

html文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   /*内部选择器样式表，写在head中*/
   .ww{
    width: 30px;
    height: 30px;
    border: 1px solid blue;
   }
   .ee{
    background-color: navajowhite;
   }
   p{
    color: antiquewhite;
   }
  </style>
  <link rel="stylesheet" type="text/css" href="css/first.css"/>
</head>
<body class="ee">
  <p>标签选择器</p>
  
  <div style="width: 20px;height: 20px; border: 1px solid red;">
  </div>

  
  <div class="ww"></div>

  
  
  <div id="" class="rr">
  </div>

  
  <div class="tt"></div>
  

  
  <div id="yy"></div>

  
  
  <div class="uu"></div>
  <div class="ii"></div>
  <div class="oo"></div>
  <div class="pp"></div>

  
  
  <div id="" class="ss01">
   <div id="" class="ss02">
    <div id="" class="ss03">

    </div>
   </div>
  </div>

  
  
  <div class="dd01">
   <div id="" class="dd02">
    <div class="dd03"></div>
   </div>
  </div>

  
  <a href="#">伪类选择器测试</a>


  
  <div class="ff">
   溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法
   溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法
   溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法
   溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法
   溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法
   溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法
   溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法溢出处理方法
  </div>

</body>
</html>

HTML中的css，新手上路。。。

猜你喜欢