`

CSS列表、表格、轮廓

CSSIEHTML算法浏览器 
阅读更多

CSS 列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

CSS 列表

从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

由于列表如此多样，这使得列表相当重要，所以说，CSS 中列表样式不太丰富确实是一大憾事。

列表类型

要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。

列表项图像

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

列表标志位置

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。

简写列表样式

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

CSS 列表属性(list)

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset  

CSS 表格

CSS 表格属性允许你设置表格的布局。

实例：

显示表格中的空单元
empty-cells: show
合并表格边框
border-collapse: collapse
设置表格边框之间的空白
本例演示如何设置单元格边框之间的距离。（请在非 IE 浏览器中浏览）
设置表格标题的位置
caption
{
caption-side:bottom
}

CSS Table 属性

CSS 表格属性允许你设置表格的布局。（请注意，本节介绍的不是如何使用表来建立布局，而是要介绍 CSS 中表本身如何布局。）

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。（仅用于 "separated borders" 模型）
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。（仅用于 "separated borders" 模型）
table-layout 设置显示单元、行和列的算法。

CSS 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

轮廓（Outline） 实例：

在元素周围画线
本例演示使用outline属性在元素周围画一条线。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p 
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head>

<body>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
</body>
</html>
 
设置轮廓的颜色
本例演示如何设置轮廓的颜色。
 
设置轮廓的样式
本例演示如何设置轮廓的样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
</style>
</head>
<body>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>

<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-style 属性。</p>
</body>
</html>
   
设置轮廓的宽度
本例演示如何设置轮廓的宽度。
<html>
<head>
<style type="text/css">
p.one
{
border:red solid thin;
outline-style:solid;
outline-width:thin;
}
p.two
{
border:red solid thin;
outline-style:dotted;
outline-width:3px;
}
</style>
</head>
<body>

<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>

<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-width 属性。</p>
</body>
</html>
 

CSS 边框属性

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。

属性 描述 CSS
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2
分享到：
| CSS背景、文本、字体
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Emmet命令大集(HTML+CSS+XSL)CHM

    涵盖了 html、css 和 xsl 的Emmet命令，提高...Outline(轮廓)；Tables(表格)；Border(边框)；Lists(列表)；Print(打印)；Others(其他) xls语法：略！（此处略，文档里有） 如在使用中发现错误，请在评论区反馈，谢谢！

    疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码

    第11章　表格、列表相关属性及media query 307 11.1　表格相关属性 308 11.2　列表相关属性 313 11.3　控制光标的属性 316 11.4　media query和响应式布局 317 11.5　本章小结 323 第12章　变形与动画相关属性 324 ...

    疯狂HTML5\CSS3\JavaScript讲义-源代码

    第11章 表格、列表相关属性及media query 第12章 变形与动画相关属性 第三部分 第13章 JavaScript语法详解 第14章 DOM编程详解 第15章 事件处理机制 第16章 本地存储与离线应用 第17章 使用Worker创建多线程...

    html 版 CSS中文速查手册

    list-stylelist-style-imagelist-style-positionlist-style-typemarker-offset　表格 Table border-collapseborder-spacingcaption-sideempty-cellstable-layoutspeak-header　滚动条 Scrollbars scrollbar-3d-...

    前端开发全套学习教程包括视频+源码+项目实战

    首先就是掌握前端语言的基础知识3大部分（HTML、CSS、页面制作工具）其中包含了元素和属性、表单和图形处理、CSS基本语法与选择器、文本、边框、轮廓与颜色、SS列表、表单与表格样式、CSS样式层叠与继承、PhotoShop...

    CSS 参考手册

    边框和轮廓 框 颜色 内容页的媒体属性 尺寸 盒子模型(新) 盒子模型(旧) 字体 内容生成 网格 超链接 线框 列表 外边距 字幕 多列 内边距 页面媒体 定位 分页 Ruby 语音 表格 文本 2D/3D ...

    loruki_fake_website_tutorial：学习HTML和CSS的教程

    loruki_fake_website_tutorial 学习HTML和CSS的教程 此代码是从复制的，并且已复制到此处，...“ *”添加到必填表格项 将水平阴影添加到卡类 阴影变暗 导航菜单和焦点上的按钮轮廓已删除 本教程的最新进展： 1.00.14

    accessible-form:技术学位项目3-实体模型的可访问注册表格

    仅在使用十六进制值时才需要使用“轮廓色”轮廓色。 要进行焦点状态转换，需要首先在CSS的原始元素上提供默认值。 例如.tristan {不透明度：人类； 过渡：所有5s缓解； } .tristan：focus {opacity：ghost; }

    XML实用大全(web开发必备手册)

    13.5.1 轮廓属性... 412 13.5.2 定位属性... 413 13.6 计数器和自动编号... 417 13.7 有声样式单... 419 13.7.1 说话属性... 420 13.7.2 音量属性... 420 13.7.3 暂停属性... 420 13.7.4 提示属性... 421 ...

    XMl实用大全（资料全易学习）

    13.5.1 轮廓属性 412 13.5.2 定位属性 413 13.6 计数器和自动编号 417 13.7 有声样式单 419 13.7.1 说话属性 420 13.7.2 音量属性 420 13.7.3 暂停属性 420 13.7.4 提示属性 421 13.7.5 同期播放属性 421 13.7.6 ...

    标示-crx插件

    更新轮廓CSS以使其更适合尺寸1.0.5。某些UI更改：更改宽度百分比；将顶部，源，底部向左移动1.0.4使用mark.js而不是showdown.js渲染MD 1.0.3打印时删除了容器边框1.0.2添加Wiki和屏幕截图1.0.1初始内部markdown文件...

    xml实用大全和轻松学习手册和无废话xml

    13.5.1 轮廓属性 412 13.5.2 定位属性 413 13.6 计数器和自动编号 417 13.7 有声样式单 419 13.7.1 说话属性 420 13.7.2 音量属性 420 13.7.3 暂停属性 420 13.7.4 提示属性 421 13.7.5 同期播放属性 421 13.7.6 ...

    awayhugo:雨果主题

    修复表格样式 更好的滚动条 预加载链接 图片 搜索引擎优化 建立管道 漂亮/ stylelint / eslint 沙哑 内联关键JS / CSS 使用CSS媒体预加载而不是JS 修复标题间距，尤其是轮廓部分 改善字体 改善汉堡按钮...

    XML实用大全----xml详细参考书

    13.5.1 轮廓属性... 412 13.5.2 定位属性... 413 13.6 计数器和自动编号... 417 13.7 有声样式单... 419 13.7.1 说话属性... 420 13.7.2 音量属性... 420 13.7.3 暂停属性... 420 13.7.4 提示属性... 421 ...

    XML编程综合资料库

    13.5.1 轮廓属性... 412 13.5.2 定位属性... 413 13.6 计数器和自动编号... 417 13.7 有声样式单... 419 13.7.1 说话属性... 420 13.7.2 音量属性... 420 13.7.3 暂停属性... 420 13.7.4 提示属性... 421 ...

    XML实用大全

    391 13.1.7 表格... 391 13.1.8 生成的内容... 391 13.1.9 有声样式单... 391 13.1.10 新工具... 391 13.2 选择元素... 393 13.2.1 式样匹配... 393 13.2.2 通配符... 394 13.2.3 后代和子...

Magicbox
Global site tag (gtag.js) - Google Analytics