`

CSS列表、表格、轮廓

阅读更多

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树形菜单

    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文件,读者可以深入理解以上知识点,并学习到更多的细节,如单位转换、单位兼容性、透明度控制等,从而...

Global site tag (gtag.js) - Google Analytics