Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS 基礎
Search
大澤木小鐵
October 30, 2012
Programming
11
920
CSS 基礎
教育訓練用
大澤木小鐵
October 30, 2012
Tweet
Share
More Decks by 大澤木小鐵
See All by 大澤木小鐵
Effective Unit Testing
jaceju
3
560
JSConf Asia 2014 Sessions
jaceju
4
390
What happens in Laravel 4 bootstraping
jaceju
9
550
Deal with Laravel assets by Bower & Gulp
jaceju
30
1.9k
Leaning MVC By Example
jaceju
0
350
ng-conf_2014
jaceju
2
970
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
370
jQuery vs AngularJS, dochi?
jaceju
20
2.9k
Begining Composer
jaceju
24
5.1k
Other Decks in Programming
See All in Programming
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
最新TCAキャッチアップ
0si43
0
140
as(型アサーション)を書く前にできること
marokanatani
9
2.6k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.9k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
4
640
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
How GitHub (no longer) Works
holman
310
140k
Ruby is Unlike a Banana
tanoku
97
11k
Building Your Own Lightsaber
phodgson
103
6.1k
Producing Creativity
orderedlist
PRO
341
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Transcript
Jace Ju @ Sina Taiwan 基礎 CSS
什麼是 CSS 1
.COM 時代 <table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" class="Bpadd"> <tr>
<td bgcolor="#C8DDF1" class="text13b"><a href="/itadm/ category.php?cat=93"><font color="#000000">CIO</font></a></td> </tr> <tr> <td class="text13"><font color="#666666">•</ font> <a href="/itadm/article.php?c=76963" title="2012-10-29"> 集團打造零售四合⼀一計畫 ⼀一年半內同時完成⼋八⼤大系統調整</a></td> </tr> <tr> <td class="text13"><font color="#666666">•</ font> <a href="/itadm/article.php?c=76880" title="2012-10-22">IT是台灣技術創新⽕火⾞車頭 從企業營運⾓角度評選新興科技 </a></td>
Cascading Styling Sheets 瀏覽器樣式 網⾴頁作者樣式 使⽤用者樣式
CSS 概念 1994 CSS 2.0 1998 CSS 2.1 2011 W3C
正式接⼿手 1997 History of CSS CSS 1.0 1996.12 CSS 3
CSS 能做些什麼 2
⽤用以視覺化的 HTML 標籤 <p> <font face="Arial" size="3" color="red"> Text </font>
</p>
CSS 樣式化 <p>Text</p> p { font-family: Arial; font-size: 3em; color:
red; }
選擇器 CSS 語法 p { font-size: 3em; color: red; }
用大括號來包含樣式 CSS 語法 p { font-size: 3em; color: red; }
屬性 CSS 語法 p { font-size: 3em; color: red; }
值 CSS 語法 p { font-size: 3em; color: red; }
分號後再加入下一組屬性 CSS 語法 p { font-size: 3em; color: red; }
CSS 檔案 p { font-family: Arial; font-size: 3em; color: red;
} <p>Text</p> <p>Text</p> <p>Text</p>
怎麼套⽤用 CSS 3
inline styling <p style="font-family: Arial; font-size: 3em; color: red;">Text</p>
Style Tag <style type="text/css"> p { font-family: Arial; font-size: 3em;
color: red; } </style>
Link Tag <head> <link rel="stylesheet" href="theme.css"> </head>
搭配 HTML 4
<p>Normal text</p> <p class="note">Some note</p> class
<p>Normal text</p> <p class="note">Some note</p> class p { font-family: Arial;
font-size: 3em; color: black; } p.note { color: red; } http://jsfiddle.net/hkvBC/
Bad class p.big-red { font-family: Arial; font-size: 3em; color: red;
}
Bad class p.big-red { font-family: Arial; font-size: 3em; color: blue;
}
Bad class p.note { font-family: Arial; font-size: 3em; color: blue;
}
<div id="header"> <h1>Title</h1> </div> id http://jsfiddle.net/hkvBC/
<div id="header"> <h1>Title</h1> </div> id #header { height: 80px; }
http://jsfiddle.net/hkvBC/
CSS 排版 5
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" class="Bpadd"> <tr> <td bgcolor="#C8DDF1"
class="text13b"><a href="/itadm/ category.php?cat=93"><font color="#000000">CIO</font></a></td> </tr> <tr> <td class="text13"><font color="#666666">•</ font> <a href="/itadm/article.php?c=76963" title="2012-10-29"> 集團打造零售四合⼀一計畫 ⼀一年半內同時完成⼋八⼤大系統調整</a></td> </tr> <tr> <td class="text13"><font color="#666666">•</ font> <a href="/itadm/article.php?c=76880" title="2012-10-22">IT是台灣技術創新⽕火⾞車頭 從企業營運⾓角度評選新興科技 </a></td> Table Layout
<body> <header id="header"><h1>...</h1></header> <div id="body" > <div id="wrapper" class="clearfix"> <section
id="maincol"><h1>...</h1></section> <aside id="aside"><p>...</p></aside> </div> </div> <footer id="footer"><h2>Footer</h2><p>...</p></footer> </body> CSS Layout
CSS Layout #header { position:relative; height:80px; background-color:#FFFFFF; width:100%; display:block; overflow:auto;
} #aside { width:240px; float:left; position:relative; } #main { background-color: #FFFFFF; position: relative; width:720px; float:right; } #footer { height:100px; background-color:#FFFFFF; clear:both; display:block; overflow:auto; }
IE must die! Problems ‧設計師必須學習 CSS 語法 ‧瀏覽器呈現不一致 ‧IE 舊版本不符合
Web 標準
CSS Reset ‧瀏覽器有預設樣式 ‧解法:將所有樣式去除 html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, ... { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } http://meyerweb.com/eric/tools/css/reset/
CSS3 簡介 6
‧外部字體 ‧方盒模型 ‧背景 ‧多欄排版 ‧2D 漸變 ‧3D 漸變 ‧媒體偵測 ‧進階選擇器
CSS3 Modules 其他還有很多... http://www.css3.info/modules/ http://www.w3schools.com/css3/
-moz- /* Firefox */ -webkit- /* Safari, Chrome */ -o-
/* Opera */ -ms- /* Internet Explorer */ Vendor Prefix http://css-snippets.com/browser-prefix/
.box { border: 1px solid #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px;
-o-border-radius: 2px; border-radius: 2px; } Vendor Prefix http://css-snippets.com/browser-prefix/
Graceful Degradation http://jonraasch.com/blog/graceful-degradation-with-css3 ⽀支援 CSS3 不⽀支援 CSS3
Examples 7
• CSS3 buttons • 3D CSS Cube • Image Gallery
• 秋⼭山澪 http://webdesignerwall.com/trends/47-amazing-css3-animation-demos
問題與討論