`

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背景、文本、字体
评论
发表评论

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

相关推荐

    很不错的css树形菜单

    4. 轮廓和间距：通过`margin`、`padding`调整菜单项之间的距离，用`border`和`background-color`创建视觉分隔。 5. 交互效果：利用CSS的过渡（transition）和动画（animation）添加平滑的展开和折叠效果。 这个项目...

    Div CSS网站布局视频教程_设置表格与表单的样式

    本教程“Div CSS网站布局视频教程_设置表格与表单的样式”着重讲解了如何通过CSS来控制表格和表单的样式，从而创建美观且功能完善的网页。以下将详细阐述这两个核心知识点。 1. 表格（Tables）的CSS样式： - `...

    css2+css3Chm中文手册

    还有颜色、字体、文本、列表、表格、定位、浮动、背景、边框和轮廓等众多CSS属性的用法和组合。 学习这个手册，你将能够了解到如何使用CSS来创建复杂的布局，包括流体布局、网格系统和弹性盒模型。同时，你还将掌握...

    CSS层叠样式表技术参考手册

    - **2.6 CSS表格** - **表格布局**：讨论表格的布局方式，包括边框、单元格间距等。 - **示例代码**：提供表格样式设置的示例代码。 - **2.7 CSS轮廓** - **轮廓属性**：解释`outline`属性的功能及其与边框的区别...

    CSS3 离线参考手册

    - **表格**：控制表格的布局和样式。 - **文本**：定义文本的对齐方式、间距等。 - **2D/3D转换**：实现元素的2D和3D变换效果。 - **过渡**：平滑地改变元素的样式属性。 - **用户界面**：定义用户界面元素的样式。 ...

    CSS Reference

    文档中提到的CSS属性按组分类，包括动画、背景、边框和轮廓、盒模型、颜色、内容分页媒体、尺寸、弹性盒子、字体、生成内容、网格、超链接、行框、列表、边距、滚动条、多列布局、内边距、打印、Ruby注释、语音、...

    CSS全科教程(Word文档)

    **1.12 CSS表格** - **表格属性**：如`border`、`cellpadding`等控制表格的边框和单元格间距。 **1.13 CSS轮廓** - **轮廓属性**：`outline`属性用于绘制轮廓线，与边框不同，它不会占用空间。 #### 二、CSS框...

    CSS 2.0样式表中文手册

    8. **边框和轮廓**: 边框可以设置宽度、样式（实线、虚线等）和颜色，轮廓则提供非填充的边框效果。 9. **表格样式**: 可以控制表格的列宽、行高、边框合并等。 10. **列表样式**: 改变列表项符号、间距等。 ### ...

    css2.0_handbook_cn.zip_css2.0 handbo_css2.0 handbook_css2.0handb

    CSS2.0提供了对表格样式更细致的控制，包括单元格间距、边框合并、表头样式等。 **十一、列表样式** 可以控制列表项的符号、间隔等，实现自定义列表展示。 **十二、透明度** CSS2.0引入了`opacity`属性，用于设置...

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

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

    CSS学生档案表单样式代码.rar

    /* 去除默认轮廓 */ } ``` 在"CSS学生档案表单样式代码"中，可能还会涉及到其他高级特性，如自定义表单控件、响应式设计（适配不同设备）、以及动画效果等。通过这个代码示例，开发者可以学习如何创建一个专业且...

    css2中文手册

    7. **边框和轮廓**：可以设置边框的宽度、样式（实线、虚线等）和颜色，同时，CSS2还引入了轮廓（outline），它不占用空间，用于提供视觉反馈。 8. **列表样式**：可以自定义列表项的标记类型，调整列表间距，甚至...

    css文档

    8. **列表和表格**： - `list-style`控制列表项的表示，可去除默认的符号。 - 对表格的样式控制包括`border-collapse`, `caption-side`, `table-layout`等。 9. **边框和轮廓**： - 边框宽度、样式（如`solid`, ...

    css 帮助文档 中文版 2.0&3.0

    8. **列表和表格样式**：可以自定义列表项目符号和表格的边框、间距、对齐方式。 9. **媒体查询**：虽然CSS 2.0已经有了初步的媒体类型，但CSS 3.0的媒体查询更加强大。 接下来是CSS 3.0，它是CSS的扩展版本，引入...

    常用CSS属性总结.doc

    5. **CSS表格属性**： - `border-collapse`：控制表格边框是否合并，`separate`（分离）或`collapse`（合并）。 - `border-spacing`：设置单元格边框之间的距离。 - `caption-side`：设置表格标题的位置，如`top`...

    30个开发人员有用的CSS代码片段

    本文通过分析“30个开发人员有用的CSS代码片段”中的部分片段，深入探讨了全局样式重置、文本样式统一、焦点样式和插入文本处理、表格布局优化等方面的知识点。这些基础知识对于任何前端开发者来说都是至关重要的，...

    疯狂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 ...

    css2手册编程书籍

    8. **列表和表格**：CSS2提供了对列表和表格样式的详细控制，包括列表符号、边框、间距等。 9. **边框和轮廓**：CSS2不仅允许设置边框宽度、样式和颜色，还引入了轮廓（outline）的概念，用于突出元素，但不占用...

    css 2.0 中文手册

    CSS 2.0提供了对表格单元格、行、列等的样式控制，包括边框合并、间距调整等。 通过《CSS 2.0 中文手册》.chm文件，读者可以深入理解以上知识点，并学习到更多的细节，如单位转换、单位兼容性、透明度控制等，从而...

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