鐵人賽

[鐵人賽07]從平面設計前進 CSS-5 盒模型

This entry was posted in 　└ CSS教學 　├ 前端新手日記 and tagged box CSS 前端 鐵人賽 on by

CSS的部分講了四篇，都還在基本概念和 HTML的元素選擇器上，今天終於要正式講到樣式本身的基礎- box 盒模形。 網頁設計和平面設計最大的差異之一就在元素的空間組成上，平面設計時頁面上的元素是用線條、區塊、形狀、顏色來區分不同的元素，同時元素間可能沒有明顯的邊界，但是在網頁設計的”頁面”中設計師其實是在針對 HTML裡的元素像是標題 <h1>、區隔 <div>、影像 <img>等等元素設計不同的造型，然而這些元素在頁面中佔有的空間 “全部都是矩形”。 沒錯! 全~~部~~ 都是矩形，不管是標題、錨點或是影像，在瀏覽器眼中就像一個個的用HTML <tag> </tag>包起來的箱子box 堆在頁面中，而且常常是一個包一包，盒子裡面還有盒子，這些盒子會依網頁設計者指定的寬高形成一個個不同長寬的矩形空間。 所幸是網頁設計也有圖層的概念，可以讓這些矩形元素有不同的位置變化，但是不管你眼睛看到什麼造型，實際上他們在瀏覽器眼中「全部都是矩形」，只不過這個矩形有不同的長寬、顏色、邊界、內外間距、背景甚致還給你圖層可用。見下圖： 這張圖展示的是任何元素都有的共通的空間性質，每一個元素都具有自己的長寬等上述屬性來確定本身在頁面中佔了多少空間。

[鐵人賽06]從平面設計前進 CSS-4 權重及覆蓋 1

This entry was posted in 　└ CSS教學 　├ 前端新手日記 and tagged CSS 前端 權重 鐵人賽 on by

承上篇，繼續針對選擇器說明，我們已經知道在CSS指定樣式的型式： E {color:red;} 選擇器 {類型:參數}; 同時知道選擇器可以串連，程式碼都是由上往下讀取並解析 另外之前的文章裡也提到，想要使用CSS的樣式可以用三種不同的方法來讓瀏覽器讀取CSS，分別是 行內、頁面、鍊入(載入式)。 現在知道有這麼多的方法可以指定樣式給在HTML裡的元素，那麼如果出現下面這種情況，瀏覽器要怎麼知道該呈現什麼結果，就要靠權重來區分，就像在軍隊裡要以官階大的長官下的指令算數，在家裡媽媽說了算一樣，CSS也有一套計算選擇器權重的方式。 不然如果像下例，有很多選擇器都選到同一個元素 <p> 最後字會變成什麼顏色呢? <style> p{color:red;} p{color:blue;} </style>

[鐵人賽05] 從平面設計前進 CSS-3 選擇器詳解

This entry was posted in 　└ CSS教學 　├ 前端新手日記 and tagged CSS 前端 鐵人賽 on by

上一篇提到要套用樣式，就需要指定某一個特定的元素E 告訴瀏覽器，我就是要把樣式套在這個 E 上面，就像我們作圖時先找出要做特效的圖層然後套用特效一樣。 這個指定元素的部分我們叫做 “選擇器”，也就是利用這個地方來指定特定的元素，其實就是不同的選出元素的方法。 (有點像在教室裡叫第一排站起來，或全部的女生站起來，也許更像在：玩大風吹、吹什麼~ 吹我叫到的元素 E ) 選擇器可分成下表裡的類別，看得懂英文的可以直接參考 w3c的 selector說明頁(註1)： 除了”全域”、”型態”及最常見的.class, #ID之外，有幾個是類似的選擇法 繼承 偽類 參數

[鐵人賽04] 從平面設計前進 CSS-2 選擇器之.class #ID

This entry was posted in 　└ CSS教學 　├ 前端新手日記 and tagged CSS HTML 前端 鐵人賽 on by

[新手前端]從平面設計前進 CSS-2 選擇器之.class #ID 上一篇簡介了如何在HTML內使用CSS，簡單來說有3種引入CSS的方法： 一是行內，如： <img src=”” style=”border:1px soild red”> 二是頁面插入式： <sytle> E{font-size:14px; color:red;} </style> 三是鍊入式： <link href=”../css.css” rel=”stylesheet” type=”text/css” /> 然後在css.css的檔案裡寫 E{樣式類別:參數;} E2{border: 1px soild red ; color: red;} 可以很簡單的知道在HTML裡因為 style是直接寫在 HTML的tag裡，所以不需要特別去指定想要套用的樣式該放在哪個元素上。不過頁面式、鍊入式的CSS就會需要特別指定好你想在哪一個元素E 上套用樣式，表示法就變成 E{類別:參數;} 在{}前方的是元素，{}中間是想要指定的樣式，對不同的元素可以分別指定不同的樣式。

