2012年10月9日 星期二

我也會 CSS 排版功力大躍進


CSS就是HTML的進階功能補充。
許多HTML做不到的變化，CSS都可以「輔助完成」。
所以要運用CSS，就要先搞懂什麼是HTML才成。

談 CSS ，最重要的一個功能語法就是 style="xxx" 。
搞定這個，算是出師了。

CSS寫作格式範例：

style="color: red; font-size: 3em; border: 1px solid gray;"


按 這裡看 css  style的效果

語法：

 <div  style="border: 1px solid red;">
這裡是內容。這裡是內容。
</div>

DIV呈現效 果：

這裡是內容。這裡是內容。



★★請先看教學影音，比較好…


  • 好戲開鑼

先舉個例子，好讓你一目了了。首先要看得懂如下的HTML語法：

前一段。
<div>這是測試的段落。</div>
後一段。

然後，在網頁就會變成如下：

前一段。
這是測試的段落。
後一段。

好了，<div>xxx</div>語法除了區塊斷行之外，看起來似乎沒有什麼變化。那麼，style="xxx"可以再來補充什麼進階功能呢？看好哦…開始要加上 style="xxx" 這個功能了…。Html & CSS語法如下：


前一段。
<div style="border: 1px solid black;">這是測試的段落。</div>
後一段。

那，網頁變成：

前一段。
這是測試的段落。
後一段。

哇，中間段落加上了框線。而且是「黑色」「實心」框線。

先來說明 style="border: 1px solid black;"
  1. border: 1px （指線寬1px） solid（指實線） black（指黑色）
  2. 之後要加上「;」，表示結束。很重要哦。
CSS之所以強，就是有很多變化，例如我們改成 style="border: 1px dashed red;" 。那來看看：


前一段。
<div style="border: 1px dashed red;">這是測試的段落。</div>
後一段。

綱頁變成如下：

前一段。
這是測試的段落。
後一段。

厲害吧！！！

說明：
 style="border: 1px dashed red;"：dashed是指「虛線」 red是指「紅色」。也可以用顏色代碼，如 #FFB90F。那就會成了這樣：   style="border: 1px dashed #FFB90F;"。

好，那如果有多個指令要一起來呢？先看如下：

前一段。
<div style="border: 1px dashed red; background-color: #FFFFE0; font-family: '微軟正黑體'; font-size: 120%;">這是測試的段落。</div>
後一段。

綱頁呈現為：

前一段。
這是測試的段落。
後一段。

各位可以看到，我們多加了「 background-color: #FFFFE0;」背景色的語法標籤。「font-family: '微軟正黑體';」字體標籤。「font-size: 120%;」字體大小標籤。多種控制碼就同時呈現效果。記得要在每個控制碼後面加上「;」，表示該控制碼的結束。

CSS style好玩的東東很多。以後有空再教。同學有概念了，可以自行到網站去找資料並理解CSS語法了。


  • 同場加映

最後再玩一個「陰影字效果」（google chrome才有效果哦），讓大家開心：

真是令人太爽了

語法：

<span
style="color: #0000ff; font-family: '微軟正黑體'; font-size: 300%; font-weight: bold; text-shadow: #ee0000 1px 1px 3px;">真 是令人太爽了</span>

請各位自行到google 找「CSS3 文字陰影效果」或是「text-shadow」。就有一堆資料可學了。

呵呵，還有一堆同學想要的「走欄效果」，按這裡看範例。


補充說明：span V.S. div；線性樣態以及區塊樣態

在上面的例子中，可以看到<span>以及<div>的使用。但，這其實是兩種非常不同的版面空間處理概念。
一、Div（block）是區塊概念，亦即它會以一個長方型的「區塊」來佔據整個版面。不管整個長方型的內容有沒有被填滿，這個長方型空間已被電腦標定為 「被佔據」狀態。
二、Span（inline）是線性概念。被span包起來的編輯物件，就只是單純的被標記為「包起來了」，如此而已。可以對這被包起來的單位進行css 變化，但不會有版面上的變化。

