HTML EP.3 Farmland

學習了前面兩個章節,不知道是否你也有對HTML熟悉了點呢?在這個章節中,我們會學到CSS的基礎運用,如何顯示文字顏色,背景顏色,文字的自型、大小、等等…。CSS就有如是HTML專屬外觀裝扮設計師,幫HTML美妝出經驗的色彩,一個網站,少了CSS,是慘不忍睹無法放到網路上去給別人看的,因此,我們才會這麼注重CSS的使用。

第一課 CSS的加入


現在我們知道CSS可以用在HTML上,那麼,CSS要怎麼在HTML上去做運用呢?把CSS放在程式中有兩種方式,這兩種方式是依照你所設計的想法,來規劃,分別為置入式與崁入式,置入式是將CSS套用在單一一個檔案上,怎麼說呢?先看到範例一。

範例一

<style>
//CSS的內容放在這裡
</style>

從外表看上去,置入式的CSS似乎與HTML大致上的相同。我們先來解析一下這段程式碼,<style>標籤,裡面放入的,是「//CSS的內容放在這裡」,這是在CSS中使用的註解,可是,HTML的註解不是「<!–註解–>」嗎?的確,這就證明了,在<style>裡面的內容是CSS,沒辦法放入HTML標籤,如果將標籤放入至此,將會出現錯誤,在下一課,我們會學到,如何使用CSS專屬的程式語法。

第二種CSS的方式,就與<img>連結相似了,只不過在於這種標籤,無法顯示任何物件,只能套用樣式到HTML上面,接下來的範例,會與置入式CSS有所差別。以下範範例二。

範例二

<link rel="stylesheet" type="text/css" href="style.css">

這是一個CSS標籤,從此標籤的外觀來看,絲毫沒有任何CSS的語法存在,從標籤的名稱「Link」就可得知這是一個連結標籤,任何檔案將會被這個標籤的「href」所連結,就如範例中看到的,「href=”style.css”」就指的是,連結到Style.css這個CSS樣式表檔案,另外「type=”text/css”」也就是指連結到的這個檔案,是以文字來讀取(部分text)他是屬於CSS樣式表(部分css)。

那麼,範例二中的Style.css可不是預設生成的,你必須在編輯器中建立一個附檔名為CSS的UTF-8編碼的檔案,在這裡我們稱為CSS樣式表,則簡稱為CSS檔。

第二課 了解與使用概念


終於,剛剛學完了如何將CSS加入HTML來套用上CSS效果後,我們終於要開始介紹CSS的使用方式,先來說明一下編輯的方式。編輯方式分別有剛剛介紹的兩種,<style>與外部連接的CSS外部檔案。先來看範例三的CSS樣式內部是如何運作與使用的。

範例三

h1 {color:blue; font-size:12px; }

先來解析這非常簡潔的範例三CSS語法。在範例三中,已經有事先標示好分類,分別有一般的字體、粗體、斜體,這三中字體在範例中代表著三種不同的CSS部分與運作方式。

部分一、一般字體。唯一可見的一般字體文字,大概只有h1了吧,藉由我們在第一章學到的標題HTML (H1到H6),可看出,這段程式碼,針對的對象大概只有h1了,因此,在CSS中,我們要套入樣式的第一個步驟,就是要先告訴瀏覽器,我們要套用的樣式是誰(或者哪個標籤、Id或Class,之後會學到),接著,我們使用大誇號來將要套用的樣式規則包起來。且別忘了,針對的對象(範例中的部分一)與誇號之間,要空格,瀏覽器才會讀取到接下來的規則,否則會有錯誤。

部分二、粗體。由範例可見,粗體都是在誇號內,則有粗體的文字共有兩段,分別是「color」和「font-size」,將這兩個翻譯成中文,即是顏色與自體的大小,由此可知,這段CSS所要表示的,是要告訴瀏覽器規則的類型、樣式,常見的樣式比如說,字體(Font Family)、高度(height)或寬度(width),這些都是常見的CSS類型樣式,則在樣式的後面,有個冒號,很簡單的就說明了後面規則的變數(詳細說明變數在下一段),就是範例中的斜線部分。

什麼是變數?這種名詞有點難理解,但簡單來說,就是給瀏覽器讀取規則的數量,類型,例如再舉一個範例:

h1 {color:red; }

