css学习笔记-基础版

1.基本概念
    c cascading 一层一层的 层叠
    s style 风格，样式
    s sheet 表
    
    层叠 样式 表，必须依托于html
    
    /* css的注释 */
    
2.书写位置
    -写在标签的style属性中（内联样式）
    
    
    -写在外部css文件中，css
     在页面上通过<link>标签将外部标签引入进来
     
    -写在页面style标签中
      <style>
      
       css代码
       
      </style>
      弊端：如果要美化的目标太多，整个页面就会很臃肿。
      
3.语法规范 
    -内联样式）
      <a href="" style="属性名：属性值；属性名：属性值；"></a>
      弊端：如果样式太多，整个标签就很臃肿
      
    -style标签中以及外部css文件中
      -选择器（用于获取美化的目标）
        -id选择器
          #id名{
            属性名:属性值；
            属性名:属性值；
            属性名:属性值；
          }
          
        -class选择器
          .class名{
            属性名:属性值；
            属性名:属性值；
            属性名:属性值；
          }
          
        -元素选择器/标签选择器
          标签名{
            属性名:属性值；
            属性名:属性值；
            属性名:属性值；
          }
     
     hover（鼠标悬停）
     
4.css常见美化操作
    - 页面美化布局的标签
        - <div></div>  块级元素，通常用于整体的布局
        - <span></span>  行内元素，通常用于局部文字美化
    
    -美化基本功
        - 位置
            外边距 margin
            上  margin-top
                bug描述：如果一个块级元素的第一个儿子设置了上外边距
                         这个元素也会跟着儿子一起下来。（上外边距合并）
                解决方案：设置父级元素overflow:hidden;
            左  margin-left:auto; (自动) 
            右  margin-right
        
        - 大小
            width 宽
            height 高
        
        - 背景
            background-color
            background-image:url("路径")
            background-size:100% 100%;
            background-repeat:no-repeat;  (图片不重复)
            
        - 字体
            font-size   大小 
            font-weight    粗细度  blod(加粗)
            font-family 字体类型
        
        - 颜色
            color:rgb(色号)
            
        - 边框
            border
            border-radius:弧度;  100%是圆
            border:2px solid black;  /* 边框：粗细 实线 颜色 */
            border-collapse:collapse; /* 表格和单元格的边框合并 */
        
        - 文本内容
            text-align 对齐方式
            居中：center
            
            text-indent 文本缩进
            text-decoration:none; 去掉下划线
            
        - 显示模式
            display (块级block 行内inline 隐藏none)
            
        - 设置光标为小手
            cursor:pointer;
            
5.布局方式
    -表格布局
        优点：页面整齐，知识点简单。
        缺点：如果页面元素太多或者太复杂，就会出现表格的嵌套，页面渲染效率下降
        
    -浮动布局（div+css）
        优点：代码相对简洁，舍弃了复杂的表格嵌套，开发效率高。
        缺点：如果命名不规范，维护成本很高，学习成本比表格高。
        float:left;
        
6.定位（细节的微调，不影响其他标签）
    -相对定位
        概念：相对于自己原来的位置进行定位调整。
        position:relative;
        调整：top  left  right  bottom(下)
        
    -绝对定位
        概念：默认情况下相对于浏览器进行定位调整
        如果要让元素相对于父级进行定位调整，那么就要设置父级为相对定位或者绝对定位。
        position:absolute;
        调整：top  left  right  bottom(下)