h1叫選擇器(selector)
color叫屬性(property)
red叫屬性值(value)
{}內叫宣告區塊(declaration block)
color:red;叫宣告(declaration)
CSS3 新增內容
| 新的選擇器 | 偽類選擇器、屬性選擇器、nth選擇器 |
| 區塊模式 | box-sizing有新屬性 定義範圍更直覺 |
| 背景與邊框 | 全螢幕背景、漸層背景、圓角邊框、圖片邊框... |
| 新的圖片屬性 | 圖片陰影、圖片剪裁 |
| 新的文字屬性 | 英文字強失斷行、陰影 |
| 多欄版面配置 | multiple columns |
| 2D/3D變形、動畫 |
CSS套用方法
| 套用方式 | 優先順序 | |
| 行內樣式 inline style |
直接寫在HTML的元素內
<span class="aaa" style="color:red;"></span>
|
1 |
| 內部樣式 internal style sheet |
直接寫在HTML文件 放在<head>內
<style type="text/css">
加了!important 會變最最優先 無法被行內樣式取代 (也可把important 放在行內樣式中) |
2 |
| 外部樣式 external style sheet |
將所有CSS樣式宣告在其他檔案中 在<head>內
<link href="css/style.css" rel="stylesheet">
| 3 |
| 匯入套用 imported |
可以在html也能在css中 但較常用在css文件內的import
HTML中：
<style type="text/css">
CSS中：
@import url(style.css);
|
CSS常用單位：
pt：印刷用字體尺寸
px：像素(pixel)
em：相對比例，對繼承父元素的比例
例：
body {font-size:2em;}
h1 {font-size:1em;}
h1實際大小會是1em*2=2em
%：相對比例，對繼承父元素比例
*預設值為1em=100%=12pt=16px
*px和em的換算線上工具：http://pxtoem.com
CSS常用合併寫法：
*四邊數值合併：padding、margin
padding:1px 2px 3px 4px;
(padding-top padding-right padding-bottom padding-left)
padding:1px 2px 3px;
(padding-top padding-right&left padding-bottom)
padding:1px 2px;
(padding-top&buttom padding-right&left;
padding:1px;
(padding-top&bottom&right&left)
margin是與外的距
| ↑ | ||
| ← | ★ | → |
| ↓ |
padding 是與內的距
| ↓ | ||
| → | ← | |
| ↑ |
*背景合併
background:#ccc url('../image/bg.jpg') no-repeat fixed left top;
#ccc是background-color
url()是background-image
no-repeat是background-repeat
fixed是background-attachmen 是否要跟著捲軸動
left top是background-position 背景圖位置
順序：background-color | background-image | background-repeat | background-attachmen | background-position
background-repeat
| repeat | 重複 預設 |
| repeat-x | 橫向重複(x軸) |
| repeat-y | 縱向重複(y軸) |
| no-repeat | 不重複 |
background-attachmen
| scroll | 跟著頁面捲動 預設 |
| fixed | 背景固定 |
background-position
| left top left center left bottom right top right center right bottom center top center center center bottom |
直接指定位置 |
| x%,y% | 指定圖片%位置 |
| x px, y px | 指定圖片px位置 |
*邊框合併 border
border:1px solid #ccc;
順序：border-width | border-style | border-color
border-style
| none | 無 |
| hidden | 隱藏 |
| dotted |
點線
|
| dashed |
虛線
|
| solid |
實線
|
| double |
雙線
|
| groove |
立體
|
| ridge |
立體
|
| inset |
立體
|
| outset |
立體
|
*文字樣式合併 font
font: italic normal bold 12px/20px Verdana;
順序：font-style | font-varian | font-weight | font-size/font-height | font-family
省略後 至少要保留font-size和font-family
font-style：normal(一般)、
italic(斜體)
、oblique(字體傾斜)font-variant：normal(一般)、small-caps(小寫)、groove(立體)
font-weight：normal(一般)、bold(粗體)、bolder(極粗體)、100~900(指定數值)
CSS3前綴
加了後browser才讀的到
Chrome/Safari: -webkit-
Firefox: -moz-
IE:-ms-
Opera: -o-
前綴檢查器：http://cssprefixer.appspot.com/ (寫好的css貼上去 會自行產生前綴)
也可用http://caniuse.com/ 按「Show all」看是否有減號(沒減號加了也沒用)
沒有留言:
張貼留言