Skip to main content

Posts

Showing posts with the label 基礎CSS設計

Featured Post

Adobe UI 設計大賽

感覺很好拿到獎項的比賽 似乎沒多少人知道 https://www.iiiedu.org.tw/adobeXD/ https://www.iiiedu.org.tw/adobeXD/rule.html 但有一組似乎限制了特定人參加!!

CSS Positioning

Learn CSS Positioning in Ten Steps

關於CSS選取器使用提醒

http://twostepmedia.co.uk/cssselectors/

CSS Lint 協助CSS除錯

http://csslint.net/ 不見得錯誤訊息一定是錯 但是對於一些設定 他也能提供更簡潔的語法 協助設計師發現問題

認識CSS

CSS 的全名是 Cascading Style Sheets (串接樣式表)。它是由許多樣式名稱和樣式指定值所組成的字串,我們可以利用設定好的樣式表,指定給某一種 HTML 標籤,或某一群組 HTML 標籤來使用。而被套用的 HTML 標籤,將會依據所套用的 CSS 來顯式它的外觀。 CSS 可說是 JavaScript 物件模型的一個重要部份,因為在 CSS 設定之後,我們還可以利用 JavaScript 重新指定不同的值給元件,而達成動態改變的效果( JavaScript 動態改變的功能 IE 已完全支援,但 NC 只支援極少部份)。試想我們利用 CSS 將一段文字設為紅色,再利用 JavaScript 將它改變為藍色,這就是一種動態網頁效果啦( NC 目前做不到)! css 是用來延伸 html 而非取代 htnl, 是用來補 html 的不足(請不要誤會它) CSS寫法(必須寫在<head>內) <style type="text/css"> h1,h2 {         font-family: Arial, Helvetica, sans-serif;         color: #3366CC; } </style> 每個 CSS 樣式定義都有兩項元件:選取器 (selector) 、內容 (property) ,選取器定義要套什麼樣式,內容則描述要產生的效果。

中文段落文字對齊設定

中文的文字對齊一直很麻煩 針對非拉丁語系國家 CSS有幾個控制標籤可以使用 text-align:justify; 強制文章內文左右對齊包含吊尾文字 但是發現只有FF可以執行 IE與其他瀏覽器是無法完全執行的 接下來再加上 text-justify:distribute; 對IE有效 text-justify:distribute; 但是發現也不見得所有瀏覽器都會支援 目前IE跟FF都有效,連吊尾的文字都可以拉齊 但是對Safari與Chrome吊尾無法調整 text-justify:inter-ideograph;  與   text-justify:newspaper; 測試結果都與 text-justify:distribute; 相同 (IE測試6,7,8三版 FF測試3.6版本 safari5.0 Chrome10.0.648.151)