6. 列表表格

-> 列表

(1)list-style

基本语法

list-style : list-style-image || list-style-position || list-style-type

语法取值

该属性是复合属性。请参阅各参数对应的属性。
默认值为:disc outside none。

使用说明

设置列表项目相关样式。当 list-style-image 和 list-style-type 都被指定了时, list-style-image 将获得优先权。除非 list-style-image 设置为 none 或指定 url 地址的图片不能被显示。

(2)list-style-image

基本语法

list-style-image : none | url ( url )

语法取值

none         :  默认值。不指定图像
url ( url ) :  使用绝对或相对 url 地址指定图像

使用说明

设置或检索作为对象的列表项标记的图像。若此属性值为 none 或指定 url 地址的图片不能被显示时, list-style-type 属性将发生作用。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

(3)list-style-position

基本语法

list-style-position : outside | inside

语法取值

outside  :  默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐

使用说明

设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外边距( margin-left )被设置为 0 ,则列表项目标记不会被显示。左外边距( margin-left )最小可以被设置为 30 。仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。注意: ol 对象和 ul 对象的 type 属性为其后的所有列表项目(如 li 对象)指明列表属性。此属性对于 currentStyle 对象而言是只读的。

(4)list-style-type

基本语法

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

语法取值

disc            :  CSS1  默认值。实心圆
circle :  CSS1 空心圆
square :  CSS1 实心方块
decimal :  CSS1 阿拉伯数字
lower-roman :  CSS1 小写罗马数字
upper-roman :  CSS1 大写罗马数字
lower-alpha :  CSS1 小写英文字母
upper-alpha :  CSS1 大写英文字母
none :  CSS1 不使用项目符号
armenianl :  CSS2 未支持。传统的亚美尼亚数字
cjk-ideographic :  CSS2 未支持。浅白的表意数字
georgian :  CSS2 未支持。传统的乔治数字
lower-greek :  CSS2 未支持。基本的希腊小写字母
hebrew :  CSS2 未支持。传统的希伯莱数字
hiragana :  CSS2 未支持。日文平假名字符
hiragana-iroha :  CSS2 未支持。日文平假名序号
katakana :  CSS2 未支持。日文片假名字符
katakana-iroha :  CSS2 未支持。日文片假名序号
lower-latin :  CSS2 未支持。小写拉丁字母
upper-latin :  CSS2 未支持。大写拉丁字母

使用说明

设置或检索对象的列表项所使用的预设标记。若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时,此属性将发生作用。假如一个列表项目的左外补丁( margin-left )被设置为 0 ,则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。

注意: ol 对象和 ul 对象的 type 属性为其后的所有列表项目(如 li 对象)指明列表属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

(5)marker-offset

基本语法

marker-offset : auto | length

语法取值

auto    :  默认值。浏览器自动设置间距
length :  由浮点数字和单位标识符组成的长度值。可为负值。请参阅 长度单位

使用说明

设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距。作用于 display 属性值为 marker 的元素。

-> 表格

(1)border-collapse

基本语法

border-collapse : separate | collapse

语法取值

separate  :  默认值。边框独立(标准HTML)
collapse :  相邻边被合并

使用说明

设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

(2)border-spacing

基本语法

border-spacing : length

语法取值

length  :  由浮点数字和单位标识符组成的长度值。不可为负值。

使用说明

设置或检索当表格边框独立(例如当 border-collapse 属性等于 separate 时),行和单元格的边在横向和纵向上的间距。当只指定一个

length 值时,这个值将作用于横向和纵向上的间距。当指定了两个 length 值时,第一个作用于横向间距,第二个作用于纵向间距。

(3)caption-side

基本语法

caption-side : top | right | bottom | left

语法取值

top     :  默认值。 caption 在表格的上边
right :  caption 在表格的右边
bottom :  caption 在表格的下边
left :  caption 在表格的左边

使用说明

设置或检索表格( table )的 caption 对象是在表格的那一边。它是和 caption 对象一起使用的属性。

(4)empty-cells

基本语法

empty-cells : show | hide

语法取值

show  :  默认值。显示边框
hide :  隐藏边框

使用说明

设置或检索表格( table )的 caption 对象是在表格的那一边。它是和 caption 对象一起使用的属性。

CSS 笔记——列表表格的更多相关文章

  1. HTML+CSS笔记 表格,超链接,图片,表单

    表格 给表格加入CSS样式,添加表格边框 语法: <style type="text/css"> table tr td,th{border:1px solid #00 ...

  2. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

  3. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  4. 一个带标号的CSS文章列表写法

    <title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list ...

  5. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  6. 常用的CSS属性列表汇总

    常用的CSS属性列表汇总 近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下. 表格最右列的数字标识支持的CSS最低版本. 01. CSS背景属性(Background) 属 ...

  7. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  8. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  9. CloudNotes之桌面客户端篇:增强的笔记列表

    今天,我发布了CloudNotes的一个更新版本:1.0.5484.36793.这个版本与1.0.5472.20097不同的是,它拥有增强的笔记列表,与之前单调的列表系统相比,新的笔记列表不仅可以显示 ...

随机推荐

  1. [php]数组建立方式

    1.$a[0]=..; $a[1]=..; $a[2]=..; $a[3]=..; 2.$a=array(1,2,3,4,5); 3.自定义数组 $a['logo']="qq"; ...

  2. Unity下实现弹簧骨骼(Spring Bone)

    关于这个效果的名称,我一直没找到一个比较正式的说法.Spring Bone这个说法是来自于Anima2D这个插件中的一个演示用的脚本,我直接译成弹簧骨骼. 一般常见于对人物的头发的模拟上. 当然也可以 ...

  3. 【洛谷 P4134】 [BJOI2012]连连看(费用流)

    题目链接 首先是可以\(O(n^2)\)枚举出所有符合要求的点对的,然后考虑建图. 还是拆点把每个点拆成入点和出点,源点连入点,出点连汇点,流量都是1,费用都是0. 然后对于没对符合要求的\((x,y ...

  4. 【leetcode 简单】第二题 反转整数

    给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...

  5. 2017ACM暑期多校联合训练 - Team 1 1006 HDU 6038 Function (排列组合)

    题目链接 Problem Description You are given a permutation a from 0 to n−1 and a permutation b from 0 to m ...

  6. TypeScript在react项目中的实践

    前段时间有写过一个TypeScript在node项目中的实践. 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的. 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我 ...

  7. MacOS Safari 中 button 不能使用 text-gradient

    @mixin text-gradient ($deg: 90deg, $from: $gradientFrom, $to: $gradientEnd) { background-image: line ...

  8. 首次成功的web渗透

    web渗透 今天给大家讲一个最近做的一件令我振奋的一件事情 渗透培训刚刚结束的第二天 我在公网上挖到了我人生中的第一个站 总体来说个人真的很振奋人心      这个网站还没有进行更改但我已经通知了他们 ...

  9. java线上应用故障排查之二:高内存占用【转】

    前一篇介绍了线上应用故障排查之一:高CPU占用,这篇主要分析高内存占用故障的排查. 搞Java开发的,经常会碰到下面两种异常: 1.java.lang.OutOfMemoryError: PermGe ...

  10. LNMP结合discuz的配置

    一.安装discuz 配置参照LAMP结合discuz的第一部分 不要忘记了 添加hosts~!!!! ===============我是分割线.========================== ...