`

有关表格边框的css语法整理

阅读更多
 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框。
  有关表格边框的css语法

  具体内容包括:上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。

   1.上边框宽度

  语法: border-top-width: <值>

  允许值: thin | medium | thick | <长度>

  初始值: medium

  适用于: 所有对象

  向下兼容: 否

  上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。

  2.右边框宽度

  语法: border-right-width: <值>

  允许值: thin | medium | thick | <长度>

  初始值: medium

  适用于: 所有对象

  向下兼容: 否

  右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。

   3.下边框宽度

  语法: border-bottom-width: <值>

  允许值: thin | medium | thick | <长度>

  初始值: medium

  适用于: 所有对象

  向下兼容: 否

  下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在下边框、边框的宽度或边框的属性略写。

   4.左边框宽度

  语法: border-left-width: <值>

  允许值: thin | medium | thick | <长度>

  初始值: medium

  适用于: 所有对象

  向下兼容: 否

  左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在左边框、边框的宽度或边框的属性略写。

  5.边框宽度

  语法: border-width: <值>

  允许值: [ thin | medium | thick | <长度> ]{ 1,4 }

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  边框宽度属性用一到四个值来设置元素的边界,值是一个关键字或长度。不允许使用负值长度。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以使用略写的边框属性。

  6.边框颜色

  语法: border-color: <值>

  允许值: <颜色>{ 1,4 }

  初始值: 颜色属性的值

  适用于: 所有对象

  向下兼容: 否

  边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。也可以使用略写的边框属性。

  7.边框样式

  语法: border-style: <值>

  允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{ 1,4 }

  初始值: none

  适用于: 所有对象

  向下兼容: 否

  边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。也可以使用略写的边框属性。

  none:无样式;
  dotted:点线;
  dashed:虚线;
  solid:实线;
  double:双线;
  groove:槽线;
  ridge:脊线;
  inset:内凹;
  outset:外凸。

 8.上边框

  语法: border-top: <值>


  允许值: <上边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。

  9.右边框

  语法: border-right: <值>

  允许值: <右边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。  

  10.下边框

  语法: border-bottom: <值>

  允许值: <下边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。

  11.左边框

  语法: border-left: <值>

  允许值: <左边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。

   12.边框

  语法: border: <值>

  允许值: <边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。

  边框声明的例子包括:

  H2 { border: groove 3em }
  A:link { border: solid blue }
  A:visited { border: thin dotted #800080 }
  A:active { border: thick double red }

  边框属性只能设置四种边框;只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

  13.宽度

  语法: width: <值>

  允许值: <长度> | <百分比> | auto

  初始值: auto

  适用于: 块级和替换元素

  向下兼容: 否

  宽度属性的初始值为“auto”,即为该元素的原有宽度(有就是元素自己的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。

  14.高度

  语法: height: <值>

  允许值: <长度> | auto

  初始值: auto

  适用于: 块级和替换元素

  向下兼容: 否

  高度属性的初始值为“auto”,即为该元素的原有高度(有就是元素自己的高度,)。百分比参考上级元素的宽度。不允许使用负的长度值。

  15.有关标签

  table:表格标签,对整个表格样式的定义要放在table中;
  td:单元格标签,对单元格样式的定义要放在td中。
分享到:
评论

相关推荐

    HTML知识整理、网页制作基础教程 CHM.rar

     有关表格边框的CSS语法整理  网页设计理念  有了好的设计理念,才能规划好一个精彩的网站……  网页中的平衡、对比、连贯和留白  韩国商业网站设计分析  网页设计的布局理念  平面文字的设计原则及...

    css笔记学习整理.pdf

    【CSS规则样式】规则样式主要涵盖各种文本、列表、边框、浮动、背景、盒模型、溢出、元素分类、定位、透明度和表格属性等: 1. 文本属性:如`font-size`、`font-family`、`color`、`font-weight`、`font-style`、`...

    css、js笔记整理

    以上是对CSS基础知识的一个简要总结,但CSS的内容远不止这些,还包括浮动、定位、背景、文本样式、列表、表格、响应式设计等更深入的特性。JavaScript(JS)则是用于网页动态效果和交互的主要脚本语言,它与CSS共同...

    DIVCSS布局大全.pdf

    本文内容节选自《Div+CSS布局大全》,该电子书由JesseZhao在博客园整理发布。该书为初学者和进阶用户提供了丰富的CSS布局技巧,涵盖了从基础入门到高级技巧的各个方面。书中不仅教授了如何使用div和css进行网页布局...

    HTML语法整理

    ### HTML语法整理 #### 1. HTML文档结构 HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。一个基本的HTML文档结构包括`&lt;html&gt;`标签内的`&lt;head&gt;`和`&lt;body&gt;`部分。 - **`&lt;html&gt;`**:表示整个...

    网页制作基础教程

    制作1px边框表格的几种方法 有关表格边框的CSS语法整理 &lt;br&gt; ⊙ 网页设计理念  有了好的设计理念,才能规划好一个精彩的网站…… &lt;br&gt;网页中的平衡、对比、连贯和留白 ...

    div+css速成教程

    - **目录**:给出了整个教程的大纲,涵盖了从div+css的基础知识到具体应用案例的各个方面,包括DOCTYPE的选择、XHTML的编码规范、CSS语法、布局方法等。 #### 三、关键技术知识点详解 ##### 1. **XHTML下css+div...

    百度空间CSS教程--5、6十个网站

    下面将基于这些信息整理出相关的CSS知识点。 ### 百度空间CSS教程概览 #### 一、CSS基础概念 - **定义**:层叠样式表(Cascading Style Sheets, CSS)是一种用来表现HTML或XML等文件样式的计算机语言。 - **作用**...

    html,css,javaScript知识树思维导图

    这个知识树思维导图将帮助初学者系统地理解和掌握这三大技术,同时对于有一定经验的开发者来说,也是一个很好的复习和整理工具。通过深入学习并实践这些知识点,可以构建出功能丰富、交互性强的现代网页。在实际开发...

    B站笔记-HTML+CSS.rar

    学习HTML+CSS时,通常会从基础语法入手,逐步掌握页面布局技巧,理解盒模型,熟悉各种选择器的使用,以及如何实现响应式设计。同时,动手实践是非常重要的环节,可以结合实际项目或仿站练习,提升对这两门技术的理解...

    asoft在线表格处理系统

    1. **创建表格**:用户可以通过简单的界面添加行、列,自定义单元格格式,设置边框、颜色等样式。 2. **数据编辑**:支持文本、数字、日期等多种类型的数据输入,并可能提供公式计算功能,如SUM、AVERAGE等。 3. **...

    不错的整理的24则css技巧

    来合并边框,并使用特定的CSS规则来实现细线效果。 15. 在使用绝对定位时,通过设置margin为负值可以模拟相对定位的效果。尤其是在需要页面居中的情况下,这种方法比使用left属性更为有效。 16. 绝对定位允许通过...

    javaWeb课程摘要整理.docx

    - **CSS样式属性**:字体、文本、背景、内边距、外边距、定位、布局、边框、列表、表格、尺寸等,用于控制网页元素的样式和布局。 2. **JavaScript(JS)**: - **JS概述**:基于ECMAScript标准,是一种弱类型、...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    css边框以及其他常用样式 css之float样式 css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第15周 上节内容答疑 上节内容回顾 CSS内容补充之position CSS内容补充之overflow CSS内容之...

    HTML教程(完整版).pdf

    - `border`:定义表格边框的宽度。 - `cellpadding`:定义单元格内容与边框之间的距离。 - `cellspacing`:定义单元格之间的间距。 - `width`和`height`:定义表格的宽度和高度。 - `align`和`valign`:定义...

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

    12.13.2 边框线属性 381 12.13.3 贴边属性 384 12.13.4 大小属性 385 12.13.5 定位属性 386 12.13.6 float属性 386 12.13.7 clear属性 387 12.14 本章小结 389 第13章 级联样式单级别2 389 13.1 CSS2中有哪些新特点...

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

    1.3.2 语法分析程序和处理程序... 15 1.3.3 浏览器和其他工具... 15 1.3.4 处理过程总结... 15 .4 相关技术... 17 1.4.1 超文本标记语言(Hypertext Markup Language)... 17 1.4.2 级联样式单(Cascading ...

Global site tag (gtag.js) - Google Analytics