在HTML5教學中學CSS語法,框住所有資訊

剛開始上HTML5教學的時候,你是否覺得網頁看起來很單調呢?利用CSS語法能快速建立邊框表格,讓資訊一目了然呢!

CSS DIV 排版對前端工程師已經是基本的網頁排板方式,透過簡單的 DIV 排版可以很容易創造出各式各樣的網頁版型,本文主要講解 CSS DIV 單欄式的網頁排版設計,算是透過排版最入門的方式了,請在HTML5教學中多搭配練習。

1. 區塊"<span>""<div>"的屬性設定

屬性名稱

說明

設定範例

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

設定邊框的線條粗細

smalllargeptpxcm%

border-width:6px;

border-color

設定邊框的顏色

也可以直接使用"bold"指定之

border-color:blue;

border-top

border-left

border-bottom

border-right

針對邊框的上方線條做單獨調整

針對邊框的左方線條做單獨調整

針對邊框的下方線條做單獨調整

針對邊框的右方線條做單獨調整

border-top:2px dotted blue; (設定值依序為粗細、線條樣式、顏色)

 

2. 跟外框相關的CSS設定 (常用)

 

屬性名稱

說明

設定範例

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-xrepeat(重複) repeat-y

background-repeat:no-repeat

background-position

區塊背景圖片放置位置

分別有top,center,bottom等,也可能是百分比或數值

background-position:center left

 

其實除了文字之外,前端工程師在HTML5教學網頁的各個元素進行 CSS 格式設定時,有一個 「盒子模型 (box model) 的概念:就是所有要被設定的元素,都會被視為一個盒子"<span>""<div>"

以上這兩種身為前端工程師不可不知的HTML5教學你學會了嗎?

 

推薦閱讀:

HTML5教學後要學什麼?當然是CSS語法,讓網頁更美觀!

HTML5教學之我泥中有你:HTML5中引入CSS語法

你想躺著賺嗎?學了網路行銷課程就有可能!

超強HTML5基礎教學():教你基本功,一秒就上手!

超強HTML5基礎教學():活用表格標籤指令

超強HTML5基礎教學():利用標籤指令輕鬆掌控多媒體

CSS是什麼?網頁設計課程教你認識他!!基礎一:HRML中導入CSS!!

arrow
arrow

    Ezra.Yii5778 發表在 痞客邦 留言(0) 人氣()