背景样式

background-color                  设置元素的背景颜色

background-image                把图像设置为背景

background-position            设置背景图像的起始位置

background-attachment       背景图是否固定或随着页面其余部分滚动

background-repeated           设置背景图是否重复以及如何重复

background                           将背景图属性设置在一个声明中

列表样式

list-style-type                       设置列表项标志的类型

list-style-image                    将图像设置为列表项标志

list-style-position                设置列表中列表项的位置

list-style                              用于把列表的属性设置在一个声明中

下面我们就来一一了解一下这些样式属性吧

背景样式

背景颜色

background-color: 颜色 | transparent

transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值(透明色)

颜色值(颜色名 | RGB | 十六进制)(兼容性最好)

背景区包括内容,内边距(padding)、边框,不包含外边距(margin)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS之背景与列表</title>
      <style type="text/css">
             div{width: 200px;height: 200px;
                background-color: transparent;/*当我们设置为transparent的时候,我们可以看到其实就是透明背景色*/
                     
                }

      </style>
</head>
<body>
      <div>www.ccava.net</div>
</body>
</html>

通过上图的分析,我们可以发现,这就是一个透明的背景色,接下来我们继续

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS之背景与列表</title>
      <style type="text/css">
             div{width: 200px;height: 200px;
               /* background-color: transparent;当我们设置为transparent的时候,我们可以看到其实就是透明背景色*/
                     /*background-color: green;*/
                     /*background-color: #008800;*/
                     background-color: rgb(0,255,0);
                     /*padding: 20px;大家会发现规定内边框后图片变大了,大家可以f12审查一下元素*/
                     /*margin: 20px;大家注意外边框加上以后,大家刷新以为变化了,其实是没有变化的,大家F12审查一下*/
                     border: 10px dashed;/*边框颜色默认与文字颜色相同,solid是实线,dashed是虚线*/
                }

      </style>
</head>
<body>
   <div>www.ccava.net</div>
</body>
</html>

背景图片

background-image: url | none

url可以是相对或者绝对地址

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边框

默认情况下,背景图位于元素的左上角,并在水平和垂直的方向上重复

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS之背景与列表</title>
      <style type="text/css">
             div{width: 500px;height: 500px;
              background-image: url(../img/logo.png);
              /*padding: 10px;*/
              /*margin: 10px;*/
              border: 10px dashed;


                }

      </style>
</head>
<body>
   <div>www.ccava.net</div>
</body>
</html>

当你设置了背景颜色又设置了背景图片,背景图片会覆盖掉背景颜色。

背景图片的重复

background-repeat:repeat(重复) | no-repeat(不重复) | repaet-x(水平重复) | repeat-y(垂直重复)

背景图片的显示方式

back-attachment: scroll | fixed

scroll是一个默认值,背景图片随滚动条滚动

fixed当页面其余部分滚动时,背景图片不会移动

背景图片的定位

vbackground-position: 百分比 | 值

 


背景图片的定位
解释注意事项
长度值(x,y)

第一个值水平位置,第二个值垂直位置

左上角0 0

只写一个参数的话,第二个默认为居中
百分比(x%,y%)

第一个水平位置百分比,第二个垂直位置百分比

左上角0%,0%,右下角100%,100%,如果仅定义了一个值,另外一个将是50%

只写一个参数的话,第二个默认为居中
top顶部显示,相当于垂直方向0只写一个参数的话,第二个默认为居中
right右边显示,相当于水平方向100%只写一个参数的话,第二个默认为居中
left左边显示,相当于水平方向0只写一个参数的话,第二个默认为居中
bottom底部显示,相当于垂直高度100%只写一个参数的话,第二个默认为居中
center居中显示,相当于水平方向50% 垂直方向50%水平,垂直方向都居中

背景缩写


background:各值直接用空格分开,不分前后顺序

列表项标记

list-style-type: 关键字 | none

列表项的标记有如下

无序列表

none    无标记

disc      实心圆点

circle    空心圆点

square 实心方块

有序列表

none                无标记

decimal           从1开始的整数

lower-roman   小写罗马数字

upper-roman  大写罗马数字

lower-alpha    小写英文字母

upper-alpha    大写英文字母

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS之背景与列表</title>
      <style type="text/css">
             ul li{list-style-type: upper-alpha;}
      </style>
</head>
<body>
  <ul>
   <li>出师表</li>
   <li>诸葛亮</li>
   <li>司马懿</li>
   <li>曹操</li>
  </ul>
</body>
</html>

具体的效果大家可以自己多敲一下,练习一番

使用图片设置列表项标记

list-style-image: url | none

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS之背景与列表</title>
      <style type="text/css">
             ul li{list-style-image: url(../img/favicon.ico);}
      </style>
</head>
<body>
    <ul>
      <li>出师表</li>
      <li>诸葛亮</li>
      <li>司马懿</li>
      <li>曹操</li>
    </ul>
</body>
</html>

列表项标记位置

list-style-position: inside | outside

inside列表项目标记放置再文本以内,且环绕文本根据标记对齐

outside默认值,列表项目标记放置再文本以内,且环绕文本不根据标记对齐

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS之背景与列表</title>
      <style type="text/css">
             ul li{
                  list-style-position: inside;
                 }
      </style>
</head>
<body>
    <ul>
         <li>
            亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。
            先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之           ,则汉室之隆,可计日而待也。
        </li>
        <li>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。
            先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。
            后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。</li>
        <li>先帝知臣谨慎,故临崩寄臣以大事也。
            受命以来,夙夜忧叹,恐付托不效,以伤先帝之明,故五月渡泸,深入不毛。
            今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。
            此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。</li>
       <li>今当远离,临表涕零,不知所言。
      </li>
   </ul>
</body>
</html>

这里我用inside做说明,默认的小黑圆点是被文字包裹起来了。outside则是不包裹文字,大家可以自己对比一番

列表样式缩写

list-style:  list-style-type  |   list-style-position   |   list-style-image 

值与值之间用空格分开,顺序不固定,list-style-image会覆盖list-style-type的设置