css核心属性(上)

1. css样式
   • 选择符
   • 声明
     • 属性
     • 属性值

   div{
       width:400px;
   }
   

2. 字体大小
   • px 默认16px
   • em 默认1em=16px

   div{
       font-size: 2em;
   }
   

   • 绝对大小关键字-实际场景用不上，仅作了解

   xx-small=9px    large=19px  x-small=11px    x-large=23px    small=13px  xx-large=27px   medium=16px
   

3. 字体类型
   • 字体是中文时候需要加引号-“宋体”，“微软雅黑”
   • 字体是英文且有空格时候需要加引号,如果是单词英文则不需要-“Times New Roman”，Arial
   • 可以同时写多种字体，浏览器将根据系统自身字体选择所支持的字体

   div{
       font-family:"宋体","微软雅黑",Arial;
   }
   

4. 字体倾斜
   • italic 倾斜
   • oblique 倾斜幅度更大，一般浏览器区分不明显
   • normal 不做倾斜

   div{
       font-style:oblique;
   }
   

5. 文本行高
   • 当单行文本行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐
   • 当单行文本行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位
   • 当单行文本行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位-不建议这么做

   div{
       line-height:50px;
   }
   

6. font复合写法
   • 最少需要写上size和family，且位置固定不可和其他属性互换
   • 50px/100px等价50px/2em等价50px/2
   • font-style|font-weight|font-size/line-height|font-family 是否倾斜|是否加粗|字体大小/行高|字体

   div{
       font:normal bold 20px/2em "微软雅黑",Arial;
   }
   

7. 检索文本大小写
   • none 不修改
   • uppercase 改全大写
   • lowercase 改全小写
   • capitalize 改首字母大写

   div{
       text-transform:none;
   }
   

8. 文本对齐方式
   • 水平对齐 {text-align：left/right/center/justify} justify-平均分配间距
   • 垂直对齐方式 {text-align:top/bottom/middle;}上中下 inline-block

   div{
   text-align：left;
   }
   

9. 文本修饰
   • none 没有修饰
   • underline 添加下划线
   • overline 添加上划线
   • line-through 添加删除线
   • blink(不再使用) 闪烁
   • 可以配合伪类选择器实现鼠标悬停效果

   a{
       text-decoration: none;
   }
   a:hover{
       text-decoration: underline;
   }
   

10. 首行缩进
    • 可以取负值，可用于做seo优化
    • 只对起始行生效

    div{
        text-indent:2em;
    }
    

11. 字间距
    • 控制英文字母或者汉字的字距

    div{
        letter-spacing:10px;
    }
    

12. 词间距
    • 控制英文单词的词距
    • 以空格做识别，空格之后自动加间距

    div{
        word-spacing:10px;
    }
    

13. 定义列表符号样式
    • disc 实心圆
    • circle 空心圆
    • square 实心方块
    • none 去掉列表符号

    li{
        list-style-type:none
    }
    

14. 使用图片作为列表符号

        li{
            list-style-image:url(image/1.png)
        }
    

15. 定义列表符号的位置

• outside 外面
• inside 里面

  li{
      list-style-position: inside;
  }
  

16. 定义列表复合写法

    li{
        list-style:none;
    }
    

17. 边框
    • border-style solid实线|dashed虚线|dotted点状线|double双线|none/0/hidden去掉边框|groove槽边|ridge岭边|inset凹边|ouset凸边
    • border-width 取值 px单位
    • border-color 颜色
    • 可以使用复合写法

    div{
        width: 300px;
        height: 300px;
        background-color: burlywood;
        border:solid 3px red;
    }
    

    • 可以多参数代入

    div{
        width: 300px;
        height: 300px;
        background-color: chartreuse;
        border-style: solid dashed dotted double;
        border-width: 5px 10px 15px 20px;
        border-color: aqua red blue black;
    }
    

    • 可以指定边设置

    div{
        width: 300px;
        height: 300px;
        background-color: bisque;
        border-left: 3px solid red;
        border-right: 5px double black;
        border-top: 3px dashed blueviolet;
        border-bottom: 5px dotted aqua;
    }
    

18. 背景图设置
    • background-color 颜色
    • background-image 背景图片 url(路径)
    • background-repeat 平铺 repeat|no-repeat|repeat-x|repeat-y
    • background-position 位置 Xpx Ypx|left/center/right top/center/bottom|center(可代表2个center)
    • background-attachment 固定|滚动 fixed|scroll
    • 复合写法

    div{
        background:black url(image/1.png) no-repeat center fixed;
    }
    

19. 浮动属性
    • 脱离文档流(严格定义，其实不算，因为他只是不占据块元素，有足够位置的情况下会占据行内元素的位置)
    • 非浮动的块元素可以占据浮动元素的位置
    • 浮动的元素无法占据非浮动块元素的位置
    • 父标签可以添加overflow：hidden属性触发BFC计算模式，解决高度塌陷问题

    div{
        width: 1000px;
        overflow: hidden;
        background-color: aquamarine;
    }
    #div1{
        width: 300px;
        height: 300px;
        border: solid 5px blue;
        float: left;
    }