[鐵人賽03]從平面設計前進 CSS-1

This entry was posted in 　└ CSS教學 　├ 前端新手日記 設計 and tagged CSS HTML 前端 新手前端日記 鐵人賽 on by

[新手前端]從平面設計前進 CSS-1 上一篇簡介了HTML，版面來比喻，HTML就是不同的元素，而CSS就是這些元素的造型。 如果說HTML是一篇有標題、大綱的文章，那麼CSS就是用來指定字型、大小、顏色、排版的樣式，所謂的CSS就是樣式表的意思。 同HTML一樣，CSS也是一種網頁設計師用來和瀏覽器溝通用的語言，瀏覽器永遠都會照你給的指示做出呈現，唯一的問題是設計師必需學會怎麼和他們溝通，所以在前端網頁設計時常會碰到跨瀏覽器問題就是因為主流的 IE, Firefox, chrome 對指令解讀有一些差異，其中尤以 IE的解讀方式和其他瀏覽器相差最多，所以在做樣式設計時，一般是以firefox 或 chrome的呈現結果為主，其次再修改指定讓IE也能做出類似的呈現。 <!–more–> 既然CSS也是一種和瀏覽器溝通用的語言，首先就來介紹CSS的基本語法。 首先，你必需告訴瀏覽器你想要改變樣式的是HTML裡的哪一個元素 E (element)，這個E 可以是任何一個HTML裡的 tag (標籤)，再來就用CSS的語法把想要改變的樣式及其參數寫入文件中。 例如針對一個HTML裡的 <a> 指定字型、顏色： <a style=” font-family:Aral; font-size:14px”> <tag a 錨點的 樣式=” 字型: Aral ; 字級: 14像素”> 其中的 style=”” 部分是HTML裡的參數指定方式，像 <a href=”” alt=””> </a> 裡面的一樣，只是這個參數是針對HTML的造型(style)來指定。而在CSS樣式裡面的指定方式也很簡單，造型類別:參數; 結尾用分號分隔。 如上述的標示方法，就叫做行內 CSS, 顧名思義就是把 style 造型寫在 […]

[鐵人賽02]從平面設計前進 HTML

This entry was posted in 　├ 前端新手日記 設計 and tagged HTML 前端 鐵人賽 on by

[新手前端]從平面設計前進 HTML 我最早開始做網頁是高中時期，當初還在播接，各校的BBS都還興盛，入口網站是奇摩、蕃薯藤，最大的網路社團是cityfamily。 巴哈姆特還只是個學生做的BBS站。 當年我學會了用右鍵”檢視原始碼” 開始抄寫我分享插畫創作時需要的 <img src=””> 這是我最早接觸到的HTML。 現在回頭看，HTML其實是一種網頁作者用來和瀏覽器溝通的語言。作者用不同的標籤來告訴瀏覽器這些被輸入的內容應該做什麼樣的呈現。 <!–more–> 比如 <a href=””>連結文字來表示鍊出網址 </a> <img src=”表示圖片”> 也就是網頁上面所有構成的元素都是用不同的 tag (標籤)來標示作用讓瀏覽器知道要怎麼呈現。 換句話說，我們人眼看的網頁是瀏覽器看完HTML之後展示出來的結果。 所以常聽到的 IE、firfox、chrome 呈現不一制的問題就是來自於不同瀏覽器對於HTML的解讀有所不同。 在程式底的學習者來說，HTML的理解是以DOM(文件模型)為概念被理解， DOM 樹其實在網頁設計來說可以簡單的理解為… 就是HTML，因為HTML裡面充滿我們標示過的內容，告訴瀏覽器現在應該有什麼行為，網頁在被讀取時會由最上方第一行開始被讀取、解析，就像一根樹由根往上長開枝散葉一樣。 所謂的 DOM 也就是指網頁由 HTML 組成時整個文件本身元素的分佈及組合，而網頁設計的基本就是在一個文件裡不停的增加內容，然後用hTML及其他方式標示用途後交給瀏覽器解析，最後變成我們看到的網頁。 所以在接觸HTML時不用太擔心，就像學語言一樣，只是要知道用什麼詞來表示可以讓瀏覽器知道你現在希望這個內容被怎麼呈現，如此而已。 在實作上，會用到的HTML也沒有想像中多，一開始需要掌握的只有幾個像 <a> 表示錨點 <img> 表示圖片 <div> 表示群組的容器 <table> 表示表格 除了用 tag 能表示該內容的用途之外，每個tag 裡都還可以增加一些參數式的說明來讓瀏覽器理解並做出更多我們需要的行為，比如： <a href=”” title=”” […]