1. CSS文本

p{
        /*
      颜色是通过CSS最经常的指定：
      十六进制值 - 如: ＃FF0000
      一个RGB值 - 如: RGB(255,0,0)
      颜色的名称 - 如: red
      */
      color: #ff6699;
      /*文本对齐 默认值为left
    可以取left | center | right*/
      text-align: center;
      /*文本修饰
      text-decoration
      underline 下划线
      line-through 删除线
      overline 上划线
      none 什么都没有*/
      text-decoration: overline;
      /*文本缩进*/
      text-indent: 2em;
      /*文本转换
      uppercase 全部大写
      lowercase 全部小写
      capitalize 首字母大写*/
      text-transform: capitalize;
    }

2.CSS字体

p{
      /*字体格式
      font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持
      第一种字体，他将尝试下一种字体
      */
      font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
      /*字体大小*/
      font-size: 14px;
      /*字体样式 normal | italic*/
      font-style: italic;
      /*设置字体权重  bold lighter
      若数值：100-900*/
      font-weight: 900;
      /*行高*/
      line-height：40px;
    }

3. CSS链接

/*若要同时设置这些样式必须保证按照如下顺序*/
    /* 跳转之前的链接样式 */
    a:link{
      color: #333;
    }
    /* 跳转之后的链接样式 */
    a:visited{
      color: yellow;
    }
    /* 鼠标覆盖的链接样式 */
    a:hover{
      color: blue;
    }
    /* 鼠标点击时的链接样式 */
    a:active{
      color: red;
    }

4. CSS列表

 <style>
    /*list-style:none 去掉列表样式
    square 方块
    circle空心圆
    disc 实心圆*/
    /*list-style-image:url(xxx)
    列表样式图片*/
    ul{
      /*list-style:disc;*/
      list-style-image: url("../images/icon1.png");
    }

  </style>

5. CSS边框

<style>
    div{
      width: 100px;
      height: 100px;
      /*边框
      参数1 宽度
      参数2 样式
      参数3 颜色*/
      /*border: 1px solid #333;*/
    /*不同方向的边框*/
      border-top: 1px solid #333;
    }
  </style>

6. CSS表格

CSS如下：

<style>
    table{
      width: 500px;
      /*边框折叠
      border-collapse:collapse
      让边框都重叠*/
      border-collapse: collapse;
      text-align: center;
      line-height: 50px;
    }
    th,td{
      border: 1px solid #333;
    }
  </style>

HTML如下：

<!--表格table-->
  <table>
    <!--表头thead-->
    <thead>
    <!--行tr table row-->
    <tr>
      <!--具体的表头字段th-->
    <th>手机</th>
      <th>商城</th>
    </tr>
    </thead>
    <!--表体-->
    <tbody>
    <tr>
      <!--每一行具体的内容-->
      <td>苹果</td>
      <td>京东</td>
    </tr>
    <tr>
      <td>小米</td>
      <td>天猫</td>
    </tr>
    <tr>
      <td>华为</td>
      <td>苏宁</td>
    </tr>
    </tbody>
  </table>

跨行和列的表格
HTML如下：

<table>
  <thead>
  <tr>
    <!--跨列-->
    <th colspan="3">商城</th></tr>
  </thead>
  <tbody>
  <tr class="gap"></tr>
  <tr>
    <!--跨行-->
    <th rowspan="5">商城</th>
    <td>手机</td>
    <td>电池</td>
  </tr>
  <tr class="gap"></tr>
  <tr>
    <td>衣服</td>
    <td>鞋子</td>
  </tr>
  <tr class="gap"></tr>
  <tr>
    <td>电风扇</td>
    <td>话筒</td>
  </tr>
  </tbody>
</table>

CSS如下：

<style>
    table{
      width: 500px;
      border-collapse: collapse;
      text-align: center;
    }
    tr,td{
      border: 1px solid #333;
    }
    .gap{
      height: 20px;
    }
  </style>

7. CSS轮廓

 div{
      width: 100px;
      height: 100px;
      background: red;
    /*轮廓和边框设置方式类似*/
      outline: 10px solid #333;
    }
    input{
      margin-top: 50px;
    /* 输入框选中高亮就是用的outline，若设置为none就没有这个样式了*/
      outline: none;
    }

