数码资讯
CSS的使用，还有自定义链接下划线
文本链接：CSS设计：自定义下划线 由一份杂志和作者的名单翻译。 注：文章的内容由译者（CSS 2中文手册）补充，以便于读者对相关内容的理解。 虽然网页设计师通常有很多方法来控制文档的呈现方式，但是基本的CSS不能为链接下的下划线样式提供很多选择。 自定义下划线被提供给一些合适的站点以获得新的创作机
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
文本链接：CSS设计：自定义下划线
由一份杂志和作者的名单翻译。
注：文章的内容由译者（CSS 2中文手册）补充，以便于读者对相关内容的理解。
虽然网页设计师通常有很多方法来控制文档的呈现方式，但是基本的CSS不能为链接下的下划线样式提供很多选择。
自定义下划线被提供给一些合适的站点以获得新的创作机会。自定义下划线也可以用来为同一页面中不同的链接提供额外的视觉提示。
开始
你应该先为你的下划线创建一个图表。图将横向重复，如果你想充分显示背景，你需要创建一个透明的GIF文件。
如果你的下划线图形高了几个像素，你应该增加文本的行高度（行间距），以增加行的底部和下一行的顶部之间的间距。
{线高度：1.5；}
，
{补充}
Grammar：
行高：正常长度的|
价值：
正常：默认值。默认行高。
长度：百分比数字|由浮点数和标识符组成的长度单位，允许负价值。价值百分比是基于字体的高度。请参阅长度单位
解释uff1a
对象的高度被检索或设置，即字体底部和字体顶部之间的距离。
线条高度是字体的末端和字体的内高之间的距离，可以使用负行高来达到阴影效果。
如果格式化行包含多个对象，则将应用最大高度。在这种情况下，此属性不能为负。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性lineheight。
，
在创建链接的自定义下划线之前，我们需要删除已经存在的下划线：
{文字装饰：无；}
，
{补充}
Grammar：
文字装饰：没有强调划线| |眨眼| | | | | |线通过
价值：
没有：默认值。没有装饰。
闪烁：闪烁
下划线：下划线
线路通过：通过线路
线：顶线
解释uff1a
检索或设置对象中文本的装饰。
一个链接的功能，和你，和INS的对象的默认值是下划线。
对象罢工，S，del，默认值是行通过。
如果没有一个值的属性声明结束，之前的所有其他值将被清除。例如，它宣称文字装饰：强调强调眨眼不等于申报文本装饰：无。
此属性不如果对象没有文字工作（如一个img元素）或空元素（如：）。
如果将体对象的值设置为非，则对象将仍然保持其原来的下划线样式。除非您声明对象的此属性的值。
此属性指定的块对象将影响所有的内联对象。一旦这种效应出现，块对象容器最终会影响。
在IE4 +可用的值线和眨眼。虽然提供了闪烁值，它不工作。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性textdecoration。
，
要创建自定义下划线，我们设置链接元素的背景图像：
{背景图片：URL（下划线）；}
，
{补充}
Grammar：
背景：没有网址（URL）|
价值：
无：默认值。没有背景图。
URL（URL）：使用绝对地址或相对URL地址指定背景图像。
解释uff1a
设置或检索对象的背景图像。
当背景图像和背景色（背景色）同时设置时，背景图像将被叠加在背景色上。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性背景。
，
我们希望图像在文本底部的水平方向上重复，而不是在垂直方向上，否则将在链接文本本身后面显示：
一个{背景重复：repeat-x；}
，
{补充}
Grammar：
背景重复：重复不重复repeat-x垂直重复| | |
价值：
重复：默认值。背景图像是垂直和水平铺设的。
不重复：背景图像未铺好
repeat-x：背景图像仅铺设水平
纵向平铺：背景图像仅铺设垂直
解释uff1a
设置或检索对象的背景图像，以及如何放置它。首先必须指定对象的背景图像（背景图像）。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性backgroundrepeat。
，
无论是字体的大小，以确保我们的图像出现下面的链接文本，我们将使用背景位置（背景位置）属性定位图像的链接元素的底部。一些背景图形，如箭，你可能有一个对图像对齐元件侧偏好。在我们的例子中，我们把背景在右下：
{背景位置：100% 100%；}
，
{补充}
Grammar：
背景位置：长度| |
背景位置：位置| |
价值：
长度：由|浮点数和单元标识组件长度值的百分比。请参阅长度单位
位置：顶部中心左下方的| | | |中心|权
解释uff1a
设置或检索对象的背景图像的位置。首先必须指定背景图像属性。
此属性不受对象的填充设置的影响。
默认值是：0%。0%。背景图片位于内容区域的左上角，对象不包含修补程序（填充）。
如果只有一个指定值，该值将被使用在横坐标，纵坐标将默认为50%。如果指定了两个值，第二值将用于坐标。
如果该值设置为正确的中心，因为权利将覆盖中心值作为横坐标值，背景图片将位于右。
对应的脚本特性backgroundposition。
，
为了创建自定义空间强调的链接文本的文本图形，我们将添加一些填料（填料），这取决于使用的字体大小，加了下划线的图形将改变链接文本相对于基线的精确位置。建议你从底部填充的开始，有下划线的图形，并调整到适合你的需要：
一个{填充底：4px；}
，
{补充}
Grammar：
填充底：长度
价值：
长度由浮点数和设备标识符长度值或百分比的|。百分比是基于父对象的宽度，不允许负值。
解释uff1a
检索或设置对象底部的内部修补程序。TD和TH对象的默认值为1。其他对象的默认值为0。
使用此属性在IE5.5 +支持内联对象。在以前的版本中，如果要使用内联元素的属性，他们必须首先设置高度或宽度的物体属性，或设置位置属性绝对，或设置显示属性块。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性paddingbottom。
，
因为带下划线的图位于链接元素的底部，所以我们需要确保链接不能跨多行。如果允许它们跨越多行，则只有最低行文本显示自定义下划线。我们将使用CSS的空白属性禁止链接文本行。
一个{白空间：nowrap；}
，
{补充}
Grammar：
白色空间：正常前| | nowrap
价值：
正常：默认值。默认的处理方法。文本自动处理该行。如果到达容器边界内容将进入下一行。
预：线和其他空白字符将被保护。这个值需要IE6 +或！DOCTYPE声明的标准兼容模式的支持。如果DOCTYPE声明没有指定标准兼容模式，可以使用此属性，但它不工作。结果是相当正常的。参考前置对象
Nowrap：强制是强制显示所有的文本在同一行到文本或对象的BR遭遇结束。参阅nowrap属性
解释uff1a
在对象中设置或检索空间字符的过程。
空间特征，如行、空格和制表符，在HTML文档中被忽略。当此属性设置为正常或不换行，你可以添加一个命名实体，不改变空间和添加一个Br元素线空间。
此属性影响您使用文档对象模型（DOM）操作的内容，以及它对IE显示内容的影响。
此属性作用于块对象。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性是空白。
，
链接元素的所有CSS属性都可以合并为：
{
文字装饰：无；
背景：URL（下划线。GIF）repeat-x 100% 100%；
座垫：4px；
白色的空间：不换行；
}
如果只想在鼠标滑过链接时自定义下划线的效果，只需将CSS背景属性设置为：悬停伪类，而不是直接设置在链接元素上的样式。
{
文字装饰：无；
座垫：4px；
白色的空间：不换行；
}
答：悬停{
背景：URL（下划线。GIF）repeat-x 100% 100%；
}
样品
由一份杂志和作者的名单翻译。
注：文章的内容由译者（CSS 2中文手册）补充，以便于读者对相关内容的理解。
虽然网页设计师通常有很多方法来控制文档的呈现方式，但是基本的CSS不能为链接下的下划线样式提供很多选择。
自定义下划线被提供给一些合适的站点以获得新的创作机会。自定义下划线也可以用来为同一页面中不同的链接提供额外的视觉提示。
开始
你应该先为你的下划线创建一个图表。图将横向重复，如果你想充分显示背景，你需要创建一个透明的GIF文件。
如果你的下划线图形高了几个像素，你应该增加文本的行高度（行间距），以增加行的底部和下一行的顶部之间的间距。
{线高度：1.5；}
，
{补充}
Grammar：
行高：正常长度的|
价值：
正常：默认值。默认行高。
长度：百分比数字|由浮点数和标识符组成的长度单位，允许负价值。价值百分比是基于字体的高度。请参阅长度单位
解释uff1a
对象的高度被检索或设置，即字体底部和字体顶部之间的距离。
线条高度是字体的末端和字体的内高之间的距离，可以使用负行高来达到阴影效果。
如果格式化行包含多个对象，则将应用最大高度。在这种情况下，此属性不能为负。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性lineheight。
，
在创建链接的自定义下划线之前，我们需要删除已经存在的下划线：
{文字装饰：无；}
，
{补充}
Grammar：
文字装饰：没有强调划线| |眨眼| | | | | |线通过
价值：
没有：默认值。没有装饰。
闪烁：闪烁
下划线：下划线
线路通过：通过线路
线：顶线
解释uff1a
检索或设置对象中文本的装饰。
一个链接的功能，和你，和INS的对象的默认值是下划线。
对象罢工，S，del，默认值是行通过。
如果没有一个值的属性声明结束，之前的所有其他值将被清除。例如，它宣称文字装饰：强调强调眨眼不等于申报文本装饰：无。
此属性不如果对象没有文字工作（如一个img元素）或空元素（如：）。
如果将体对象的值设置为非，则对象将仍然保持其原来的下划线样式。除非您声明对象的此属性的值。
此属性指定的块对象将影响所有的内联对象。一旦这种效应出现，块对象容器最终会影响。
在IE4 +可用的值线和眨眼。虽然提供了闪烁值，它不工作。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性textdecoration。
，
要创建自定义下划线，我们设置链接元素的背景图像：
{背景图片：URL（下划线）；}
，
{补充}
Grammar：
背景：没有网址（URL）|
价值：
无：默认值。没有背景图。
URL（URL）：使用绝对地址或相对URL地址指定背景图像。
解释uff1a
设置或检索对象的背景图像。
当背景图像和背景色（背景色）同时设置时，背景图像将被叠加在背景色上。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性背景。
，
我们希望图像在文本底部的水平方向上重复，而不是在垂直方向上，否则将在链接文本本身后面显示：
一个{背景重复：repeat-x；}
，
{补充}
Grammar：
背景重复：重复不重复repeat-x垂直重复| | |
价值：
重复：默认值。背景图像是垂直和水平铺设的。
不重复：背景图像未铺好
repeat-x：背景图像仅铺设水平
纵向平铺：背景图像仅铺设垂直
解释uff1a
设置或检索对象的背景图像，以及如何放置它。首先必须指定对象的背景图像（背景图像）。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性backgroundrepeat。
，
无论是字体的大小，以确保我们的图像出现下面的链接文本，我们将使用背景位置（背景位置）属性定位图像的链接元素的底部。一些背景图形，如箭，你可能有一个对图像对齐元件侧偏好。在我们的例子中，我们把背景在右下：
{背景位置：100% 100%；}
，
{补充}
Grammar：
背景位置：长度| |
背景位置：位置| |
价值：
长度：由|浮点数和单元标识组件长度值的百分比。请参阅长度单位
位置：顶部中心左下方的| | | |中心|权
解释uff1a
设置或检索对象的背景图像的位置。首先必须指定背景图像属性。
此属性不受对象的填充设置的影响。
默认值是：0%。0%。背景图片位于内容区域的左上角，对象不包含修补程序（填充）。
如果只有一个指定值，该值将被使用在横坐标，纵坐标将默认为50%。如果指定了两个值，第二值将用于坐标。
如果该值设置为正确的中心，因为权利将覆盖中心值作为横坐标值，背景图片将位于右。
对应的脚本特性backgroundposition。
，
为了创建自定义空间强调的链接文本的文本图形，我们将添加一些填料（填料），这取决于使用的字体大小，加了下划线的图形将改变链接文本相对于基线的精确位置。建议你从底部填充的开始，有下划线的图形，并调整到适合你的需要：
一个{填充底：4px；}
，
{补充}
Grammar：
填充底：长度
价值：
长度由浮点数和设备标识符长度值或百分比的|。百分比是基于父对象的宽度，不允许负值。
解释uff1a
检索或设置对象底部的内部修补程序。TD和TH对象的默认值为1。其他对象的默认值为0。
使用此属性在IE5.5 +支持内联对象。在以前的版本中，如果要使用内联元素的属性，他们必须首先设置高度或宽度的物体属性，或设置位置属性绝对，或设置显示属性块。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性paddingbottom。
，
因为带下划线的图位于链接元素的底部，所以我们需要确保链接不能跨多行。如果允许它们跨越多行，则只有最低行文本显示自定义下划线。我们将使用CSS的空白属性禁止链接文本行。
一个{白空间：nowrap；}
，
{补充}
Grammar：
白色空间：正常前| | nowrap
价值：
正常：默认值。默认的处理方法。文本自动处理该行。如果到达容器边界内容将进入下一行。
预：线和其他空白字符将被保护。这个值需要IE6 +或！DOCTYPE声明的标准兼容模式的支持。如果DOCTYPE声明没有指定标准兼容模式，可以使用此属性，但它不工作。结果是相当正常的。参考前置对象
Nowrap：强制是强制显示所有的文本在同一行到文本或对象的BR遭遇结束。参阅nowrap属性
解释uff1a
在对象中设置或检索空间字符的过程。
空间特征，如行、空格和制表符，在HTML文档中被忽略。当此属性设置为正常或不换行，你可以添加一个命名实体，不改变空间和添加一个Br元素线空间。
此属性影响您使用文档对象模型（DOM）操作的内容，以及它对IE显示内容的影响。
此属性作用于块对象。
此属性currentstyle对象是只读的。其他的对象，它是可读写的。
对应的脚本特性是空白。
，
链接元素的所有CSS属性都可以合并为：
{
文字装饰：无；
背景：URL（下划线。GIF）repeat-x 100% 100%；
座垫：4px；
白色的空间：不换行；
}
如果只想在鼠标滑过链接时自定义下划线的效果，只需将CSS背景属性设置为：悬停伪类，而不是直接设置在链接元素上的样式。
{
文字装饰：无；
座垫：4px；
白色的空间：不换行；
}
答：悬停{
背景：URL（下划线。GIF）repeat-x 100% 100%；
}
样品
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。