常用CSS样式

一、在HTML引入css的方式
    1.内部样式表：
         网页头部创建style标签包裹
    2.内联（行内）样式：
        标签内直接写style属性（示例<div style=“color:red;font-size:20px;”>）
    3.外部样式
        将css样式单独写入到一个 xxx.css外部文件中。
（1）使用link标签引入外部css文件。
（2）使用@import导入外部css文件。

二、字体样式
    font
        属性：
           1. family
                字体类型（隶书，楷体，其他）
           2. size
                字体大小（像素px）
           3.style
                字体风格（italic斜体）
           4. weight
                字体粗细（100-900）

三、文本样式
    1.color
        设置文本颜色
    2.text-alain
        设置元素水平对齐方式
            （1）left
            （2）center
            （3）right
   3.text-indent
        设置首行文本的缩进
    4.line-height
        设置文本的行高
   5.text-decoration
        设置文本的装饰
            （1）underline
                下划线
            （2）overline
                上划线
            （3）line-through
                中划线，穿过文本

四、鼠标样式
    1.defalut
        默认光标
    2.pointer
        选中
    3.wait
        等待状态
    4.help
        ？
    5.text
        指示文档
    6.crosshair
        十字状

五、背景样式
    1.background-color
        背景颜色
    2.background-repeat
        背景重复方式
            （1）no-repeat
                不重复
            （2）repeat-x
                水平重复
            （3）repeat-y
                垂直重复
    3.background-image:url
        背景图片地址
    4.background-position
        背景定位
            （1）像素：px
            （2）水平方向：left、center、right
            （3）垂直方向：top、center、bottom

六、伪类
    1.link
        单机访问前
    2.visited
        单机访问后
    3.hover
        鼠标悬停其上
    4.actlive
        单机未释放

七、列表样式
   1. list-style-type
        （1）无序列表
            ①disc 实体圆心（默认）
            ②circle 空心圆
            ③square 实体方心
            ④none   无列表标记

        （2）有序列表
             1 / a / A / i  /  I
    2.list-style-image
        url图片路径
    3.list-style-position

        列表标记定位
          （1）outside
          （2）inside

八、css高级选择器
    1.并集选择器
        多个选择器通过逗号连接而成
    2.交集选择器
        （1）由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格
        （2）第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
    3.后代选择器
        外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔
    4.子元素选择器
        通过  >  连接在一起而成仅作用于子元素
    5.属性选择器
        选取带有指定属性和值的元素
            示例
                 input[name]{
         border:1px soild red;
    }

九、盒子模型
    1.border（边框）
        （1）像素:px
        （2）color
        （3）样式
            ①none
                无边框
           ② solid
                实线边框
            ③dashed
                虚线边框
            ④dotted
                点状边框
            ⑤double
                双线边框
            ⑥hidden
                与none相同，应用于解决边框冲突
        （4）单独写
            顺序（上右下左）
    2.padding（内边距）
    3. margin（外边距）
    4.box-sizing
        （1）content-box
            盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框
        （2）border-box
            盒子的实际高度和宽度包括元素内容、边框和内边距

十、文本流
    1.标准文档流
        （1）块级元素
            <h1> - <h6>、<p>、<div>、列表等
        （2）内联（行内）元素
            <span>、<a>、<img>、<strong>等
    2.浮动流
        （1）float 属性布局网页
            ①left
                元素向左浮动
            ②right
                元素向右浮动
            ③none
                 默认值元素不浮动
        （2）clear属性清除浮动
            ①none
                默认值，允许浮动元素出现在两侧
            ②left
                在左侧不允许浮动元素
            ③right
                在右侧不允许浮动元素
            ④both
                在左、右两侧不允许浮动元素
        （3）overflow 进行溢出处理
            ①auto
                自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容。
            ②scroll
                内容会被修剪，但是浏览器会显示滚动条以便查看超出内容
            ③hidden
                内容会被修剪，并且超出的内容是不可见的
            ④visible
                默认值。内容不会被修剪，会呈现在盒子之外
    3.定位流
        （1）position 属性定位网页元素
            ①static
                默认值，没有定位
            ②relative
                相对定位
            ③absolute
                绝对定位
            ④fixed
                固定定位
        （2）z-index 属性调整定位元素的堆叠次序
            ①z-index属性值：整数，默认为 0
            ②设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
            ③z-index值大的层位于其值小的层上方
     4.display
        （1）none
            设置元素不会被显示
        （2）inline
            元素显示为内联（行内）元素
        （3）block
            元素会被显示为块级元素
        （4）inline-block
            行内块元素