iT邦幫忙

DAY 4
4

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 4

MIS2000Lab.的「HTML5 認證考試,從零開始」#4--超入門的CSS 與 selector

上一篇文章:http://ithelp.ithome.com.tw/question/10156981

CSS跟上一章介紹的<script>標籤有點類似,

大多寫在網頁的表頭標籤裡面。基礎的架構如下:

<style type=”text/css”>
selector {
property1:value; 作者註解—寫法為「屬性: 值」。
property2:value;
..
propertyN:value;
}
</style>

我們直接用範例CSS_01.html來說明最快(如下圖),

所謂的selector就是指向「下面的<h1>標籤」,

當我們指定<h1>標籤的文字大小、顏色之後,整個網頁的<h1>標籤都會統一管理,

日後要更換<h1>標題的文字與顏色,只要在表頭的CSS統一管理就行了,

不需要深入網頁更改每一個<h1>標籤。

[img=415,342]http://ithelp.ithome.com.tw/upload/images/20140929/201409290950045428bacce6ea6\_resize\_600.jpg[/img]

如果您的CSS設定太龐大,便可以寫在另外一個.css檔案中這是一個純文字檔)。

一樣寫在網頁表頭標籤裡面,寫法如下:

<link rel="stylesheet" type="text/css" href="自己的檔名.css" media="screen">

[img=415,162]http://ithelp.ithome.com.tw/upload/images/20140929/201409290950195428badc00722\_resize\_600.jpg[/img]

在此要推薦微軟說的「當今世界上,最強的開發工具」 -- Visual Studio

您可以到此下載免費的Express版本,記得喔!!要下載 for Web版才是網頁用的!

http://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-web

操作步驟如下:

  1. 先開一個「新網站」

  2. 然後在畫面右側的「方案總管」,請點選您的網站或目錄之後

按下「滑鼠右鍵」,加入一個CSS檔(樣式表)

[img=415,270]http://ithelp.ithome.com.tw/upload/images/20140929/201409290950305428bae6e5e85\_resize\_600.jpg[/img]

[img=415,162]http://ithelp.ithome.com.tw/upload/images/20140929/201409290950465428baf6bc227\_resize\_600.jpg[/img]

完成CCS檔以後,如下圖,

請在您的網頁HTML檔裡面,引用剛剛的CSS檔案。

[img=415,126]http://ithelp.ithome.com.tw/upload/images/20140929/201409290951015428bb059f440\_resize\_600.jpg[/img]

另一種selector的寫法:

下方**CSS裡面的「div.xyz」**是針對<div>標籤,加上class=”xyz”來體現CSS效果。

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type=”text/css”>
div.xyz {
width: 100px;
}
</style>

<div class="xyz"> 簡單的CSS寫法 </div>

善用瀏覽器的工具與偵錯

我們使用IE 11瀏覽器裡面有開發人員的工具

可以針對網頁進行偵錯與比對。只需按下「F12」按鍵即可。

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20140929/201409290951325428bb24767d3\_resize\_600.jpg[/img]

您可以點選不同的HTML碼或是CSS,立刻對照畫面上的成果

不光是IE瀏覽器有這功能,大部分瀏覽器都有提供類似的 Debug工具

下一篇文章:http://ithelp.ithome.com.tw/question/10157184

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#3--HTML Form 表單 & Script程式
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#5-- HTML5超簡易入門
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言