HTML/CSS

Font

網頁製作中除了之前介紹的圖片、排版等，必定會用到文字，在word上有的基本字型設定，在CSS都可以做到

font-family:Helvetica,Arial;   --設定文字字體，要注意的是如果使用者沒有第一個字體會套用下一個字體，所有可多設定幾個字體作為備用

font-size:20px;   --設定文字大小，屬性如下

• 固定數值15px、1em、1.2cm
• small(小)、large(大)
• 120%(比上一層的120%)、smaller(比上一層更小)、larger(比上一層更大)

font-weight:bold;

• normal  --正常
• bold      --粗體
• bolder   --比粗體更粗
• lighter   --細體
• 100,200...,900   --粗度

font-style:italic;   --設定文字的樣式

• normal     --正常
• italic        --斜體
• oblique    --傾斜

font-transform:uppercase;    --設定英文單字的大小寫

• uppercase    --所有英文單字字母都是大寫
• lowercase    --所有英文單字字母都是小寫  
• capitalize     --英文單字的第一個字母是大寫，其餘是小寫

line-height: 1;   --設定文字行間距

• normal    --預設值 
• 1、2...    --字體大小乘以此數值設定為行高 
• 25px       --兩行間距20px 
• 120%      --字體大小乘以此數值設定為行高

text-decoration:underline;    --替文字加上特效

• none              --預設值，沒有特效
• overline         --增加上線
• underline       --增加底線
• line-through   --增加刪除線

text-align:center;     --設定文字的對齊

• left         --靠左對齊
• right       --靠右對齊
• center    --置中對齊
• justified  --左右對齊

Form

如果網頁需要使用者輸入的資料時(登入帳密、填寫會員資料)，我們會使用到form表單，form裡會放入需要被送到server端的tag，比如說明文字的label、輸入帳號的input tag、勾選用的checkbox、輸入資料的text area以及送出的submit

input    --輸入相關tag，在input只能輸入單行資料

• text            --常見的輸入方塊(帳號)，只有單行
• button        --按鈕，在按下後可執行某些動作
• checkbox   --勾選的方塊，可以複選
• radio          --多選一的選單，不可複選
• password   --密碼的輸入方塊，輸入值在畫面上是顯示＊
• submit       --點擊後會送出所在的form表單
• file             --點擊後會跳出開啟檔案的視窗

-------------------------------------------------------------

<form>
     <label for="usrname">使用者名稱</label>     
     <input type="text" id="usrname" >          --上面有紹input type的屬性值
</form>

label    --標記文字，說明要填入的資訊為何
-------------------------------------------------------------
<form>
     <label for="usrname">使用者名稱</label>     --for要輸入想要標記的tag的id
     <input type="text" id="usrname" >
</form>

textarea     --文字區塊，在input只能輸入單行的資料，而textarea可以輸入多行，在textarea裡也可以使用font設定其字型
-------------------------------------------------------------
<form>
     <label for="proposal">建議</label>     
     <textarea id="proposal" ></textarea>
     <input type="text" type="submit" value="確定">    --value值為使用者所看到的文字
</form>

Inline&Block

label與input是inline-level，在使用為求美觀，通常會設定成block-level(display:block)；inline-level與block-level最大的差異是block-level有margin、padding、border等屬性，而inline-level沒有
-------------------------------------------------------------
input{
     diplay:block;
}

Attribute selectors

在設定指定tag時也可以指定某一個tag的特定屬性，比如指定input tag的屬性為type值為submit，給予其CSS設定(如下)
-------------------------------------------------------------
input[type=text]{      --在tag名稱後面打上中括弧，括弧中寫上屬性名稱=屬性值
     border:2px solid #f41342;
     font-size:18px;
     padding:5px;
}