求一段错误CSS的正确写法
发布网友
发布时间：2022-04-25 13:21
共12个回答
热心网友
时间：2022-04-19 23:11
使用CSS，最容易做的事情就是给我们的标题设置不同的字体样式。我们可以建立一个CSS规则，它将把样式应用到页面中出现的所有< h1>标签（或者是整个站点，当使用一个外部样式表的时候）。随后，如果我们想要改变整个站点上所有出现<h1>标签的地方的颜色、尺 寸、字体的话，我们所有需要做的事情就是修改一些CSS规则，然后它们将立即改变。听上去非常*人，不是吗？
让我们认识一下我们自己的超级酷的标题：
<h1>Super Cool Page Title</h1> 用CSS改变颜色、字体和尺寸：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
} 页面上所有找到<h1>的地方都将应用Arial字体（或者是缺省的sans-serif字体）、24点大小以及兰色，就象图2-2显示的。
?
图2-2： 应用样式后的标题
接着，让我们在文字的下面增加一条1点宽的灰色边框，以增强清晰度（看图2-3）：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}
图2-3：带有灰色下边框的样式化标题
我们在文字的下方增加了一点补白，来让线条附近宽松一点。由于标题是一个块级元素，所以它的边界不仅仅到文字，而是与页面的水平宽度灵活的保持一致。
值得指出的是，这个特别的创建边框的方法是一个由三部分组成的语句：宽度、式样、颜色。试着改变它们的值，看看会产生什么不同的效果。
增加背景
背景可以增强标题的整洁效果。增加一点补白和背景颜色，我们就有了一个不需要图片的，但又很有样子的标题。如下：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
} 我们把文字改成白色，周围加上4个点的补白，再把背景改成绿色。就象图2-4显示的那样，这可以建立一个好看的绿色条来横贯页面，分隔段落。
图2-4： 带有背景色和补白的标题
背景和边框
在标题下面增加一个窄窄的边框，加上淡淡的背景色，你能够创建一种三维的效果，却不需使用图片。
这个CSS和前面的例子很相似，仅仅改变一点颜色和在底部增加一个2点宽的边框。
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
} 试着创建各种不同的同色阴影，产生的立体效果如图2-5显示。
图2-5：带有背景和下部边框的标题
平铺的背景
当背景图片被一起加入后，就变得更富有创造性了。用Photoshop或者你喜欢的图片编辑器，创建一个10*10的图片，图片的顶部有黑色的边框，渐变的灰色一直到底部，象图2-6显示的。
图2-6：A 在Photoshop中创建10×10点大小的图片（被放大了）
我们可以用CSS把这个极小的图片平铺在<h1>的底部：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10×10.gif) repeat-x bottom;
} repeat-x会通知浏览器仅在水平方向平铺（repeat-y 将在垂直方向平铺）。我们再把图片设置在bottom，又增加了额外的padding-bottom，我们可以调节平铺的图片和上面文字之间的距离。（看图2-7）
图2-7： 带有平铺背景的标题
可替换的图标
处理行内的装饰性圆点和图标时，作为代替硬编码的方式，我们可以继续使用CSS的background属性来把图标设置在文字左边。这个方法可以迅速的改变整个站点的look and feel——升级一个CSS文件从而立刻改变整个站点的页面。
代码和前面平铺范例很相似：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
} 这里，我们在左边留出了额外的空间（在那儿我们将显示一个图标），设为no-repeat，是为了让背景图片只显示一次（看图2-8）。我们把它放置在距离首部0点和距离顶部50%的位置上。
图2-8：A： 带有图标的标题
轻松升级
设想这样一个情景来代替前面的例子，我们已经在一个包含100个文档的站点中用<img>标签编码了这些图标。这些图标匹配着整个站点 各个的题目。几个星期后，站点的所有者决定更改这个站点的look and feel。新的图标和老的图标有着不同的规格。天哪！我们将需要回到所有的100个文档里面，去改变每一个<img>标签，来更新它的 image路径。对于一个项目的预算，这额外所需的时间就会推迟原先的期限。时间就是金钱。
把那些非必须的，装饰性的图片保持在CSS文件中，就可以使得更改背景图片只需几分钟，而不再需要几天，整个站点可以立刻得到升级。你应该开始明白把结构层和表现层的标记分离开的力量了吧。
可变换的效果
下面的技巧在某些情况下会很有用。这是我在2003年4月，用标准重构Fast Company magazine（www.fastcompany.com）站点时大量采用的方法。
我们在整个站点的大多数<h3>标题中使用了13*13点的小图标，就象这样：
<h3><img src=”/upimg/allimg/061117/1658237.gif”
width=”13〃 height=”13〃 alt=”*” /> FIRST IMPRESSION</h3> 我们用这种方法编码有两个原因。一个原因是，有各种各样的图标，它取决于标题的主题（读书俱乐部的一本书，引号标记着每天的引用，等等）。第二个原因是，当时，我们每个月都会根据当前发行的杂志封面来更换整个站点的配色方案。这种更换要成为可能，当然要用CSS。
要让这些图标随着页面上其它元素一起变换颜色，并不需要每次都创建新的图标。我们创建一个仅使用两种色彩的图标：白色和透明色（变换的色彩将被透出来）。图2-9显示了这些图标中的一个例子，它们被使用在首页上的每日引言中。
图2-9：A 13×13 点大小的透明图标（放大的）
透过图标中透明的部分，我们再次使用简便的CSS中background属性设置想让它透出来的颜色。另外我们还想让色彩仅仅出现在图标的后面，而不影响到标题的文字，因此我们又用下面的方法将规则仅施加于包含在<h3>内的<img>标签。
h3 img {
background: #696;
} 前面的代码确定了所有包含在<h3>内的<img>标签都有一个绿色的背景。色彩透过图片的透明部分显示出来，而白色的部 分仍然保持白色。每个月，我们都能用一个不同的色彩值来升级CSS规则，从而改变整个站点中的每个标题以及相关联的图标的色彩。这就象变魔术！
对齐<img>标签
为了让图标和文本正确的排齐（我们想让它垂直居中），我们加入了以下CSS规则：
h3 img {
background: #696;
vertical-align: middle;
} 这样保证了包含于<h3>标签中的图片对齐于它的文本中点。图2-10显示了标题的效果。
图2-10： 应用CSS背景的透明图片的效果
这个方法还有另一个值得注意的地方——不但可以用一个单独CSS代码块来指定图片背后要显示出的背景颜色，同样也可以在CSS代码块的内部指定。
举个例子，让我们回到前面“可替换的图标”例子，增加一些背景色彩：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding-left: 30px;
background: #696 url(transparent_icon.gif) no-repeat 0 50%;
} transparent_icon.gif将放置在我们在前面所指定的色彩上面，用的是同样的规则（看图2-11）——这里是#696，一个可爱的绿色。
图2-11：带有背景图片和色彩的标题
这个技巧使得放置一些与页面色彩相关联的小圆角或者装饰性的图片变得特别的方便。这些非必须的图片被完全的包含在CSS文件中，如果将来要升级，那将可以非常容易的改换。
CSS 技术文档
技术文档 No Comments »
css之自动换行Posted by Sbalu on 6月 7th, 2007
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！
对于div
1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
<div id=”wrap”>ddd1111111111111111111111111111111111</div>
效果：可以实现换行
2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div id="wrap">ddd1111111111111111111111111111111111111111</div>
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed；
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：两个td均正常换行
3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
这里单元格宽度一定要用百分比定义
效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）
CSS 技术文档
技术文档 No Comments »
常用CSS缩写语法总结Posted by Sbalu on 6月 7th, 2007
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:”Lucida Grande”,sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);
参考资料
热心网友
时间：2022-04-20 00:29
或者
<div style="border-width:1px;border-style:solid;border-color:red;" >爱</div>
--------------------------
哦， 你是想要带有立体感的效果只不过就要一像素宽度吧
<input type=button value=123 style="border:outset 1px ;">
为什么你错写成style="border:1 solid:" 也会显示这样的效果呢？ 因为border:1这个起作用了将border的宽度设置为了1像素，但是后面的solid:样式有问题，所以浏览器忽略了这个错误并应用input的默认边框样式outset，就成了style="border:outset 1px ;" 的效果
热心网友
时间：2022-04-20 02:04
代码是这样写的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>200分给我把</title>
<style type="text/css"><!--
#a1 { /*定义 一个 ID 为 a1 */
width:27px;/*定义按钮的宽度*/
height:18px;/*定义按钮的高度*/
background-color: #ECE9D8;/*定义按钮的颜色*/
border:solid 1px #716F64;/*定义按钮边框为实线，1像素，灰色。这里是CSS缩写的语法。*/
border-top-color: #FFFFFF;/*定义按钮上边框颜色为白色覆盖之前定义的灰色*/
border-left-color: #FFFFFF;/*定义按钮左边框颜色为白色覆盖之前定义的灰色*/
}
--></style>
</head>
<body>
<button id="a1">123</button>
</body>
</html>
这个按钮 的上边框 和左边框是白色的 右边框和下边框是灰色的。我用CSS简写 先把的边框定义成 1像素实线灰色边框 然后再定义 上 左的边框为白色。
用button 标签 调用 可以按钮效果。
这样就OK了
有问题 给我百度消息。 200分给我把
热心网友
时间：2022-04-20 03:55
border参数：
1、1px 为边框线粗细，以像素单位。
2、solid 为边框线样式，可以为实线，虚线，等等。
3、#3FA600 为边框线颜色。
另外border的四边还可以单独定制样式；分别为：
border-top:1px solid #3FA600; 上边线
border-bottom:1px solid #3FA600; 下边线
border-left:1px solid #3FA600; 左边线
border-right:1px solid #3FA600; 右边线
更多样式表的使用可以下载样式表手册。
http://www.blueidea.com/articleimg/2003/10/1052/css20.rar
热心网友
时间：2022-04-20 06:03
<style>
.btn {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid}
.btn2 {font-size:12px;height:23;background-color:#ece9d8;border-width:1;margin-right: 10px;margin-left: 10px;padding-top: 2;padding-right: 4;padding-bottom: 0;padding-left: 4;}
</style>
<button class=btn2 >网页菜单1</button>
<button class=btn2 >网页菜单2</button>
<button class=btn2 >网页菜单3</button>
<button class=btn2 >网页菜单4</button>
<button class=btn2 >网页菜单5</button>
还有第二种方法就是用<li>标签来实现，需要的话给我发消息吧，现在已经晚上1点了，睡觉...睡觉...
热心网友
时间：2022-04-20 08:28
属性名后面才加冒号如下面的border和color
不同的属性之间用；隔开
<span style="border:1 solid;color:red" >爱</span>
热心网友
时间：2022-04-20 11:09
这样就可以了
热心网友
时间：2022-04-20 14:07
热心网友
时间：2022-04-20 17:22
热心网友
时间：2022-04-20 20:53
热心网友
时间：2022-04-21 00:41
热心网友
时间：2022-04-21 04:46
