CSS

Size: px

Start display at page:

Download "CSS"

鸯绎宿
2 years ago
Views:

1 CSS

2 長這樣

3 結合 CSS 技術到 HTML 中 CSS (Cascading Style Sheet) 樣式表, 主要用來裝飾編排網頁內容, 與 HTML 相輔相成 HTML 用來表示結構性的資料,CSS 決定網頁的樣式 ( 顏色文字大小位置等等 )

4 為什麼要 CSS HTML 的 <font> 標籤可以決定文字的顏色和大小,<b> <i> <u> 等標籤都有改變文字樣式的能力在 CSS 尚未被廣泛採用之前, 這些 HTML 標籤是主要決定網頁樣式的方法

5 為什麼要 CSS 隨著分工細膩, 我們希望把美化網頁的工作和設計 HTML 文件的工作獨立分開運作如果能讓同樣的 HTML 文件, 透過套用不同的樣式來達到改變外觀的效果, 那是最理想的 => CSS 可以做得到例如 : 部落格樣式

6 CSS 語法 CSS Syntax CSS 語法的基本構成是一個 CSS 屬性名稱搭配屬性的內容寫法如下 : color:red 可以一次定義很多屬性, 中間用分號隔開 color:red;font-size:14px Source: W3Schools

7 在 HTML 中加入 CSS 最簡單的方式就是為 HTML 標籤加上一個 style 屬性 style 屬性的內容必須以 CSS 語法撰寫, 用法如下 <div style="css 語法 ">Hello World</div> Example <div style="color:red;font-size:14px">hello World</div>

8 使用時機所有 HTML 標籤都可以套用 CSS 語法,CSS 所描述的特性會套用在該標籤的內文中 <h3 style="color:red"> 這是寫在 h3 標籤中 CSS 屬性的套用範圍 </h3>

9 font 相關常用屬性 font-size: 字型大小, 可使用的單位包括 px, pt, em, % font-size:14px font-size:120% font-size:1.2em font-weight: 粗細, 可控制字型粗細 font-weight:bold font-weight:normal

11 粗體與斜體 font-style: normal italic font-weight: normal bold 數字

12 底線刪除線大寫小字 text-decoration: none underline line-through font-variant: small-caps

13 text 相關常用屬性 text-decoration: 文字裝飾 text-decoration:underline text-decoration:overline text-decoration:line-through text-align: 對齊方式 text-align:left text-align:center text-align:right

15 Text-shadow: 右位移下位移模糊程度顏色

16 font-family 如果字體在使用者的電腦裡沒有用下一個最後一個通常放 Generic font family 常用之 font-family

17 Web Font Server 提供字體給 Browser 來抓通常抓下來不能直接裝在電腦上, 只能顯示 Google Web Font 英文的 generator 上傳字型檔後, 會轉檔為 web font 並提供範例

18 大小與行高 font-size: 12px line-height: 1.4 font-family: Arial, sans-serif line-height: 純數字 ( 幾倍於字體大小 ) 或數字 px 了解更多

19 實機練習小試牛刀, 利用 CSS 控制網頁的文字大小和文字樣式

