一、了解CSS

什么是css，一张图片告诉你，css也可以叫做网页的美容师，用来定义页面元素的样式

3、css的作用：

1. 设置字体和颜色，轻松地控制页面的布局
2. 设置位置和大小，使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
3. 添加动画效果

二、重点内容

1、通过外链的方式: <link rel="stylesheet" href="">

2、嵌入的方式: <style>  <style>

3、内联的方式:  在一个标签里面写入style,eg：<p style="color: red;">我是红色字体</p>

推荐使用方式：外链的方式更好，这样可以更好的让内容和样分离

三、详细知识点介绍：

CSS选择器：找出页面中的元素，以便给他们设置样式

1、分类

1. 简单选择器（根据名称、id、类来选取元素）
2. 组合器选择器（根据它们之间的特定关系来选取元素）
3. 伪类选择器（根据特定状态选取元素）
4. 伪元素选择器（选取元素的一部分并设置其样式）
5. 属性选择器（根据属性或属性值来选取元素）

元素选择器：元素选择器根据元素名称来选择 HTML 元素。

2、选择器

id选择器：

<div id="pink">迈克尔.杰克逊</div>
<style>
 #red {
      color: red;
    }
<style>
复制代码

类选择器：

<div class="red font35">刘德华</div>
 <style>
    .red {
      color: red;
    }
    .font35 {
      font-size: 35px;
    }
  </style>
复制代码

通配符选择器：

* {
  text-align: center;
  color: blue;
}
复制代码

分组选择器：最好对选择器进行分组，以最大程度地缩减代码。如需对选择器进行分组，请用逗号来分隔每个选择器。

3、权重

CSS 选择器（Selector）的权重（Specificity）决定了对于同一元素，到底哪一条 CSS 规则会生效。

• CSS选择器权重等级 !important，加在样式属性值后，权重值为 10000
• 内联样式，如：style=””，权重值为 1000
• ID选择器，如：#content，权重值为  100
• 类，伪类和属性选择器，如： content、:hover 权重值为10
• 标签选择器和伪元素选择器，如：div、：p权重值为1

四、布局

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容信息来计算

width：

• 可以指定盒子 content box 宽度
• 取值为长度，百分数，auto

padding：

• 指定元素四个方向的内边距
• 百分数相对于容器的宽度

注：盒子本身没有指定width/height，则此时padding不会撑开盒子大小

margin： 盒子的外边距

margin-auto可以水平居中

这是盒子外边距的一个demo：

overflow：设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

五、案例：

通过学习课程自己写了一个小案例来练习

1、代码

html：

<div class="box">
        <img src="https://pic1.imgdb.cn/item/6360c96216f2c2beb15cf610.jpg" alt="">
        <p>三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量</p>
        <div class="price">1119元起</div>
 </div>
复制代码

css：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
        }
        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;
            text-align:center;
        }
        .box img{
            width: 160px;
            height: 160px;
            padding: 20px 0;
        }
       .price {
            margin: 80px;
            color: orange;
       }
    </style>