标签归档：border
表格属性border-collapse、border-spacing、empty-cells
表格一直是较为常见的一个使用元素。在以前我们会经常在html的表格里写上各种参数来控制表格边框以及长宽。如示例1: <table width=”200″ border=”1″ cellpadding=”0″ cellspacing=”0″> <tr> <td>旅游网站建设标题1</td> <td>内容1</td> <td>内容1</td> </tr> <tr> <td>旅游网站建设标题2</td> <td>内容2</td> <td>内容2</td> </tr> </table> 从很大程度上来说，HTML/XHTML浏览器都使用同样的属性来显示表格内容，这些属性控制着常规文档内容的显示。但是，在表格中会有一些特殊情况。要使作者得以更好地控制这些项，CSS2添加了几个特定于表格的属性。但是现在流行的浏览器都还不支持这些属性。 在CSS2里为了使我们制作过程中可以得到更好的的控制表格，CSS2提供了border-collapse属性，它允许我们选择适合自己样式的模型。默认情况下，这个属性的值为collapse，其含义是相邻的单元格共享他们的边框样式。换句话说，可以将border-collapse属性设置为separate，这样就扩大了表格，因此边框可以被单独显示，并清楚地围绕在每个单元格周围。如果选择的是separate样式，还可以使用border-spacing属性来设置相邻边框之间的间距。 默认边框间距为0，这意味着相邻的单元格边框彼此相接，但是有些浏览器还是可能使用不同的默认值。增加该值后，可以使浏览器在边框之间插入额外的空间，这就允许表格的背景颜色或图像可以显示出来。如果只提供了两个值，第一个值设置水平间距，第二个值确定垂直间距。 在separate样式中，还可以控制边框围绕着空单元格绘制的方式。默认情况下，边框会围绕着一个表格内的所有单元格进行绘制，即使其中并没有内容。将empty-cells属性从其默认值show切换为hide，便可以改变这种状况。在设置属性时，空的单元格仅仅会显示表格背景。如果整行单元格都是空的，浏览器会从表格实体中去除行。 如示例1，我们可以改为： <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>旅游网站建设css表格的应用</title> <style type=”text/css”> table { width: 200px; border: 1px solid #CCC; … 继续阅读
clip属性的用法
clip属性在旅游网站建设中很少用到，一般情况下，内容是显示是完全可见的。而使用clip属性后，在设定的元素内会跟具指定的clip参数修剪后进行显示，或我们可以将不需要的元素隐藏起来。 clip属性的一共有4个属性值。例如： P{clip:rect(55px,-50px,50px,50px)} 这4个值分别定义了剪切矩形的上、右、下和左边。每个值都是相对于为元素定义的框边缘而言的偏移量。所以，在这个示例中，剪切区域的上部低于元素框55像素，右边缘距离框的右边为50像素，下边是框下部以上50像素，左边缘则距离框的左边为50像素。 需要注意的是，clip属性需要定位决对位置和相对位置。如示例： <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>旅游网站建设clip测试</title> <style type=”text/css”> #abc{ background-color: #F00; height: 100px; width: 100px; position: relative; } img{ position: absolute; clip:rect(21px 68px 51px 38px); } </style> </head> <body> <div id=”abc”> <img src=”images/旅游网站建设.jpg” … 继续阅读
clear属性
在旅游网站建设中我们经常用到float:left;这样的浮动代码，使用后文本可以围绕着浮动元素排列，如围绕着具有align=left或align=right属性的图像和表格。或者任何float属性被设置为除none以外的任何值的HTML/XHTML元素来排列。 它和<br>标签的属性一样，clear属性告诉浏览器把标签的内容放置在与“浮动”元素相邻的位置，还是放在下面的第一行。同样在旅游网站建设时使用clear，那么文字就不会围绕着浮动元素排列，而是跳到图片的下面一行显示。 clear属性的值可以是none、left、right和both。默认值none表示浏览器正常操作，把标签的内容放置在与浮动元素任何一侧相邻的位置，前提是有足够的空间来这么做。left值防止元素放置在与浮动元素左侧相邻的位置；right防止把元素放置在与浮动元素右侧相邻的位置；而both则禁止标签内容与任何浮动元素相邻。 比如在旅游网站建设中用了float:left;左浮动，如果想清除他的话就用clear:left;，清除右浮动就是:clear:right; ，左浮动右浮动都想清除的话就用clear:both;这种样式的效果与用<br>标签的clear属性处理过的标签效果一样。
border边框的缩略属性
由于指定一个复杂的边框可能是很繁琐的事，因此CSS2标准提供5种缩略属性，在border-width属性这节里我们也详细的介绍了border边框的缩格属性写法。 这节我们在具体讲解他的另一种写法。border可以接受一个或所有边框的宽度、颜色和样式值中的一个或所有值。bordertop、border-bottom、border-left和border-right属性只影响对应的边框侧面；而border属性同时控制边框的四个侧面。例如： border-top: thick solid blue border-left: 1ex inset border-bottom: blue dashed border: red double 2px 第一个属性设置上边框为一条粗实的蓝线。第二个属性设置左边框为嵌入效果，其深度为元素字体的x-height，颜色与元素颜色一样。第三个属性设置下边框为蓝色短横线，用默认的中等宽度。最后，第四个属性使得边框的四侧为红色双直线，宽度是2个像素。 最后一个属性引出了两个问题。首先，不能为border属性提供多个值来有选择地影响特定边框，而使用单独的border-color、border-width和border-style属性可以实现。border属性总是影响围绕元素的所有四个边框。 第二，创建一个只有2个像素宽的双线边框是不可能的。在那种情况下，浏览器可以自由调整宽度来合理地安排边框。 我们通常想到块元素，如图像、表格和文本流周围的边框，同样边框也可以应用到内联标签上。这就允许在文本流内的一个词或短语周围放置一个框。横跨多行的内联标签的边框显示没有定义，其效果取决于浏览器。 Netscape和Internet Explorer都支持border属性，但只有Internet Explorer支持单侧属性。
border-style属性
根据CSS2模型，可以为HTML元素边框应用很多修饰。border-style属性值包括none(默认)，dotted、dashed、solid、double、groove，ridge，inset和outset。能识别边框样式的浏览器可以把1-4个属性值应用到每个边框上，其顺序与多个边框、边界和补白属性值的效果顺序描述的边框颜色和宽度一样。 浏览器在标签背景上绘制直线来表示dotted、dashed、solid和double边框。groove、ridge、inset和outset值则能创建三维边框：groove是一条四进线，ridge是一条凸出线，inset边框可使整个标签区域陷入文档中，而outset边框则使整个标签区域凸出于文档。标签背景图像的最后四个样式，就是三维特性的效果没有定义，其效果取决于浏览器。Netscape支持三维效果。
border-width属性
border-width属性允许改变边框的宽度。和border-color属性一样，它接受1-4个值，按类似的方式(多个边框、边界和补白属性值的效果顺序)分别应用到不同的边框上。 如旅游网站建设时4个表都为2像素可以简写成border: 2px;。 border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; 除指定长度值外，还可以将边框宽度指定为以下关键字之一：thin、medium或thick。如果宽度没有特别设定，默认值是medium。一些典型的边框宽度是： border:1px border:thin thick medium border:thick 2mm 第一个示例设置所有四个边框为1个像素。第二个示例设定上边框为thin，左右边框为thick，下边框为medium。最后一个示例设置上下边框为thick，而左右边框是2毫米宽。 如果不想一个属性定义所有四个边框，可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性来定义每个边框的宽度。 需要注意的是在旅游网站建设中如果边框的4个边值不一样。要简写的话是以上、右、下、左的顺序来写。如下列可以简写为：border-width: 2px 3px 4px 5px; border-top-width: 2px; border-right-width: 3px; border-bottom-width: 4px; border-left-width: 5px; 每个属性只能接受一个值，其默认值是medium。Netscape和Internet Explorer都支持这个属性。再如下例，如果当遇到每条边框的属性值都一样时就可以简写为：border: 2px solid #000;。 border-top-width: 2px; … 继续阅读
border和border-color属性
1、border属性 在旅游网站建设中border属性也是最常用的。做任何一个方块域 者一个框，都会用到border属性。元素的边框包括颜色，厚度和样式等元素。可以使用不同的属性来控制元素四面每个边框的这些方面。如果需要，使用简写属性可以很容易地给所有边框定义相同的颜色、厚度和样式。边框属性不能继承，必须为每个有边框的元素都设置这些属性。 需要注意的是此属性不能设置有弧度的的边。如果您想在旅游网站建设中做一个有弧度的边可以使用背景图片来达到你的需求。 2、border-color属性 使用border-color属性可设置边框的颜色。如果没有指定，浏览器会用元素的color属性值来绘制边框。此属性就是用来设置边框的颜色。border-color属性接受1-4种颜色值。属性值的数量决定了它们如何被应用到边框(如下面所示)。如果只包括一个属性值，边框的所有四面都将设置为指定颜色。如：border: #000;这个代码表示边框的四条边都为黑色。传统的写法如： border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; 两个值则设置上下边框为第一个值，左右边框为第二个值。在三个值中，第一个值是上边框，第二个是左右边框，第三个颜色值是下边框。四个值则指定了每一面的颜色，按上、右、下、左边框的顺时针顺序。在旅游网站建设中使用border属性CSS简写同样也可以帮助缩小您CSS的体积。 多个边框、边界和补白属性值的效果顺序值的数目： 1、受影响的边框、边界或补白：所有项都有相同的值值的数目： 2、受影响的边框、边界或补白：第一个值设置上和下；第二个值设置左和右值的数目： 3、受影响的边框、边界或补白：第一个值设置上；第二个设置左和右；第三个值设置下值的数目： 4、受影响的边框、边界或补白：第一个值设置上；第二个设置右；第三个设置下；第四个设置左
CSS框属性格式化模型
框属性 CSS2模型假设HTML和XHTML元素总能装在一个矩形框内。使用框属性定义的属性，可以控制包含文档中的元素的框的大小，外观和位置。 CSS2格式化模型 文档中的每个元素都可以装在一个矩形框内。CSS2制订者将这个框称为“核心内容区”，并且用另外三个框来包围它：补白、边框和边界。下图显示了这些框，还定义了一些有用的术语。 上、下、左外和右外边缘界定了一个元素的内容区和其所有补白、边框和边界区域。内上、内下、左内和右内边缘定义了核心内容区的范围。围绕元素的额外空间是内外边缘之间的区域，包括补白、边框和边界。浏览器可能省略每个元素中任何或所有这些额外空间，而且对很多浏览器来说，内外边缘也是可以被省略的。 当元素垂直相邻的时候，上面元素的下边界和下面元素的上边界是重叠的，因此这些元素之间的总间隔是相邻边界中较大的部分。例如，如果一个段落的下边界是1英寸，而下一个段落的上边界是0.5英寸，两个边界中较大的那个1英寸就将是两个段落之间的边界区域。这种应用称为边界重叠(margin collapsing)，这通常能得到较好的文档显示效果。 水平相邻元素没有重叠的边界。CSS2标准把相邻水平边界加在一起。例如，如果一个段落的左边界是1英寸，与之相邻的一幅画的右边界是0.5英寸，那么两者之间总的间隔是1.5英寸。这个规则也适用于嵌套元素，因此一个部分中一个段落的左边界与这个部分的左边界和这个段落的左边界之和相等。 如上图所示，元素的总宽度等于7项之和：左右边界、左右边框、左右补白和元素内容本身。这7项之和必须等于元素的宽度。在这7项中，只有3项(元素宽度和它的左右边界)可以设定为auto值，表示浏览器可以为那个属性确定一个值。当确实需要时，浏览器将遵循以下规则： 如果这些属性没有设为auto，而且总宽度小于父元素宽度，那么margin-right属性将被设置为auto值，它可以变得足够大，以使总宽度等于父元素的宽度。如果恰好有一个属性被设置为auto，那个属性将变得足够大，以使总宽度等于父元素的宽度。 如果width、margin-left和margin-right都被设置为auto，CSS2兼容浏览器将把margin-left和margin-right设置为0，而设置得width足够大，以使总宽度等于父元素的宽度。 如果左右边界都设置为auto，它们总是会被设置为相同的值，以使这个元素在其父元素中是居中的。对浮动元素则有一些特殊规则。浮动元素(如指定为align=left的图像)的边界不会与包含元素的边界重叠，除非浮动元素有负值边界。看下HTML的这一功能是如何实现的： <body> <p> <img align=left src=”pics/img.gif”> Some sample text… </body> 浏览器会尽可能地把图像及其边界向段落的左上方移动，但并不与段落或文档正文的左边界或上边界重叠。段落和正文的左边界加在一起，而它们的上边界重叠了。