8. CSS透明度

.child{
      width: 100px;
      height: 100px;
      background-color: red;
      /*透明度opacity 取值范围0-1*/
      opacity: 0.4;
    }

9. CSS样式继承

CSS如下：

<style>
    /*在块元素之间
    width子元素不设置width，他会继承父元素的width*/
    /*height: 如果父元素没有设置height，它会得到子元素的高度*/
    .child{
      height: 50px;
      width: 50px;
      background: yellow;
    }
    .parent{
      background: red;
    }
    .grandfather{
      width: 100px;
    }
  </style>

HTML如下：

<div class="grandfather">
<div class="parent">
  <div class="child"></div>
</div>
</div>

效果：

继承效果

CSS如下：

 <style>
    /*css可以继承的属性*/
    /*文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)*/
    /*字体相关属性:font-family,font-style,font-size,font-weight,line-height*/
    /*列表相关属性:list-style*/
    /*表格相关属性:border-collapse*/
    /*其他属性:cursor,visibility*/

    body{
      color: red;
      font-size: 14px;
      cursor: pointer;
    }
    ul{
      list-style: none;
    }
  </style>

HTML如下：

<p>你好,世界</p>
<div>
  <h1>h1</h1>
</div>
<ul>
  <li>列表</li>
</ul>

10. 盒子模型的box-sizing

 <style>
    /*当盒子模型的*/
    /*box-sizing:border-box*/
    /*设置border，padding它的width，height不会发生改变 会往里挤
    默认是content-box
    */
    div{
      width: 100px;
      height: 100px;
      background: red;
      box-sizing: border-box;
      margin-left: 100px;
      border: 10px solid #333;
      padding: 5px;
    }
  </style>

效果如下：
盒子总的大小为设置的100X100 不会因为border和padding而改变

box-sizing

11. 浮动

11.1 什么是浮动

• 浮动的目的：为了让元素并排显示
• 浮动的原理： 子元素浮动，父元素没有了高度
  HTML如下：

<div class="parent">
  <div class="child"></div>
</div>

CSS如下：

<style>
    .parent{
      width: 1200px;
      background: red;
    }
    .child{
      width: 100px;
      height: 50px;
      background: yellow;
      float: left;
    }
  </style>

效果如下：
父元素坍塌，没有高度。

浮动

11.2 清除浮动方式1

HTML

<div class="parent">
  <div class="child"></div>
  <div class="two"></div>
</div>

CSS如下：

<style>
    .parent{
      width: 1200px;
      background: red;
      height: 200px;
    }
    .child{
      width: 100px;
      height: 50px;
      background: yellow;
      float: left;
    }
    .two{
      /*clear: both 让该元素不受其他元素浮动的影响/清除浮动的样式
      只用对紧靠着的元素使用 注意two所在的位置*/
      clear: both;
      width: 150px;
      height: 150px;
      background: green;
    }
  </style>

11.3清除浮动方式2

HTML如下:

<div class="parent" >
  <div class="child"></div>
</div>
<div class="one"></div>

CSS如下：

<style>
    /*子元素浮动，让父元素有高度
    给父元素添加overflow:hidden;
    */
    .parent{
      overflow: hidden;
      width: 300px;
      background: red;
    }
    .child{
      width: 100px;
      height: 50px;
      background: yellow;
      float: left;
    }
    .one{
      width: 60px;
      height: 60px;
      background: green;
    }
  </style>

效果：
浮动被清除

清除浮动

11.4 清除浮动方式3

HTML如下：

<div class="parent row" >
  <div class="child"></div>
</div>
<div class="one"></div>

CSS 如下：
注意：是给父元素添加after伪元素，因为生成的伪元素会成为使用样式的元素的子元素

<style>
    /*子元素浮动，让父元素有高度
    给父元素添加after伪元素并设置伪元素clear:both display:table
    */
    .parent{
      width: 300px;
      background: red;
    }
    .child{
      width: 100px;
      height: 50px;
      background: yellow;
      float: left;
    }
    .row:after{
      content: '';
      display: table;
      clear: both;
    }
    .one{
      width: 60px;
      height: 60px;
      background: green;
    }
  </style>

