css

作者: fanison | 来源:发表于2019-02-13 22:30 被阅读5次

自己练习的css动画（单标签）
CSS背景、文本、字体、链接、列表、轮廓
CSS 教程
CSS样式
CSS高级
前端开发之 CSS入门
CSS第一天
CSS学习笔记（1）
CSS盒子模型、定位、浮动
每个前端工程师都应该懂的前端性能优化总结：

css四种引用方式：

1. 写在对应标签内：

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

2. 写在style标签内：

    <style>
        body{
            background-color : grey;
        }
        h1{
            text-align : center; 
            color : red;
        }
    </style>

3.link标签引入外部css

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

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

    @import url(./b.css);

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

 .clearfix::after{
      content:'';
      display:block;
      clear:both;
  }

例如：

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

常见用法解析

 .topNavBar > nav　> ul > li > a{        >  代表只有当后续元素为前元素子元素时才生效
      list-style:none;            消除列表小圆点
      text-decoration:none;       取消下划线
      font-weight:bold;           加粗
      margin-left：17px；         外边距
      padding-top: 5px;           内边距
      color:inherit;              继承父标签颜色        color可以继承
      font-family:'Arial Black'   字体
      font-size: 24px;            字体大小
  ｝

      .topNavBar > nav　> ul > li > a{
          border-bottom : 3px solid transparent;  透明  
          display:block;      (当li未能包裹a时，例<li> 24,22 <a>24,30   使用block可解决)
       }
 
       .topNavBar > nav　> ul > li > a:hower{      hover代表鼠标悬停 （即当鼠标悬停在a标签时）
          border-bottom : 3px solid  #e06567;     （悬停前后均设置相同边框大小，可解决出现边框后，左侧文字浮动问题动）
       }

补充：

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

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

  .topNavBar .logo .card{           
  color: #9A9DA2;
  }
  .card{            
  color: #9A9DA2;
  }

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

     .topNavBar .logo .rs {      可通过margin属性调整间距
        margin-right: 4px;
        color: #e6686a;
      }

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