[英]Applying different css styles to text
I have a <table>
, with some text in it: 我有一个
<table>
,其中有一些文本:
<table>
<tr>
<td>
<b>Title</b>
<br />
Some description text
</td>
</tr>
</table>
This works great, except now I want to give the title and the description different text colors. 效果很好,只不过现在我想给标题和说明添加不同的文本颜色。 I want to maintain their current spacing though, otherwise I would do this:
我想保持它们当前的间距,否则我会这样做:
<td>
<p class="title">Title</p>
<p class="desc">Some description text</p>
</td>
Using a "< p >" element seems to inject a tall new line, instead of the nicer "< br />" (well at least nicer in my opinion). 使用“ <p>”元素似乎注入了新的一行,而不是更好的“ <br />”(在我看来至少是更好的)。 But if I don't use a "p", I'm not sure how to apply different styles to either piece of text.
但是,如果我不使用“ p”,则不确定如何将不同的样式应用于任一文本。
Thanks 谢谢
Add the following style to your p tags: 将以下样式添加到您的p标签中:
css 的CSS
p {
padding: 0px;
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
html html
<td>
<h1 class="title">Title</h1>
<p class="desc">Some description text</p>
</td>
How about this? 这个怎么样?
td {
color: orange;
}
td b {
color: blue;
}
Using a "< p >" element seems to inject a tall new line, instead of the nicer "< br />" (well at least nicer in my opinion)
使用“ <p>”元素似乎注入了新的一行,而不是更好的“ <br />”(在我看来至少是更好的)
No it isn't nicer in anyones opinion. 不,在任何人看来都不是更好。
Just style the p
how you would like it to be presented, eg: 只需为
p
样式,例如:
p { margin-bottom: 0; }
Also it looks like you not using tables for tabular data, but rather for layout purposes which is bad m'kay. 而且看起来您不是将表格用于表格数据,而是用于布局目的,这很糟糕。
Also even the p
tag wouldn't be semantically correct. 同样,即使
p
标签在语义上也不正确。 Use a heading tag for this. 为此使用标题标签。
Another advantage is that you don't have to use those ugly b
tags. 另一个优点是您不必使用那些丑陋的
b
标签。 Even if you need to use b
features you should use the strong
element. 即使您需要使用
b
功能,也应使用strong
元素。
If you give a unusual attribute, you can anything you want. 如果您赋予不寻常的属性,则可以执行任何操作。
CSS:
tr[unusual="1"] {
background-color: yellow;
}
HTML:
<tr unusual="1">
<td></td>
</tr>
The second code you show is better, because more semantically correct. 您显示的第二个代码更好,因为在语义上更正确。 Even better would be this:
更好的是:
<td>
<h3>Title</h3> <!-- this is a title, so mark it as one -->
<p>Some description text</p> <!-- this is a piece of text, so mark it as one -->
</td>
And use the following CSS: 并使用以下CSS:
h3,p {
margin:0;
}
h3 {
color:red;
}
p {
color:blue;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.