web前端03 （css引入方式）

      width：宽度  
      height:高度 记得加单位px 
      color:字体颜色
      font-size:字体大小 默认16px  最小支持8px
      font-weight:字体粗细  默认400 取值范围100-900 没有单位
      font-family:字体样式
      opacity:透明度 取值范围0-1
      background
      -color:背景颜色  颜色单词  十六进制#ffffff  rgb(red 0-255,green 0-255,blue 0-255) 都是255白色 都是0黑色 rgba(0-255,0-255,0-255,0-1)

      opacity和rgba()设置透明度的区别
      opacity：背景颜色和文本内容都透明 rgba() 只有背景颜色透明
      list-style:none 去除无序列表和有序列表的默认样式
       text-indent:首行缩进
       text-decoration：none  underline overline line-through
 
     背景图片 url中放置图片路径（绝对、相对、网络）*/
      background-image: url("");
      /* 设置背景图片是否重复 默认重复repeate */
      background-repeat: no-repeat;
      /* 调整背景图片的位置 第一个值代表水平方向  第二个值代表竖直方向 向右为正 向下为正 */
      background-position:center center;
      /* 调整背景图片的大小 第一个值代表背景图片的宽度 第二个值代表背景图片高度 */
      background-size:cover;

    行间（内联样式）权重：1000 2.内部 3.外部(项目中最常用的) 补充：外部和内部引入方式没有权重高低之分  文档后面的会覆盖文档前面的
    display:inline-block 将标签转换为行块属性
        display:inline 将标签转换为行属性
        display:block 将标签转换为块属性

<!-- 引入外部样式 -->

    <link rel="stylesheet" href="css/one.css">

    <!-- 内部引入 -->

    <style>

     p{

      color: gray;

      background-color: rgb(90, 55, 55);

      font-size: 50px;

      font-weight: 600;

      opacity: 0.5;

      /* 常用样式

      width：宽度

      height：高度  记得加单位px

      color：字体颜色

      font-size：字体大小 默认16px 最小支持8px

      font-weight:字体粗细 默认400 取值范围100-900 没有单位

      font-family:字体样式

      opacity：透明度 取值范围0-1 没有单位

      background-color:背景颜色 颜色单词 十六进制#000000  rgb（red 0-255，green 0-255，blue 0-255）

      都是255白色 都是0黑色  rgba（0-255，0-255，0-255,0-1）

     

      opacity和rgba（）设置透明度区别

      opacity：背景颜色和文本内容都透明 rgba（）只有背景颜色透明

      list-style:none 去除无序列表和有序列表默认样式

      text-indent:首行缩进

      text-decoration:none underline overline line-through

      letter-spacing:字体间距

      word-spacing:单词之间的距离

      text-transform:大小写转换 capitalize首字母大写  uppercase全部大写    lowercase全部小写

     

      */

     }

     /* 组合选择器 每个选择器之间用逗号隔开 */

     ul,ol{

      list-style:  none;

     }

     h2{

      text-indent: 48px;

     }

     a{

      text-decoration: none;

     }

     /* span{ */

      /* text-decoration:underline ; */

      /* text-decoration:overline ; */

      /* text-decoration: line-through; */

      /* letter-spacing: 20px; */

    /* } */

    .span2{

      word-spacing: 10px;

      text-transform: uppercase;

    }

    .box{

      width: 1000px;

      height: 1000px;

      background-color: aqua;

            /* 背景图片 url中放置图片路径（绝对。相对。网络）*/

     

      background-image: url("https://img1.baidu.com/it/u=1960292808,1761809160&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659200400&t=4e824656ca9bce9cb478b1037486ffff");

      /* 设置背景图片是否重复 默认重复 */

      background-repeat: no-repeat;

      /* 调整背景图片位置 第一个值代表水平方向 第二个值代表竖直方向 */

      background-position: center center;

      /* 调整背景图片的大小 第一个代表背景图片的宽度 第二个代表背景图片的高度 cover 100%都是全覆盖 */

      background-size: 100% 100%;

    }

    </style>