Introduction to CSS Cascading Style Sheets 網頁設計 / 林金祥 Webpage Design/ by Chin-Hsiang Lin
網頁設計概念 java, asp: CSS: 特殊功能 式樣設計 HTML: 文字 圖像內容 Webpage Design/ by Chin-Hsiang Lin 2
CSS:Fly! My Webpage! CSS: Cascading Style Sheets ( 階層式樣表 ) Benefits of CSS Better type and layout controls. Less work. Smaller documents and faster downloads. More accessible sites. Reliable browser support. Webpage Design/ by Chin-Hsiang Lin 3
How Style Sheets Work Start with a document that has been marked up in (X)HTML. Write style rules for how you d like certain elements to look. Attach the style rules to the document. Webpage Design/ by Chin-Hsiang Lin 4
Basic CSS Syntax ( 語法 ) selector { property: value;} 選擇器 { 樣式元素 : 元素值 ;} selector { property1: value; property2: value; property3: value; } Declaration Block Webpage Design/ by Chin-Hsiang Lin 5
Selectors ( 選擇器 ) The most basic type of selector is called element type selector ( 標籤選擇器 ). h1 { color: #669900; } p { font-size: small; font-family: Arial, Helvetica, 華康儷中黑 ; line-height: 1.54332; } Webpage Design/ by Chin-Hsiang Lin 6
Declarations ( 規則宣告 ) The declaration is made up of property/value pair. There can be more than one declaration in a single rule: p { font-size: small; } font-family: Arial, Helvetica, Century Gothic, sans-serif; line-height: 1.54332; Webpage Design/ by Chin-Hsiang Lin 7
Attaching the Styles to your document <head> <title> Your title of Webpage </title> <style type= text/css > your style rules go here. </style> </head> Webpage Design/ by Chin-Hsiang Lin 8
Working with (X)HTML <head> <style type= text/css > <body> <h1>my Webpage</h1> h1 { font-family: Georgia, Times New Roman, serif; <p>this is my first page designing with text-editor.</p> <h1>my Design Interests</h1> font-size: 1.45em; color: #ff0000; line-height: 2em; } : : </style> <p>i got lots of to do with design, and my design interests are well focused on animation</p> : : </body> </html> </head> Webpage Design/ by Chin-Hsiang Lin 9
Units using in CSS 類別單位意義 相對單位 ( 多用於顯示器 ) 絕對單位 ( 多用於列印 ) em ex px 目前大寫 "M" 的高度 目前小寫 "x" 的高度 pixel, 相對畫素 解析度 % 相對於目前設定的百分比 ( 可超過 100%) cm mm in pt pc 公分 (centimeters);1cm = 10mm 公釐 (millimeters) 英吋 (inchs);1in = 2.54cm 點 (poits);1pt = 1/72in 大點 ;picas;1pc = 12pt = 4.23mm Webpage Design/ by Chin-Hsiang Lin 10
Color Representation 範例說明範圍 #ff23c7 長十六進位 :R=ff, G=23, B=c7 #000000~#ffffff #f30 短十六進位 :R=f, G=3, B=0, 相當於長十六進位的 #ff3300 #000~#fff rgb(24,138,244) rgb(42%,50%,16%) 十進位,R=24, G=138, B=244 百分比,R=42%, G=50%, B=16% rgb(0,0,0) ~ rgb(255,255,255) rgb(0%,0%,0%) ~ rgb(100%,100%,100%) Webpage Design/ by Chin-Hsiang Lin 11
Inheritance Types of CSS Weight of style Grouped Selection CSS 最最最重要的概念 THE BIG CONCEPTS OF CSS Webpage Design/ by Chin-Hsiang Lin 12
Inheritance ( 繼承 ) Just as parents pass down traits to their children, (X)HTML elements pass down certain style properties to the elements they contain. Webpage Design/ by Chin-Hsiang Lin 13
Ex. Document Structure <html> <head> <title> </title> <style> </style> </head> <body> <h1> </h1> <p> <img / > </p> <p> <em> </em> </p> <table> <em> </em> </table> </body> </html> Webpage Design/ by Chin-Hsiang Lin 14
html head body title style h1 p p table img em em Webpage Design/ by Chin-Hsiang Lin 15
html head body title style h1 p p table body { font-family: Arial, Verdana; font-size: 85%; line-height: 2; } img em em Webpage Design/ by Chin-Hsiang Lin 16
html head body title style h1 p p table p { color: red; font-size: 78%; line-height: 1; } img em em Webpage Design/ by Chin-Hsiang Lin 17
Weight of Style ( 權重 ) The closer the style sheet is to the content, the more weight is given. In-line style Embedded style External style Webpage Design/ by Chin-Hsiang Lin 18
Style Sheet Hierarchy ( 階級 ) Marked!important by reader Marked!important by author Inline style information Embedded style sheets Imported style sheets Linked external style sheet User style settings Browser default Webpage Design/ by Chin-Hsiang Lin 19
Styles in conflicts ( 衝突 ) If there are conflicts within style rules of identical weight, whichever one comes last in the list wins. Ex.: <style type= text/css > p { color: red;} p { color: blue;} p { color: green;} </style> Webpage Design/ by Chin-Hsiang Lin 20
Grouped Selectors ( 群化 ) CSS allows you group the selectors into one rule by separating them with commas: h1 { border: 1px solid blue; } h2 { border: 1px solid blue; } p { border: 1px solid blue; } em { border: 1px solid blue; } img { border: 1px solid blue; } = h1, h2, p, em, img { border: 1px solid blue; } Webpage Design/ by Chin-Hsiang Lin 21
Keep Learning! 多練習就會熟悉, 加油! Chin-Hsiang Lin Webpage Design/ by Chin-Hsiang Lin