DIV區塊概念 & css選擇器初步 數位文本的寫作基本觀念
想要寫好數位文本、搞定數位寫作；
一定要建立起來的數位媒材基本運作方式。
對初學者而言，談DIV的特色，並沒有太大意義。
在沒有寫作運用的經驗下，你無法想像那些所謂DIV的媒材特性；當然你更無法去想像為什麼要用DIV？如何使用DIV？
你先把以下三個常用的基本概念，暫時先「硬記」起來！
DIV是區塊的，是block的空間概念。請看video。
通常，我們會把媒材，例如文字、圖像、影音…等等用DIV包 起來，再來處理DIV。
DIV非常適合用來處理版面空間移動和互動效果，所以被大量使用。
DIV是最方便用來寫作數位文本的媒材物件！elements!更重要的是，它是「區塊」媒材物件。
再來是，如何選出你要的DIV呢？這就是選擇器要出馬的時候了。
1.DIV基本語法：
<div>
這是內容，可以是文字、圖像等等…。
</div>
名詞使用／翻譯：
<div class="claname01" width="400" style="border: 1px solid
red;">DIV內容媒材</div>
<element attribute="value" attribute="value" attribute ="property:
value;">DIV內容媒材</div>
<物件 屬性="屬性值" 屬性="屬性值" 屬性="參數: 參數值;">DIV內容媒材<結束碼〉
說明：
上面是常見的語法術語。英文和中文翻譯，我也都列在裡面。
有幾個地方，可以多談一下。
一、
element，我譯為「物件」。一般常見的是「元素」。為什麼我譯為物件？我並不是「直譯」，而是依「功能」的概念來譯。這樣在上課的解釋說明時，可以
把想法表墶的更清楚。
當我們把某些媒材，上例是幾個文字，用DIV包起來，是為什麼呢？為什要「多做」這些麻煩的寫作動作呢？
那是因為，我們其實是想把「那個幾字」圈封在一起，來對之進行變化操作，如改顏色、移動位置等等。
在這一思維過程中，那幾個字是被轉換為「物件」來思考，因為「人類」這種生物只能以「物件」的概念來思考「對象物」。這即是胡塞爾所談的「意向性」。
羅伯．索科羅斯基談論意向性時說道：「每一個經驗活動，都是具有指向性的：意識總是『對於某事某物的意識』，經驗總是『對某事某物的經驗』」（羅伯．索科
羅斯基／李維羅譯，2004：24）。意向性，「標誌著所有意識的本已特色」（倪梁康，1999：249）。
依此而論，當使用element時，是想對媒材進行某種操作，因之，element譯為「物件」，比傳統元素直譯，來得更為接近「寫作心理狀態」的描述。
從寫作／閱讀角度出發，而不是從「技術語法」出發，是我在思考數位文本理論，所持的立場（李明哲，2017）。這也反映在網路教案中。
二、
一個媒材物件內，可以有很多「屬性」，例如上述中calss、width等等。要注意的是：這些屬性是「同一位階的」。換言之，是和物件「平行的同一位
階」地對「物件」進行變化操作。
這樣的理解很重要，因為以後使用css選擇器時，位階關係是選擇判斷上的重要依據。例如elemetn[attribute]／div[class=
"name"]，是「屬性選擇器」，只能用屬性來選。
那麼，style這個屬性就比較的不同了。
例如 width="400“ 個屬性，只要下「屬性值」就好。但style="width:
300px;"這個屬性，卻有更多的操作變項，可以稱之為「參數：參數值」。
因之，在教案內，一般而言，提到參數、參數值，往往是指style屬性。
注釋：
羅伯．索科羅斯基／李維羅（2004）。《現象學十四講》。台北市：心靈工坊文化。
倪梁康（1999）。《胡賽爾現象學概念通釋》。北京：新知三聯。
李明哲（2017）。《能動敘事文本寫作的現象學分析》。台北市：五南。
2.DIV的block特性
這是DIV和其內容。請看影音教學，了解什麼是block。
這是後面的文字…
說明：
DIV是區塊媒材物件，「區塊」是一種「空間的」概念。也就是說，只要你下了DIV指令（區塊物件），電腦就認為你「佔領了」一個「版面空間區域」，
如上例紅色框線內的版面空間區域，就被圍封起來了。
即使，DIV的版面空間，沒有填滿內容，那也不怎麼樣，反正電腦認為，那一塊版面空間已被圍封起來了，
不能再被DIV以外的媒材來佔領使用。
舉例：
DIV前面的文字
DIV後面的文字
說明：
我們可以看到，即使DIV（區塊物件）設置了某些屬性，例如寬、高，同時又是區塊居中。裡面的文字也只有幾個。
但，那又怎麼樣？電腦反正認為，那一個「版
面空間」已經是被圍封了（mouseover ↑，綠線區），被佔領了。DIV之外的其他媒材再也不能使用了。
VIDEO
那麼，區塊媒材物件到底有那些呢？
請看這裡，w3schools.com最權威的整理 。
3.DIV可將媒材打包起來之運用
這是我的新書。
使用DIV的互動效果，
一、媒材可以一起打包位置移動（click） ；
二、流暢的互動效果（click） 。
單純照片 （醜）有加上div的照片 （流
暢）
影音教學：
VIDEO
精準控制DIV位置關係的寫作技能
區塊位置 VS 內容位置（一定要了解 ）▽
Click! ▽
區
塊靠左 區
塊居中 區
塊靠右
內
容靠左 內
容居中 內
容靠右 HTMＬ語法;
<div style="border: 1px solid red; margin:
left;
text-align: left; ">
效果呈現：
這是內容，可以是文字、影像和影音。
說明：
區塊靠左、內容靠左 ，是預設值。可以不再寫出來，
就會有的效果。
控制DIV裡面文字（／媒材）的靠齊位置：靠左、居中、靠右
CSS語法：
style=" text-align: center; " //
left, center, right; 靠左、居中、靠右
HTML範例：
<div style="
text-align: center;
border: 1px solid gray;">這是內容文字。</div>
呈現：
這是內容文字。
改變DIV的外貌：寬高、邊框、陰影、圓角、傾斜
/*寬、高*/
style="width: 200px; height: 200px;"
說明：通常只寫寬度，高度讓內容決定
/*DIV內容位置*/
style="text-align: left;"
說明：text-align: center; //left, center, right，內文居左、中、右。
/*DIV本身居中*/
style="margin: auto;"
說明：寬度要小於編輯區域才有用。
/*DIV本身靠右*/
style="margin-left: auto; margin-right: 0px;"
說明：兩者要一起寫。Xpx是與右邊界距離。
/*留白（內邊距）*/
style="padding: 1em;"
說明：也可以單獨控制四個邊，padding-left: xxx; //left, top, bottom, right。'em'是「一個字寬度」。
/*外邊距*/
style="margin: 1em;"
說明：也可以單獨控制四個邊，margin-left: xxx; //left, top, bottom, right
/*邊框*/
style="border: 1px solid gray;"
說明：也可以單獨控制四個邊，border-left: xxx; //left, top, bottom, right
/*陰影*/
style="box-shadow: 2px 2px 5px silver;"
說明：x, y, blur, color
/*圓角*/
style="border-radius: 25px;"
說明：25px是圓化的比例
/*傾斜*/
style="transform: rotate(-3deg);"
說明：-3deg是指斜度，可以是正、負值
/*背景色*/
style="background-color: #FFED97;"
說明：可以使用顏色代碼表或顏色名字，
click here!
CSS的合併使用
<style>
.divchange {
box-shadow: 2px 2px 5px silver;
border-radius: 25px;
transform: rotate(-3deg);
background-color: #FFED97;
}
</style>
呈現：
對DIV
外貌加以變化
CSS選擇器的初步基礎觀念及操作
什麼是CSS選擇器？講了你也不會懂。只有在你有某種數位文本寫作操作的經驗之後，你才有可能「用那些經驗」，來「理解」我所要表達的。
「操作經驗」，真的很重要，不然你聽不下去，看不下去，這網頁教案了。
選擇器的使用，就是要你能具備一種能力，這種能力就是你可以隨心所欲的去「掌握」數位文本中，任何一個媒材物件。掌握了你想要控制的媒材物件，就可以對之進行變化操作或互動設置。
其實，「讀書」也是如此的人性經驗結構；要先有某些「背景知識」，你上某些「深一點的課」時，才有可能聽懂。來，如果你是讀傳播的，我介紹你讀一些
非常重要的背景知識的書，請看 。
好，來，如果你上課上到這裡，應有能力看懂 下面
語法範例解說 。
<style>
.classname01 {
border: 1px solid red;
}
/*
這是指所有的、有著class="classname01"的媒材物件，不管是DIV、IMG、Table等等，都會受到這個class的設定內而被作
用。
*/
#idname01 {
border: 1px solid red;
}
/*
同樣的，這是指所有的、帶著id="idname01"屬性的媒材物件，不管是DIV、IMG、Table等等，全部都會受到這個id的設定內而被作用。
class、id這兩個是之前教過的，常用的。
*/
div {
border: 1px solid red;
}
img {
border: 1px solid red;
}
span {
border: 1px solid red;
}
/*
第一個，這是指所有的DIV編輯物，全部都會受到參數設定內容而被作用。不只是DIV，任何編輯物都可以如此設定。例如
span、table、img等，如上例。
*/
【過瀘作用】
div.classname02 {
border: 1px solid red;
}
/*
有時，為了快速，媒材物件和class可以合併書寫使用，如上例。這是指，所有有著class="classname02"的DIV，都會被參數所作用。
其他的媒材物件也可以，例如，table.classname03 {xxx} 。這其實有著過濾作用。
*/
【合併作用】
div, img, span {
border: 1px solid red;
}
/*
這是指合併數個媒材物件，都同樣作用於相同某種參數。此例，div、img、sapn都被作用了，你也可以再加其他媒材物件。中間用「,」（半型字元）隔
開。
*/
</style>
再來，一個媒材物件可以使用多個class，如下例
語法 ：
<div class="claname01 claname02 claname03">content</div>
如果，不同的class有相同的參數，例如claname01和claname03都有顏色參數，那麼以「後面的」為準，即claname03為勝出。
可以有聰明選擇作用的「過瀘效果」：
在作互動寫作過程，一定是需要大量的「選擇過程」，選擇那個物件要被互動。因此，好的選擇方式來正確「命中」物件元素，就是要去練習的寫作技能。
在這裡，我們介紹一個常用的，很好用的方式：屬性選擇器之「*」效果。那是有符合「某字串」，就可以被選擇出來的過濾作用。
物件[屬性*="文字"]
CSS範例：
<style>
.claname01 {
border: 1px solid black;
padding: 5px;
margin-bottom: 3px;
}
.claname02 {
border: 1px solid black;
padding: 5px;
margin-bottom: 3px;
}
div[class*="01"]:hover {
background-color: lightgray;
}
div[class*="02"]:hover {
background-color: khaki;
}
</style>
HTML語法：
<div class="claname01">
This is a test with classname including "01".<br>
</div>
<div class="claname02">
This is a test with classname including "02".<br>
</div>
<div class="claname01">
This is a test with classname including "01".<br>
</div>
<div class="claname02">
This is a test with classname including "02".<br>
</div>
效果呈現：
This is a test with the classname including "01".
This is a test with the classname including "02".
This is a test with the classname including "01".
This is a test with the classname including "02".
please
hover!! ⇖
說明：
藉由添加「01」、「02」的字串，而形成某種「規律性」，在此是單、偶數列的規律性，就可以形成某種規律選擇性的聰明效果。
舉例說明 // 精彩範例：
對比：
警察常用電擊槍：
平面新聞 VS
互動新聞
如何幫助我們可以有什麼樣的更好理解可能：
Lucky 13
讓人可以更多去理解的作品：
When the sun erupts
讓人可以更多去理解的作品：
Revealed: air pollution may be damaging ‘every organ in the body’
經典作品：
snow fall
more… more…
對初學者而言，談DIV的特色，並沒有太大意義。
舉例說明 // 精彩範例：