css入门 一.架构分析     页面 => div的层级结构 => 具有采用哪些功能标签显示内容     结构层 > 位置层(布局层) > 内容层 二.css引入 - 行间式     
    
     
    
     
     - 内联式                       
     - 外联式     /* index.css */     选择器 {
          width: 100px;         height: 100px;     }     /* 适合团队高效率开发, 耦合性低, 复用性强 */     
         
     三.三种引入"优先级"分析     1.没有优先级     2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的     3.行间式一定是逻辑最下方的样式 四.文本样式     /*字体样式*/     .box {
          /*字族*/ font-family: "STSong", "微软雅黑";                 /*STSong作为首选字体, 微软雅黑作为备用字体*/         /*字体大小*/ font-size: 40px;         /*字重*/ font-weight: 900;         /*风格*/ font-style: italic;         /*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中*/                 line-height: 200px;         /*字体整体设置*/         /*字重 风格 大小/行高 字族  (风格可以省略) ***** */         font: 100 normal 60px/200px "STSong", "微软雅黑";     }     i {
          /*normal清除系统字体风格*/         font-style: normal;     }     .box {
          /*水平居中: left | center | right ***** */                 /*text-align: center;*/         /*字划线: overline | line-through | underline  */                 text-decoration: overline;         /*字间距*/ letter-spacing: 2px;         /*词间距*/ word-spacing: 5px;         /*缩进*/text-indent: 2em;             /*1em相当于一个字的宽度*/     }     a {
          /*取消划线*/         text-decoration: none;     }     长度单位:px|em|rem|cm|mm|vw|vh|in     颜色:rgb(0,255,189)|rgb(0,255,189,0.5)|red|#000000~#FFFFFF 五.基础选择器 选择器:css连接html标签的桥梁,建立连接后就可以控制标签样式     * | div | . | #     标签: 一般用于最内层样式修饰     类:使用范围最广,布局的主力军     id:唯一标识的布局,不能重复 优先级:!important> id >类[属性] >标签> 通配  (优先级:同一标签同一属性)     (尽量不要使用!important)     组合选择器  权重(同类型个数比较)     伪类选择器 六.display     .box {
          /*block: 块级标签, 独占一行, 支持所有css样式*/         /*display: block;*/         /*inline: 内联(行级)标签, 同行显示, 不支持宽高*/         /*display: inline;*/         /*inline-block: 内联块标签, 同行显示, 支持所有css样式*/         display: inline-block;         /*标签的嵌套规则*/         /*①*/         /*block可以嵌套所有显示类型标签, div | h1~h6 | p*/         /*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/         /*②*/         /*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */         /*③*/         /*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/     }