欢迎光临
我们一直在努力

CSS | 列表、边框、背景、表格属性知识复习

文章目录

列表属性

定义列表符号样式

list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);list-style-type:none===list-style:none;

使用图片作为列表符号

list-style-image:url(所使用图片的路径及全称);

定义列表符号的位置

list-style-position:outside(外边)/inside(里边);

*list-style:none;去掉列表符号*

列表注意事项

一般我们做列表样式时都不会使用list-style-type或list-style-none,而是使用背景图片作为列表符号!用背景图定义列表图像一般分为以下几步:

  • 把li的padding和margin设置为0
  • 取消列表默认样式
  • 为li添加背景图,并调整背景图位置
  • 为li添加左填充
margin:0;
padding:0;
list-style: none;
background: url(img/list.png) no-repeat left 10px center;
padding-left: 33px;

边框属性

border:边框宽度 边框风格 边框颜色;
	例如:border:5px solid #ff0000


边框:border,网页中很多修饰性线条都是由边框来实现的。
边框宽度:border-width:
边框颜色:border-color:
边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框,



可单独设置一方向边框,
    border-bottom:边框宽度 边框风格 边框颜色;底边框
    border-left:边框宽度 边框风格 边框颜色;左边框
    border-right:边框宽度 边框风格 边框颜色;右边框
    border-top:边框宽度 边框风格 边框颜色;上边框

背景属性

  • 1、背景颜色 {background-color:颜色值;}
  • 2、背景图片的设置 background-image:url(背景图片的路径及全称);背景图片的显示原则 1)容器尺寸等于图片尺寸,背景图片正好显示在容器中 2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素; 3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。 网页上有两种图片形式:插入图片、背景图; 插入图片:属于网页内容,也就是结构。 背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。
  • 3、背景图片平铺属性{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
  • 4、背景图的位置 性{background-position:left/center/right/数值 top/center/bottom/数值;}水平方向上的对齐方式(left/center/right)或值 垂直方向上的对齐方式(top/center/bottom)或值 background-position:值1 值2; 两个值 :第一个值表示水平位置的值,第二个值:表示垂直的位置。 当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置 说明:向左方向,向上方向是负值 背景属性的缩写语法: background:属性值1 属性值2 属性值3; 背景缩写:background:url(背景图片的路径及全称) no-repeat center top #f00; 网页上常用的图片格式(压缩图片) 1)jpg :有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )如果网页中 2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像; 3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;
  • 5、背景图的固定 性{{background-attachment:scroll(滚动)/fixed(固定);}fixed 固定,不随内容一块滚动; scroll:随内容一块滚动。

表格属性

1、单元格间距:border-spacing:value;

说明:单元格间距(该属性必须给table添加) 表示单元格边框之间的距离, 不可取负值

2、合并相邻单元格边框:border-collapse:separate/collapse;

说明:合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值; collapse(边框合并)

3、无内容时单元格的设置:empty-cells:show/hide;

说明:定义当单元格无内容时,是否显示该单元格的边框区域;show:显示 ;hide:隐藏;

4、显示单元格行和列的算法(加快运行的速度): table-layout:auto/fixed;

赞(1) 打赏
未经允许不得转载:散人研 » CSS | 列表、边框、背景、表格属性知识复习
分享到: 更多 (0)

评论 抢沙发

4 + 1 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