CSS网页样式

css是层叠样式表，负责结构与样式分离。
html负责网页内容和结构,css负责网页样式和效果,js负责网页的行为动作。

基础

    css样式分类：
        行内样式、内嵌样式、外联样式【代码分离程度】
    css基本语法：
        <style>选择器 { 属性名1：值1； 属性名2：值2；  .....  }</style>
    css简单的选择器：
        通配符选择器（*）、标签选择器、类选择器、id选择器
    css属性：
        属性就是特征，就是描述性信息
    属性总览：
        定位、布局、弹性盒子、尺寸、边框、背景、颜色、字体、文本、列表、表格、内容、用户界面、多栏、2d变换、过渡、动画、打印、媒体查询
    简单常用的几个css属性：
        color、background、border
        font-size、font-family、font-style、font-weight
        text-decoration、text-align
        line-height、width、height
    font简写：
        {font: font-style font-weight font-size/line-height font-family}
    color：预定义方式、十六进制方式、RGB方式、RGBA方式

选择器

选择器综述
     选择器分类：
        基础、关系、属性、伪类、伪元素选择器
     选择器语法的符号含义：
        E（element）、 S（Selector）、 attr（attribute）
     基础选择器：
        标签选择器：E、 类选择器：.class、 id选择器：#id、 通配符选择器： *
     关系选择器：
        子代选择器：S1>S2、 后代选择器：S1  S2、 相邻选择器：S1+S2、 兄弟选择器：S1~S2、 分组选择器：S1,S2
     属性选择器：
        [attr]、[attr="val"]、[attr~="val"]、[attr*="val"]、[attr^="val"]、[attr$="val"]
     伪类选择器：
        :link,:visited,:hover,:active、 E:focus
        E:first-child,E:last-child,E:only-child,E:nth-child(n)
        E:empty,E:checked,E:enabled,E:disabled
     伪元素选择器：
        E::before、E::after、E::selection、E::first-letter、E::first-line
     常见选择器的组合：
        E.className、E#id、E[属性选择器]、并集选择器：S1, S2
     css样式的特性
        层叠性(覆盖性)、继承性、优先性

文字属性

字体属性：
        color、font-family、font-size、font-style、font-weight
        font综合属性的语法：font：[ <' font-style '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ];
    文本属性:
        text-align、text-decoration、text-indent、line-height、letter-spacing、word-spacing

盒子属性

    盒子概述：
        几乎所有标签，都可以看做是一个“矩形盒子”，具有一定的宽高（区域）
        一个盒子，是由若干个部分构成的，从内到外依次包括：盒子内容区，内边距区，边框，外边距区
    盒子的宽高属性width和height、
    边框属性border：
        border-style、border-width、border-color
    内边距属性padding：
        top、right、bottom、left
    外边距属性margin：
        top、right、bottom、left
        外边距的“重叠性”：当两个垂直方向的外边距（即margin-top和margin-bottom）挨在一起的时候（就是垂直方向上相邻），则这两个外边会“重叠在一起”，表现为只有更大的那个外边距的高度
    背景属性background：
        background-color、background-image、background-position、background-repeat
    轮廓属性outline：
        outline-width、outline-style、outline-color、outline-offset

布局属性

    布局属性：
        盒子的显示效果属性display：

             block、inline、block-inline
        浮动属性float：
            none、left、right
        浮动的清除：
            clear：left、right、both
        溢出属性overflow：
            auto、scroll、hidden、visible
        可见性属性visibility：
            visible、hidden
    页面布局应用：
        布局思想：表格、div+浮动
        纵向布局的实现：自上而下
        横向布局的实现：div+浮动
        整体布局的实现：层层分割
        经典圣杯布局

定位属性

    定位方式属性position：
        static、relative、absolute、fixed
    定位属性：
        top、left、right、bottom
    层叠属性z-index：

列表与表格样式

    列表样式：
        list-style-type、list-style-image、list-style-position、
    表格样式：
        border-collapse（separate、collapse）、border-spacing、caption-side（top、bottom）

新特性

    盒子新特性：
        box-shadow：水平偏移值  垂直偏移值  [模糊值]  [外延值]  [颜色]  [inset]；
    圆角边框border-radius：
        border-radius: 水平圆角半径 [/ 垂直圆角半径]；
    图像边框border-image：
        border-image-source、border-image-slice、border-image-width、border-image-repeat
    背景图高级特性：
        background-color、background-image、background-repeat、background-position、background
        background-attachment、background-origin、background-clip、background-size
    渐变背景gradient：
        线性渐变linear-gradient
            background-image：linear-gradient([角度，]  颜色1，颜色2 [，颜色n...] );
        径向渐变radial-gradient：
            background-image：radial-gradient( [形状]  [大小]  [at 位置，] 颜色1，颜色2 [，颜色n...])
    多栏布局column：
        column-width、column-count、column-gap、column-rule（width、color、style）
    弹性布局flex：
        display: flex、flex-direction、flex-wrap、justify-content、align-content、align-items
    2D变换transform（2D）：
        transform: translate、transform: rotate、transform: scalex、transform-origin
    3D变换transform（3D）：
        transform-style（preserve-3d、flat）、perspective、perspective-origin、transform-orgin
        transform
    过渡效果transition：
        transition-property、transition-duration、transition-delay、transition
        transition-timing-function（linear、ease、ease-in\out ease-in-out）
    动画效果animation：
        @keyframes  动画名、animation：动画名 动画播放设置；
        animation-name、animation-duration、animation-timing-function、
        animation-delay、animation-iteration-count、animation-direction、
        animation-fill-mode、animation-play-state、animation

扩展

    光标形状设置cursor：

        default、pointer、text、help、wait
    文字阴影text-shadow：

        水平偏移值  垂直偏移值 [模糊值]  [颜色]
    文字溢出text-overflow：

        clip | ellipsis

    盒子缩放zoom
    盒子模型box-sizing：

        content-box、border-box
    css初始化：浏览器默认css样式
    css精灵技术：雪碧图
    自定义字体：
        引入外部字体：@font-face、font-family
        使用图标字体：webdings、图标类方式、unicode方式