今天來講 CSS 如何控制HTML內的文字 font-style 字型 首先在文字設定時最基本的- 表示為 font-style: “新細明體” ,helvetica ,serif; 可以指定多組不同的字型在同一個元素上，因為字型會因為每個使用者電腦的狀態不同而出現缺少這個字型的情況，所以CSS裡可以用兩種指定方式來設定字型，如果使用者電腦裡沒有這個字型，就會用下一種，所以第一種就是字型的名字像是”新細明體”、”華康中黑體”，使用時要用”” 把字型名稱包起來。 另一種就是 serif sans-serif cursive fantasy monospace 這幾個是字型的基本樣式，學過設計的都知道，字體有幾種基本的差別，襯線有無、粗細、圓字、黑體、等寬，另一種就是單純指定形式，然後電腦就會去系統裡找最類似的來使用，就是傳說fallback啊!!
今天來講最常用的背景色及背景吧~ color:#fff | rgb(255,0,0) | red 顏色可以用三種方法指定，不過在CSS裡直接用color是指定字的顏色 要用background-color: #333; 才是指定背景顏色。 background 背景：預設是透明的,可以放顏色及影像 background-color: green; background-image: url(image/img.jpg); 背景比較有趣的是可以決定要不要重覆及放置的位置 background-repeat: 背景重覆：有四個參數 no-repeat; repeat; repeat-x; repeat-y 即，不重覆、重覆、重覆X、重覆Y
[小記事] 前天晚上回到家母上在看新聞 (事後知道她本來想看氣象的，結果等不到氣象就關機了，還說了真的網路查比較快) 我回到家時電視正在播 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{類別:參數;} 在{}前方的是元素，{}中間是想要指定的樣式，對不同的元素可以分別指定不同的樣式。
