HelloME: 10月 2016

2016年10月9日星期日

[HTML] 學習 006 CSS 怎麼加

先前已經有個簡單的加入CSS的範例了,
那將 CSS 與網頁結合,
主要就會透過 CSS 選取器來對 HTML 標籤進行控制.

選取器有三種:
1. 標籤選取器
2. Class 選取器
3. ID 選取器
利用先前範例來進行修改看看改變狀態.

原先網頁:

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Conntent</title>
</head>
<body bgcolor="99FF99" text="#FFFFFF">
<table width ="608" hright="320" border="1">
    <tr>
        <td align= "center" bgcolor="blue">Blue</td>
        <td align= "center" bgcolor="green">Green</td>
        <td align= "center" bgcolor="red">Red</td>
    </tr>
    <p>
        ABCDEFG
    </p>
</table>
<a href ="http://www.google.com.tw/" target="_black">Botton to connent the network </a>
</body>
</html>

1. 標籤選取器 - 將,<p> 和 </p> 內的字體做調整.

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Conntent</title>
<style>
    p{
        font-family: Arial;
        color:#F00;
    }
</style>
</head>
<body bgcolor="99FF99" text="#FFFFFF">
<table width ="608" hright="320" border="1">
    <tr>
        <td align= "center" bgcolor="blue">Blue</td>
        <td align= "center" bgcolor="green">Green</td>
        <td align= "center" bgcolor="red">Red</td>
    </tr>
    <p>
        ABCDEFG
    </p>
</table>
<a href ="http://www.google.com.tw/" target="_black">Botton to connent the network </a>
</body>
</html>

由粗體部分來看,
利用大括號 { } 將所有屬性與值包起來,
表示一個完整的 CSS 宣告.

其中屬性與值用 : 來區隔, 屬性與屬性用 ; 來區隔.

在 CSS 宣告結束後,
網頁內的所有對應標籤內容就會套用宣告的樣式效果.

2. Class 選取器

3. ID 選取器

From 精通 CSS 網頁設計法則

2016年10月8日星期六

[HTML] 學習 005 CSS 的一些知識

from 精通CSS 網頁設計法則

CSS 的其一個優點是能在任意瀏覽器呈現風格效果,
而能這樣被廣泛應用的原因是因為應用了 W3C 的準則.

W3C world wide consortium

一個網頁三個部分組成
1. Structure
2. Presentation
3. Behavior

Structure
網頁內的元素安排, 如圖片, 標題和內文.
語言如XHTML1.0, XHTML1.1 和 XML1.0.

Presentation
網頁呈現方式, 文字, 背影和色調.
語言如CSS1, CSS2 和 CSS3.

Behavior
網頁內容互動, 如提交資料, 選單顯示等.
語言如ECMAScript 262, D3C DOM.

在W3C中提供了一個判斷用戶的 CSS 是否合於規範的網站,
http://jigsaw.w3.org/css-validator/validator.html.en

2016年10月4日星期二

[HTML] 學習 004 css 與 HTML 轉變顯示語法

先由程式碼來看,
HTML 的程式碼:
doc3.html
<html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
   <link rel= "stylesheet" href="style1.css">
   </head>

   <body>
       <h3><font color="#000099" face ="微軟整正黑體"> 標籤1 </font></h3>
       <p>正文1</p>
       <h3><font color="#000099" face ="微軟整正黑體"> 標籤2 </font></h3>
       <p>正文2</p>
       正文3
   </body>
</html>

再來看使用了 css 的程式碼
doc4.html
<html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
    <style>
       h3{
           font-family:"微軟整正黑體";
           color:#000099;
       }
    </style>
    <link rel= "stylesheet" href="style1.css">
   </head>

   <body>
       <h3> 標籤1 </h3>
       <p>正文1</p>
       <h3> 標籤2 </h3>
       <p>正文2</p>
       正文3
   </body>
</html>

利用 css 來將該網頁的 <h3> 標籤所框選的內容直接修改,
在程式碼的情況下程式將變得更加的清晰明瞭.

下圖示以上兩個程式碼執行顯示後的樣子.

總網頁瀏覽量

2016年10月9日 星期日