HTML5教學的CSS基礎請打好!-區塊邊框一次掌握
上次的HTML5教學內容讓你掌握了文字,現在再給你一個bonus,教你邊框和區塊,現在想要怎麼排版都可以啦!
1. 跟外框相關的CSS設定 (常用)
屬性名稱
|
說明
|
設定範例
|
border-style
|
設定邊框的線條樣式，可設定為實線、虛線、點點等。
|
border-style: dotted；
border-style: dashed；
border-style: double；
border-style: solid；
border-style: groove；
border-style: ridge；
border-style: inset；
border-style: outset；
|
border-width
|
設定邊框的線條粗細
small、large、pt、px、cm、%
|
border-width:6px;
|
border-color
|
設定邊框的顏色
也可以直接使用"bold"指定之
|
border-color:blue;
|
border-top
border-left
border-bottom
border-right
|
針對邊框的上方線條做單獨調整
針對邊框的左方線條做單獨調整
針對邊框的下方線條做單獨調整
針對邊框的右方線條做單獨調整
|
border-top:2px dotted blue; (設定值依序為粗細、線條樣式、顏色)
|
2. 區塊"<span>"與"<div>"的屬性設定
其實除了文字之外，前端工程師在HTML5教學網頁的各個元素進行 CSS 格式設定時，有一個 「盒子模型 (box model) 」 的概念：就是所有要被設定的元素，都會被視為一個盒子"<span>"或"<div>"。
而些盒子的內容都是被框 (border) 包著的，內容與框中間又有所謂的留白 (padding)。而這個框 (border )的粗細是可以調整的。
屬性名稱
|
說明
|
設定範例
|
width
|
區塊寬度
|
width: 600px；
|
height
|
區塊高度
|
height: 400px；
|
margin
|
邊界距離設定
共四個數值，分別為上、右、下、左
|
margin:30px 10px 10px 30px;
|
border-radius
|
邊界方框導圓角的圓角程度，數值越大越圓
共四個數值，分別為上、右、下、左
|
border-radius:50px 0px 50px 0px；
|
background-color
|
區塊背景顏色
|
background-color:red；
|
background-image
|
區塊背景圖片
|
background-image:url；
|
background-repeat
|
區塊背景圖片重複方式
分別有 no-repeat(不重複)、 repeat-x、repeat(重複)、 repeat-y
|
background-repeat:no-repeat；
|
background-position
|
區塊背景圖片放置位置
分別有top,center,bottom等，也可能是百分比或數值
|
background-position:center left；
|
這兩篇身為前端工程師不可不知的HTML5教學你都學會了嗎？
相關連結：
HTML5教學的CSS基礎請打好!-字型排序一次滿足
HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道
HTML5教學的三個基本款(2):原來這東西這麼關鍵!?
免猶豫!選擇達內教育評價極高的Java課程就對了!
達內教育評價就像蜂蜜檸檬一樣好棒棒,你怎能錯過呢!
想要錢多事少離家近的工作,來達內教育幫你美夢成真
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
