HTML5教學初學者必學:CSS基礎語法-區塊.邊框一把罩

 

上篇的HTML5教學的CSS,讓你掌握了文字和字型,現在教你邊框和區塊怎麼做!

 

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基礎語法-文字管理包在我身上!

HTML表格標籤的進化史,上HTML5教學的你不可不知!

開始踏上HTML5教學的道路,這東西讓你網站美觀又吸引人!

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

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

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

達內課程先就業再付款

arrow
arrow
    創作者介紹
    創作者 Uder.chain 的頭像
    Uder.chain

    娶了UI設計師的Python工程師-北歐生活

    Uder.chain 發表在 痞客邦 留言(0) 人氣()