CSS

CSS

Cascading Style Sheets 层叠样式表
层叠 -> 多个样式可以作用在同一个html元素上

1. CSS分类

1. 内联 -> <div style="color: darkorange">Hello CSS</div>
2. 内部 -> head 标签定义
3. 外部 -> <link rel="stylesheet" href="css/8.css">

2.CSS语法

1. 格式:
   • 选择器 -> 筛选具有相似特征的元素

    选择器 {
        属性名1: 属性值1;
        属性名2: 属性值2;
        ...
    }

2. 选择器
   • 分类:
     1. 基础选择器
        • id选择器
          • 语法 -> #id属性值{}
        • 元素选择器
          • 语法 -> 标签名{}
        • 类选择器
          • 语法 -> .class属性值{}
     2. 扩展选择器
        • 所有选择器 -> *{}
        • 并集选择器 -> 选择器1,选择器2{}
        • 子选择器 -> 父选择器1 子选择器2{}
        • 夫选择器 -> 父选择器1 > 子选择器2{}
        • 属性选择器 -> 元素名称[属性名="属性值"]{}
        • 伪类选择器 -> 元素:状态{}
3. 属性
   1. 字体, 文本
      • font-size : 字体大小
      • color : 文本颜色
      • text-align : 对齐方式
      • line-height : 行高
   2. 背景
      • background : 背景
   3. 边框
      • border : 边框
   4. 尺寸
      • width : 宽度
      • hright : 高度
      • box-sizing: border-box : 固定大小
   5. 盒子模型 - 控制布局
      • margin : 外边距 - 上右下左
      • padding : 内边距 - 上右下左
      • float : 浮动