Suche senden
Hochladen
CSS Basic
•
4 gefällt mir
•
2,417 views
Ryan Chung
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 32
Empfohlen
CSS3 Basic
CSS3 Basic
Ryan Chung
HTML Basic
HTML Basic
Ryan Chung
Div+Css布局入门教程
Div+Css布局入门教程
yiditushe
十步学会用Css+Div建站
十步学会用Css+Div建站
yiditushe
网页设计及制作(Div+css)
网页设计及制作(Div+css)
lrk3
CSS 菜鳥救星
CSS 菜鳥救星
Ying-Hsiang Liao
Html&css培训 舒克
Html&css培训 舒克
jay li
E-commerce 金流串接實作教學 (PayPal)
E-commerce 金流串接實作教學 (PayPal)
Yu-Hsien Fang
Empfohlen
CSS3 Basic
CSS3 Basic
Ryan Chung
HTML Basic
HTML Basic
Ryan Chung
Div+Css布局入门教程
Div+Css布局入门教程
yiditushe
十步学会用Css+Div建站
十步学会用Css+Div建站
yiditushe
网页设计及制作(Div+css)
网页设计及制作(Div+css)
lrk3
CSS 菜鳥救星
CSS 菜鳥救星
Ying-Hsiang Liao
Html&css培训 舒克
Html&css培训 舒克
jay li
E-commerce 金流串接實作教學 (PayPal)
E-commerce 金流串接實作教學 (PayPal)
Yu-Hsien Fang
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
3sss book
3sss book
Hina Chen
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Pro Css Box Model : Margin & Padding
Pro Css Box Model : Margin & Padding
主 堂
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
Less is more
Less is more
simplelife7
Less is more!?
Less is more!?
simplelife7
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Weitere ähnliche Inhalte
Ähnlich wie CSS Basic
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
3sss book
3sss book
Hina Chen
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Pro Css Box Model : Margin & Padding
Pro Css Box Model : Margin & Padding
主 堂
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
Less is more
Less is more
simplelife7
Less is more!?
Less is more!?
simplelife7
Ähnlich wie CSS Basic
(7)
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
3sss book
3sss book
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Pro Css Box Model : Margin & Padding
Pro Css Box Model : Margin & Padding
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Less is more
Less is more
Less is more!?
Less is more!?
Mehr von Ryan Chung
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
Intro to AI
Intro to AI
Ryan Chung
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
Mehr von Ryan Chung
(20)
Voice-First Games for Alexa
Voice-First Games for Alexa
AI Service Integration - Education
AI Service Integration - Education
AI Service Integration
AI Service Integration
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
AI in Classroom
AI in Classroom
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
MovieBot
MovieBot
Service Integration Workshop
Service Integration Workshop
MPP AI
MPP AI
Smart Home Intro Lab
Smart Home Intro Lab
Introduction to DialogFlow
Introduction to DialogFlow
Conversational AI Orientation
Conversational AI Orientation
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Amazon Alexa Development
Amazon Alexa Development
Microsoft Professional Program - AI
Microsoft Professional Program - AI
AI Service Integration
AI Service Integration
Intro to AI
Intro to AI
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
CSS Basic
1.
行動開發學院 http://MobileDev.TW Cascading Style
Sheet Basic Ryan@MobileDev.tw
2.
行動開發學院 http://MobileDev.TW 大綱 1. 簡介 2. 位置 3. 語法 4. 背景 5. 文字 6. 字型 7. 箱子 8. Margin 9. Border 10. Padding 11. 清單 12. 表格 13. 元件 14. 應用
3.
行動開發學院 http://MobileDev.TW 第1章:簡介 l Cascading
Style Sheets l Cascading:多個樣式定義可被重疊使用在一個網頁上 l 外部檔案 l 表頭 l 行內 l Style:樣式 l HTML:結構 l CSS:樣式 l Sheets:表 l 一堆相同格式的資料放在一起
4.
行動開發學院 http://MobileDev.TW 第2章:位置 l 外部:獨立儲存為一個檔案(例如mystyle.css) l
在你的網頁檔案的head.../head中加入 link rel=stylesheet type=text/css href=mystyle.css / l 內部:整個樣式表放在網頁檔案的head.../head裡 l 在你的網頁檔案的head.../head中加入 style type=text/css........../style l 行內:直接將樣式語法加入該標記中 l 在你需要使用樣式的元件之開始標籤中,如例所示 p style=color:sienna;margin-left:20pxThis is a paragraph./p l 階層式關係,取最後一個 層層相疊覆元件、剝⾄至底層知分曉
5.
行動開發學院 http://MobileDev.TW 第3章:語法 • 整體結構
selector {property:value} • selector選擇器 • HTML標籤 p{color:red} 段落中的文字顏色為紅色 • id • CSS語法:#para1{ text-align:center; color:red;} • HTML套用語法: p id=para1This paragraph will take the para1 style/p • class • CSS語法:.right {text-align:right} • HTML套用語法: p class=rightThis paragraph will be right-aligned./p • Attribute • CSS語法:input[type=text] {background-color:blue} • HTML影響:所有type為text的input元件,背景顏色為藍色
6.
行動開發學院 http://MobileDev.TW 第3章:語法 • property:屬性 •
指定該元件或標籤的某項特質(如顏色或字體) • 多項屬性可用分號分開 {propertyA:valueA ; propertyB:valueB} • value:屬性值 • 決定屬性的值(如什麼顏色,什麼字體) • 屬性值若為兩個字以上,加 • p {font-family:sans serif}
7.
行動開發學院 http://MobileDev.TW 第4章:背景 l background-color
設定背景顏色 n 三種表達方式 è 名稱 yellow è Hex #00FF00 è RGB rgb(255,0,255) l background-image 設定背景圖片 n background-repeat:重複 è repeat 垂直與水平重複(預設值) è repeat-x 水平重複 è repeat-y 垂直重複 è no-repeat 不重複 n background-attachment:固定或捲動 è fixed 固定 è scroll 捲動 n background-position:圖片位置
8.
行動開發學院 http://MobileDev.TW Chap4.Lab
9.
行動開發學院 http://MobileDev.TW Chap4.Lab
10.
行動開發學院 http://MobileDev.TW Lab2.混用顏色與圖片
11.
行動開發學院 http://MobileDev.TW 第5章:文字 l color
設定文字顏色 l 名稱、RGB、Hex l text-align 對齊 l left、center、right、justify l text-decoration 裝飾 l overline 頂線、line-through 刪除線 l underline 底線、blink 閃動 l none (最常用,用來消除連結預設底線) l text-transform 大小寫 l uppercase 都大寫 l lowercase 都小寫 l capitalize 首字大寫 l text-indent 首行縮排、line-height 行距 l letter-spacing 字元間距、word-spacing 字詞間距
12.
行動開發學院 http://MobileDev.TW 第6章:字型 l font-family
指定字型 l 指定字型一,指定字型二,指定字型三 l font-style 指定樣式 (就只是斜體) l normal 標準 l italic 斜體(使用字型本身的斜體) l oblique 斜體(使其傾斜) l font-size 指定大小 l px、em(W3C建議) l font-weight 粗細 (就只是粗體) l normal(400)、bold(700)、100~900 l bolder、 lighter l font-variant 變種(以大寫字來寫小寫字) l normal、small-caps
13.
行動開發學院 http://MobileDev.TW Lab.文章標示練習 • 找一段文字,進行文字與字型各種樣式測試
14.
行動開發學院 http://MobileDev.TW 第7章:Box Model l
Margin –邊界 l Border – 邊框 l Padding – 框距 l Content - 內容、文字/影像
15.
行動開發學院 http://MobileDev.TW 第8章:邊界 Margin l
margin-xxxx 分開標示 l margin-bottom l margin-left l margin-right l margin-top l margin 一次標示 l 10px - 上:10px、右:10px、下:10px、左:10px l 10px 5px - 上:10px、右:5px、下:10px、左:5px l 10px 5px 15px - 上:10px、右:5px、下:15px、左:5px l 10px 5px 15px 20px - 上:10px、右:5px、下:15px、左:20px
16.
行動開發學院 http://MobileDev.TW 第9章:邊框 Border
1/2 l border-style 設定邊框樣式 (可每一邊不同) l 樣式 - none, dotted, dashed, solid, double, groove 溝槽 - ridge 隆起, inset, outset, hidden l 四邊分開設 - border-top-style - border-right-style - border-bottom-style - border-left-style l 一次一起設 - border-style:dotted solid double dashed 上,右,下,左 - border-style:dotted solid double 上,左右,下 - border-style:dotted solid 上下,左右 - border-style:dotted 四邊相同
17.
行動開發學院 http://MobileDev.TW 第9章:邊框 Border
2/2 l border-width 設定邊框寬度(框的粗細) l 四邊分開設 - border-top-width - border-right-width - border-bottom-width - border-left-width l 一次一起設 - border-width:10px 5px 15px 20px 上,右,下,左 - border-width:10px 15px 5px 上,左右,下 - border-width:10px 5px 上下,左右 - border-width:10px 四邊相同 l border-color 顏色 l border 一次設定四邊的樣式、寬度與顏色 l border:5px solid red
18.
行動開發學院 http://MobileDev.TW 第10章:框距 Padding l
設定內容與邊框的距離大小 l 各別設定 l padding-bottom l padding-left l padding-right l padding-top l 一次設定 l padding
19.
行動開發學院 http://MobileDev.TW Lab:iOS7 Style
Page
20.
行動開發學院 http://MobileDev.TW Lab.Box Model
21.
行動開發學院 http://MobileDev.TW 第11章:清單 List
1/2 l list-style-type 設定清單樣式 l none l circle l disc l square l decimal 1,2,3,... l decimal-leading-zero 01,02,03,.... l lower-latin a,b,c,... l upper-latin A,B,C,.... l lower-roman i,ii,iii,..... l upper-roman I,II,III,.....
22.
行動開發學院 http://MobileDev.TW 第11章:清單 List
2/2 l list-style-image 使用圖片作為清單樣式 l list-style-image:url('picture.jpg'); l list-style-position 位置 l inside l outside
23.
行動開發學院 http://MobileDev.TW 第12章:表格 Table l
border-collapse 決定表格邊框與儲存格邊框是否重疊 l collapse l separate(預設值) l border-spacing 相鄰儲存格邊框之間的距離 l 10px 四邊 l 10px 5px 水平、垂直 l caption-side 標題位置 l top l bottom l left l right
24.
行動開發學院 http://MobileDev.TW Lab:Mobile Style
Slide • 可往左捲動一頁,背景不動 • 最下方有灰色半透明背景 • 圖示均有圓角邊框 • 圖示間距上下較窄、左右 較寬
25.
行動開發學院 http://MobileDev.TW 第13章:元件 Element l
控制元件大小 l height l width l visibility 元件可視性 l visible (預設值) l hidden l collapse
26.
行動開發學院 http://MobileDev.TW 第14章:應用 • 圖文編排 •
區塊連結按鈕 • 全頁排版 取代表格效果
27.
行動開發學院 http://MobileDev.TW Chap14.Lab Menu
Bar
28.
行動開發學院 http://MobileDev.TW Chap14.Lab Float
29.
行動開發學院 http://MobileDev.TW Lab.對話泡泡
30.
行動開發學院 http://MobileDev.TW 為什麼會有三角形? 每一邊先設定成不同的顏色
31.
行動開發學院 http://MobileDev.TW 為什麼會有三角形? 把div的大小縮成0px
32.
行動開發學院 http://MobileDev.TW 為什麼會有三角形? 其中一邊顏色保留,另外三邊設成透明色