範例說明：

語法：

前面的文字
<div style="width: 80%; border: 1px solid orange; font-weight: 800;">這是DIV內的文字。</div>
後面的文字<br>

呈現：

前面的文字
這是DIV內的文字。
後面的文字


語法：

前面的文字
<span style="border: 1px solid orange; font-weight: 800;">這是DIV內的文字。</span>
後面的文字<br>


呈現：

前面的文字 這是DIV內的文字。 後面的文字



HTML v.s. CSS：
  1. HTML是早期的效果變化的語法。隨著變化的需求增加，後來推出CSS語法，使網頁寫作更方便、更便利。
  2. HTML的「效果」，在CSS裡都有。CSS完全包含了HTML。所以，目前使用CSS是主流的網頁寫作技能。
  3. CSS的使用方法有三種。一、style="xxx"。二、class的使用。三、id的使用。

HTML 語法形態
 CSS 語法形態
<i><u>斜體加底線</u> </i>
效果：

斜體加底線



 <span style="font-style:italic; text-decoration: underline;">斜體加底線</span>
效果：

斜體加底 線

<style>
.wordeffect {
font-style: italic;
text-decoration: underline;
}
</style>

<span class="wordeffect">斜體加底線</span>
效果：

斜體加底線

<style>
#wordeffect02 {
font-style: italic;
text-decoration: underline;
border: 1px solid darkred;
}
</style>

<span id="wordeffect02">斜體加底線</span>
效果：

斜體加底線

★<style>xxx</style>，請放置在<head>xxx</head>之間。
★ Class可以不斷的重覆被套用到不同的地方，但id只能套用在一個地方。
★如果三種方式都有設定到相同的參數，例如width，那麼優先權是： style > id > class 。

教學影音：使用CSS的三種方法




★ CSS 不同方式的實例使用（效果相同，但使用的方法形態不同）：


style  的方式：

<img style="width: 400px; padding: 2px; background-color: lightgray; border: 2px solid red;"
src="https://farm5.staticflickr.com/4448/23756956808_1a326026c3_o.jpg">


Class  的方式：

<style>

.testclassname01 {
width: 400px;
padding: 2px;
background-color: lightgray;
border: 2px solid red;
}

</style>


<img class="testclassname01"
src="https://farm5.staticflickr.com/4448/23756956808_1a326026c3_o.jpg">



★呈現（兩個都相同）：


style方式：




Class  的方式：




為什麼要用 Class 這個功能呢？

因為使用一個 Class 就可以讓很多圖像（媒材）使用，這樣就可以形成統一的畫面元素。同時，如果要更改的話，只要去 Class 改動一下，就可以了。


例如：

<style>
.imgtest01 {
width: 200px;
border: 2px solid black;
padding: 2px;
filter: brightness(200%);
}
</style>

<img class="imgtest01" src="https://farm5.staticflickr.com/4335/37419575985_74842e7ce6_o.jpg"><br>
<img class="imgtest01" src="https://farm5.staticflickr.com/4457/37830478406_64ba156579_o.jpg"><br>
<img class="imgtest01" src="https://farm5.staticflickr.com/4509/37190231194_5fb6fde459_o.jpg"><br>


呈現：







馬上使用：套 用漸層色

愈來愈多的CSS效果，在網路上有生產器，並且是以「快速套用」的方 來使用。例如，套用漸層色。我們馬上來練習使用。
漸 層色套用CSS語法生產器網站。Click!!


範例呈現：




語法：

<div class="div-gradient20191013"><br>
</div>



CSS 字型常用相關語法

語法
 參數
 呈現
font-family: Verdana, '微軟正黑體';
 新細明體；標楷體
 標楷體
font-size: 1.2em;
 15px; 150%;
 字 型放大
font-weight: bold;
 normal;
粗 體
letter-spacing:0.3em;
 3px;
 字距加大
color: darkred;
 orange;
 字體顏 色
font-style: italic;
 normal;
 字體形狀
text-decoration: underline;
 line-through;
 字體底線樣式
