做自己 好自在

這是看書+查網頁所記的筆記 目前還沒有很完整 之後慢慢補上
設計人學網頁 : HTML+CSS / 李迺雄著


條列格式<"li>(list item)
也就是縮排
一.<"ul>無次序排列(unordered list)
Ex
<"ul type=(circle(小圓圈)/square(小方點)/disc(小圓點))>(此為段首)
<"li>項一
<"li>項二
…..
<"/ul>
解說:
<"li> (每一項的起頭) 不需要 有獨佔一行特性 加上<"p><"br> 均無效"
如果想在2行間空一行 要用2個<"br>



二.<"ol>依序條列(ordered list)
Ex
<"ol tyoe=(1/a/A/i/I) start=1>
<"li>項一
<"li>項二
…..
<"/ol>
<"ol>可以設定開始的序號


三.<"dl>定義條列
Ex
<"dl>
<"dt>項一
<"dd>項一的相關內容
<"dt>項2
<"dd>項2的相關內容
……
<"/dl>


四.css結構

Class selector(次級 selector)設定時前面加.英文句點 名稱可以自訂
次級 selector為selector的補充設定或外加設定可以被任何html tag使用
Ex


例如
一個文章裡紅色的字有的是12有的是14大小
可以設.one {color:red ; font-size:12pt} .two {color:red ; font-size:14pt}
如此依來可以省掉很多html程式碼
用的時候 <"p class=one">123456789<"/p">
<"p class=two">1111111111"<"/p">


五.區塊家族:
屬性分為4大類:background padding(內邊距) border(邊界) margin(外邊距:區塊與瀏覽視窗邊緣距離)

Border(邊界)內定為none故沒指定就不會顯示出來
Border 綜合設定邊界 (可同時設定border寬度 顏色 樣式)
{ Border :solid}
Border-bottom綜合設定下邊界
Border-left綜合設定左邊界
Border-right綜合設定右邊界
Border-top綜合設定上邊界
(設定單一樣式)
Border-style 設定邊界樣式
Border-color 設定邊界顏色
Border-width綜合設定邊界寬
Border-bottom-width設定下邊界寬
Border-left-width設定左邊界寬
Border-right-width 設定右邊界寬
Border-top-width 設定上邊界寬

Border-style
Solid 實線
Dashed 虛線
Dotted 點線
Double 雙線
Inset 立體
Outset 立體
Groove 立體
Ridge 立體
None 無(內定值)

Margin and padding
Margin(外邊距:設定自border 外緣起要留白的距離) and padding(內邊距:border的內緣與內容物之間留空 一般部會留白 延伸為元素背景色)
這2者用法完全相同
Padding
Padding-bottom
Padding-left
Padding-right
Padding-top

margin
margin-bottom
margin -left
margin -right
margin -top


可以使用css長度單位 內定單位pixel 也可使用%
Padding內定值為0 可以設負值 會固守0下限 堅持不出界
margin為auto由瀏覽器決定 會使元素溢出視窗
Ex
Body {margin:0 ; padding:0 }

Background(背景)
Background-color (設定背景色)

Background-image (設定背景圖像)
Ex Background-image:url(圖檔位置)



Background-repeat (設定背景圖像排列)
如果不希望影像一成不變的鋪滿整個背景 Background-repeat 可指定影像如何重複:
Repeat 雙向重複(預設)
Repeat-x 只在水平方向重複
Repeat-y只在垂直方向重複
No- Repeat 不重複 只出現一次


Background-attachment (設定背景圖像捲動方式 設定背景影像是否隨著視窗捲動)
Scroll:隨著捲動
Fixed:固定在特定位子
{ Background-attachment : Fixed }


Background-position (設定背景圖像位置)
1.座標Background-position:50(x) 100(y)
(如果想用鋪磁磚 刪去body的background-repeat設定 其他磁磚匯聚續鋪滿)
2.百分比: Background-position:25% 75%
以背景圖的中心對準body內容的相同比例中心
Ex : 0% 50% 視窗左緣中間
3.可把前面2種混用
4.文字: Background-position:top/right/bottom/left/center
Background (綜合設定背景圖像)