HTML5教學-CSS初學者計畫之邊框美觀跟我有關!

HTML5教學的CSS好複雜阿!別怕!這邊幫你整理好了!(2)

 

透過上次的HTML5教學,你成功掌握了文字,現在讓你掌握另一種東西…

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好複雜阿!別怕!這邊幫你整理好了!(1)

上HTML5教學的必經之路1:先掌握初學者的敲門磚!

上HTML5教學的必經之路2:深入挖掘HTML表格標籤

免猶豫!選擇達內教育評價極高的Java課程就對了!

達內教育評價就像蜂蜜檸檬一樣好棒棒,你怎能錯過呢!

想要錢多事少離家近的工作,來達內教育幫你美夢成真

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

本篇發表於 前端工程師教學 並標籤為 , , , 。將永久鏈結加入書籤。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料