• %：百分比
• in：英吋
• cm：厘公尺
• mm：公釐
• pt：磅(1pt等於1/72英吋)
• px：畫素(計算機螢幕上的乙個點)
• em：1em等於當前的字型尺寸，2em等於當前字型尺寸的兩倍，繼承父級元素的字型大小
• rem：與em類似，但是相對於根元素設定字型尺寸的倍數
樣式表中：
html
div
p html文件中：
aa bb
cc
顏色單位
• rgb(x,x,x)：rgb 值，如 rgb(255,0,0)
• rgb(x%,x%,x%)：rgb百分比值，如rgb(100%,0%,0%)
• #rrggbb：十六進製制數，如#ff0000
• #rgb：簡寫的十六進製制數，如#f00
• 表示顏色的英文單詞，如 red
• 尺寸屬性是用於設定元素的寬度和高度
– 單位一般為畫素或百分比
• 寬度屬性
– width
– max-width
– min-width
• 高度屬性
– height
– max-height
– min-height
邊框• 簡寫方式
– border:width style color;
• 單邊定義
– border-left/right/top/bottom:width style color;
• border-width
– border-left/right/top/bottom-width
• border-style
– border-left/right/top/bottom-style
• border-color
– border-left/right/top/bottom-color
邊框顏色，可設定為值 transparent（用於建立有寬度的不可見邊框）
框模型
• 框模型（box model）定義了元素框處理元素內容、內 邊距、邊框和外邊距的方式
• width 和 height 指內容區域的寬度和高度
• 增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸
#box
物件實際寬度 = 左側外邊距 + 左側邊框 + 左側內邊距 + 寬度 + 右側內邊距 + 右側邊框 + 右側外邊距
樣式表中：
div.box
html文件中：
圍繞在元素邊框周圍的空白區域是外邊距
– 會在元素外建立額外的空白
– 外邊距是透明的
外邊距 margin
– margin：value;
• 單邊設定
– margin-top/right/bottom/left：value;
• 外邊距的屬性值可能為px(畫素)，百分比(%)或自動(auto)，也可以為負值
預設情況下，以下 html 塊級元素都存在外邊距
– body
– h1,h2,h3,h4,h5,h6
– p…
• 宣告 margin 屬性，可以覆蓋預設樣式
body,p,div,h1,h2,h3,h4,h5,h6,pre
設定水平方向居中
內容區域和邊框之間的空間
– 會擴大元素邊框所占用的區域
div
border:2px solid red;
width:200px;
height:50px;
#d1
內邊距 padding
• 內邊距：內容與框線之間的距離
– padding：value;
• 內邊距屬性值可以為畫素、百分比，但不能為負數
• 單邊設定
– padding-top/right/bottom/left：value;
背景屬性
背景色 background-color 用於為元素設定背景色
– 接受任何合法的顏色值
– 可取值為 transparent
為元素背景設定一種純色
– 會填充元素的內容、內邊距和邊框區域
– 如果邊框有透明部分，會透過這些透明部分顯示出背景色。
div
border:2px dashed black;
width:200px;
height:50px;
background-color:#ccc;
背景background-image
• 預設值是 none，表示背景上沒有放置任何影象
• 如果需要設定乙個背景影象，需要用起始字母 url 附帶乙個影象的 url 值
– 可以是相對 url 或者絕對 url
body
background-image: url("image/bg_01.gif");
字型屬性
控制字型
• 指定字型
– font-family : value1,value2;
• 字型大小
– font-size : value;
• 字型加粗
– font-weight : normal/bold/value;
• 字型樣式
– font-style : normal/italic;
• 小型大寫字母顯示
– font-variant : normal/small-caps;
樣式表中:p
html文件中:
this is a paragraph.
字型屬性 font
• 字型屬性 font 用於把所有針對字型的屬性設定在乙個宣告中
• 為簡寫屬性，包含6個值，可以按順序設定
– font : font-style font-variant font-weight font-size
font-family;
– 不設定的值，則使用預設設定
控制文字格式• 文字顏色 color : value;
• 文字排列 text-align : left/right/center;
• 文字修飾 text-decoration : none/underline;
• 行高 line-height : value;
樣式表中:
div {
color : #ff0000 ;
text-align : left ;
text-decoration : underline ;
height:50px;
border : 1px solid black;
div {
color : #ff0000 ;
text-align : left ;
text-decoration : underline ;
height:50px;
border:1px solid black;
line-height:50px;
html文件中:
div中的文字
屬性 css 尺寸 height
1.obj height value height 中可以值 可以是數字形式也可以是字串形式。如果是數字形式那麼預設單位會是px obj height function index,value 其中index是當前物件的索引value是當前物件的高度 height的計算區域是 不包含padding，...
CSS樣式 顏色和尺寸
color background color rgb 0,255,0 background color rgba 0,255,0,0.5 background color hsl 240,50 50 background color hsla 240,100 50 0.5 background co...
CSS樣式屬性
position用來設定元素的定位型別，有absolute 絕對定位 relative 相對定位 static 靜態定位，預設值 fixed 固定定位 四種。static 預設。位置設定為 static 的元素，它始終會處於頁面流給予的位置 static 元素會忽略任何 top bottom lef...