我有一个案例,我必须编写内联CSS代码,我想在锚点上应用悬停样式.
如何a:hover在HTML样式属性中使用内联CSS？
例如,您无法在HTML电子邮件中可靠地使用CSS类.
我在电子邮件中使用了CSS并将其发送出去.
当我在Gmail中收到电子邮件时,所有CSS都被禁用; 但是,当我在thunderbird或outlook中检索电子邮件时,一切正常.
我该如何解决这个问题？
我很想知道,将类名称分配给<img>html文件中的标记而不是直接写入css文件更好吗？
<div class="column">
<img class="custom-style" alt="" />
<img class="custom-style" alt="" />
<img class="custom-style" alt="" />
</div>
代替
.column img{/*styling for image here*/}
我需要知道这些在网络性能方面有什么不同吗？
更新:
对不起,假设问题是<img>里面有多个标签.column div,所有图像都使用相同的样式.
我将使用javascript来创建一个函数来同时更改背景颜色以及文本 - 基于文本输入的值.我已经改变了背景颜色,但无法设法使文本正常工作.
function changeBackground() {
// The working function for changing background color.
document.bgColor = document.getElementById("color").value;
// The code I'd like to use for changing the text simultaneously - however it does not work.
document.getElementById("coltext").style.color = document.getElementById("color").value;
}
查看上面的代码,document.getElementById("coltext").style.color = x当我输入实际颜色而不是"颜色"值时,文本的代码会起作用.
这是我所指的html(我知道它可怕的优化,但它正在进行中):
<form id="TheForm" style="margin-left:396px;">
<input id="color" type="text" onchange="changeBackground();" />
<br/><input id="submitColor" value="Submit" type="button" onclick="changeBackground();" style="margin-left:48px; margin-top:5px;" />
</form>
<span id="coltext">This text should have the same color as you put in the text box</span>
显然,不幸的是,我不能以这种方式使用代码.但无论如何我都努力尝试,除此之外,我达到了一种无限的复杂性.它应该是解决这个问题的一种简单方法,对吧？
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-md-4">
<i class="fa fa-book fa-3x text-center" aria-hidden="true"></i>
<p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
</div>
<div class="col-md-4">
<i class="fa fa-book fa-3x" aria-hidden="true"></i>
<p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
</div>
<div class="col-md-4">
<i class="fa fa-book fa-3x" aria-hidden="true"></i>
<p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
</div>
</div><!--end row-->
</div><!--end container-->
</section>这是我的代码.我打算将字体真棒图标集中在各自列的中心,但我无法做到.
我是Bootstrap的新手 - 对不起,如果之前已经问过这个问题; 我搜索过它,只能找到类似的问题并没有真正帮助我 - 而且我已经阅读了很多内容,我们应该尽量避免编辑原始的bootstrap.css.
但是,我们不可避免地会尝试做一些引导不直接支持(或者需要扩展)的东西,我们需要包含我们自己的代码.例如,我正在网站上工作,我改变了h1风格的一些设置:
<h1 style="font-family:Lobster; font-size:72pt; color: #FF8300; margin-left:0px">Text here</h1>
所以我使用了一些内联样式.但有时候并不总是最好的.我想将我网站中的所有链接更改为颜色:#FFF;.我必须将每个单独更改为:
<li><a style="color:#FFF" href="#">Hours</a></li>
<li><a style="color:#FFF" href="#">Menu</a></li>
<li><a style="color:#FFF" href="#">Story</a></li>
<li><a style="color:#FFF" href="#">Contact</a></li>
我知道如果我把它包括起来,我可能已经对所有链接进行了更改,但是我不确定什么被认为是"正确"或"最好"的做事方式而且我不想去关于养成坏习惯.
对此的任何帮助都会很棒.谢谢!