CSS
長這樣
結合 CSS 技術到 HTML 中 CSS (Cascading Style Sheet) 樣式表, 主要用來裝飾 編排網頁內容, 與 HTML 相輔相成 HTML 用來表示結構性的資料,CSS 決定網頁的樣式 ( 顏色 文字大小 位置等等 )
為什麼要 CSS HTML 的 <font> 標籤可以決定文字的顏色和大小,<b> <i> <u> 等標籤都有改變文字樣式的能力 在 CSS 尚未被廣泛採用之前, 這些 HTML 標籤是主要決定網頁樣式的方法
為什麼要 CSS 隨著分工細膩, 我們希望把美化網頁的工作和設計 HTML 文件的工作獨立分開運作 如果能讓同樣的 HTML 文件, 透過套用不同的樣式來達到改變外觀的效果, 那是最理想的 => CSS 可以做得到 例如 : 部落格樣式
CSS 語法 CSS Syntax CSS 語法的基本構成是一個 CSS 屬性名稱搭配屬性的內容 寫法如下 : color:red 可以一次定義很多屬性, 中間用分號隔開 color:red;font-size:14px Source: W3Schools
在 HTML 中加入 CSS 最簡單的方式就是為 HTML 標籤加上一個 style 屬性 style 屬性的內容必須以 CSS 語法撰寫, 用法如下 <div style="css 語法 ">Hello World</div> Example <div style="color:red;font-size:14px">hello World</div>
使用時機 所有 HTML 標籤都可以套用 CSS 語法,CSS 所描述的特性會套用在該標籤的內文中 <h3 style="color:red"> 這是寫在 h3 標籤中 CSS 屬性的套用範圍 </h3>
font 相關常用屬性 font-size: 字型大小, 可使用的單位包括 px, pt, em, % font-size:14px font-size:120% font-size:1.2em font-weight: 粗細, 可控制字型粗細 font-weight:bold font-weight:normal
粗體與斜體 font-style: normal italic font-weight: normal bold 數字
底線 刪除線 大寫小字 text-decoration: none underline line-through font-variant: small-caps
text 相關常用屬性 text-decoration: 文字裝飾 text-decoration:underline text-decoration:overline text-decoration:line-through text-align: 對齊方式 text-align:left text-align:center text-align:right
Text-shadow: 右位移下位移模糊程度顏色
font-family 如果字體在使用者的電腦裡沒有 用下一個 最後一個通常放 Generic font family 常用之 font-family
Web Font Server 提供字體給 Browser 來抓 通常抓下來不能直接裝在電腦上, 只能顯示 Google Web Font 英文的 Webfont @font-face generator 上傳字型檔後, 會轉檔為 web font 並提供範例
大小與行高 font-size: 12px line-height: 1.4 font-family: Arial, sans-serif line-height: 純數字 ( 幾倍於字體大小 ) 或數字 px 了解更多
實機練習 小試牛刀, 利用 CSS 控制網頁的文字大小和文字樣式
color 相關屬性 color: 設定文字顏色, 可以用代表顏色的英文字或是色碼 ( 以 # 開頭 ) color:green color:#0000ff background-color: 設定區塊背景顏色 background-color:red background-color:#008800
前景色彩
背景色彩
Color Table
Color Table
樣式選擇器 目前為止我們只會在 HTML 標籤中加入 style 屬性以套用 CSS 樣式 我們有更方便的選擇 : 利用 HTML 標籤的 class 屬性 class 選擇器
利用 class 選擇器 ( 屬性 ) 1. 為你想要套用樣式的標籤設定 class 屬性 <div class="title">my Homepage</div> 2. 將 CSS 文件透過一個特別的標籤 <style> 撰寫在 <head> 和 </head> 之間 <style type="text/css"> div{color: blue;} </style>
利用 class 選擇器 用. 加上 class 屬性的名稱, 再用大括弧包住 CSS 語法 括弧中的 CSS 是給 class 設定為該名稱的 HTML 標籤用的 <style type="text/css">.title{ font-size:25px;font-weight:bold }.subtitle{font-size:20px} </style>
CSS 樣式規則與選擇器 <style> 可放在 <head> 或 <body> 均可
在 <head> 元素裡面嵌入樣式表
CSS Box Model 每個 HTML 標籤都代表一個方型的作用區塊, 我們稱為 Box,CSS 對這個作用區塊可以做非常細緻的控制 以下先了解 CSS 對於 Box 作用區塊的設計和術語, 接著在一一介紹相關的屬性
Box 與 display 屬性 排文字與元素時 蓋成長方形 box
CSS Box Model margin, border, padding 圖片來源 :W3C Box Model
Box Model Box Model 是 CSS 針對 HTML 元素所產生的矩形方塊, 由內容 (content) 留白 (padding) 框線 (border) 與邊界 (margin) 所組成, 如下圖
心室肥大 注意.heart 的寬度與高度
margin 相關屬性 margin: 設定邊界, 可搭配 left, right, top, bottom 使用 margin:5px margin-top:5px margin-left:3px margin-right:10px margin-bottom:5px
邊界
padding 相關屬性 padding: 設定留白, 可搭配 left, right, top, bottom 使用 padding:5px padding-top:5px padding-left:3px padding-right:10px padding-bottom:5px
留白屬性
border 相關屬性 border: 設定邊框 此屬性的內容較複雜, 有三個部分, 邊框粗細 (width) 邊框樣式 (style), 邊框顏色 (color) border:1px solid #ff0000 border-width:1px border-style:solid border-color:#ff0000
border-top-style border-bottom-style border-left-style border-right-style border-style border-style ( 框線樣式 )
border-color ( 框線色彩 ) 我們可以使用下列屬性指定 HTML 元素的框線色彩 : border-top-color border-bottom-color border-left-color border-right-color border-color
border-width ( 框線寬度 ) 我們可以使用下列屬性指定 HTML 元素的框線寬度 : border-top-width border-bottom-width border-left-width border-right-width border-width
單位 px : 1px = 螢幕上的像素高 em : 1em = 當前字型大小 % : 父元素值的百分比
小提醒 屬性中如果有關長度 寬度 高度 或者是粗細的資料, 請務必加上單位 padding:5px 正確,padding:5 不正確 某些瀏覽器接受不加單位, 會預設為 px 但在 Firefox 則會出現錯誤
課堂練習 請利用 CSS 樣式, 搭配表格, 做出以下畫面中的效果
CSS Display 每個 HTML 標籤都會有一個顯示模式, 在 CSS 中可用 display 屬性控制, 這個屬性主要分為兩種,block 和 inline display:block 標籤區塊會佔據整行的空間 會自動換行 display:inline 標籤區塊在行內, 不會自動換行
display Property <p> 的 box 呈上下排列 <em> 的 box 排在字裡行間 和 display 有關 預設 display: block; <p>,<h1>~<h6>,<div> 預設 display: inline; <em>,<strong>,<span>
CSS Display 每個 HTML 標籤都有預設的顯示模式 常見的如下 預設 block: <div> <p> <h1> ~ <h6> <table> <form> ( 自動換行 ) 預設 inline: <span> <a> <img> <b> <i> <u> ( 不會自動換行 ) 無論預設值是甚麼, 每個標籤都可以透過 CSS 強制修改成你想要的顯示模式
display 的值
其他 display 值 none: 連 box 都沒有 完全沒有容身之處 table 系列 : 當成 table 來排版, 見 SPEC
border 與 outline border 會佔有空間 推開周圍元素 ;outline 不會
width 和 height 可利用 width 和 height 屬性設定標籤作用區塊的寬高 只有顯示模式為 block 的標籤才有用 ( 此規則為標準作法, 某些瀏覽器允許顯示模式為 inline 的標籤設定寬高, 但不建議使用 ) width:100px;height:200px
width height top bottom left right (Block Box 的寬度與高度 上下左右位移量 )
max-width min-width max-height min-height (Block Box 的寬度與高度的最大值及最小值 )
利用 CSS 為標籤區塊定位 每個 HTML 標籤都佔有一個區塊, 如何為這些區塊排版呢? 最常見的就是按照 HTML 文件中標籤出現的先後順序由上到下 由左至右排 而我們還有其他方式
利用 CSS 為標籤區塊定位 我們可以利用 CSS 的 position 屬性指定標籤的定位模式 有以下幾種定位模式可以選擇 其語法如下 : static: 預設的定位模式 ( 由上到下 由左到右 ) relative: 相對於預設的位置, 作位移 absolute: 絕對定位, 直接指定標籤區快出現的座標位置
使用絕對定位 將 position 設定為 absolute, 並且利用 top, left 屬性指定座標位置 position:absolute;top:50px;left:100px
使用絕對定位 50px 100px position:absolute; top:50px; left:100px;
使用相對定位 將 position 設定為 relative, 並且利用 top, left 屬性指定與原先位置的差距 Position:relative;top:-20px;left:60px 60px position:relative; top:-20px; left:60px; 20px
使用相對定位
實機操作 練習使用絕對定位及相對定位功能
z-index ( 重疊順序 )
設定標籤區塊的背景 background-color: 設定背景顏色 background-image: 設定背景圖片 background-image:url("bg.gif"); Background-position: 設定背景圖片位置, 先設定上下對齊 再設定左右 background-position:top left; background-position:top center; background-position:bottom left;
背景圖片
設定標籤區塊的背景 background-repeat: 設定重複填滿模式, 圖片比區塊小時, 可以設定如何用現有的圖片填滿區塊 background-repeat:no-repeat background-repeat:repeat-x background-repeat:repeat-y background-repeat:repeat background-attachment: 設定圖片是否固定 background-attachment:scroll / fixed
background-repeat ( 背景圖片重複排列方式 )
background-attachment ( 背景圖片是否隨內容捲動 )
設定標籤區塊的背景 利用 background 屬性一次指定所有跟背景相關的屬性 background: color image repeat attachment position background:#ffffff url("bg.gif") repeat-x scroll top left;
漸層表示法 CSS 3 新增下列漸層表示法 (gradient notation): linear-gradient() : 指定線性漸層 radial-gradient() : 指定放射狀漸層 repeating-linear-gradient() : 指定重複線性漸層 repeating-radial-gradient() : 指定重複放射狀漸層
http://www.colorzilla.com/gradient-editor/ 課堂練習 設定背景圖片與漸層練習 linear-gradient(to bottom, #xxxxxx 0%,#xxxxxx50%,#xxxxxx 51%,#xxxxxx 100%);
object-fit ( 配合 Box 調整物件大小 ) fill contain
引入外部的 CSS 樣式表 實務上, 我們經常把 CSS 的程式碼從原本的 HTML 網頁中分開 獨立成一個新的檔案 使用 <link> 這個標籤, 一般會放在 <head> 標籤的內文中, 作法如下 <link rel="stylesheet" type="text/css" href="css 檔案的位址 " >
body.css 引入外部的 CSS 樣式表 linkcss3.html
課堂練習 練習樣式選擇器 將 CSS 樣式表分開 引入外部的 CSS 樣式表
使用 CSS 看起來怪怪的嗎?
Chrome DevTool Elements 頁籤 Styles Computed Styles 根據 selector 分類規則 點兩下可修改 根據 CSS property 分類, 方便追蹤
特殊值 inherit 所有 CSS 屬性, 均可設為 inherit 部分 CSS 屬性預設不會繼承自父元素, 明確指定 inherit 才會繼承
特殊值 inherit( 續 ) input,textarea,select,button 等 replaced element, 樣式不會自動 inherit 自父元素
總整理 tag,.class, #id
進階版 tag,.class, #id div.tall 有 tall class 之 div #target.highlight 有 lightlight class 且 ID 為 target 之 element.box.widget 同時有 box 和 widget 兩個 class 之 element
多個 Selector 套用相同樣式 用逗號, 將 Selector 分開
Descendant & Child Selector.root div :.root 的子孫中為 div 者.root>div :.root 的孩子裡為 div 者
Universal Selector *: 任意元素.root *:.root 的子孫
Attribute Selector 中括號 ; [ 屬性運算子值 ] https://developer.mozilla.org/en- US/docs/Web/CSS/Attribute_selectors
Pseudo-Class 依狀態套用的 假的 class 幾乎所有元素都可用 :hover a 元素 ::link, :visited, :active 避免定義相互覆蓋的順序 :LoVe HAte
Pseudo-Class 老大 :first-child 老么 :last-child 老 N :nth-child()
Pseudo-Element 需有 content 屬性 ::before 像是一個 span 元素加在 start tag 之後 內容之前 ::after 像是一個 span 元素加在 end tag 之前 內容之後 亦可只用一個冒號 (:before, :after)
Sibling Selector :checked : 被勾選 之 pseudo-class input + * 選出 input 的最大的弟弟妹妹 input ~ * 選出 input 的所有弟弟妹妹
小結 Basic Selector tag, #id,.class, [attr], * Pseudo-elements & Pseudo-classes :before, :hover Combinator A B, A>B, A+B, A~B MDN Reference
兩個定義打架 Value 不同的兩個定義, 被套用在同一個元素上時
Source: CSS Tricks CSS Specificity Specificity:Selector 精準與否 用字典順序比較 Specificity Specificity 相同的話, 後定義者蓋過之前定義者
打架調解委員會 此 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 的定義
Takeaway Specificty 越小越好 盡量用可重複使用的 class ID 用於分開不重複區塊 Decendent / Child selector 別太深
小練習 請將本範例中的 css 檔案中加入一名為 abc 的 id 並將顏色設定為綠色 看其文字顏色是否會變綠色
Media Queries Media Queries 就是要在支援 CSS3 的瀏覽器中才能正常工作 Media Queries 的套用方法千變萬化要套用在什麼樣的裝置中, 都可以自己來定義 http://mediaqueri.es/ http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Media Query 給不同 device 不同的 CSS 實例 : 履歷 Web Designer Wall 精選
螢幕寬度 max-width: Npx 就是 width <= Npx min-width: Npx 就是 Npx <= width