[小記事] 前天晚上回到家母上在看新聞 (事後知道她本來想看氣象的，結果等不到氣象就關機了，還說了真的網路查比較快) 我回到家時電視正在播 TVBS，內容是《陳沖自爆妻子焦慮“偷哭”馬英九宣示力挺到底》 我就說，這新聞有新聞價值嗎? 全篇完全都是癈話，只是一種形象宣傳，沒有任何和社會相關的議題價值。 然後是兩篇大陸新聞轉播，主播就是加上配音把原本大陸主播說的話再重覆一次，幫他加上繁中字幕，內容也不是什麼中國要聞，是《電話亭設計不良，民眾表演特技才能使用》《紅燈如同虛設，糾足一小群人就可過馬路》 第一則如果是去跑台灣哪裡有設計不良的設施我還覺得有理，報大陸的真的關我屁事
繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。 上篇介紹了 display 屬性，可以針對元素的盒模型有不同的設定，display 設定了元素的顯示方式以及和其他元素的互動關係，今天來談談 position 位置。 HTML元素出現在頁面什麼位置可以依據三種主要的規則： 1. 普通 DOM樹 隨著HTML 的DOM元素順序 display是塊級還是行內不同，元素由上至下，由左而右依序排列。 2. 浮動 float 元素從普通的 DOM樹順序中浮到上方圖層，然後依元素被設定的float方向延著母元素邊界排列，display:block 的元素會被蓋住，如果左右的浮動元素堆到需要換行時，會依原本DOM 樹裡的順序，如果float:left 的元素寫在比較前面就會有優先權，空間不夠的 float:right會被擠到下一行裡。如果碰到 display為table時，table會無視float，從設為tabl置開始，做出類似block的行為。 見下圖：
上篇解釋了CSS的盒模型，介紹HTML元素在設計時就像一個個的盒子各自佔用了一個矩形的空間，今天就來接著介紹同樣也是針對元素空間定位的相關屬性。 顯示：塊級，行內、行內塊級 display:block; inline; inline-block; position: absolute, relative, fixed z-index:-1 0 1 ; reset 及預設樣式： W3C在制定共通的瀏覽器解讀方式時，針對不同的HTML元素有一些預設的樣式，一個單純的HTML檔案在完全沒有設計師指定樣式時，會呈現一種像大網模式般由上往下排例的內容，還是可以看出標題、連結、段落的差別，這就是預設樣式。 比如: <h1>預設是粗體，字級較大， 預設是普通粗細、14px… 因為這些元素有預設樣式，所以設計師在編寫樣式時有可能會被預設的寬高或間距影响到，例如 table 會有預設的padding 如果沒注意到就會一直無法順利把元素排版，因此多收設計師都喜歡先載入一段有人先寫好的CSS 叫reset.css，把所有預設的樣式都重置，這樣在設計時就比較不會被影响到。
CSS的部分講了四篇，都還在基本概念和 HTML的元素選擇器上，今天終於要正式講到樣式本身的基礎- box 盒模形。 網頁設計和平面設計最大的差異之一就在元素的空間組成上，平面設計時頁面上的元素是用線條、區塊、形狀、顏色來區分不同的元素，同時元素間可能沒有明顯的邊界，但是在網頁設計的”頁面”中設計師其實是在針對 HTML裡的元素像是標題 <h1>、區隔 <div>、影像 <img>等等元素設計不同的造型，然而這些元素在頁面中佔有的空間 “全部都是矩形”。 沒錯! 全~~部~~ 都是矩形，不管是標題、錨點或是影像，在瀏覽器眼中就像一個個的用HTML <tag> </tag>包起來的箱子box 堆在頁面中，而且常常是一個包一包，盒子裡面還有盒子，這些盒子會依網頁設計者指定的寬高形成一個個不同長寬的矩形空間。 所幸是網頁設計也有圖層的概念，可以讓這些矩形元素有不同的位置變化，但是不管你眼睛看到什麼造型，實際上他們在瀏覽器眼中「全部都是矩形」，只不過這個矩形有不同的長寬、顏色、邊界、內外間距、背景甚致還給你圖層可用。見下圖： 這張圖展示的是任何元素都有的共通的空間性質，每一個元素都具有自己的長寬等上述屬性來確定本身在頁面中佔了多少空間。
部落格行動日從2007年開始到現在，每年部落客們都選出一個主題在同一天發表文章來關注這個主題，藉由全球所有部落客在同一天做出這個行動，讓世界更關心一些公共議題，經過環境、貧窮、氣候變遷、水資源、糧食危機到2012，這次要關注的主題是：我們的力量。 過去，在君權時代、民主初期，個人的力量是相對微小的，當大環境及政策改變時個人往往只能隨波逐流，在資訊不夠流通的時代，言論及思想的散布都會被當權者所掌握，不對稱的資訊造成一般人的無知及無力。 但是在網路逐漸普及，世界越來越像地球村的現在，個人的行動及發言可以凝聚成廣大的群眾意識，原本在社會群體中微不足道的聲音可以引發火種及力量，我們不再讓掌握資訊的權力者操控，而擁有發聲和聚集的力量足以由自身開始改變世界。
承上篇，繼續針對選擇器說明，我們已經知道在CSS指定樣式的型式： E {color:red;} 選擇器 {類型:參數}; 同時知道選擇器可以串連，程式碼都是由上往下讀取並解析 另外之前的文章裡也提到，想要使用CSS的樣式可以用三種不同的方法來讓瀏覽器讀取CSS，分別是 行內、頁面、鍊入(載入式)。 現在知道有這麼多的方法可以指定樣式給在HTML裡的元素，那麼如果出現下面這種情況，瀏覽器要怎麼知道該呈現什麼結果，就要靠權重來區分，就像在軍隊裡要以官階大的長官下的指令算數，在家裡媽媽說了算一樣，CSS也有一套計算選擇器權重的方式。 不然如果像下例，有很多選擇器都選到同一個元素 <p> 最後字會變成什麼顏色呢? <style> p{color:red;} p{color:blue;} </style>
上一篇提到要套用樣式，就需要指定某一個特定的元素E 告訴瀏覽器，我就是要把樣式套在這個 E 上面，就像我們作圖時先找出要做特效的圖層然後套用特效一樣。 這個指定元素的部分我們叫做 “選擇器”，也就是利用這個地方來指定特定的元素，其實就是不同的選出元素的方法。 (有點像在教室裡叫第一排站起來，或全部的女生站起來，也許更像在：玩大風吹、吹什麼~ 吹我叫到的元素 E ) 選擇器可分成下表裡的類別，看得懂英文的可以直接參考 w3c的 selector說明頁(註1)： 除了”全域”、”型態”及最常見的.class, #ID之外，有幾個是類似的選擇法 繼承 偽類 參數
[新手前端]從平面設計前進 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{類別:參數;} 在{}前方的是元素，{}中間是想要指定的樣式，對不同的元素可以分別指定不同的樣式。
[新手前端]從平面設計前進 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 造型寫在 […]
[新手前端]從平面設計前進 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=”” […]
