1. 概念： Cascading Style Sheets 层叠样式表
    • 层叠：多个样式可以作用在同一个html的元素上，同时生效
  2. 好处：
    • 功能强大
    • 将内容展示和样式控制分离
      • 降低耦合度。解耦
      • 让分工协作更容易
      • 提高开发效率
  3. CSS的使用：CSS与html结合方式
    • 内联样式
      • 在标签内使用style属性指定css代码
        1. <!--内联样式-->
        2. <div style="color:red;">hello css</div>
    • 内部样式
      • 在head标签内，定义style标签，style标签的标签体内容就是css代码
        1. <!--内部样式-->
        2. <style>
        3. div{color:blue;}
        4. </style>
        5. <div>hello css</div>
    • 外部样式
      • 定义css资源文件
      • 在head标签内，定义link标签，引入外部的资源文件 ```css div{color:green;}

hello css

  1. >    - 注意：
  2. >       - 1,2,3种方式 css作用范围越来越大
  3. >       - 1方式不常用，后期常用2,3
  4. > 
  5.    4. css语法：
  6. >    - 格式：
  7. > ```html
  8. 选择器 {
  9.       属性名1:属性值1;
  10.       属性名2:属性值2;
  11.       ...
  12.   }
  • 选择器:筛选具有相似特征的元素
  • 注意：
    • 每一对属性需要使用；隔开，最后一对属性可以不加；
  1. 选择器：筛选具有相似特征的元素
    • 分类：
      • 基础选择器
        1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
          • 语法：#id属性值{}
        2. 元素选择器：选择具有相同标签名称的元素
          • 语法： 标签名称{}
          • 注意：id选择器优先级高于元素选择器
        3. 类选择器：选择具有相同的class属性值的元素。
          • 语法：.class属性值{}
          • 注意：类选择器选择器优先级高于元素选择器 ```css

            para1 {

            text-align: center; color: red; }

p { text-align: center; color: red; }

.center { text-align: center; color: red; }

p.center { text-align: center; color: red; }

  1. > 
  2. >       - 扩展选择器：
  3. >          1.  通用选择器：选择所有元素：
  4. >             - 语法：** *{  }**
  5. >          2. 分组选择器：
  6. >             - 语法：**选择器1,选择器2{  }**
  7. >          3. 后代选择器：
  8. >             - 语法：**选择器1 选择器2{  }**
  9. >          4. 子选择器：
  10. >             - 语法： **选择器1 > 选择器2{  }**
  11. >          5. 属性选择器：选择元素名称，属性名=属性值的元素
  12. >             - 语法： **元素名称[属性名="属性值"]{}**
  13. >          6. 伪类选择器：选择一些元素具有的状态
  14. >             - 语法：** 元素:状态{  }**
  15. >             - 如： <a>
  16. >                - 状态：
  17. >                   - link：初始化的状态
  18. >                   - visited：被访问过的状态
  19. >                   - active：正在访问状态
  20. >                   - hover：鼠标悬浮状态
  21. > ```css
  22. <!--通用选择器,规则应用于页面上的每个 HTML 元素-->
  23. * {
  24.   text-align: center;
  25.   color: blue;
  26. }
  28. <!--分组选择器-->
  29. h1, h2, p {
  30.   text-align: center;
  31.   color: red;
  32. }
  34. <!--子选择器，控制h1下的strong的元素-->
  35. <h1>This is <em>really <strong>very</strong></em> important.</h1>                <!--不受影响-->
  36. <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>        <!-- 受影响 -->
  37. h1 > strong {color:red;}                                                                                                  <!-- CSS文件中-->
  41. <!--后代选择器(descendant selector)把作为 h1 元素后代的 em 元素的文本变为红色。-->
  42. <h1>This is a <em>important</em> heading</h1>                                                            <!-- 受影响 -->
  43. <p>This is a <em>important</em> paragraph.</p>                                                        <!--不受影响-->
  44. h1 em {color:red;}                                                                                                                <!-- CSS文件中-->
  46. <!--属性选择器1-->
  47. a[href][title] {color:red;}                    <!--控制同时有 href 和 title 属性的 HTML 超链接的文本-->
  48. img[alt] {border: 5px solid red;}        <!--对所有带有 alt 属性的图像应用样式-->
  50. <!--属性选择器2-->
  51.  input[type='text']{border: 5px solid;}                    <!--控制input输入框text类型-->
  53. <!--伪类选择器-->
  54. a:hover{color: green;}                                                    <!--控制鼠标悬停超文本样式-->
  1. 属性
    • 字体、文本
      • font-size：字体大小
      • color：文本颜色
      • text-align：对其方式
      • line-height：行高
    • 背景
      • background：
    • 边框
      • border：设置边框，符合属性
    • 尺寸
      • width：宽度
      • height：高度
    • 盒子模型：控制布局
      • margin：外边距
      • padding：内边距
        • 默认情况下内边距会影响整个盒子的大小
        • box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
      • float：浮动
        • left
        • right