20 color 相關屬性 color: 設定文字顏色, 可以用代表顏色的英文字或是色碼 ( 以 # 開頭 ) color:green color:#0000ff background-color: 設定區塊背景顏色 background-color:red background-color:#008800

21 前景色彩

22 背景色彩

23 Color Table

24 Color Table

25 樣式選擇器目前為止我們只會在 HTML 標籤中加入 style 屬性以套用 CSS 樣式我們有更方便的選擇 : 利用 HTML 標籤的 class 屬性 class 選擇器

26 利用 class 選擇器 ( 屬性 ) 1. 為你想要套用樣式的標籤設定 class 屬性 <div class="title">my Homepage</div> 2. 將 CSS 文件透過一個特別的標籤 <style> 撰寫在 <head> 和 </head> 之間 <style type="text/css"> div{color: blue;} </style>

27 利用 class 選擇器用. 加上 class 屬性的名稱, 再用大括弧包住 CSS 語法括弧中的 CSS 是給 class 設定為該名稱的 HTML 標籤用的 <style type="text/css">.title{ font-size:25px;font-weight:bold }.subtitle{font-size:20px} </style>

29 CSS 樣式規則與選擇器 <style> 可放在 <head> 或 <body> 均可

30 在 <head> 元素裡面嵌入樣式表

31 CSS Box Model 每個 HTML 標籤都代表一個方型的作用區塊, 我們稱為 Box,CSS 對這個作用區塊可以做非常細緻的控制以下先了解 CSS 對於 Box 作用區塊的設計和術語, 接著在一一介紹相關的屬性

32 Box 與 display 屬性排文字與元素時蓋成長方形 box

33 CSS Box Model margin, border, padding 圖片來源 :W3C Box Model

34 Box Model Box Model 是 CSS 針對 HTML 元素所產生的矩形方塊, 由內容 (content) 留白 (padding) 框線 (border) 與邊界 (margin) 所組成, 如下圖

35 心室肥大注意.heart 的寬度與高度

36 margin 相關屬性 margin: 設定邊界, 可搭配 left, right, top, bottom 使用 margin:5px margin-top:5px margin-left:3px margin-right:10px margin-bottom:5px

37 邊界

38 padding 相關屬性 padding: 設定留白, 可搭配 left, right, top, bottom 使用 padding:5px padding-top:5px padding-left:3px padding-right:10px padding-bottom:5px

39 留白屬性

40 border 相關屬性 border: 設定邊框此屬性的內容較複雜, 有三個部分, 邊框粗細 (width) 邊框樣式 (style), 邊框顏色 (color) border:1px solid #ff0000 border-width:1px border-style:solid border-color:#ff0000

41 border-top-style border-bottom-style border-left-style border-right-style border-style border-style ( 框線樣式 )

42 border-color ( 框線色彩 ) 我們可以使用下列屬性指定 HTML 元素的框線色彩 : border-top-color border-bottom-color border-left-color border-right-color border-color

43 border-width ( 框線寬度 ) 我們可以使用下列屬性指定 HTML 元素的框線寬度 : border-top-width border-bottom-width border-left-width border-right-width border-width

44 單位 px : 1px = 螢幕上的像素高 em : 1em = 當前字型大小 % : 父元素值的百分比

45 小提醒屬性中如果有關長度寬度高度或者是粗細的資料, 請務必加上單位 padding:5px 正確,padding:5 不正確某些瀏覽器接受不加單位, 會預設為 px 但在 Firefox 則會出現錯誤

46 課堂練習請利用 CSS 樣式, 搭配表格, 做出以下畫面中的效果

47 CSS Display 每個 HTML 標籤都會有一個顯示模式, 在 CSS 中可用 display 屬性控制, 這個屬性主要分為兩種,block 和 inline display:block 標籤區塊會佔據整行的空間會自動換行 display:inline 標籤區塊在行內, 不會自動換行

48 display Property <p> 的 box 呈上下排列 <em> 的 box 排在字裡行間和 display 有關預設 display: block; <p>,<h1>~<h6>,<div> 預設 display: inline; <em>,<strong>,<span>

49 CSS Display 每個 HTML 標籤都有預設的顯示模式常見的如下預設 block: <div> <p> <h1> ~ <h6> <table> <form> ( 自動換行 ) 預設 inline: <span> <a> <img> <b> <i> <u> ( 不會自動換行 ) 無論預設值是甚麼, 每個標籤都可以透過 CSS 強制修改成你想要的顯示模式

50 display 的值

51 其他 display 值 none: 連 box 都沒有完全沒有容身之處 table 系列 : 當成 table 來排版, 見 SPEC

52 border 與 outline border 會佔有空間推開周圍元素 ;outline 不會

53 width 和 height 可利用 width 和 height 屬性設定標籤作用區塊的寬高只有顯示模式為 block 的標籤才有用 ( 此規則為標準作法, 某些瀏覽器允許顯示模式為 inline 的標籤設定寬高, 但不建議使用 ) width:100px;height:200px

54 width height top bottom left right (Block Box 的寬度與高度上下左右位移量 )

55 max-width min-width max-height min-height (Block Box 的寬度與高度的最大值及最小值 )

56 利用 CSS 為標籤區塊定位每個 HTML 標籤都佔有一個區塊, 如何為這些區塊排版呢? 最常見的就是按照 HTML 文件中標籤出現的先後順序由上到下由左至右排而我們還有其他方式

57 利用 CSS 為標籤區塊定位我們可以利用 CSS 的 position 屬性指定標籤的定位模式有以下幾種定位模式可以選擇其語法如下 : static: 預設的定位模式 ( 由上到下由左到右 ) relative: 相對於預設的位置, 作位移 absolute: 絕對定位, 直接指定標籤區快出現的座標位置

58 使用絕對定位將 position 設定為 absolute, 並且利用 top, left 屬性指定座標位置 position:absolute;top:50px;left:100px

59 使用絕對定位 50px 100px position:absolute; top:50px; left:100px;

60 使用相對定位將 position 設定為 relative, 並且利用 top, left 屬性指定與原先位置的差距 Position:relative;top:-20px;left:60px 60px position:relative; top:-20px; left:60px; 20px

61 使用相對定位

62 實機操作練習使用絕對定位及相對定位功能

63 z-index ( 重疊順序 )

64 設定標籤區塊的背景 background-color: 設定背景顏色 background-image: 設定背景圖片 background-image:url("bg.gif"); Background-position: 設定背景圖片位置, 先設定上下對齊再設定左右 background-position:top left; background-position:top center; background-position:bottom left;

65 背景圖片

66 設定標籤區塊的背景 background-repeat: 設定重複填滿模式, 圖片比區塊小時, 可以設定如何用現有的圖片填滿區塊 background-repeat:no-repeat background-repeat:repeat-x background-repeat:repeat-y background-repeat:repeat background-attachment: 設定圖片是否固定 background-attachment:scroll / fixed

67 background-repeat ( 背景圖片重複排列方式 )

68 background-attachment ( 背景圖片是否隨內容捲動 )

69 設定標籤區塊的背景利用 background 屬性一次指定所有跟背景相關的屬性 background: color image repeat attachment position background:#ffffff url("bg.gif") repeat-x scroll top left;

70 漸層表示法 CSS 3 新增下列漸層表示法 (gradient notation): linear-gradient() : 指定線性漸層 radial-gradient() : 指定放射狀漸層 repeating-linear-gradient() : 指定重複線性漸層 repeating-radial-gradient() : 指定重複放射狀漸層

72 課堂練習設定背景圖片與漸層練習 linear-gradient(to bottom, #xxxxxx 0%,#xxxxxx50%,#xxxxxx 51%,#xxxxxx 100%);

73 object-fit ( 配合 Box 調整物件大小 ) fill contain

74 引入外部的 CSS 樣式表實務上, 我們經常把 CSS 的程式碼從原本的 HTML 網頁中分開獨立成一個新的檔案使用 <link> 這個標籤, 一般會放在 <head> 標籤的內文中, 作法如下 <link rel="stylesheet" type="text/css" href="css 檔案的位址 " >

75 body.css 引入外部的 CSS 樣式表 linkcss3.html

76 課堂練習練習樣式選擇器將 CSS 樣式表分開引入外部的 CSS 樣式表

77 使用 CSS 看起來怪怪的嗎?

78 Chrome DevTool Elements 頁籤 Styles Computed Styles 根據 selector 分類規則點兩下可修改根據 CSS property 分類, 方便追蹤

79 特殊值 inherit 所有 CSS 屬性, 均可設為 inherit 部分 CSS 屬性預設不會繼承自父元素, 明確指定 inherit 才會繼承

80 特殊值 inherit( 續 ) input,textarea,select,button 等 replaced element, 樣式不會自動 inherit 自父元素

81 總整理 tag,.class, #id

82 進階版 tag,.class, #id div.tall 有 tall class 之 div #target.highlight 有 lightlight class 且 ID 為 target 之 element.box.widget 同時有 box 和 widget 兩個 class 之 element

83 多個 Selector 套用相同樣式用逗號, 將 Selector 分開

84 Descendant & Child Selector.root div :.root 的子孫中為 div 者.root>div :.root 的孩子裡為 div 者

85 Universal Selector *: 任意元素.root *:.root 的子孫

86 Attribute Selector 中括號 ; [ 屬性運算子值 ] US/docs/Web/CSS/Attribute_selectors

87 Pseudo-Class 依狀態套用的假的 class 幾乎所有元素都可用 :hover a 元素 ::link, :visited, :active 避免定義相互覆蓋的順序 :LoVe HAte

88 Pseudo-Class 老大 :first-child 老么 :last-child 老 N :nth-child()

89 Pseudo-Element 需有 content 屬性 ::before 像是一個 span 元素加在 start tag 之後內容之前 ::after 像是一個 span 元素加在 end tag 之前內容之後亦可只用一個冒號 (:before, :after)

90 Sibling Selector :checked : 被勾選之 pseudo-class input + * 選出 input 的最大的弟弟妹妹 input ~ * 選出 input 的所有弟弟妹妹

91 小結 Basic Selector tag, #id,.class, [attr], * Pseudo-elements & Pseudo-classes :before, :hover Combinator A B, A>B, A+B, A~B MDN Reference

92 兩個定義打架 Value 不同的兩個定義, 被套用在同一個元素上時

93 Source: CSS Tricks CSS Specificity Specificity:Selector 精準與否用字典順序比較 Specificity Specificity 相同的話, 後定義者蓋過之前定義者

94 打架調解委員會此 div 會被 selector.loud 和 div 選中兩 CSS 定義內均設有 color Specificity of.loud : 0,0,1,0 Specificity of div : 0,0,0,1 0,0,1,0 > 0,0,0,1 故套用.loud 對 color 的定義

95 Takeaway Specificty 越小越好盡量用可重複使用的 class ID 用於分開不重複區塊 Decendent / Child selector 別太深

96 小練習請將本範例中的 css 檔案中加入一名為 abc 的 id 並將顏色設定為綠色看其文字顏色是否會變綠色

97 Media Queries Media Queries 就是要在支援 CSS3 的瀏覽器中才能正常工作 Media Queries 的套用方法千變萬化要套用在什麼樣的裝置中, 都可以自己來定義

98 Media Query 給不同 device 不同的 CSS 實例 : 履歷 Web Designer Wall 精選

99 螢幕寬度 max-width: Npx 就是 width <= Npx min-width: Npx 就是 Npx <= width

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05