- 浏览: 578064 次
- 性别:
- 来自: 苏州
文章分类
- 全部博客 (206)
- Flask (1)
- JavaScript (3)
- Core Java (41)
- XML (1)
- Oracle (11)
- 软件安装及环境配置 (0)
- 其它 (9)
- 面试/笔试 (5)
- 项目 (0)
- JDBC (11)
- Servlet (4)
- MySql (4)
- JNDI (0)
- Hibernate (11)
- Java模式和构架设计 (0)
- Web设计 (22)
- JSP (8)
- Struts (13)
- Tomcat (2)
- Marven (2)
- SVN (2)
- Swing/AWT (1)
- jQuery (2)
- ExtJS (8)
- Python (22)
- Flex (1)
- Django (7)
- 算法 (5)
- English (1)
- Twisted (1)
- Linux (3)
- Rails (1)
- SVG (3)
- PostgreSQL (1)
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 表格属性允许你设置表格的布局。
实例:
{
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) 实例:
<!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 版本定义了该属性。
outline | 在一个声明中设置所有的轮廓属性。 | 2 |
outline-color | 设置轮廓的颜色。 | 2 |
outline-style | 设置轮廓的样式。 | 2 |
outline-width | 设置轮廓的宽度。 | 2 |
发表评论
-
css note
2012-09-05 22:43 11171. input 高度 .input-defau ... -
单行文本过长 自动换行
2012-05-04 12:47 1739white-space:pre-wrap;/*css-3*/ ... -
input中readonly和disable的区别
2012-02-05 18:36 1778<input type="text&q ... -
Web小细节
2010-12-20 20:09 8051.div标签居中显示要加上属性margin:auto; ... -
插入样式表的方法
2010-12-19 11:01 1082插入样式表的方法: a)内联式样式表:直接写在HTML标签中。 ... -
CSS 框模型
2010-12-13 11:17 1010元素框的最内部分是实际的内容,直接包围内容的是内边距。内边 ... -
CSS背景、文本、字体
2010-12-13 10:13 2166CSS 背景 CSS 允许应用纯色作为背景,也允许使用背 ... -
插入CSS样式表的三种方式
2010-12-13 09:43 3958如何插入样式表 当读 ... -
CSS选择器
2010-12-13 09:21 1040CSS,层叠样式表 (Cascadin ... -
为什么要使用XHTML
2010-12-10 08:36 1028我们认为万维网上的许多页面都包含着糟糕的 HTML 代码。 ... -
如何升级至 XHTML
2010-12-09 11:36 1080添加文件类型声明 将下面的文件类型声明添加至每页的首行: ... -
XHTML DTD
2010-12-09 10:29 9733种文档类型声明 DTD 规定了使用通用标记语言(SG ... -
XHTML 语法
2010-12-09 10:17 1114编写 XHTML 代码需要纯净的 HTML 语法。 ... -
XHTML 与 HTML 之间的差异
2010-12-09 10:00 1053最主要的不同: XHTML 元素必须被正确地嵌套。 ... -
HTML 4.01 / XHTML 1.0标签列表(按功能排列)
2010-12-09 09:41 1781按功能类别排列 DTD:指示在哪种 XHTML 1.0 DT ... -
HTML 4.01/XHTML 1.0标签列表(按字母排列)
2010-12-09 09:21 2063按字母顺序排列 DTD:指示在哪种 XHTML 1.0 DT ... -
HTTP 状态消息
2010-12-09 09:14 9051xx: 信息 消息: 描述 ... -
HTML事件属性
2010-12-09 09:07 1214HTML4的新特性之一是可 ... -
div和span的区别
2010-11-22 11:41 1241DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象 ... -
<%@ include file=""%><jsp:include page=">区别
2010-11-19 13:57 1219我们都知道在jsp中include有两种形式,分别是 & ...
相关推荐
4. 轮廓和间距:通过`margin`、`padding`调整菜单项之间的距离,用`border`和`background-color`创建视觉分隔。 5. 交互效果:利用CSS的过渡(transition)和动画(animation)添加平滑的展开和折叠效果。 这个项目...
本教程“Div CSS网站布局视频教程_设置表格与表单的样式”着重讲解了如何通过CSS来控制表格和表单的样式,从而创建美观且功能完善的网页。以下将详细阐述这两个核心知识点。 1. 表格(Tables)的CSS样式: - `...
还有颜色、字体、文本、列表、表格、定位、浮动、背景、边框和轮廓等众多CSS属性的用法和组合。 学习这个手册,你将能够了解到如何使用CSS来创建复杂的布局,包括流体布局、网格系统和弹性盒模型。同时,你还将掌握...
- **2.6 CSS表格** - **表格布局**:讨论表格的布局方式,包括边框、单元格间距等。 - **示例代码**:提供表格样式设置的示例代码。 - **2.7 CSS轮廓** - **轮廓属性**:解释`outline`属性的功能及其与边框的区别...
- **表格**:控制表格的布局和样式。 - **文本**:定义文本的对齐方式、间距等。 - **2D/3D转换**:实现元素的2D和3D变换效果。 - **过渡**:平滑地改变元素的样式属性。 - **用户界面**:定义用户界面元素的样式。 ...
文档中提到的CSS属性按组分类,包括动画、背景、边框和轮廓、盒模型、颜色、内容分页媒体、尺寸、弹性盒子、字体、生成内容、网格、超链接、行框、列表、边距、滚动条、多列布局、内边距、打印、Ruby注释、语音、...
**1.12 CSS表格** - **表格属性**:如`border`、`cellpadding`等控制表格的边框和单元格间距。 **1.13 CSS轮廓** - **轮廓属性**:`outline`属性用于绘制轮廓线,与边框不同,它不会占用空间。 #### 二、CSS框...
8. **边框和轮廓**: 边框可以设置宽度、样式(实线、虚线等)和颜色,轮廓则提供非填充的边框效果。 9. **表格样式**: 可以控制表格的列宽、行高、边框合并等。 10. **列表样式**: 改变列表项符号、间距等。 ### ...
CSS2.0提供了对表格样式更细致的控制,包括单元格间距、边框合并、表头样式等。 **十一、列表样式** 可以控制列表项的符号、间隔等,实现自定义列表展示。 **十二、透明度** CSS2.0引入了`opacity`属性,用于设置...
涵盖了 html、css 和 xsl 的Emmet命令,提高...Outline(轮廓);Tables(表格);Border(边框);Lists(列表);Print(打印);Others(其他) xls语法:略!(此处略,文档里有) 如在使用中发现错误,请在评论区反馈,谢谢!
/* 去除默认轮廓 */ } ``` 在"CSS学生档案表单样式代码"中,可能还会涉及到其他高级特性,如自定义表单控件、响应式设计(适配不同设备)、以及动画效果等。通过这个代码示例,开发者可以学习如何创建一个专业且...
7. **边框和轮廓**:可以设置边框的宽度、样式(实线、虚线等)和颜色,同时,CSS2还引入了轮廓(outline),它不占用空间,用于提供视觉反馈。 8. **列表样式**:可以自定义列表项的标记类型,调整列表间距,甚至...
8. **列表和表格**: - `list-style`控制列表项的表示,可去除默认的符号。 - 对表格的样式控制包括`border-collapse`, `caption-side`, `table-layout`等。 9. **边框和轮廓**: - 边框宽度、样式(如`solid`, ...
8. **列表和表格样式**:可以自定义列表项目符号和表格的边框、间距、对齐方式。 9. **媒体查询**:虽然CSS 2.0已经有了初步的媒体类型,但CSS 3.0的媒体查询更加强大。 接下来是CSS 3.0,它是CSS的扩展版本,引入...
5. **CSS表格属性**: - `border-collapse`:控制表格边框是否合并,`separate`(分离)或`collapse`(合并)。 - `border-spacing`:设置单元格边框之间的距离。 - `caption-side`:设置表格标题的位置,如`top`...
本文通过分析“30个开发人员有用的CSS代码片段”中的部分片段,深入探讨了全局样式重置、文本样式统一、焦点样式和插入文本处理、表格布局优化等方面的知识点。这些基础知识对于任何前端开发者来说都是至关重要的,...
第11章 表格、列表相关属性及media query 307 11.1 表格相关属性 308 11.2 列表相关属性 313 11.3 控制光标的属性 316 11.4 media query和响应式布局 317 11.5 本章小结 323 第12章 变形与动画相关属性 324 ...
8. **列表和表格**:CSS2提供了对列表和表格样式的详细控制,包括列表符号、边框、间距等。 9. **边框和轮廓**:CSS2不仅允许设置边框宽度、样式和颜色,还引入了轮廓(outline)的概念,用于突出元素,但不占用...
CSS 2.0提供了对表格单元格、行、列等的样式控制,包括边框合并、间距调整等。 通过《CSS 2.0 中文手册》.chm文件,读者可以深入理解以上知识点,并学习到更多的细节,如单位转换、单位兼容性、透明度控制等,从而...