css四种引用方式：

1. 写在对应标签内：

  1.     <body style="background-color: grey;">
  2.         <h1 style="text-align:center; color:red;"></h1>
  3.     </body>

2. 写在style标签内：

  1.     <style>
  2.         body{
  3.             background-color : grey;
  4.         }
  5.         h1{
  6.             text-align : center; 
  7.             color : red;
  8.         }
  9.     </style>

3.link标签引入外部css

  1.     <link rel="stylesheet"; href="./a.css">

4.使用@import引入外部css(用于引入多个css,例html—>a—>b)

  1.     @import url(./b.css);

  • 清除浮动
    在子元素中添加浮动，父元素中添加clearfix类

    1. .clearfix::after{
    2.     content:'';
    3.     display:block;
    4.     clear:both;
    5. }

  • 例如：CSS - 图1

    1.  <div class="bg-info clearfix">
    2.      <button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
    3.      <button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
    4.   </div>

  • 常见用法解析

    1. .topNavBar > nav　> ul > li > a{        >  代表只有当后续元素为前元素子元素时才生效
    2.     list-style:none;            消除列表小圆点
    3.     text-decoration:none;        取消下划线
    4.     font-weight:bold;            加粗
    5.     margin-left：17px；          外边距
    6.     padding-top: 5px;            内边距
    7.     color:inherit;                继承父标签颜色        color可以继承
    8.     font-family:'Arial Black'    字体
    9.     font-size: 24px;            字体大小
    10. ｝
    12.     .topNavBar > nav　> ul > li > a{
    13.            border-bottom : 3px solid transparent;    透明    
    14.         display:block;        (当li未能包裹a时，例<li> 24,22 <a>24,30   使用block可解决)
    15.      }
    17.      .topNavBar > nav　> ul > li > a:hower{        hover代表鼠标悬停    （即当鼠标悬停在a标签时）
    18.         border-bottom : 3px solid  #e06567;        （悬停前后均设置相同边框大小，可解决出现边框后，左侧文字浮动问题动）
    19.      }

补充：

  • 浏览器强制触发元素悬浮状态：
    打开控制台，找到对应html代码，styles—>：hov—>：hover
    CSS - 图2

  • .topNavBar .logo .card 与 .card 区别
    加上范围，避免重名影响后续标签

    1. .topNavBar .logo .card{            
    2. color: #9A9DA2;
    3. }
    4. .card{            
    5. color: #9A9DA2;
    6. }

  • span标签
    标签相连，内容无间距；若有回车，会有间距

    1.  <span class='rs'>RS</span><span class='card'>card</span>

CSS - 图3

  1.      .topNavBar .logo .rs {      可通过margin属性调整间距
  2.         margin-right: 4px;
  3.         color: #e6686a;
  4.       }
  6.      <span class='rs'>RS</span>
  7.      <span class='card'>card</span>

CSS - 图4