*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2012年10月9日 星期二

我也會 CSS 排版功力大躍進


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

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


按 這裡看 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>

<div id="wordeffect02">斜體加底線</div>

效果:

斜體加底線


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

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




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 align="center" style="border: 1px solid red;">
<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 {
color: blue;
font-family: '微軟正黑體';
font-size: 1.07em;
font-weight: bold;

}

#idname01 {
background-color: lightgreen;
}



</style>

說明:

把你設置好的class,就依序的排列在<style>xxx</style>裡面,這樣就可以了。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來完成。


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




3 則留言:

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

    回覆刪除
    回覆
    1. 這個語法比較新,要用google chrome才能看得到,你先試看看

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

      刪除