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 培訓中心推「找到工作再付學費」專案，要試試嗎？