這個範例的對象也是針對H1,但我們先不要討論這個,這裡主要討論的是變數這種東西,範例中的Color也就是剛剛上一段學到的類型或規則,告訴瀏覽器,我要幫所制定的目標,也就是剛剛制定的H1,加上顏色,但是要如何表示顏色呢,單一告訴瀏覽器我要顏色,瀏覽器也手足無措,無法顯示出你心中的顏色,你沒有告訴它顏色,那麼,我們就需要一個變數來表示我們要加的顏色,例如範例的Red,我要加紅色,瀏覽器終於搞懂了你要加什麼顏色了,因此在網頁上,瀏覽器就會把原本預設的標題顏色,改成你制定的紅色。那麼冒號後面一定只能放文字嗎?不一定,規則後的變數,就是要告訴瀏覽器你的規則的詳細內容,再舉個範例。

h1 {font-size:12px; }

這個範例也是在針對H1,但規則、樣式不同了,這次規則改成字體大小,則變數是12px,也就是詳細內容是要將字體大小(font-size)改成12像素(12px)。由此可知,制定了規則、樣式,需要有個變數去套用回歸則。

第三部分、斜體,也就是剛剛介紹的變數,從剛學到,變數不僅限於文字與數字,而是另一種規則的詳細內容表達方式。

第三課 初步的使用規則


在了解完CSS的運作原理,與如何撰寫CSS類型的規則之後,緊接著,來臨的是初步的CSS應用,在這一課當中,將會初步的去巧思運用這些CSS樣式表,與套用後的結果,簡而言之的,在HTML裡最初階的語法單然是文字語法了,因此我們會在接下來的範例,學習到如何去美化你的文字以及如何正確有效的去運用文字樣式類型。在學文字樣式之前,還有一個非常重要的CSS規則需要知道,這可以讓你的CSS變得更簡潔易懂,以便讓自己往後在修改CSS時變得更加快速,以下範例四。

範例四

p {
    text-align: center;
    color: red;
}

在範例四中針對P標籤為對象的內容規則中,共有兩盒,這與剛剛在範例三所看見的不一樣,的確他多了一行。為了讓CSS更加的「乾淨」,我們以每一個分號後面最為此行段的結尾,因此為每個行段只有一行樣式規則,讓編輯時更加簡潔。若是換成剛剛的範例三的話,也是可以這麼做,就如以下的範例四之一。

另外,在範例四還有個CSS規則從來沒有見過的,淺顯易懂的存外表來看「text-align」的中文即是「文字對齊」,而後面的規則「center」也就是「中心」的意思,因此這個規則代表的是,將P標籤對齊在所在的區域中間。

所在的區域代表的是,如果你用CSS設定一個DIV標籤的寬度為網頁的百分之五十,那麼把P標籤放入此標籤內,P標籤所在於的中間是,是在DIV在範圍裡的中間。

範例四之一

h1 {
     color:blue; 
     font-size:12px; 
}

範例四之一是延續範例三的修改,我們將範例三修改成與範例四相似的分段方法。

第四課 顏色調配


顏色樣式,這是在CSS裡面最基礎要知道的,也是對網頁的配色相當重要的一個規則,在前幾個範例裡面都有提到color的範例,但在之前的範例中,雖然只有介紹到英文的變數,但也不代表他只能使用這些英文顏色名稱來制定樣式。關於顏色(Color)的樣式變數有以下三種使用方法。

範例五

color:英文顏色名稱;

第一種,使用英文名稱。使用英文名稱來制定顏色是個非常偷懶的方法,但同時使用起來也非常方便,根據HTML的開放程式庫中,目前一共有140種顏色名稱可制定,但雖然說是使用因文明稱非常方便,但同時也受到了種種限制,最重要的是你無法自定義你的顏色代碼,例如我們常見的顏色選色器,裡面包含了140種以上的顏色存在,遠遠超越了英文名稱的顏色,同時也沒辦法使用某些不常使用的顏色。但是為了方便統一性,也可建議使用這種方法,詳見140種HTML顏色名稱。以上範例五是第一種的用法。

範例六

color:#808080;

