看程序学css-2-CSDN博客

本文链接：https://blog.csdn.net/tujiahao1/article/details/91346697
1、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  p.big{
    font-size:30px;
  }

  p.small{
    font-size:50%;
  }

  p.small2{
    font-size:0.5em;
  }
</style>

<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>

<style>
  p.n{
    font-style:normal;
  }

  p.i{
    font-style:italic;
  }
</style>

<p >标准字体</p>
<p class="n">标准字体</p>
<p class="i">斜体</p>

<style>
  p.n{
    font-weight:normal;
  }
  p.b{
    font-weight:bold;
  }
</style>

<p >标准字体</p>
<p class="n">标准字体</p>
<p class="b">粗一点</p>

<style>
  p.f1{
    font-family:"Times New Roman";
  }

  p.f2{
    font-family:Arial;
  }
  p.f3{
    font-family:宋体;
  }
  p.f4{
    font-family:黑体;
  }
  p.f5{
    font-family:楷体;
  }
  p.f6{
    font-family:微软雅黑;
  }
</style>

<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>

<style>
  p.all{
    font:italic bold 30px "Times New Roman";
  }

</style>

<p>默认字体</p>

<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>
</body>
</html>
2、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  span{
    cursor:crosshair;
  }
</style>

<span>鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span>
试一下
<style>
  table.t1{
    table-layout:automatic;
  }

  table.t2{
    table-layout:fixed;
  }

</style>

<table class="t1" border="1" width="100%">
  <tr>
    <td width="10%">abcdefghijklmnopqrstuvwxyz</td>
    <td width="90%">abc</td>
  </tr>
</table>

<table class="t2" border="1" width="100%">
  <tr>
    <td width="50px">abcdefghijklmnopqrstuvwxyz</td>
    <td >abc</td>
  </tr>
</table>
<style>
  table.t1{
    border-collapse:separate;
  }

  table.t2{
    border-collapse:collapse;
  }

</style>

<table class="t1" border="1" width="200px">
  <tr>
    <td width="50%">边框分离</td>
    <td width="50%">边框分离</td>
  </tr>
</table>

<br/>
<br/>

<table class="t2" border="1" width="200px">
  <tr>
    <td width="50%">边框合并</td>
    <td width="50%">边框合并</td>
  </tr>
</table>
</body>
</html>
3、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  .solid{
    border-style:solid;
  }
  .dotted{
    border-style:dotted;
  }
  .dashed{
    border-style:dashed;
  }
  .double{
    border-style:double;
  }

</style>

<div> 默认无边框div </div>

<div class="solid"> 实线边框  </div><br/>

<div class="dotted"> 点状边框  </div> <br/>
<div class="dashed"> 虚线边框  </div> <br/>
<div class="double"> 双线边框  </div> <br/>

<style>
  .red{
    border-style:solid;
    border-color:red;
  }

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色边框  </div><br/>
<style>
  .red{
    border-style:solid;
    border-color:red;
    border-width:1px;
  }

  .default{
    border-style:solid;
    border-color:red;
  }

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色细边框  </div><br/>

<div class="default"> 实线红色默认宽度边框  </div><br/>
<style>
  .red{
    border:1px dotted LightSkyBlue;
  }

</style>

<div> 默认无边框div </div>

<div class="red"> 点状天蓝色细边框  </div><br/>
<style>
  div{
    width:150px;
    height:150px;
    border-top-style:solid;
    border-top-color:red;
    border-top-width: 50px;
    background-color:lightgray;
  }
</style>

<div>
  只有上面有边框
</div>
<style>
  div.lefttop{
    width:150px;
    height:150px;
    border-top-style:solid;
    border-top-color:red;
    border-top-width: 50px;
    border-left-style:solid;
    border-left-color:blue;
    border-left-width: 50px;
    background-color:lightgray;
  }

  div.alldirection{
    width:150px;
    height:150px;
    border-top-style:solid;
    border-top-color:red;
    border-top-width: 50px;
    border-left-style:solid;
    border-left-color:blue;
    border-left-width: 50px;
    border-bottom-style:solid;
    border-bottom-color:green;
    border-bottom-width: 50px;
    border-right-style:solid;
    border-right-color:yellow;
    border-right-width: 50px;
    background-color:lightgray;
  }
</style>

<div class="lefttop">
  左边和上边都有边框
</div>
<br>
<div class="alldirection">
  四边都有边框　
</div>
<style>
  .red{
    border:1px solid red;
  }

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色细边框  </div><br/>
<span class="red"> 实线红色细边框  </span><br/>

</body>
</html>
4、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  .red{
    border:5px solid red;
    background-color:green;
  }

  .pad-left{
    border:5px solid red;
    background-color:green;
    padding-left:50px;
  }

</style>

<span class="red"> 无内边距的span  </span><br/> <br/>

<span class="pad-left"> 左边距为50的span  </span><br/>
<style>
  .pad-left-one{
    border:5px solid red;
    background-color:green;
    padding: 20;
  }

  .pad-left-four{
    border:5px solid red;
    background-color:green;
    padding: 10 20 30 40;
  }

</style>
<br/>
<span class="pad-left-one"> padding:20的span  </span> <br/> <br/> <br/> <br/>

<span class="pad-left-four">
padding: 10 20 30 40 的span </span> <br/> <br/> <br/> <br/>
<style>
  .red{
    border:1px solid red;
    background-color:green;
  }

  .margin{
    border:1px solid red;
    background-color:green;
    margin-left:10px;
  }

</style>

<span class="red"> 无外边距的span  </span>
<span class="red"> 无外边距的span  </span>

<br/>

<span class="red"> 无外边距的span  </span>
<span class="margin"> 有左外边距的span  </span>
<style>
  .box{
    width:70px;
    padding:5px;
    margin: 10px;
  }

  div{
    border:1px solid gray;
    font-size:70%;
  }
</style>

<div>
  其他元素
</div>

<div class="box">
  内容宽度70px <br><br>
  内边距：5px <br> <br>
  外边距：10px <br>
</div>

<div>
  其他元素
</div>

</body>
</html>
5、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  a:link {color: #FF0000}
  a:visited {color: #00FF00}
  a:hover {color: #FF00FF}
  a:active {color: #0000FF}
</style>

<a href="http://www.12306.com">超链的不同状态</a>
<style>
  a.no_underline {text-decoration: none}
</style>

<a href="http://www.12306.com">默认的超链</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>

<style>
  div.d{
    display:none;
  }

  div.v{
    visibility:hidden;
  }
</style>

<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
<div class="v">隐藏的div4,使用visibility:hidden隐藏</div>
<div>可见的div5</div>


</body>
</html>