2013-02-06 18 views
5

我目前停留在一個可能很瑣碎的問題:HTML + CSS:一類/ ID添加到簡單的文本

我有一個簡單的HTML/CSS網頁與文本:

<head></head> 
<body> 
    This is a Text about Foobar. 
</body> 

如何在不破壞格式的情況下爲單詞Text分配CSS-class/id?假設我想將類.yellow添加到它,它顯示帶有黃色背景的文本。

我覺得我有東西擋住了我的腦海導致它不能是困難的......但是,所有我可以谷歌(主要是微不足道的教程)使用CSS只是像<p><b>這將打破我的格式通常的HTML元素。

回答

13

我想你錯過了<span>標籤。 嘗試了這一點:

<head></head> 
<body> 
    This is a <span class="yellow">Text</span> about Foobar. 
</body> 

而且在CSS:

.yellow{ 
color:yellow; 
} 
+0

正是我要去說,跨度是像HTML – Toping

+0

仙的百搭-.-我認爲這將是這樣的。非常感謝! – MOnsDaR

2

使用內聯元素。跨度是爲此目的而構建的。另外,如果您希望您的高亮部分的後面語義,你可以重新風格<em><strong>的東西,如:

strong.highlight{ 
    font-weight:normal; 
    font-style:normal; 
    background:yellow; 
} 
2

你只需要包裝的部分跨度,如:

<span>This is a <span class='yellow'>Text</span> about Foobar.</span> 

看到這裏工作的例子http://jsfiddle.net/dZZfB/

希望幫助

+0

謝謝你的例子 – MOnsDaR

1

例如HTML:

<center><span class="t1">Test1</span></center> 

的CSS:

<style type="text/css"> 
    .t1 { 
     color: white; 
     text-shadow: black 0.1em 0.1em 0.2em; 
    } 
</style>