第二種,十六次進位的位元顏色碼(簡稱十六位元)。這個或許是一個可自定性高的顏色碼變數,常用於許多顏色選色器當中,若你想要非常方便且自訂性極高的顏色變數的話,非常建議使用這種方法。使用方法與此用法名稱相同,以數字一到九與英文A到F所組成的顏色代碼,使用十六次進位編成目前裝置都可顯示的顏色。變數一定都是以井號後面加上十六進位顏色。方便記住這種使用方法的規則有以下兩種,分別是用背的,比較不建議。與用推測的方式,推測方式以RGB三種顏色(即是接下來會介紹的RGB顏色法),來編碼出顏色,FF為最亮的顏色,則00為最暗的顏色。其中為RR(紅)GG(綠)和BB(藍色)為編碼公式,數字與0到255的十進位相同,公式為#RRGGBB。(範例裡的#808080是灰色)

範例七

color:rgb(146, 213, 232);

第三種,RGB顏色碼。對於許多學顏色設計學的人,RGB是非常重要的配色概念,同時也代表著電腦螢幕顯示器的顏色顯示方式。在電腦中每顆極微小的螢幕顯示器,每顆顏色都會由紅綠藍所組成,因此例如你的電腦要顯示紅色的畫面,那麼要顯示的燈,都會把其他兩個藍與綠的亮度調到最低,讓我們看起來這些畫面一致性的變成紅色(這應該是常識)。則最初始的許多設計軟體,以這種方式,來做沒顏色顯示的代碼,他們制定了三個顏色的英文簡稱為,R(紅)G(綠)和B(藍色),使用這三種顏色來配色,對許多電腦媒體設計師是非常有益的,如果你是一個Potoshop設計師或Illustrator向量設計師,這種方法對你應應該非常好用,尤其是在使用Potoshop設計網站時,在實體做出來後,可以使用RGB來便從圖片裡的顏色,轉換到CSS中。(範例中的顏色是作者字體條配的淺灰藍色)

另外,現在在CSS3裡面,增加了許多新的功能,這是讓你的網站有所不同的方式,另外也讓網站,更增添了一點科技感,以下範例八。

範例八

rgba(255,0,0,0.8);

範例八也就是剛剛的RGB使用方式,但看似偶點不同之處,在於他多出了另一個數字,而且還是小數點(還有rgb改成了rgba),沒錯,這就是現代比較新的CSS3所含有的內容,也就是RGBA,所謂的RGB在剛剛應該都了解了,但是唯一多出來的A,也就是透明度(alpha),透明度分為1到0。1是完全不透明,而0是完全透明到看不見了,簡而言之,只要是在0.9到0.1的範圍內,都可看見半透明的岩寺,只是依照你的變數不同,所造成的深淺濃度效果。

範例九

hsl(0,100%,30%);

範例九的顏色代碼是HSL,與RGB相似,但按照順序來講,它的功能是,顏色、飽和度與亮度,這次的顏色為什麼只剩下了一個,這看似不合理,其實,他使用了色輪的選擇方法,但只是少了亮度,因此一開始,你只能先選擇鮮豔的顏色,在來使用飽和度與亮度來敢便他的RGB,這是一個比較人性化的使用方法。而色輪色碼的使用方法比較簡單,只需要使用360個顏色就可解決選色問題,0或360為紅色120是綠色和240是藍色,以此類推,再加上使用保弧度與亮度,就可方便逃出你想要的顏色,但與其跟RGB比,這或許比較好用。

範例十

hsla(0,100%,50%,0.3);

又多出了一個CSS規則,這個也是在CSS3裡面新增了一個顏色功能,與剛剛的HSL相似,但又與RGBA一樣,多出了A,簡而言之,也就知道這只是多了飽和度的變數,稱為HSLA,它的功能按照順序來排共有四種,顏色、飽和度、亮度、透明(Hue, saturation, lightness, alpha),詳細的使用方法在剛剛的範例九已經學過了,因此只要會使用飽和度,這個樣式的規則也大致上相同。

範例十一

opacity:0.6;

最後一個調色方法,也就是剛剛所介紹新的功能,透明度(範例中稱為opacity),如果你想將這個功能獨立出來使用也是可以,通常這段程式法,我們會把它使用在文的透明度裡,則使用的情況大多是遇到你想保留文字預設的顏色,財貨選擇使用這獨立出來的飽和度。且這個飽和度不只限至於圖片的顯示,同時也可以使用在圖片的飽和度中。

第五課 圖顏背景


背景分為兩種,圖片背景與顏色背景,這接背景是在網頁中顯示最常見的一種樣式,通常用於BODY或DIV裡面,或者是最近的HTML5裡面的NAV標籤裡,你可以選擇你的背景要使用圖片,或者要顏色,但背景只有單一個顏色就太單調了,你也可以選擇使用漸層背景,也可以同時擁有Apple Design的風格。

