2019年1月17日 星期四

HTML5教學-字型與文字排列CSS設定懶人包

怎麼用程式語言框住文字訊息與圖片?上HTML5教學就會了!


其實光上HTML5教學做出來的網頁很樸實無變化,如果要將網頁資訊視覺化,CSS語法可以變出框架和色塊哦!




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 設定邊框的線條粗細
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. 跟外框相關的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-x、repeat(重複)、 repeat-y		 background-repeat:no-repeat；
background-position 區塊背景圖片放置位置
分別有top,center,bottom等，也可能是百分比或數值		 background-position:center left；

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

 以上這兩種身為前端工程師不可不知的HTML5教學你學會了嗎？
推薦閱讀:


on
標籤： , , , , , , , , , , , , , , , , ,