CSS基础知识笔记

#CSS

1. 概念：Cascading Style Sheets 层叠样式表
   • 层叠：多个样式可以作用在同一个html的元素（标签）上，同时生效
2. 好处：
   • 功能强大
   • 将内容展示和样式控制分离，好处：
     • 解耦合，降低耦合度
     • 使分工合作更容易
     • 提高开发效率
3. CSS的使用：CSS与html的结合方式
   1. 内联样式
      • hello CSS
      • 不推荐使用，样式控制和内容展示仍然耦合在一起
   2. 内部样式
      • 在head标签内，定义style标签，style标签的标签体内容就是css代码
      • 比较常用
      • 在head标签内：
4. CSS语法：
   • 格式：
     • 选择器{
       属性名1：属性值1；
       属性名2：属性值2；
       ……
       }
   • 选择器：筛选具有相似特征的元素
   • 注意：
     • 每一对属性需要使用；隔开，最后一对属性可以不加
5. 选择器：筛选具有相似特征的元素
   • 分类：
     1. 基本选择器
        1. id选择器：选择具体的id属性值的元素
           • 语法：#id属性值{ }
        2. 元素选择器：选择具有相同标签名称的元素
           • 语法：元素名称{ }
           • id选择器比元素选择器优先级更高
        3. 类选择器：选择具有相同的class属性值的元素
           • 语法：.class属性值{ }
           • 类选择器比元素选择器优先级更高
        • 优先级：id > 类 > 元素
     2. 扩展选择器
        1. 选择所有元素
           • 语法：*{ }
        2. 并集选择器：
           • 选择器1，选择器2{ }
        3. 子选择器：筛选选择器1元素下的选择器2元素
           • 语法：选择器1 选择器2{ }
        4. 父选择器：筛选选择器2的父元素选择器1
           • 语法：选择器1 > 选择器2
        5. 属性选择器：选择元素名称，属性名 = 属性值 的元素
           • 语法：元素名称[属性名=“属性值”] { }
        6. 伪类选择器：选择一些元素所具有的状态
           • 语法：元素：状态{ }
           • 如：
             • 状态：
               • link：初始化的状态
               • visited：被访问过的状态
               • active：正在访问的状态
               • hover：鼠标悬浮状态
             • 语法：a:link{ } / a:vivited{ }…
6. 属性
   1. 字体、文本
      • font-size：字体大小
      • color：文本颜色
      • text-align：对齐方式
      • line-height：行高
   2. 背景
      • background：
        • 颜色
        • 图片
          • 语法：background：url(“login.png”);
          • 可以选择no-repeat属性
          • 可以选择center属性
   3. 边框和轮廓
      • 设置边框，复合属性
      • 写在CSS内
        • 语法：border: 1px solid rosybrown
   4. 尺寸
      • width：宽度
      • height：高度
   5. 盒子模型：控制布局
      • margin：外边距
        • 是一个复合属性，常用的4个子属性：margin-bottom/margin-left/margin-right/margin-top
      • padding：内边距
        • 默认情况下内边距会影响整个盒子的大小
          • 解决方法：设置盒子属性，让width和height就是盒子最终的大小
          • box-sizing: border-box;
      • float：浮动
        • left
        • right
      • 注意：内外边距其实是一个相对的概念，和选择的视角有关