效果如11.3的图。

12. CSS定位

CSS如下：

<style>
    .parent{
      width: 200px;
      height: 200px;
      background: red;
      /*相对定位就是元素在页面上正常的位置
      position:relative*/
      position: relative;
      left: 100px;
      top: 100px;
    }
    .child{
      right: 0px;
      /*top: 50px;*/
      bottom: 0px;
      width: 100px;
      height: 100px;
      background: yellow;
      /*绝对定位：绝对定位的元素的位置相对于最近的相对定位的父元素
      相对定位和绝对定位一般是成对出现，父元素相对定位，子元素绝对定位
      */
      position: absolute;
    }
  </style>

HTML如下：

<div class="parent">
  <div class="child">
  </div>
</div>

效果如下：

定位

13. CSS垂直水平居中

13.1 方式1

<style>
    *{
      margin: 0;
      padding: 0;}
      /*父元素相对定位，子元素绝对定位，子元素定位于高宽50%处
      再用margin-top| margin-left为子元素高宽值得一半来挤到中心*/
    .parent{
      width: 200px;
      height: 200px;
      background: red;
      position: relative;
    }
    .child{
      width: 80px;
      height: 80px;
      left: 50%;
      top: 50%;
      margin-top: -40px;
      margin-left:-40px;
      background: yellow;
      position: absolute;
    }
  </style>

13.2 方式2

<style>
    *{
      margin: 0;
      padding: 0;}
    .parent{
      width: 200px;
      height: 200px;
      background: red;
      position: relative;
    }
    .child{
      width: 80px;
      height: 80px;
      /*父元素相对定位，子元素绝对定位，子元素上下左右定位0，再用margin：auto去拉*/
       left:0;
      right:0;
      top:0;
      bottom:0;
      margin:auto
      background: yellow;
      position: absolute;
    }
  </style>

14. CSS固定定位

 <style>
    .one{
      /*position:fixed 定于屏幕上得一个位置，不随页面滚动而滚动*/
      position: fixed;
      width: 100px;
      height: 100px;
      right: 0;
      bottom: 50%;
      background: red;
    }
  </style>

15. CSS Z-index

CSS如下：

 <style>
    .parent{
      width: 300px;
      height: 300px;
      background: red;
      position: relative;
    }
    .one{
      width: 100px;
      height: 100px;
      background: yellow;
      position: absolute;
      z-index: 100;
    }
    .two{
      width: 50px;
      height: 50px;
      background: green;
      position: absolute;
      z-index: 199;
    }
    .parent:hover .two{
      z-index: 99;
    }

  </style>

HTML如下：

<!--Z-index -->
<!--功能：给那些设置了绝对定位的元素设置元素的堆叠顺序  -->
<div class="parent">
  <div class="one"></div>
  <div class="two"></div>
</div>

16. 浮动导航案例

CSS如下：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
    }
    .nav{
      line-height: 50px;
      overflow: hidden;
      background: pink;}
    li{
      width: 100px;
      text-align: center;
      float: left;
    }
    li>a{
      text-decoration: none;
      color: white;
      font-weight: bold;
      display: block;
    }
    a:hover{
      background: deeppink;
      color: #eee;
    }
  </style>

HTML 如下：

<div class="nav">
  <ul>
    <li><a href="">手机</a></li>
    <li><a href="">平板</a></li>
    <li><a href="">电脑</a></li>
  </ul>
</div>

效果如下：

浮动导航

17. 搜索框案例

CSS如下：

<style>
    *{
      margin: 0;
      padding: 0;}
    .search{
      position: relative;
      width: 250px;
      height: 40px;

    }
    .btn{
      position: absolute;
      width: 23px;
      height: 22px;
      background-image: url("../images/icon4.png");
      border: none;
      top: 0;
      bottom: 0;
      margin: auto;
      right: 10px;
    }
    .search>input{
      box-sizing: border-box;
      width: 250px;
      height: 40px;
      padding-left: 30px;
      background: #eee;
      border: none;
      outline: none;
      border-radius: 30px;
    }
  </style>

HTML如下:

<div class="search">
  <input type="text" placeholder="搜索">
  <button class="btn"></button>
</div>
</body>

效果如下：

搜索框