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
550
JSConf Asia 2014 Sessions
jaceju
4
360
What happens in Laravel 4 bootstraping
jaceju
9
530
Deal with Laravel assets by Bower & Gulp
jaceju
30
1.9k
Leaning MVC By Example
jaceju
0
330
ng-conf_2014
jaceju
2
930
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
360
jQuery vs AngularJS, dochi?
jaceju
20
2.9k
Begining Composer
jaceju
24
4.9k
Other Decks in Programming
See All in Programming
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
370
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
370
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
490
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
禅の心を手に入れよ
eltociear
1
290
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
430
GitHub Copilotのススメ
marcy731
1
220
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
75
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Visualization
eitanlees
137
14k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Music & Morning Musume
bryan
41
5.6k
Web Components: a chance to create the future
zenorocha
306
41k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
We Have a Design System, Now What?
morganepeng
44
6.8k
Six Lessons from altMBA
skipperchong
22
3k
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
問題與討論