CSS其他属性

一、列表属性
  • 定义列表符号样式

    {list-style-type:disc|circle| square|none}
    属性值说明
    disc实心圆
    circle空心圆
    square实心方块
    none去掉列表符号
  • 使用图片作为列表符号

    {list-style-image:url(图像路径); }

    url(所使用图片的路径及全称)

  • 定义列表符号的位置

    {list-style-position:  ;}

    取值: outside(外边) inside(里边);

  • 简写方法(应用最多)

    {list-style:none ; } /*去掉列表样式*/

    简写可直接设置列表属性值

二、边框属性

  • 说明

    给边框添加样式

  • 语法

    {border-style: solid/dashed/dotted/double; }
    属性值说明
    solid实线
    dashed虚线
    dotted点状线
    double双线
    none/0去掉边框
  • 边框宽度

    border-width:取值;
  • 边框颜色

    border-color:取值;
  • 单独设置某个方向的边框属性:

    border-top:上边框
    border-bottom:下边框
    border-left:左边框
    border-right:右边框
    
    border-top-style:取值; 
    border-top-width:取值; 
    border-top-color:取值;
  • 简写

    CSS其他属性

三、背景图属性

CSS 可以设置背景颜色和背景图片,并且可以对图片进行相关设置。

背景颜色

选择符{background-color:red;}
/* 简写:*/
background:red;

背景图片

  • 说明

    网页中有两种图片形式:一种是插入图片,另一种是背景图。

    ? 插入图片:属于网页内容,也就是结构。

    ? 背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。

  • 语法

    选择器{background-image : none | url (url) }

    参数:

    none : 无背景图(默认的)
    url : 背景图像路径

    背景图片的显示原则:

    1. 容器尺寸等于图片尺寸,背景图片正好显示在容器中;
    2. 容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
    3. 容器尺寸小于图片尺寸,只显示元素范围以内的背景图。
    4. 加载背景图必须有容器区域;
  • 注意

    1. background-image 允许指定一张图片展示在背景中(只有CSS3才可以多背景),通常可以和 background-color 连用。 如果图片不重复,图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
    2. 建议背景图片后面的地址,url不要加引号。

背景图片平铺

  • 说明

    平铺

  • 语法

    选择器{background-repeat:no-repeat/repeat/ repeat-x/repeat-y }

    repeat :  背景图像在纵向和横向上平铺(默认的)

    no-repeat :  背景图像不平铺

    repeat-x :  横向平铺

    repeat-y :  纵向平铺

  • 注意

    设置背景图片时,默认把图片在水平和垂直方向铺满。

背景图片位置

  • 语法

    选择器{background-position:水平方向属性值 垂直方向属性性;}

    水平方向值:left/center/right或数值

    垂直方向值: top/center/bottom或数值

  • 说明

    1. 水平向右 垂直向下移动 是正数值
    2. 水平向左 垂直向上移动 是负数值
    3. 两个值 :第一个值表示水平位置的值,第二个值表示垂直的位置。
    4. 当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

背景附着

  • 说明

    设置或检索背景图像是随对象内容滚动还是固定的。

  • 语法:

    选择器{background-attachment : scroll | fixed }
  • 参数:

    scroll :背景图像是随对象内容滚动
    fixed:背景图像固定

背景简写

  • 说明

    为了方便记忆,提升可读性,背景图片各属性的书写顺序:

    background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

  • 语法

    选择符{background:属性值1 属性值2 属性值3;}
    
    div{background:#00ff00 url(背景图片的路径及全称) no-repeat scroll center top;}

常用的图片格式

  • jpg

    有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )

  • gif

    有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;

  • png

    有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

相关推荐