CSS：页面美化和布局控制

• 1.概念：Cascading Style Sheets 层叠样式表
  • 层叠：多个样式可以作用在同一个html的元素上，同时生效
• 2.css控制样式的好处：
  • 1.功能强大
  • 2.将内容展示和样式控制分离
    • 降低耦合度，解耦
    • 让分工协作更容易
    • 提高开发的效率
• 3.css的使用：css与html的结合
  • 1.内联样式
    • 在html文件中，在标签内使用style属性指定css代码
    • 如： hello css
    • 但是这样样式的控制和内容展示并没有达到分离的目的，不推荐使用
  • 2.内部样式
    • 在head标签内去定义style标签，style标签的标签体内容就是css代码

    <style>
        div{
            color:blue;
        }
    
    </style>
    

  • 3.外部样式
    • 1.定义css资源文件
    • 2.在head标签内，定义link标签

    <link rel="stylesheet" href="a.css">
    

  • 4.注释： /* 注释内容 */
  • 第3种也可以在头部标签中这样导入css文件

    <style>
        @import "./css/a.css";
     </style>
    

• 4.css语法：
  • 格式：
    选择器{
    属性名1：属性值1;
    属性名2：属性值2;
    …
    }
  • 选择器：筛选具有相似特征的元素

    • 注意：

      • 每一对属性需要使用分号隔开，最后一对属性可以不加分号,但是前边的必须加分号

    • 选择器分类：

      • 1.基础选择器

        • 1.id选择器，选择具体地id属性值的元素,建议在一个html页面中id值唯一，
          当然也可以不唯一，不唯一时浏览器也可以解析，但是不符合语法
          • 语法：#id属性值{}
        • 2.元素选择器，选择具有相同标签名称的元素
          • 语法：标签名称{}
        • 3.类选择器
          • 选择具有相同的class属性值的元素
          • 语法： .class属性值{}
        • 优先级：id选择器 > 类选择器 > 元素选择器

      • 2.扩展选择器

        • 1.选择所有元素：
          • 语法：*{}
        • 2.并集选择器
          • 语法：选择器1,选择器2{}
        • 3.子选择器：筛选选择器1下的选择器2元素
          • 语法：选择器1 选择器2{}
        • 4.父选择器：筛选选择器2的父元素选择器1
          • 语法： 选择器1 > 选择器2{}
        • 5.属性选择器：选择元素名称[属性名=“属性值”]的元素，一般用于选择input标签
          • 语法：元素名称[属性名=“属性值”]{}
        • 6.伪类选择器：选择一些元素具有的状态
          • 语法：元素:状态{}
          • 如：
            • 状态：
              • link：初始化的状态
              • visited：被访问过的状态
              • active：正在访问的状态
              • hover：鼠标悬浮状态

    • 选择器优先级由高到低可分为：

      • 1.在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
      • 2.作为style属性写在元素内的样式
      • 3.id选择器
      • 4.类选择器 = 伪类选择器=属性选择器 （后面的样式会覆盖前面的样式）
      • 5.标签选择器
      • 6.通配符选择器
      • 7.浏览器自定义的样式 ​
• 5.css属性
  • 1.字体,文本
    • font-family：字体系列是楷体，还是宋体等
    • font-size：字体大小
    • font-style：斜体还是粗体
    • color：文本颜色
    • text-align:文本对齐方式
    • line-height：文本高度
  • 2.背景
    • background:
  • 3.边框
    • border:设置边框，复合属性. solid代表实线
  • 4.尺寸
    • 1.width:宽度
    • 2.height:高度
  • 5.盒子模型：控制布局
    • 1.margin：外边距
    • 2.padding：内边距
    • 默认情况下内边距会影响整个盒子的大小，此时可以设置width和heigh，添加 box-sizing: border-box;
      让它们就是最终盒子的大小
    • float:浮动
      • left
      • right