html與CSS樣式-查詢-善用Ctrl+F搜尋關鍵字

html表格樣式設定可參考此頁
CSS3語法產生器 提供線上視覺化設計，可套用在自己的網頁上
CSS色碼產生器+轉換
引用:wibibi，w3schools，菜鳥教程，itread01，puritys.me

CSS  border-style 設定邊框的樣式
設定四個邊框樣式  border-style: 樣式;
僅設定上邊框樣式  border-top-style: 樣式;
僅設定右邊框樣式  border-right-style: 樣式;
僅設定下邊框樣式  border-bottom-style: 樣式;
僅設定左邊框樣式  border-left-style: 樣式;

<div style="border-width:3px;border-style:dashed;border-color:#FFAC55;padding:5px;">
測試邊框樣式</div>

測試邊框樣式

border-style:solid;	border-style:dotted;	border-style:dashed;
border-style:double;	border-style:outset;	border-style:groove;
border-style:ridge;	border-style:inset;	border-style:none;

border-style:none;   不顯示邊框

表格

邊框兩條線

table, th, td {
  border: 1px solid black;}

變成一條線

table {
  border-collapse: collapse;}

表格中間不要線

table {
  border: 1px solid black;}

整體表格高度+寬度

table {
  width: 100%;}
th {
  height: 50px;}

欄位字全部靠左

th {
  text-align: left;}

欄位文字對齊位置

td {
  height: 50px;
  vertical-align: bottom;}

vertical-align:baseline;	預設值，元素在該行的基礎線上，大約在文字的中間位置，並不美觀。
vertical-align:sub;	圖片垂直對齊該行本文的下標位置。
vertical-align:super;	圖片垂直對齊該行本文的上標位置。
vertical-align:top;	圖片垂直對齊該行元素的最高位置。
vertical-align:text-top;	圖片垂直對齊該行文字的最高位置。
vertical-align:middle;	圖片垂直對齊該行文字的置中位置。
vertical-align:bottom;	圖片垂直對齊該行元素的最低位置。
vertical-align:text-bottom;	圖片垂直對齊該行文字的最低位置。
vertical-align:%;	以百分比來讓圖片垂直對齊該行文字，可以有負值。

這張圖未使用 vertical-align 屬性這張圖未使用 vertical-align 屬性

這張圖 vertical-align 設為 text-top這張圖 vertical-align 設為 text-top

這張圖 vertical-align 設為 middle這張圖 vertical-align 設為 middle

這張圖 vertical-align 設為 bottom這張圖 vertical-align 設為 bottom

欄位表格統一放大縮小

th, td {
  padding: 15px;
  text-align: left;}

表格水平分隔線

th, td {
  border-bottom: 1px solid #ddd;}

參考此網頁

滑鼠移動到表格上變色

tr:hover {background-color: #f5f5f5;}

參考此網頁

表格欄位分色 好閱讀

tr:nth-child(even) {background-color: #f2f2f2;}

參考此網頁

只有第一欄位變色

th {
  background-color: #4CAF50;
  color: white;}

螢幕台小，導致無法顯示全部的表格，可新增卷軸滾動條

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

欄位合併

欄 合併

<table border="1">
　<tr>
　<td colspan="2">這裡是第一行</td>
　</tr>
　<tr>
　<td>這裡是第二行的第一個欄位</td>
　<td>這裡是第二行的第二個欄位</td>
　</tr>

</table>

這裡是第一行
這裡是第二行的第一個欄位	這裡是第二行的第二個欄位

列合併

<table border="1">
　<tr>
　<td rowspan="2">這是第一個欄位</td>
　<td>這裡是第二個欄位第一行</td>
　</tr>
　<tr>
　<td>這裡是第二個欄位第二行</td>
　</tr>
</table>

這是第一個欄位	這裡是第二個欄位第一行
	這裡是第二個欄位第二行

html下拉式選單<--其他屬性可參考此網頁

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Volvo Saab Opel Audi

CSS實現背景透明，文字不透明

.box-1, .box-2, .box-3{padding:30px; width:150px; margin-bottom:10px; text-align:center;}

.box-1{ background:#000;  opacity:0.6; }

.box-1 p, .box-2 p, .box-3 p{ color:#fff;font-family:'微軟正黑體'; text-align:center;font-size:16px;}

.box-2{ background:rgba(0,0,0,0.6);margin-bottom:10px;}

.box-3{ background:#000; filter:Alpha(opacity=60);}

body{ background:url(http://lorempixel.com/output/abstract-q-c-400-400-2.jpg) no-repeat;padding:10px;}

CSS font-family 字型範例

字型	語法範例	呈現
serif	<span style="font-family:serif;">Show serif font</span>	Show serif font
sans-serif	<span style="font-family:sans-serif;">Show sans-serif font</span>	Show sans-serif font
cursive	<span style="font-family:cursive;">Show cursive font</span>	Show cursive font
fantasy	<span style="font-family:fantasy;">Show fantasy font</span>	Show fantasy font
monospace	<span style="font-family:monospace;">monospace font</span>	monospace font
細明體	<span style="font-family:MingLiU;">細明體字型</span>	細明體字型
新細明體	<span style="font-family:PMingLiU;">新細明體字型</span>	新細明體字型
標楷體	<span style="font-family:DFKai-sb;">標楷體字型</span>	標楷體字型
微軟正黑體	<span style="font-family:Microsoft JhengHei;">微軟正黑體</span>	微軟正黑體

CSS font-famiy 範例、設定段落的字型

p {
　font-family:serif,sans-serif,cursive,fantasy,monospace;
}

有的時候設計師會需要將網頁文章不同的段落，設計出不同的風格字型，這時候採用 font-family 就是一個相當有效率的方式，同樣的手法，也可以用在像是 DIV 區塊或 span 區域內的文字，讓整個網頁不同區域呈現不同的效果。


換行設定

文字強迫換行 word-break: break-all;

Before Moammar Long language string Long language string Long language string Long language string, there were the Phoenicians.

文字自動換行，長英文字不切斷 word-wrap:break-word;

Before Moammar Long language string Long language string Long language string Long language string, there were the Phoenicians.

保留原始空白與換行 white-space:pre; 

Before Moammar Gadhafi, there were the Phoenicians. And the Greeks.

強迫文字不換行 white-space:nowrap; 

移除連續空白，移除換行符號(n r)， 強迫文字不換行。

Before Moammar Gadhafi, there were the Phoenicians. And the Greeks.

保留所有空白，自動換行。white-space:pre-wrap; 

Before Moammar Gadhafi, there were the Phoenicians. And the Greeks. The Romans.

 多個空白轉換成一個空白white-space: pre-line

 Before Moammar Gadhafi, there were the Phoenicians. And the Greeks. The Romans.