讓網頁的小區塊套用特定的CSS規則

由於在課堂上或課後有多位同學對於在網頁中的小區段(像是名稱、關鍵字之類的)要如何套用CSS感到相當困惑,我補充一些說明,希望能對同學有一些幫助!

首先,我們怎麼樣用HTML+CSS來實現這樣的效果呢?假設我們現在有一段文字:
這門課是C++
我們要在網頁中呈現這段文字,通常會用<p>或<h1>~<h6>標籤來讓他成為會斷行的段落或標題:(後續的程式碼都請各位開一個.html檔案實際測試看看)
<h2>這門課是C++ </h2>
那若要能讓”C++”這幾個字單獨產生變化,例如要讓它變藍色,我們要怎麼做呢?
作業說明中有提到可用<span>標籤,其實<span>標籤跟<em>很像,但<em>會讓包起來的文字變斜體,但<span>不會,那這樣<span>的功能到底是什麼?
各位可以把<span>想成是沒有任何效果的<em>,但我們可以自行用style或class屬性,讓<span>包起來的文字產生我們要的變化!(更多資訊可參考:http://www.wibibi.com/info.php?tid=113)
所以剛剛的需求:”C++”要變藍色,我們就可以這樣做到:
<h2>這門課是 <span style = “color: blue”> C++ </span></h2>
上面是用CSS的inline寫法,把規則直接寫在標籤的style屬性中,而另一種寫法,就是運用類別選擇器(class selector),把規則定義在<head>區塊的<style>子區塊中(所謂的embedded寫法)!
code-1
不管哪種寫法,都做到了讓網頁的小區塊套用特定CSS規則的效果!

接下來我們要就開始把JavaScript結合進來。我們上課有提到,document.writeln()可以想成JavaScript在背後動態產生html,然後瀏覽器讀取了動態產生的html後,再顯示成我們一般看到的網頁樣子。所以我們上面的範例,若改用JavaScript寫就會變成:
code-2
範例中,<span class = “blue”>要改成<span class = ‘blue’>,是因為這段文字已經是在字串內,所以我們改用單引號才可讓整個字串還是可以成立!
這部分也可用跳脫字元\”:<span class = \”blue\”>,但比較不好閱讀,所以一般建議就直接把雙引號改單引號,既可讓字串不會出錯,又可維持code的美觀。
接下來,我們要引入變數了,如果”C++”是變數course的值,上面的程式又會變成怎樣呢?
首先,會有一個變數宣告:var course = “C++”;
接著,我們把writeln的字串參數切開,把會變化的部分改串接變數,code就會變成: (Source code: https://codeshare.io/aVm865, expired after 15 days)
code-3
程式碼中,大家要記得把span標籤和class屬性都留在字串中,這樣才有辦法透過writeln產生我們想要的html片段。
大家可以把自己想像成瀏覽器中的JavaScript直譯器,writeln的參數其實是三個字串的串接:
(1) “<h2>這門課是 <span class = ‘blue’>”, (2) course的值, (3) “</span></h2>”
而目前course的值就是”C++”,所以就是底下三個字串的串接:
(1) “<h2>這門課是 <span class = ‘blue’>”, (2) “C++”, (3) “</span></h2>”
串接完的完整字串即是:
“<h2>這門課是 <span class = ‘blue’> C++</span></h2>”
而呼叫document的writeln()方法就會把這段html code生成出來,再交由瀏覽器顯示!
希望透過此篇教學能讓各位很順利完成作業三!