css的基本使用3-背景样式

青旅半醒 2022-04-23 22:38 270阅读 0赞

--------------------

### 背景样式 ###

#### 背景颜色 ####

*  background-color：颜色|transparent
 *  transparent 是完全透明黑色(black) 的速计法，类似rgba(0，0，0，0，)这种值
 *  颜色值(颜色名称/rgb/十六进制)
 *  背景区包括内容(padding)。内边距。和边框。不报错外边距(margin)

#### 背景图片 ####

*  设置背景图片 background -image ：URl|none
 *  url 的地址可以是相对地址也可以是绝对地址
 *  元素的背景占据了元素的全部尺寸，包括内边距和边框，不包括外边距
 *  默认背景图片位于元素的左上角，并在水平垂直方向重复

#### 背景图片显示方式 ####

*  背景图片显示方式
 *  background-attachment ：sroll|fixed
    
     *  scroll：默认值，背景图片随滚动条滚动
     *  fixed ：当页面的其余部分滚动时，背景图片不过移动

#### 背景图片重复方式 ####

*  background-repeat
    
     *  repeat：默认背景水平方向和垂直方向重复
     *  repeat -x ：背景图片水平方向重复
     *  repeat-y ：背景图片垂直方向重复
     *  no-repeat：背景不重复

#### 背景图片的定位 ####

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>注意</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>长度值(x y)</td> 
   <td>第一个水平位置，第二个垂直位置左上角</td> 
   <td>只写一个参数的话第二个默认居中</td> 
  </tr> 
  <tr> 
   <td>百分比(x% y%)</td> 
   <td>第一个水平百分比位置，第二个垂直百分比位置左上角</td> 
   <td>只写一个参数的话第二个默认居中</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>顶部显示 相当于垂直方向0</td> 
   <td>只写一个参数的话第二个默认居中</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>右边显示 相当于水平方向100%</td> 
   <td>只写一个参数的话第二个默认居中</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>左边显示 相当于水平方向0</td> 
   <td>只写一个参数的话第二个默认居中</td> 
  </tr> 
  <tr> 
   <td>bootom</td> 
   <td>底部显示 相当于垂直方向为100%</td> 
   <td>只写一个参数的话第二个默认居中</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>居中显示 水平方向和垂直方向50%</td> 
   <td>水平垂直方向都居中</td> 
  </tr> 
 </tbody> 
</table>

![背景图片定位][AWdIAI.png]

### css列表样式 ###

#### 列表项标记 ####

*  设置列表项的标识样式类型
 *  list-style-type 关键字|node
 *  无序列表
    
    <table> 
     <thead> 
      <tr> 
       <th>值</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>node</td> 
       <td>无标记</td> 
      </tr> 
      <tr> 
       <td>Disc</td> 
       <td>实心的圆点</td> 
      </tr> 
      <tr> 
       <td>circle</td> 
       <td>空心的圆点</td> 
      </tr> 
      <tr> 
       <td>square</td> 
       <td>实心的方块</td> 
      </tr> 
     </tbody> 
    </table>
 *  有序列表
    
    <table> 
     <thead> 
      <tr> 
       <th>值</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>node</td> 
       <td>无标记</td> 
      </tr> 
      <tr> 
       <td>decimal</td> 
       <td>从1开始的整数</td> 
      </tr> 
      <tr> 
       <td>lower-roman</td> 
       <td>小写罗马数字</td> 
      </tr> 
      <tr> 
       <td>lower-alpha</td> 
       <td>小写英文字母</td> 
      </tr> 
      <tr> 
       <td>upper-alpha</td> 
       <td>大写英文字母</td> 
      </tr> 
     </tbody> 
    </table>
 *  使用图片设值列表项的标记
    
     *  list-style-image：URL|node
 *  设置列表项的标记位置
    
     *  list-style -inside|outside
     *  inside ：列表项目标记在文本之内，且环绕文本根据标记对齐
     *  outside ：默认值 列表项目标记放置在文本以外，且环绕文本不根据标记对齐

[AWdIAI.png]: /images/20220222/af7f5b5d951448e1a23940a4e66cfe46.png