範例十二

background-image: rul(圖片位址)

圖片背景,background-image,這個CSS規則與HTML裡面的IMG標籤極為相似,需要一個位址,來去顯示圖片,這是HTML裡面多媒體外連檔案的特徵,但是你只有將一張圖片設為你的背景,當你套用在BODY時,你會發現,圖片非常恐怖的佔滿了網頁,重複不斷出現,像是棋盤格茲班,在X軸與Y軸重複被複製了,這是非常不好的,這張圖片無法有效的被展現在網頁裡,因此我們需要一些規則去制定圖片的擺飾方式,以下範例十三。

另外再補稱一個在CSS3增加的內容這是一個顛覆傳統CSS的功能,你可以加入兩個圖片背景,例如說以下。

background-image: rul(圖層位置較上層的圖片位址), rul(圖層位置較底層的圖片位址);

由此可知,圖片背景可以分為上層與下層,用上層的圖片就越靠近規則開頭處,反之越底層就越靠近結尾。

還有另一個必須要知道的CSS3新功能就是背景圖片大小background-size,看看以下的範例。

background-size: 高度px 寬度px;

在沒有重複背景的情況下,使用這則規則是成立的,你必須在變數內輸入高度與寬度,另外,除了這個大小的變數,還有另外兩個可用的變數。

contain和cover是background-size的另外兩個變數,contain是盡可能的將圖片所小或放大到所在區域的範圍,cover則是盡為所能地把背景所填滿,達到背景固定在整個網頁的大小效果。(在這裡補稱一個教學,詳細點這裡)

範例十三

background-repeat: 重複規則;

當你看到圖片重複的慘況時,要如何解決,這個方式可以有效的幫助你的網站別再出現這種慘況,你可以使用這種規則,或者你不想要讓圖片自己重複的話,你可以試試看這個規則。規則共分為三中,你應該會需要知道X軸與Y軸的圖形原理,就像是數學的第一象限到第四象限一樣,都會有X(左右)與Y(高低),利用這個原理使用,background-repeat,圖片重複規則,來制定你是要重複哪裡,例如,我要重覆在X軸(平行重複)我可以在變數內,輸入repeat-x,反之,垂直重複也就是將X改成Y,那麼不要重複呢,千萬不要以此類推輸入repeat-no,要按照單字與字詞的念法並輸入,no-repeaty在變數內,才會有效。

範例十四

background-position: right top;

另外,如果你的圖片比畫面大,或者比畫面小時,你可以使用position,來將圖片放置到網頁的特定對齊位置,則從範例中可知,變數的規則是由兩個變數左組成,由空格隔開,前者是左中右(Left center right),後者是上中下(top center bottom)。

範例十五

background-attachment: fixed;

這是一個非常恐怖的事情,如果你的網站的高度超越了你的圖片,你就會看到妳的圖片跟BODY裡面的東西一樣,一起跟著往上滑,背景圖片就有如放置在圖層最底層一樣,因此,我們使用這個規則讓圖片一直停留在同一個地方,在你滾動往下時,你只會看見你的BODY裡的內容被滾動,而不是背景。

多於補充一個必要知道的小知識,如果你想避免你的CSS有太多行,你可以將某些規則縮寫在一個規則裡,例如這樣。

background: #ffffff url("img_tree.png") no-repeat right top;

終於講解完所有關於圖片背景的範例了,接下來剩下的背景範例就只剩,關於顏色的背景了,顏色背景就如這一刻剛開始介紹的兩中,一個是漸層背景,另一個是單色背景,尤其是最簡單的單色背景,這種規則與Color方長的相似,先看以下範例。

範例十六

background: 顏色變數;

的確完全跟Color的用法完全相似,只要輸入十六進位、RGB或者HSL就可以將顏色帶入背景之中,但是漸層背景呢?或許就不像這個這麼簡單了,畢竟建成這種東西是在CSS3推出的時候加入的,支援的瀏覽器也必須要較新的版本(大概是要在2015年以後推出的瀏覽器才會支援),他的難易度也有可能突然的劇增,但同時他的可自訂性也就大幅上升了。

在下一章節,我們會學到關於CSS3的新功能與其他更進階的CSS運用,則在下一張之後,我們可能會考慮運用模板來修改與了解其中原理。(這一章或許可能太長了,但下一章很有可能會更長)

備註:若有錯字請在下方留言感謝。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *