iT邦幫忙

DAY 1
1

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列 第 1

[3]用MAN架構打造超人般的網頁應用程式:[課前準備]淺談CSS

CSS 的全名為Cascading Style Sheets,是一種樣式表(Stylesheet) 語言,主要功能是為了提供HTML或 XHTML 在呈現上面的一個顯示層(好比超人的服裝一樣),將透過改變CSS的屬性,我們可以讓相同的HTML元素呈現不同的風貌。
用MAN架構打造超人般的網頁應用程式系列文章
用MAN架構打造超人般的網頁應用程式系列文章

CSS介紹

CSS 的全名為Cascading Style Sheets,是一種樣式表(Stylesheet) 語言,主要功能是為了提供HTML或 XHTML 在呈現上面的一個顯示層(好比超人的服裝一樣),將透過改變CSS的屬性,我們可以讓相同的HTML元素呈現不同的風貌。

在使用上分為兩位引入方式,使用如下面格式

<meta charset="utf-8">
<title></title>
<!--1. 引入指定的css檔案-->
<link rel="stylesheet" href="index.css">
<!--2. 直接宣告CSS屬性-->
<style type="text/css">
h1{
color: red; 
}
h2{
color:green;
}
</style>


<h1>RED</h1>
<h2>GREEN</h2>

上面的的link就是把指定的css檔案加入到頁面中使用,而style則是在頁面自己宣告css屬性使用,在使用上就是透過選擇器的方式,選到指定的dom物件後作修改,而選擇的方式可以透過元素型別,id名稱,class名稱等方式來抓取。

CSS3與CSS4後面數字的差異是代表他推出的版本,各版本除了有些許屬性與功能不同外,主要各家的瀏覽器也有不同的支援程度,而這邊要介紹的CSS3目前在大部分的瀏覽器都支援了,而CSS4尚在開發中使用前要查一下支援程度,之後的系列文章也都以CSS3為主去撰寫。

CSS選擇器

在撰寫CSS上對選擇器的瞭解是一項非常重要的事情,如同上面的範例我們可以選擇到h1這個元素的過程就是一個選擇器的挑選方法,下面再介紹其他的挑選方法

<meta charset="utf-8">
<title></title>
<!--1. 引入指定的css檔案-->
<link rel="stylesheet" href="">
<!--2. 直接宣告CSS屬性-->
<style type="text/css">
/*指定h1這個元素*/
h1{
color: yellow; 
}
/*指定h2這個元素*/
h2{
color:green;
}
/*指定h1下面的p元素*/
h1 p{
color:gold; 
}
/*指定id="black"的元素*/
#black{
color:black;
}
/*指定class="blue"的元素*/
.blue{
color:blue;
}
/*指定重新指定h1這個元素*/
h1{
color: red; 
}
</style>


<h1>RED<p>gold</p></h1>
<h2>GREEN</h2>
<h1 id="black">blackie</h1>
<h2 class="blue">blue</h2>
<input class="blue" type="text" value="input..."></input>

由上面的範例可以看到其實選擇器挑選是逐一執行且會重寫你所指定的屬性(相同屬性後面執行的會去覆蓋前面的),而如何有效地使用選擇器就是一個很深的學問了,有興趣的可以參考 Steve Souders 指出,各種CSS選擇器的效率由高至低排序如下:

  1. ID (#id)
  2. Class (.class)
  3. Type (即HTML標籤,如div)
  4. 鄰接選擇器 (如: h2+p,僅作用於鄰接h2的p元素)
  5. Child (如: li>ul)
  6. Descendant (如:ul a)
  7. Universal (*)
  8. 屬性 (如: [type="text"])
  9. 摸擬類別/元素 (如: a:hover)

*基本上上面的選擇效率與jQuery的選擇效率相同,jQuery的選擇器這邊第三天會再提到

而詳細的選擇器挑選方式可以參考W3CSchool

RWD

Responsive web design-響應式網頁設計,有鑒於電腦螢幕解析度越來越多樣化與以及行動化裝置的普及,透過此設計方式可以讓你的網站更附加支援不同解析度的彈性

舉個例子,假設下面這是1024*768的網頁呈現,左邊右邊會是不同的區塊

但在iphoen上因為寬度可能不夠所以就會調整成下面這樣子呈現


從上面我們瞭解透過判斷呈現尺寸來設定版面配置與各版面大小就是RWD的精髓。

這邊介紹一個不錯的教學網站

如果你已經知道怎麼做支援RWD的網頁設計,你可透過此篇文章來重新檢視一下你的RWD設計好不好

在之後的實例上我們會透過Bootstrap的RWD設計來讓我們的MAN網頁可以run在不同解析度的情況,甚至連mobile裝置也可以輕鬆上手

CSS在HTML5上的重要性

如果HTML5是一種提供更多樣式與屬性跟API的跑車的話,那CSS就是呈現那台跑車的外觀
與所有視覺效果的重要技術,如同下面一排不同色Lamborghini跟用麥克筆塗鴉後的Lamborghini是一樣的,只是有不同的外觀給你不同的視覺饗宴

結語

在這邊我刻意不談CSS的屬性,因為實在太多了而且很多還有瀏覽器支援度的問題,所以以興趣的人可以看,而在我們最後的作品當中會用到大量的Bootstrap來幫我們解決的問題,到時再來進步討論Bootstrap的使用摟,Day-3 over!


下一篇
[4]用MAN架構打造超人般的網頁應用程式:[課前準備]淺談JavaScript與MVC開發介紹
系列文
用MAN架構打造超人般的網頁應用程式:復仇者聯盟7

尚未有邦友留言

立即登入留言