CSS


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

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


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

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


[鐵人賽04] 從平面設計前進 CSS-2 選擇器之.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{類別:參數;} 在{}前方的是元素,{}中間是想要指定的樣式,對不同的元素可以分別指定不同的樣式。


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

[新手前端]從平面設計前進 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 造型寫在 […]


[翻譯]Border-radius:用CSS畫圓角 4

原文 Border-radius: create rounded corners with CSS! CSS3的圓角參數讓網頁開發者能輕鬆的使用圓角設計,不需要使用圖片或是大量的DIV標記,這大概是CSS3裡最令人印象深刻的功能了。 自從2005年發佈的圓角屬性終於被多數瀏覽器支援(雖然支援度不一) ,因為相對容易使用,因此這個新技術很快的被網頁開發者接受。


[翻譯]OOCSS物件導向的CSS設計概念 1

< ![CDATA[ *OOCSS物件導向的CSS設計概念* 重點1. 把物件(定位)和skin (皮)分開,以利維護及重覆使用重點2. 把內容和 容器分開 缺點是HTML那邊會看起來比較亂 翻譯 via +暗月之鏡 – 我英文不夠好,有翻錯還請大家提醒我啊 簡介物件導向CSS(OOCSS)原文- 路易Lazaris 12, 12,2011 你聽過 “內容是王道” 這句吧? 身為網頁開發者你的工作也許就是經常要去創造內容,幾乎都聽過這句。雖然是老生常談但確實是吸引使用者來訪的真正原因。 但從Web開發者的角度,也有些人認為,速度才是王道。漸漸的,我個人越來越同意這個看法,近年來許多前端設計師都提出建議,利用改善效能及速度來增進使用者體驗的經驗。 不過,CSS似乎沒趕上這個風潮,大部分被出來提升效能的方法都集中在JavaScript和其他領域。本文會針對CSS這個被忽視的領域,向您介紹物件導向的CSS概念,它可以幫助提高網頁性能和可維護性。 = OOCSS的原則 ========一如所有物件導向的編碼方式,OOCSS鼓勵代碼重覆利用,創造容易增加及維護,並且更快更有效的CSS樣式表。