line-height: 1.2;
 2;
行的高度



★我 想要讓「整個網頁」有固定寬度，同時居中，要如何 做？


語法：

<body style="margin: auto; width: 640px; border: 1px solid gray;">

說明：
對「整個頁面」進行變化設置，請將css設置在<body   xxx>裡。



★被span的文字要如何位移至居中？


被span包起來的文字，例如<span>文字文字</span>，如果要居中（左、右），那麼就要在其外面加上DIV。再將 DIV設為內文居中。

★注意，<span>本身不能位移，因為它只是為文字做「標記」而已。在其上設了DIV，有了DIV給的「區塊空間」，所以span才能有空 間依據來位移。

語法：

<div style="border: 1px solid red; text-align: center;">
<span style="font-style: italic; text-decoration: underline; font-weight: 800;">這是被Span的文字。</span>
</div>

呈現：

這 是被Span的文字。



★我 有做出好幾個class，要如何來命名以及排列它們？


語法：

<style>
.classname01 {
color: red;
font-family: '微軟正黑體';
font-size: 1.07em;
font-weight: bold;
}

.classname02 {
color: gray;
font-family: '微軟正黑體';
font-size: 1.07em;
font-weight: bold;
}

.classname03 {
text-decoration: underline;
text-decoration-color: red;
border: 1px solid gray;
padding: 5px;
}

#idname01 {
background-color: lightgreen;
}


</style>

說明：

把你設置好的class，就依序的排列在<style>xxx</style>裡面，這樣就可以了。id也是排入裡面就成。
再來， class的名稱是可以你自己命名的，也就是「.」後面的文字。
命名原則是：要有英文字母。不可以只是 數目字。不要用中文。


多個 class 以及 id 的使用範例：

<div class="classname01 classname03" id="idname01">
這是文字內容。使用了兩個 class，以及一個 id。
class 可以多個共同，中間要有空白，能共同增加效果力。
</div>

這是文字內容。使用了兩個 class，以及一個 id。 class 可以多個共同，中間要有空白，能共同增加效果力。




我想要立刻、馬上地上手進階使用。 

1. 簡單、快速：3秒調出漂 亮文字布局
2. 快速的讓文字變得好看
3. CSS 的文字魔術
4. 讓人「讀得進去」的文字安排
5. 網路新聞文字寫作技巧 #10 Tips



CSS使用技法練習作業


練習題一：

請寫出HTML編輯文本，使 CSS 的 class 的技法，來呈現出如下例之文本樣態！



呈現樣態：

這裡面是文字。請同學用這裡所學的CSS技法，來做出相同感覺的文字區塊呈現樣態。 文字呈現是閱讀的重中之重。



CSS語法：

<style>
.divword2017101701 {
font-family: Verdana, '微軟正黑體';
font-size: 1.09em;
font-weight: 900;
line-height: 1.8;
letter-spacing: 0.07em;
border: 1px dotted red;
}

.divspan2017101701 {
color: red;
font-style: italic;
text-decoration: line-through;
}

</style>


練習題二：

請用 style="xxx" 這樣的寫作技法，來完成上例的文本呈現樣態？請重開新檔。


練習題三：

請跟著下方廣告範例，做出常見的〔大、中、小〕式摘要呈現樣態。請使用三組DIV來完成。


更多「大中小」文字呈現樣態





網頁文字寫作技巧：


Keep it Short

Web writing needs to be much shorter than other kinds of writing. Research shows that people scan web text, rather than read every word. Make it easy for your users to scan for information quickly. A paragraph should consist of 70 words or less.
read more ...




3 則留言:

  1. Unknown2016年4月26日 凌晨12:48

    老師 第2個class的陰影沒有出來,不知是否語法有誤.

    回覆刪除
    回覆
    1. M.C. Lee2016年4月26日 上午9:46

      這個語法比較新，要用google chrome才能看得到，你先試看看

      刪除
    2. Unknown2016年4月26日 晚上11:44

      感謝老師
      用google chrome可以看得到陰影及圓角的效果.

      刪除