越秀移动网站建设,合肥seo整站优化网站,备案的网站建设书是什么,平板室内装修设计软件我在这里有此代码#xff1a;echo$username;首先#xff0c;如您所见#xff0c;它带有下划线()。 其次#xff0c;所有文字均为红色。 那么#xff0c;是否有将文本($ username)留为红色而下划线为黑的情况#xff1f;因此#xff0c;标签。HTML4不推荐使用…我在这里有此代码echo$username;首先如您所见它带有下划线()。 其次所有文字均为红色。 那么是否有将文本($ username)留为红色而下划线为黑的情况因此标签。HTML4不推荐使用现在有一个新的css3属性text-decoration-color因此您现在可以使用一种颜色的文本和带有文本装饰的下划线-使用另一种颜色...而无需额外的换行元素p {text-decoration: underline;-webkit-text-decoration-color: red; /* safari still uses vendor prefix */text-decoration-color: red;}black text with red underline in one element - no wrapper elements here!码笔注意1)目前浏览器支持仅限于Firefox和Chrome(自V57起已完全受支持)和Safari2)您还可以使用如下所示的text-decoration速记属性 || || ...因此使用text-decoration速记-上面的示例将简单地是p {text-decoration: underline red;}p {text-decoration: underline red;}black text with red underline in one element - no wrapper elements here!这很酷但是除了缺少支持之外-还有一点更多的控制权-您可以使用border-bottom-bottom来获得更多控制但是-长时间使用inline-block肯定会破坏魔力...所以这将是最好的解决方案。它的2016年仍然缺乏Chrome的支持。叹。两年后此属性实际上仍不支持浏览器。请请参阅下面概述的有关单行下划线的方法。JasonS-Chrome现在完全支持此:)作者更新由于大多数现代浏览器现在都支持text-decoration-color因此该答案已过时。pseudo em为了准确地复制本机text-decoration:underline的大小笔划宽度和位置而不引入额外的HTML标记您应该使用pseudo-element和em单位。这允许在没有附加标记的情况下元素的精确缩放和本机行为。的CSSa {text-decoration: none;display: inline-table;}a:after {content:;border-bottom: 0.1em solid #f00;display: table-caption;caption-side: bottom;position: relative;margin-top:-0.15em;}通过在伪元素上使用displaytable-caption和caption-side并显示inline-table我们可以强制浏览器准确地垂直对齐线和链接即使缩放时也是如此。在这种情况下我们使用inline-table而不是inline-block来强制伪显示而无需指定高度或负值。例子JSFIDDLEhttps//jsfiddle.net/pohuski/8yfpjuod/8/CODEPENhttp//codepen.io/pohuski/pen/vEzxPj | (例如缩放比例)已成功测试Internet Explorer8、9、10、11Firefox41、40、39、38、37、36铬45、44、43、42Safari8、7、6.2移动Safari9.0、8.0Android浏览器4.4、2.3海豚行动电话8、11.41用于伪元素它提供了纯CSS方法可以很好地控制下划线的属性很棒的解决方案但我只能让它在Chrome中看起来不错是否也可以在其他浏览器中使用它在Firefox中完全损坏。RichardB我已经更新了答案以使用caption-side属性该属性应说明那些浏览器的怪癖。我更新了小提琴和Codepen链接。多行文本/链接的行为与文本装饰不同。最好再使用一个元素/跨度。这不适用于包裹在多行上的元素或者如果您有1行元素可以按比例缩小并包裹在移动设备上。如果您在测试中添加了足够的内容它们将中断。除了已经说过的内容外这还会用下划线字母(例如g。实际上如果使用span元素而不是font则是可能的u { color: black; }.red { color: red }$username参见jsfiddle。似乎可以在ChromeSafariFirefoxIEOpera上运行(已在Win 7上进行了最新版本的测试)。问题中的代码也应该起作用但是由于某种原因在WebKit浏览器(ChromeSafari)上不起作用。根据CSS规范文本修饰所需的颜色必须从设置了文本装饰的元素的颜色属性值中得出。即使后代元素的颜色值不同装饰的颜色也必须保持相同。当今读者注意事项不建议使用但您也可以使用其他元素(例如div或span)和CSS来实现相同的样式。HTML 4中不推荐使用但是HTML 5为它提供了普通元素的状态(HTML 5不使用不赞成一词而是使用了过时)。 HTML 5以一种怪异的方式重新定义了的含义但这是另一回事。关于此问题中唯一重要的是它(默认情况下)导致其内容显示为下划线。 w3.org/TR/html/textlevel-semantics.html#elementdef-u不能。您最好的办法是使用具有不同颜色的border-bottom但这并不是真正的重点。实际上这似乎可以正常工作... stackoverflow.com/questions/12804419/这是错误的请参阅下面有关text-decoration-color的评论。CSS 3支持这一点。查看浏览器。 caniuse.com/#feat文本装饰解决这个问题的最简单方法是使用CSS.redUnderline {color: #ff0000;border-bottom: 1px solid #000000;}$username另外对于实际的下划线如果您的项目是链接则可以这样做a.blackUnderline {color: #000000;text-decoration: underline;}.red {color: #ff0000;}$username您还可以使用box-shadow属性模拟下划线。这是一个小提琴。想法是使用两个分层的框阴影将线放置在与下划线相同的位置。a.underline {text-decoration: none;box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(255, 0, 0, 1);}danield描述的另一种方式是内联显示子容器宽度以及所需的手印颜色。父元素的宽度为文本修饰的宽度以及所需的下划线颜色。像这样div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}div span{color:#000;display:inline}Hover me, i can have many lines1这是Jukka在回答中描述的现代版本(已弃用)。伪元素效果最好。a, a:hover {position: relative;text-decoration: none;}a:after {content: ;display: block;position: absolute;height: 0;top:90%;left: 0;right: 0;border-bottom: solid 1px red;}参见jsfiddle。您不需要任何额外的元素可以将其放置在离文本尽可能近的位置(根据我的喜好border-bottom有点远)如果链接结束则不会显示任何其他颜色可以使用其他颜色的背景(例如使用box-shadow技巧)并且可以在所有浏览器中使用(text-decoration-color到目前为止仅支持Firefox)。可能的缺点链接不能处于positionstatic但这在大多数时候可能不是问题。只需将其设置为相对一切都很好。我认为最简单的方法是在CSS中使用text-decoration-color: red;这将更改下划线的颜色而不会更改文本的颜色。祝好运在这里我们可以在文本中用颜色创建下划线The color of the lines should now be red!要么线条的颜色现在应该是红色The color of the lines should now be red!您可以用包装并使用此小JQuery插件为下划线着色。您可以通过将参数传递给插件来修改颜色。(function ($) {$.fn.useful function (params) {var aCSS {color : #d43,text-decoration : underline};$.extend(aCSS, params);this.wrap();var element this.closest(a);element.css(aCSS);return element;};})(jQuery);然后您通过编写以下代码进行调用$(span.name).useful({color:red});$(function () {var spanCSS {color : #000,text-decoration: none};$.fn.useful function (params) {var aCSS {color : #d43,text-decoration : underline};$.extend(aCSS, params);this.wrap();this.closest(a).css(aCSS);};// Use example:$(span.name).css(spanCSS).useful({color:red});});Bob-BaliDude-Los AngelesGérard-Paris您可以使用此CSS模拟下划线text-decoration: none;border-bottom: 1px solid #000;我遇到的最好的方式是这样的HTML5Initial Colors Different ColorsCSS3p {color: #000000;text-decoration-line: underline;text-decoration-color: #a11015;}p #new-color{color: #a11015;text-decoration-line: underline;text-decoration-color: #000000;}border-bottom的问题是文本和行之间的额外距离。 text-decoration-color的问题是缺少浏览器支持。因此我的解决方案是使用带有线条的背景图像。这支持线条的任何标记颜色和样式。 top(在我的示例中为12px)取决于文本的line-height。u {text-decoration: none;background: transparent url(blackline.png) repeat-x 0px 12px;}
