網頁設計標記下劃線長短_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屬性來設計，使用起來更靈活。