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 可以设置背景颜色和背景图片,并且可以对图片进行相关设置。
背景颜色
选择符{background-color:red;} /* 简写:*/ background:red;
背景图片
说明
网页中有两种图片形式:一种是插入图片,另一种是背景图。
? 插入图片:属于网页内容,也就是结构。
? 背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。
语法
选择器{background-image : none | url (url) }
参数:
none : 无背景图(默认的)
url : 背景图像路径背景图片的显示原则:
- 容器尺寸等于图片尺寸,背景图片正好显示在容器中;
- 容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
- 容器尺寸小于图片尺寸,只显示元素范围以内的背景图。
- 加载背景图必须有容器区域;
注意
- background-image 允许指定一张图片展示在背景中(只有CSS3才可以多背景),通常可以和 background-color 连用。 如果图片不重复,图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
- 建议背景图片后面的地址,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或数值
说明
- 水平向右 垂直向下移动 是正数值
- 水平向左 垂直向上移动 是负数值
- 两个值 :第一个值表示水平位置的值,第二个值表示垂直的位置。
- 当两个值都是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的 源文件格式,适用于颜色数量较少的图像;