HTML5教學之CSS一把罩!---邊框和區塊和文字有相同地位

 

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一把罩!---只要和文字有關,通通交給我

HTML5教學三個基礎懶人包一:初學者開從何開始?

HTML5教學三個基礎懶人包三:標籤的演變你要跟上!

台灣本土人工智慧APP雅婷逐字稿幫你解決所有語音辨識的煩惱!!

他用人工智慧讓你不用再為敗血症煩惱了

程式熱度坐二望一的Java 課程

達內課程先就業再付款

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()