网页设计标记下划线长短_css样式怎样控制下划线长度

1、html超链接的下划线的长度能否设置，如何设置，请高手指教！

这个肯定没置的，只能设置下划线的风格，实在想设置可以变通一下，用背景图片做

2、html字体大小、颜色、粗体、下划线代码（局部）

方法和详细的操作步骤如下：

1、第一步，如果要修改下划线的颜色，大小和其他样式，内可以通过border属性设计，使用起来容更灵活，见下图，转到下面的步骤。

2、第二步，执行完上面的操作之后， border-bottom属性用于设置底部边框样式，见下图，转到下面的步骤。

3、第三步，执行完上面的操作之后，border-bottom: #FF0000 2px solid ；将边框大小设置为2PX红色边框，见下图，转到下面的步骤。

4、第四步，执行完上面的操作之后，观察到相同的效果，发现下划线是整个屏幕的宽度，因此接下来将更改宽度，见下图，转到下面的步骤。

5、第五步，执行完上面的操作之后，宽度设置为180px，可以根据实际情况进行调整，见下图，转到下面的步骤。

6、第六步，执行完上面的操作之后，将显示下划线效果，见下图。这样，就解决了这个问题了。

3、css里怎样让线段根据文字长度变幻

利用下划线实现

巧用CSS定义下划线样式
CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段。但是，或许你可能注意到了，对于下划线，CSS提供的可选操作却不是很多。一般情况下，人们看到的下划线基本上都是横直线，缺少生气和灵动。不过，路并不是死的，通过一些绝妙的改造，我们还是可以做出富有创意的下划线来使页面更为美观。

这是一个自定义下划线的例子：自定义的下划线。是不是很酷呢？除了能
让你的网页呈现出一个与众不同的风格之外，它还能对于文档中不同的文字类型给与不同的视觉外观，起到提醒或者着重的作用。

下面我们就来一起学习如何自定义与众不同的下划线。

首先，我们得先准备一幅作为下划线的图片。你可以利用先成的，也可以自己动手绘制。需要提醒注意的是，你所准备的图片应该适合水平方向上的重复，最好还能使透明的GIF格式，这样能够确保背景不被遮挡。

另外，如果你所准备的下划线图片在高度（粗细）上占用比较多的像素，那么，应当增加该行文本和下行文本之间的行距（line-height）空间，可以这么设定：

　p { line-height: 1.5; }

接下来要做的事情是取消原来默认的下划线，这样我们才能把自定义的下划线应用到指定文本，使用如下的CSS设定（它的含义是让超链接文字没有任何修饰）：

a { text-decoration: none; }

好了，现在可以来创建自定义的下划线了，这里，我们用准备的图片设定为超链接元素的背景图片，如下：

a { background-image: url(underline.gif); }

当然，文字的长度未必和原图的长度相等，这就需要考虑图片重复的问题，也就是说，应当把重复限定在水平方向的X轴上，可以如下设定：

a { background-repeat: repeat-x; }

还有个必须考虑的问题，就是字的大小改变怎么办？要让下划线的图片始终显示在超链接文字的下方，而不必理会文字大小的话，我们应当使用CSS中的背景位置（background-position）属性来定位图片位于超链接元素色底部。而对于如箭头这样的下划线图片，还得考虑超链接的文本边缘和图片边对齐。下面的这个例子将下划线背景图片的位置限定在右下角：

a { background-position: 100% 100%; }

如何控制自定义的下划线图片和文字之间的空白呢？这个可以通过增加填充（padding）来做到。下划线图片相对于超链接文本基线（baseline）的确切位置以来与所用的字的大小。建议你一开始将底部填充（bottom-padding）的大小设定同下划线图片的高度相等，然后再慢慢调整到合适位置（下面这个CSS设定超链接的底部填充为4像素）：

　a { padding-bottom: 4px; }

因为下划线的图片被定位在超链接元素的底部，所以需要确保所用的超链接文本没有跨行，否则，只有处在最下面的超链接文本会出现自定义的下划线了。怎么解决呢，那就是阻止超链接文本跨行产生，可以通过CSS的white-space属性来完成：

　a { white-space: nowrap; }

好了，把上面提到的这些超链接标记的CSS设定合并起来，结果如下：

a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}

还记得有些超链接文本没有下划线，但是当鼠标移到它的上面的时候，下划线就浮现出来的情况么？自定义的下划线也可以做到这个效果，那就在:hover上设定超链接背景，而不是在超链接标记a上设定，如下：

a {text-decoration: none;padding-bottom: 4px;white-space: nowrap;}
a:hover {background: url(underline.gif) repeat-x 100% 100%;}

怎么样，是不是很简单呢？在来看看一些例子和它们对应的CSS设定：

静态下划线

　a#example3a {
text-decoration: none;
background: url(’/pic/20069/200696144110234.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 2px
}

浮动效果下划线

a#example3b {text-decoration: none;white-space: nowrap;padding-bottom: 2px;}
a#example3b:hover {background: url(’/pic/20069/200696144110234.gif’) repeat-x 100% 100%;}

静态下划线

a#example4a {
text-decoration: none;
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px
}

浮动花朵效果下划线

a#example4b {text-decoration: none;white-space: nowrap;padding-bottom: 10px;}
a#example4b:hover {background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%;}

静态箭头下划线

a#example1a {
text-decoration: none;
background: url(’/pic/20069/200696144112997.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 5px
}

浮动动画箭头下划线（这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到）

a#example2b {text-decoration: none;white-space: nowrap;padding-bottom: 5px;}
a#example2b:hover {background: url(’/pic/20069/200696144113188.gif’) repeat-x 100% 100%;}

实现链接的虚线下划线效果

a {color:#3399FF;font-weight:Normal;text-decoration:none;}
a:hover {color:#4499EE;text-decoration:none;border-bottom: 1px #0099CC dotted}

a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。

4、网页制作基础中下划线怎么调粗细

CSS中underline下划线标签没法调粗细
text-decoration:underline;
一般用下边框来实现
border-bottom:10px solid black; // 10像素粗细实线黑色

5、css样式中怎样控制下划线的粗细?

1、如果想修改一来下下划线的颜源色，大小等样式就可以通过border属性来设计，使用起来更灵活。