Add to collection(s) Add to saved
  1. No category
Uploaded by big

VS 2017.net、HTML、CSS

advertisement 
Virtual
Studio .net、
HTML、CSS
資料來源：w3school, 跟著實務學習, 一次搞懂JavaScript全端技術
評量方式
基本評量
1. 出席率 10%
a.
2.
a.
課堂隨機抽點，不足一次扣總分3分。(沒
有上限)
b.
c.
d.
分組進行，本學期有將近60位同學，每組
3人（含）以上，6人（含）以下。
人數越多，專題報告要越豐富。
找一個可行的網頁開發專案，進行構思與
設計規劃，每人至少需要開發1支以上程
式。
每組需產生紙本報告，內容至少8頁。
期末程式DEMO 50％
每組報告10～15分鐘，報告內容：程式內
容與效果呈現，開發過程遇到的難題，其
解決方法或尚待解決的難題。
確定回家開發環境建置（加分）。
i.
ii.
iii.
期中報告 40%
a.
3.
4.
其他評量
1. 加分：
b.
c.
2.
3.
4.
隨身碟開發環境開機。
虛擬化開發環境開機。
其他開發環境。
可獨立完成作業（加分）。
課堂隨機互動（加分）。
i. google class code：y379yx3
確定班級人數分佈(非本科系同學)。
對老師上課期許與建議。
學習方式、學習態度與學習動機。
學前心態<激發自己學習動機>
● 學習沒有捷徑，只有不斷練習。
● 生命中有些事，是不能繞過去
的。
● 一萬個小時 vs 刻意練習。
● 找問題，找答案，找方法。
● 打通學習的任督二脈。
● Try an error~
● 期許自己至少要有一至兩個完
整的網站作品(包括前後端)。
● 生活遇到困難可以與老師溝通，
但是不能當作你停止進步的藉
口。
● 跨領域是未來的搶手的人才。
● 創造自己的斜槓人生。
● 150x(18-3)/60=? vs 他力與自
力
https://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources
預計進度<視課程與學習狀況調整>
第1週
學習契約、網頁基礎概念
第10週
JSON、Node.js（後端）、DB
第2週
VS .net、HTML、CSS
第11週
JSON、Node.js（後端）、DB
第3週
VS .net、HTML、CSS
第12週
JSON、Node.js（後端）、DB
第4週
VS .net、Javascript、jQuery
第13週
TodoList系統開發(1)
第5週
VS .net、Javascript、jQuery
第14週
TodoList系統開發(2)
第6週
VS .net、Javascript、jQuery
第15週
維修系統開發(3)
第7週
VS .net、jQuery、JSON
第16週
維修系統開發(4)
第8週
VS .net、jQuery、JSON
第17週
維修系統開發(5)
第9週
期中考（報告）
第18週
期末考（報告）
善用網路資源(族繁不及備載) + 加入學習社群
● https://jsbin.com/
● https://codepen.io/
● https://www.w3schools.com/
● http://tw.gitbook.net/index.html
● https://www.youtube.com/watch?v=SRbewm2AUew
● https://www.youtube.com/watch?v=RAJ6nc5YfA&list=PLwIFDX7xv6k184kHHXst_h_5zIIFzqM6L
● https://htmlcheatsheet.com/
● Chrome DevTools (F12)
● https://devdocs.io/
● 真假WIN XP：https://geekprank.com/
JavaScrip全端開發
前端
HTML
後端
請求
API
CSS
回覆
JavaScript
操作
呈現
伺
服
器
API, Application Programming Interface
資
料
處
理I
儲存
取出
資
料
庫
系統功能開發完成後，若想將部分功能公開
給大眾使用，則使用者與系統功能溝通的方
法稱之為ＡＰＩ
HTML(Hyper Text Markup Language)頁面結構
HTML Category
<HTML有多少標籤? >
●
●
●
●
●
●
Basic HTML
Formatting
Forms and Input
Frames
Images
Audio / Video
●
●
●
●
●
●
Links
Lists
Tables
Styles and Semantics
Meta Info
Programming
Basic HTML
標籤<> vs 屬性
●
●
●
●
●
●
●
●
●
●
<!DOCTYPE> Defines the document
type
<html> Defines an HTML document
<head> Defines information about the
document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the
content
<!--...--> Defines a comment
●
●
●
●
●
●
使用style的造型HTML元素屬性
使用background-color的背景顏色
使用color的文字顏色
使用font-family的文字字體
使用font-size文本大小
使用text-align文本對齊
HTML屬性
不同的標籤有相對應的屬性
Links
href 可以指定連結資源的位置：
●
●
●
●
<a> Defines a hyperlink
○ 常用的標籤屬性：href, target
<nav> Defines navigation links
target 指定連結資源要顯示在哪個框架或視窗中
●
●
●
●
●
target=”_self”
target=”_blank”
target=”_top”
target=”_parent”
target=”視窗名稱”(iframeName)
●
網址： http://tw.yahoo.com
站內網頁：
○
與manager資料夾同層
○
■
<a href=”manager/login.html”>
../ 上一層資料夾
○
■
<a href=”../Home/index.html”>
../../ 上上一層資料夾
頁內:
○
○
●
●
●
連結到id=”mvc”的位置，寫法為
<a href=”#mvc”>...</a>
電子郵件: mailto:text@gmail.com
檔案: http://www.google.com/sample.zip
ftp: ftp://ftp.google.com.tw
起手式-建一個可以連結的圖片
<!DOCTYPE html>
<html>
<body>
<p>An image as a link:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100"
height="100">
</a>
</p>
</body>
</html>
HTML Link
●
●
●
●
●
●
Use the <a> element to define a link
Use the href attribute to define the link
address
Use the target attribute to define
where to open the linked document
Use the <img> element (inside <a>) to
use an image as a link
Use the id attribute (id="value") to
define bookmarks in a page
Use the href attribute (href="#value")
to link to the bookmark
https://www.w3schools.com/html/tryit.asp?filen
ame=tryhtml_links_external
其他：
● Hreflang：指定連接HTML網頁的語言，如：
en, zh等
● Media：HTML5的新屬性，可以指定哪一種
媒體或裝置可以最佳化處理連接的網頁文件
● rel：指定目前網頁和連接網頁之間的關係，
只有當href屬性存在時才能指定。如:
alternate, bookmark
● type：指定連接HTML網頁的MIME型態
Links example
●
●
●
●
●
Create a clickable image How to use an image as a link.
Open a link in a new browser window How to open a link in a new browser
window, so that the visitor does not have to leave your Web site.
Create an email link How to link to a mail message (will only work if you
have mail installed).
Link to another section on the same page How to link to an element with a
specified id within a page (the name attribute is not supported in HTML5).
Link to a JavaScript How to add a JavaScript inside the href attribute.
Meta Info
●
●
●
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a document
Tables
●
●
●
●
●
●
●
●
●
●
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table(標題)
<tr> Defines a row in a table(列->)
<td> Defines a cell in a table
● Colspan: 指定表格列需要擴充幾個儲存格(合併)
● Rowspan : 指定表格欄需要擴充幾個儲存格(合併)
● Headers : 指定的屬性值是對應標題列儲存格的id屬性值
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<col> Specifies column properties for each
column within a <colgroup> element
<colgroup> Specifies a group of one or more
columns in a table for formatting
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="500" bgcolor="#EDF8CF" cellspacing="0"
cellpadding="10">
<tr bgcolor="#A6B141">
<th width="70">書號</th>
<th width="330">書名</th>
<th width="50">單價</th>
<th width="50">數量</th>
</tr>
<tr>
<td>AEL019800</td>
<td>跟著實務學習ASP.NET MVC<br />第一次寫MVC就上手
</td>
<td>520</td>
<td>1000</td>
</tr>
<tr>
<td>AEL019300</td>
<td>Visual C# 2017程式設計經典</td>
<td>650</td>
<td>1500</td>
</tr>
</table>
</body>
</html>
Tables elements
●
●
●
●
●
●
●
●
●
●
●
●
width
height
bgcolor
border
bordercolor
background
cellspacing
cellpadding
align: left, center, right
valign: top, middle, bottom
colspan
rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<tr>
<th bgcolor="#ABDFFE">套餐</th>
<td>A餐</td>
<td>B餐</td>
<td>C餐</td>
</tr>
<tr >
<th bgcolor="#ABDFFE">主菜</th>
<td>大油雞腿</td>
<td>鴨腿</td>
<td>燒肉</td>
</tr>
<tr>
<th bgcolor="#ABDFFE">飲料</th>
<td align="center" rowspan="2">選購</td>
<td align="center" colspan="2">可樂</td>
</tr>
<tr>
<th bgcolor="#ABDFFE">湯品</th>
<td>貢丸湯</td>
<td>豆腐湯</td>
</tr>
</table>
</body>
</html>
Forms and Input
●
●
●
●
●
●
<form> Defines an HTML form for
user input
<input> Defines an input control
<textarea> Defines a multiline input
control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related
options in a drop-down list
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<fieldset>
<legend>個人資料</legend>
姓名：<input type="text" name="txtName"><br>
信箱：<input type="email" name="txtMail">
</fieldset>
<fieldset>
<legend>興趣</legend>
<input type="checkbox" name="chk" value="籃球">籃球
<input type="checkbox" name="chk" value="電影">電影
<input type="checkbox" name="chk" value="購物">購物
</fieldset>
<p>
<input type="submit" value="註冊" >
<input type="reset" value="重設" >
</p>
</form>
</body>
</html>
Forms and Input
●
●
●
●
●
●
●
<option> Defines an option in a dropdown list
<label> Defines a label for an <input>
element
<fieldset> Groups related elements in
a form
<legend> Defines a caption for a
<fieldset> element
<datalist> Specifies a list of predefined options for input controls
<output> Defines the result of a
calculation
●
●
●
●
disabled
○ <input type=”text”
name=”txtName” disabled/>
maxlength
○ <input type=”text”
name=”txtUid”
maxlength=”5”/>
readonly
○ <input type=”email”
name=”txtEmail” readonly
value=”user@gmail.com”/>
required
○ <input type=”url”
name=”txtUrl” required/>
placeholder
○ <input type=”tel”
name=”txtTel” placeholder/>
Form-file upload
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post" action="Home/Upload" enctype="multipart/form-data" accept="image/gif, image/jpeg">
請選擇檔案<input type="file" name="txtFile" /><br />
<input type="submit" value="檔案上傳" />
</form>
</body>
</html>
Form-radio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
性別：<input type="radio" name="radGender" value="1" checked />男
<input type="radio" name="radGender" value="0"/>女<hr />
學歷：<input type="radio" name="radEdu" value="1" />國小
<input type="radio" name="radEdu" value="2" />國中
<input type="radio" name="radEdu" value="3" />高中職
<input type="radio" name="radEdu" value="4" checked />大學
<input type="radio" name="radEdu" value="5" />碩博士<hr />
</form>
</body>
</html>
Form-checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<p>請問玩過那些類型電玩</p>
<input type="checkbox" name="chkGame"
<input type="checkbox" name="chkGame"
<input type="checkbox" name="chkGame"
<input type="checkbox" name="chkGame"
</form>
</body>
</html>
value="phone" checked />手遊
value="windows" />桌機
value="xbox" />XBox One
value="ps" checked />PS 4
Form-list
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<p>性別</p>
<select name="selGender">
<option value="1" selected>男</option>
<option value="0">女</option>
</select>
<hr />
<p>請問玩過那些類型電玩</p>
<select name="selGame" multiple>
<option value="phone" selected>手遊</option>
<option value="windows">桌機</option>
<option value="xbox">XBox One</option>
<option value="ps" selected>PS 4</option>
</select>
<hr />
</form>
</body>
</html>
Form-textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
姓名：<input type="text" name="txtName" /><br />
性別：<input type="radio" name="radGender" value="1" checked />男
<input type="radio" name="radGender" value="0" />女<br />
訊息：<br />
<textarea rows="4" cols="30" >請填寫意見</textarea>
</form>
</body>
</html>
Form-label
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<p>
<label for="txtName">姓名：</label>
<input type="text" name="txtName" id="txtName" />
</p>
<p>
性別：
<input type="radio" name="radGender" id="male" value="1" />
<label for="male">男</label>
<input type="radio" name="radGender" id="female" value="0" />
<label for="female">女</label>
</p>
</form>
</body>
</html>
Form-date
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
日期：<input type="date" name="txtDate" /><br />
時間：<input type="time" name="txtTime" /><br />
月份：<input type="month" name="txtMonth" /><br />
週次：<input type="week" name="txtWeek" /><br />
本地日期與時間：<input type="datetime-local" name="txtDatetime" /><br />
</form>
</body>
</html>
Form-email, url, tel, search, color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
信箱：<input type="email" name="txtEmail" /><br />
官網：<input type="url" name="txtUrl" /><br />
電話：<input type="tel" name="txtTel" pattern="[0][9][0-9]{8}" /><br />
搜尋：<input type="search" name="txtSearch" /><br />
顏色：<input type="color" name="txtColor" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
<form>’s elements
<form action="接收資料的程式" method="get">
<form action="接收資料的程式" method="post">
●
action
○
●
method
○
○
●
●
●
傳輸特殊類型的數據如圖片，文件MP3等
accept
○
●
post：將表單中各欄位名稱與內容，放置在HTML表頭(HEADER)中一起傳送到伺服器，並交由action屬
性所指定的程式處裡，該程式會透過標準輸入(stdin)方式將表單資料讀取並進行處裡。沒有長度限制。安
全性高。
get：為預設值，將表單中各欄位名稱與內容，透過成對的字串連接，放置於action屬性所指向的程式
URL後面，例如: http://www.text.com.tw/show.asp?Name=jane，URL長度最長為256bytes，因此不適用
傳送大量表單資料，因為資料都顯示在URL上，所以安全性低。
name
id
enctype
○
●
asp.net, asp.net mvc, php or jsp
若指定accept=”image/gif, image/jpeg”, 表示允許上傳*. gif, *.jpeg
autocomplete
○
on, off
網路資源
http://web.thu.edu.tw/hzed/www/tag.htm
https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form
GET 方法
●
GET 方法
查詢字符串（名稱/值對）是在GET 請求的URL 中發送的：
/test/demo_form.php?name1=value1&name2=value2
有關GET 請求的其他一些註釋：
○
GET 請求可被緩存
○
GET 請求保留在瀏覽器歷史記錄中
○
GET 請求可被收藏為書籤
○
GET 請求不應在處理敏感數據時使用
○
GET 請求有長度限制
○
GET 請求只應當用於取回數據
POST 方法
查詢字符串（名稱/值對）是在POST 請求的HTTP 消息主體中發送的：
POST /test/demo_form.php HTTP/1.1
Host:w3school.com
/test/demo_form.asp?name1=value1&name2=value2
有關POST 請求的其他一些註釋：
●
POST 請求不會被緩存
●
POST 請求不會保留在瀏覽器歷史記錄中
●
POST 不能被收藏為書籤
●
POST 請求對數據長度沒有要求
HTML iframes
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes
to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" height="200"
width="300"></iframe>
</body>
</html>
<iframe> Defines an inline frame
https://www.w3schools.com/html/tryit.asp?filen
ame=tryhtml_iframe_height_width
Images
●
●
●
<img> Defines an image
○
src
○
align
■
left, right, center, bottom, top,
middle
○
Width=“100”
○
Heigth=“100”
○
Border<HTML5不支援>
○
alt
<figcaption> Defines a caption for a
<figure> element
<figure> Specifies self-contained content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
figure{
border-color:#0094ff;
border-style:solid;
border-width:2px;
padding:10px;
width:180px;
text-align:center;
float:left;
}
</style>
</head>
<body>
<figure>
<img src="images/1.JPG" />
<figcaption>鹽山貓頭鷹</figcaption>
</figure>
<figure>
<img src="images/2.JPG" />
<figcaption>招財貓</figcaption>
</figure>
</body>
</html>
Audio/ Vedio
youtube 網路影片的使用
●
●
●
●
<audio> Defines sound content
<source> Defines multiple media
resources for media elements (<video>,
<audio> and <picture>)
○ src, type
○ ogg, mp3, wav
<track> Defines text tracks for media
elements (<video> and <audio>)
<video> Defines a video or movie
○ autoplay
○ controls
○ loop
○ muted
○ preload
■ none, metadata, auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/GhwVSzJZoHk"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</body>
</html>cc
Audio/ Vedio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video width="800" height="600" autoplay controls>
<source src="video/mvc.mp4" type="video/mp4" />
瀏覽器不支援播放MP4
</video>
</body>
</html>
Lists
●
●
●
●
●
●
<ul> Defines an unordered list(項目符號)
<ol> Defines an ordered list(項目編號)
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
語意標籤
Styles and Semantics
●
●
●
●
●
●
●
●
●
●
●
●
●
<style> Defines style information for a document
<div> Defines a section in a document(容器標籤)
<span> Defines a section in a document (容器標籤)
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<main> Specifies the main content of a document
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<data> Links the given content with a machine-readable translation
語意標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>旅行相簿</title>
</head>
<body>
<header>
<h1>我的旅行相簿</h1>
<nav>
<ul>
<li><a href="#">鹽山貓頭鷹</a></li>
<li><a href="#">招財貓</a></li>
<li><a href="#">小股小天使</a></li>
</ul>
</nav>
</header>
<article>
<section>
<h3>鹽山貓頭鷹</h3>
<p>20公尺的鹽山，多了貓頭鷹跟大家打個招呼，在這裡合照留念找到一些遍地似雪，有如置身日本雪國的場景，好美好美。</p>
<img src="images/1.jpg" />
</section>
</article>
<aside>
<h3>美食推薦</h3>
<ul>
<li><a href="#">台南牛肉湯</a></li>
<li><a href="#">浮水魚羹</a></li>
</ul>
</aside>
<footer>
<h4>國產008 版權所有</h4>
</footer>
</body>
</html>
Programming
●
●
●
●
●
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side
scripts
<embed> Defines a container for an external (non-HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object
CSS3 層級式樣式表(Cascading Style Sheets)
●
CSS套用方法(載入方式)
○
●
CSS的基本語法
○
○
○
Selector{property1: value1; property2:value2}
選擇器{屬性:值;}
p{
color: red;
text-align: center;
}
○
○
行內載入
■
<標籤名稱 style={屬性1:值1;屬性2:值2;...屬性n:值n;}>
■
內容
■
</標籤名稱>
內部載入
■
<style>
■
選擇器{屬性1:值1;屬性2:值2;…屬性n:值n;}
■
</style>
外部載入
■
使用<link>載入外部CSS檔
●
<head>
●
<link href=”basis.css” rel=”stylesheet”/>
●
</head>
■
使用@import元素載入外部CSS檔
●
<head>
●
<style type=text/css>
●
@import url(basis.css); <!--@import “basis.css”亦可->
●
</style>
●
<head>
色碼
ＨＴＭＬ顏色
色碼原理
選色搭配：
https://coolors.co/
http://paletton.com/#uid=
1000u0kllllaFw0g0qFqFg
0w0aF
CSS行內載入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p style="color:red;font-size:20px">跟實務學習ASP.NET MVC</p>
<p style="color:blue;font-size:14px">跟著實務學習網頁設計</p>
</body>
</html>
CSS內部載入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
width:200px;
height:40px;
background:#b6ff00;
}
</style>
</head>
<body>
<p>跟實務學習ASP.NET MVC</p>
<p>跟著實務學習網頁設計</p>
</body>
</html>
CSS外部載入
●
製作mycss.css檔案
○
p {
width: 200px;
height: 40px;
background: #b6ff00;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="mycss.css"
rel="stylesheet" />
</head>
<body>
<p>跟實務學習ASP.NET MVC</p>
<p>跟著實務學習網頁設計</p>
</body>
</html>
CSS links
●
●
●
Advanced - Link Buttons
Background Color
○
○
○
○
a:link -->還未瀏覽時的狀態
a:visit -->已瀏覽後的狀態
標籤: hover -->滑鼠指標碰到的狀態
標籤: focus -->取得焦點後的狀態
○
標籤: active -->按下元件後的狀態
Text Decoration
●
CSS各類選擇器
○
○
○
○
○
○
○
○
○
○
The element Selector
The id Selector
The class Selector
The type selector
The group of selector
The universal selector
Descendant combinatory
Child combinatory
Pseudo-classes
Attribute selectors
格式
說明
標籤[屬性]
<a>標籤指定href的屬性：a[href]{ color:red; }
標籤[屬性=”值”]
<a>標籤指定href的屬性為"http://tw.yahoo.com"，即將該元素前景設為藍色：
a[href=”http://tw.yahoo.com”]{ color:blue; }
標籤[屬性~=”值”]
<img>標籤指定alt的屬性包含有dtc文字，即將該元素框線設為實線2px：
img[alt~=”dtc”] {border:2px solid blue;}
<img src=”dtc.jpg” alt=”this is dtc logo”>
標籤[屬性|=”值”]
<img>標籤指定alt的屬性是dtclogo-開頭的文字的元素，即將該元素框線設為實
線2px，框線顏色為藍色：
img[alt|=”dtclogo”] {border:2px solid blue;}
<img src=”dtc.jpg” alt=”dtclogo-1”>
<img src=”dtc.jpg” alt=”dtclogo-2”>
標籤[屬性^=”值”]
<a>標籤指定href的屬性為http開頭的元素，即將該元素前景指定為藍色：
a[href^=”http”]{ color:blue; }
<a href=”http://tw.yahoo.com”>yahoo</a>
<a href=”index.html”>首頁</a><!--不符合，因為沒有http-->
標籤[屬性$=”值”]
<img>標籤指定的圖檔附檔名為.jpg的元素，即將該元素框線設為實線2px：
img[src$=”.jpg”] {border:2px solid blue;}
<img src=”dtc.jpg”>
<img src=”dtc.png”><!--不符合，因為不是jpg-->
標籤[屬性*=”值”]
<a>標籤指定href的屬性包含有yahoo文字，即將該元素前景設為藍色：
a[href*=”yahoo”] {color: blue;}
<a href=”http://tw.yahoo.com”>yahoo</a>
<a href=”index.html”>首頁</a><!--不符合-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img[src]{
border: 3px solid blue;
}
div{
text-align:center;
width:250px;
border: 5px double pink;
float:left;
margin:10px;
padding-top:10px;
}
</style>
</head>
<body>
<div>
<img src="images/1.JPG" /><br />
<p>七股鹽山</p>
</div>
<div>
<img src="images/2.JPG" />
<p>招財貓</p>
</div>
</body>
</html>
CSS顏色設定 color:屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>color01</title>
</head>
<body>
<p
<p
<p
<p
style="color:blue">藍色</p>
style="color:rgb(0%,100%,0%)">綠色</p>
style="color:rgb(255,255,0)">黃色</p>
style="color:#ff0000">紅色</p>
</body>
</html>
CSS顏色設定透明度 color:rgba(r,g,b,透明度值)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>color02</title>
</head>
<body>
<p style="color:rgba(0,0,0,1.0)">黑色</p>
<p style="color:rgba(0,0,0,0.5)">黑色</p>
<p style="color:rgba(0,0,0,0.0)">黑色</p>
<img src="view.jpg" width="200">圖片
<img src="view.jpg" width="200" style="opacity:0.5">圖片
<img src="view.jpg" width="200" style="opacity:0.0">圖片
</body>
</html>
CSS顏色設定-HSLA色彩空間
透明度 color:hsla(色相,彩度,亮度,透明度值)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>color02</title>
</head>
<body>
<p style="color:hsla(0,100%,100%,0.5)">黑色</p>
<p style="color:rgba(0,0,0,0.5)">黑色</p>
<p style="color:rgba(0,0,0,0.0)">黑色</p>
<img src="view.jpg" width="200">圖片
<img src="view.jpg" width="200" style="opacity:0.5">圖片
<img src="view.jpg" width="200" style="opacity:0.0">圖片
</body>
</html>
●
●
●
●
Hue
Saturation
Lightness
Alpha
CSS文字設定 font-size:屬性值
絕對大小
●
CSS支援度量單位
○
○
○
○
○
○
○
○
●
px(pixel)
pt(point, 1pt=1/72inch)
pc(pica, 1pica=12pts)
in(inch, 1in = 2.54cm)
cm(centimeter)
mm(millimeter)
em上層元素繼承文字大小
ex改以小寫字母高度為參考大小
預設大小
○
○
○
xx-small, x-small, small,
medim,
large, x-large, xx-large
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font01</title>
</head>
<body>
<p
<p
<p
<p
<p
<p
<p
style="font-size:18px">大象</p>
style="font-size:18pt">大象～大象～</p>
style="font-size:3cm">你的鼻子為什麼那麼長</p>
style="font-size:xx-small">媽媽說鼻子長才是漂亮</p>
style="font-size:medium">大象～大象～</p>
style="font-size:xx-large">你是喜歡爸爸還是媽媽</p>
style="font-size:1.5em">我好像比較喜歡媽媽</p>
</body>
</html>
CSS文字設定 font-size:屬性值
相對大小
●
百分比
○
○
○
標準為10px, 200%=20px
smaller
larger
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font02</title>
</head>
<body>
<p style="font-size:200%">小皮球，香蕉油，滿地開花二十一</p>
<p style="font-size:smaller">二五六、二五七</p>
<p style="font-size:larger">二八、二九、三十一</p>
</body>
</html>
CSS文字字型
font-family:字型1, 字型2, 字型3...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font03</title>
</head>
<body>
<p style="font-family:標楷體,微軟正黑
體,Adobe 楷体 Std R">大才全資訊科技股份有限公
司</p>
<p style="font-family:微軟正黑體">用實務學
習HTML5</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font04</title>
<link
href="https://fonts.googleapis.com/css?family=Pacifico"
rel="stylesheet">
</head>
<body>
<p style="font-family: 'Pacifico', cursive;">Not eat</p>
<p style="font-family: 'Pacifico', cursive;">Thanks</p>
</body>
</html>
CSS斜體字、粗細 font-style:屬性值, font-weight:屬性值
Font Style Font Variant
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font05</title>
</head>
<body>
<p style="fontstyle:normal">大才全資訊科技股份
有限公司</p>
<p style="fontstyle:italic">用實務學習
HTML5</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font06</title>
</head>
<body>
<p style="font-weight:normal">蝴蝶</p>
<p style="font-weight:bold">蝴蝶，蝴蝶，生得真美麗</p>
<p style="font-weight:100">頭戴著金絲，身穿花花衣</p>
<p style="font-weight:600">你愛花兒，花兒也愛你</p>
<p style="font-weight:900">你會跳舞，它有甜蜜</p>
</body>
</html>
CSS font 直接屬性，簡便表示
font : font-style 屬性值 font-weitht 屬性值 font family 屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font07</title>
</head>
<body>
<p style="font:italic bold 22px 標楷體">大才全資訊科技股份有限公司</p>
<p style="font:bolder 15px 微軟正黑體">用實務學習HTML5</p>
</body>
</html>
CSS 刪除線、底線、頂線、大小寫轉換
font-decoration : 屬性值
text-transform : 屬性值
<p
<p
<p
<p
style="text-decoration:underline">下雨歌</p>
style="text-decoration:overline">淅瀝淅瀝，嘩啦嘩啦，雨下來了</p>
style="text-decoration:line-through">我的媽媽，拿著雨傘來接我</p>
style="text-decoration:none">淅瀝淅瀝，嘩啦嘩啦，啦啦啦</p>
<p
<p
<p
<p
style="text-transform:uppercase">Please Miss Google Speak</p>
style="text-transform:lowercase">Please Miss Google Speak</p>
style="text-transform:capitalize">Please Miss Google Speak</p>
style="text-transform:none">Please Miss Google Speak</p>
CSS段落設定 行高、首行縮排
line-height : 屬性值、text-indent : 屬性值
<p style="line-height:normal">
哎呀不得了，實在真糟糕
<br>我的火雞呀！跑到哪裡去了
</p>
<p style="line-height:2">
快點找一找，快點找一找
<br>原來他偷偷跑到稻草堆裡了
</p>
<p style="line-height:20px">
快來快來！快來快來！
<br>我們圍起菜園快把牠捉到
</p>
<p style="line-height:250%">
看見我們牠又跑了
<br>跑到稻草裡去了
</p>
<p style="text-indent:1cm">好朋友我們行個禮，握握手來猜拳</p>
<p style="text-indent:10%">石頭布呀，看誰鸁，輸了就要跟我走</p>
CSS段落設定 文字間距、首行縮排
word-spacing : 屬性值、letter-spacing: 屬性值
<p style="word-spacing:0.5cm">Practice Makes Perfect</p>
<p style="word-spacing:30px">Practice Makes Perfect</p>
<p style="letter-spacing:normal">Time is money</p>
<p style="letter-spacing:4px">Time is money</p>
CSS段落設定 文字陰影、段落文字對齊方式
text-shadow : 水平移動值1 垂直移動值1 模糊值1 色彩1, 水平移動值2…
text-align : 屬性值
<p style="text-shadow:15px 15px 2px silver">Haste makes waste</p>
<p style="text-shadow:5px 5px 3px red,10px 10px 5px pink">Haste makes waste</p>
<p
<p
<p
<p
<p
<p
style="text-align:left">亞伯特．愛因斯坦</p>
style="text-align:right">每個人都是天才</p>
style="text-align:center">但如果你用爬樹的能力</p>
style="text-align:justify">評斷一條魚</p>
style="text-align:start">它將終其一生</p>
style="text-align:end">覺得自己是個笨蛋</p>
CSS段落設定 上下緣與文字中線對齊、上下標
vertical-align : 屬性值
<p style="font-size:87px">
群山
<span style="vertical-align:top;fontsize:38px">環繞</span>
<img src="view.jpg" width="200">
</p>
<p style="font-size:87px">
青山
<span style="vertical-align:bottom;font-size:38px">
綠地</span>
<img src="view.jpg" width="200">
</p>
<p style="font-size:87px">
風景
<span style="vertical-align:texttop;font-size:38px">優美</span>
<img src="view.jpg" width="200">
</p>
<p style="font-size:87px">
花花
<span style="vertical-align:text-bottom;fontsize:38px">草草</span>
<img src="view.jpg" width="200">
</p>
CSS段落設定 上下緣與文字中線對齊、上下標
vertical-align : 屬性值
<p style="font-size:87px">群山
<span style="vertical-align:top;font-size:38px">環繞
</span>
<img src="view.jpg" width="200">
</p>
<p style="font-size:87px">風景
<span style="vertical-align:text-top;font-size:38px">
優美</span>
<img src="view.jpg" width="200">
</p>
<p>全館周年慶 全館1折
<span style="vertical-align:super;font-size:50%">起
</span>
</p>
<p>8999
<span style="vertical-align:sub;fontsize:50%">12999</span></p>
<p style="font-size:87px">青山
<span style="vertical-align:bottom;font-size:38px">綠地
</span>
<img src="view.jpg" width="200">
</p>
<p style="font-size:87px">花花
<span style="vertical-align:text-bottom;font-size:38px">
草草</span>
<img src="view.jpg" width="200">
<p style="font-size:150px">
武嶺
<span style="vertical-align:middle;font-size:38px">美景
</span>
<img src="view.jpg" width="200">
</p>
CSS項目清單設定 list-style-type: 屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>list01</title>
</head>
<body>
<ul>
<li style="list-style-type:disc">童謠 小兔子乖乖</li>
<li style="list-style-type:circle">小兔子乖乖，把門兒開開</li>
<li style="list-style-type:square">快點開開，我要進來</li>
<li style="list-style-type:decimal">不開不開我不開</li>
<li style="list-style-type:decimal-leading-zero">媽媽沒回來，誰來也不開</li>
<li style="list-style-type:lower-roman">小兔子乖乖，把門兒開開</li>
<li style="list-style-type:lower-alpha">快點開開，我要進來</li>
<li style="list-style-type:cjk-ideographic">就開就開我就開</li>
<li style="list-style-type:lower-greek">媽媽回來了，我來把門開</li>
</ul>
</body>
</html>
CSS自訂圖片符號 list-style-image : url(圖檔路徑)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>list02</title>
</head>
<body>
<ul>
<li style="list-style-image:url(icon.png)">大才全資訊科技股份有限公司</li>
<li style="list-style-image:url(icon.png)">用實務學習HTML5</li>
</ul>
</body>
</html>
CSS項目清單位置 list-style-position : 屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>list03</title>
</head>
<body>
<ul style="list-style-image:url(icon.png)">
<li style="list-style-position:outside">大才全資訊科技股份有限公司</li>
</ul>
<ul style="list-style-image:url(icon.png)">
<li style="list-style-position:inside">用實務學習HTML5</li>
</ul>
</body>
</html>
CSS list-style 屬性 list-style : 屬性值1 屬性值2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>list04</title>
</head>
<body>
<ul>
<li style="list-style:circle outside">大才全資訊科技股份有限公司</li>
<li style="list-style:url(icon.gif) inside">用實務學習HTML5</li>
</ul>
</body>
</html>
CSS 變形效果-translate
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: translate(-10px, 20px);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: translateX(10px);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
CSS 變形效果-scale
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: scale(1.2, 0.8);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: scale(1.2);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
CSS 變形效果-scale
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: scaleX(1.4);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: scaleY(0.8);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
CSS 變形效果-rotate
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: rotate(-50deg);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
CSS 變形效果-skew
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: skew(15deg, 15deg);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: skewX(15deg);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
CSS 變形效果-skew
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
width: 100px;
height: 100px;
transform: skewY(15deg);
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
CSS 轉換時間 transition-duration:time
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
transform: scale(1);
opacity: 1;
transition-duration: 1.5s;
}
#logo:hover {
transform: scale(1.5);
opacity: 0.5;<!--透明度-->
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
CSS 轉換屬性 transition-property:css屬性
<style>
#logo {
transform: scale(1);
opacity: 1;
transition-duration: 1.5s;
transition-property: transform;
}
#logo:hover {
transform: scale(1.5);
opacity: 0.5;
}
</style>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
CSS 轉換方法 transition-timing-function: 速度
<style>
屬性設定：
#logo {
transform: scale(1);
●
opacity: 1;
●
transition-duration: 1.5s;
transition-property: transform;
●
transition-timing-function: linear;
●
}
●
#logo:hover {
transform: scale(1.5);
opacity: 0.5;
}
</style>
ease
transition-timing-function:
transition-timing-function:
transition-timing-function:
transition-timing-function:
transition-timing-function:
緩解
linear;
ease;
ease-in;
ease-out;
ease-in-out;
CSS 延遲轉換 transition-delay: time
<style>
#logo {
transform: scale(1);
opacity: 1;
transition-duration: 1.5s;
transition-property: transform;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
#logo:hover {
transform: scale(1.5);
opacity: 0.5;
}
</style>
CSS 綜合設定
transition: 轉換時間 轉換屬性 轉換方法 延遲轉換
<style>
<style>
#logo {
transform: scale(1);
原始
簡化
opacity: 1;
transition-duration: 1.5s;
transition-property: transform;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
#logo:hover {
transform: scale(1.5);
opacity: 0.5;
}
</style>
#logo {
transform: scale(1);
opacity: 1;
transition: 1.5s transform ease 1s;
}
#logo:hover {
transform: scale(1.5);
opacity: 0.5;
}
</style>
CSS 動畫名稱設定
animation-name: 關鍵影格名稱
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#logo {
animation-name: normal-logo-animation;
}
@keyframes normal-logo-animation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
</head>
<body>
<img id="logo" src="dtc-logo.png" />
</body>
</html>
CSS 動畫時間設定時間
animation-duration: 10s
<style>
#logo {
animation-name:normal-logo-animation;
animation-duration: 10s;
}
@keyframes normal-logo-animation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
<style>
#logo {
nimation-name:percent-logo-animation;
animation-duration: 10s;
}
@keyframes percent-logo-animation {
0% {transform: rotate(0deg);}
50% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}
</style>
CSS 動畫轉換方法
●
●
●
animation-timing-function: 屬性值
animation-iteration-count: 重複數字, infinite
animation-direction: normal, reverse,
alternate, alternate-reverse
屬性設定：
●
●
●
●
●
transition-timing-function:
transition-timing-function:
transition-timing-function:
transition-timing-function:
transition-timing-function:
linear;
ease;
ease-in;
ease-out;
ease-in-out;
CSS 播放
● 播放延遲設定
○ animation-delay:
time10s
● 播放狀況設定
○ animation-play-state:
paused, running
<style>
#logo {
animation-name: normal-logoanimation;
animation-duration: 10s;
animation-timing-function: ease-inout;
animation-iteration-count: 2;
animation-direction: normal;
animation-play-state: paused;
}
#logo:hover {
animation-play-state: running;
}
@keyframes normal-logo-animation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
CSS 綜合設定 animation
animation: 影格名稱 動畫時間 轉換效果 重複次數 播放方向 延遲時間 播放狀態
<style>
#logo {
animation-name: normal-logo-animation;
animation-duration: 1.5s;
animation-timing-function:ease-in-out;
animation-iteration-count: 2;
animation-direction: normal;
animation-delay: 2s;
原始
animation-play-state: paused;
}
#logo:hover {
animation-play-state: running
}
keyframes normal-logo-animation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
<style>
簡化
#logo {
animation: normal-logo-animation;
10s ease-in-out 2 normal 2s pause;
}
#logo:hover {
animation-play-state: running
}
@keyframes normal-logo-animation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
Fomatting(1)
●
●
●
●
●
<abbr> Defines an abbreviation or an acronym
<address> Defines contact information for the author/owner of a document/article
<b> Defines bold text
<bdi> Isolates a part of text that might be formatted in a different direction from other text
outside it
<bdo> Overrides the current text direction
●
●
●
●
●
●
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<dfn> Represents the defining instance of a term
<em> Defines emphasized text
Fomatting(2)
●
●
●
●
●
●
●
●
●
●
●
●
●
●
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
Fomatting(3)
●
●
●
●
●
●
●
●
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<template> Defines a template
<time> Defines a date/time
<u> Defines text that should be stylistically different from normal text
<var> Defines a variable
<wbr> Defines a possible line-break
回家作業
● 課前溫習w3school
● 製作猜謎網站
● 製作個人履歷網站
Download
advertisement