Day03 CSS样式

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列表

5. CSS边框

6. CSS表格

CSS如下：

HTML如下：

  

    
    

    
    

      
    
手机
      
商城
    
    
    
    

    

      
      
苹果
      
京东
    
    

      
小米
      
天猫
    
    

      
华为
      
苏宁
    
    
  

跨行和列的表格
HTML如下：

  

  

    
    
商城
  
  

  

  

    
    
商城
    
手机
    
电池
  
  

  

    
衣服
    
鞋子
  
  

  

    
电风扇
    
话筒
  
  

CSS如下：

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如下：

HTML如下：

效果：

继承效果

CSS如下：

HTML如下：

你好,世界

  
h1


  
列表

10. 盒子模型的box-sizing

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

box-sizing

11. 浮动

11.1 什么是浮动

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

CSS如下：

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

浮动

11.2 清除浮动方式1

HTML

CSS如下：

11.3清除浮动方式2

HTML如下:

CSS如下：

效果：
浮动被清除

清除浮动

11.4 清除浮动方式3

HTML如下：

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

效果如11.3的图。

12. CSS定位

CSS如下：

HTML如下：

效果如下：

定位

13. CSS垂直水平居中

13.1 方式1

13.2 方式2

14. CSS固定定位

15. CSS Z-index

CSS如下：

HTML如下：

16. 浮动导航案例

CSS如下：

HTML 如下：

  

    
手机
    
平板
    
电脑
  

效果如下：

浮动导航

17. 搜索框案例

CSS如下：

HTML如下:

效果如下：

搜索框