CSS - Object Decoration
Last updated
Was this helpful?
Last updated
Was this helpful?
建置一般所看到的瀏覽列的第一步是讓列表變成block而不是list。第一步是先加入background-color讓他看得出顏色。當設定為display: block時，原本列表的「點」會消失，會以block的方式呈現。
display共有三個特性none、inline、block
display:none：會使得該元素消失在版面上，但實際上程式碼中仍然有他。
display:inline：會強制使得數個元素排在一列，常用於上端的navigation bar上，上端橫列的navigation bar通常以<ul>列表的方式來撰寫，但通常會用display:inline轉成一列。
display:block：會使得所有元素轉為區塊元素，類似<div>；若是<div>的話，若沒有設定float:left的話，相當於會一列一個。
display:inline-block，意味著inline的block。
From w3school tutorials:
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
改display: block且增加#nav li的背景色，
改list的margin讓list間有點距離
改padding讓文字不要太切邊
此時覺得左邊空太多很醜，這是因為<ul>和<ol>預設離左方與上方有段預設padding故，所以可以把<ul>和<ol>的padding設為0px。
請留心觀察此時的邊界，<li>和<li>間的margin就是5px，連續兩個<li>只會有5px而不是10px。至於左右與上下兩測，總共是15px，原因是.container那邊就10px，而<li>本身又有5px。
這個就應該用瀏覽器的檢查元素來算。
此時你看到的差不多是左邊這個樣子了。
請問要怎麼讓超鏈結看起來不要像上面那麼醜？至少像下面這張圖一樣？你要改的有，陰影、文字置中、超鏈結的底線、顏色，下面的程式碼可給你一些基本的提示。其中，超鏈結的裝飾要怎麼去除、陰影要怎麼上，你可能需要查一下google。
接下來做放在banner中的Hyperlink bar，上面那兩組超鏈結也是<li>但要排版到剛好，還有一些小訣竅。
先解決hyperlink的問題，你發現後三個網頁會開啟在這個視窗，除非你點選回到前一頁才可以回到這個頁面，最好的做法是在<a>中使用target=”_blank”屬性，強制在「新的一頁打開連結」，修改程式碼如下圖（請自行決定哪一些要開在新的視窗）
此時依序修改上述<ul>中性質
新增<li>的style設定display:inline讓全部的項目到同一列，並且調整font-size為70%。
新增超鏈結的a:link屬性與a:visited屬性，顏色為深灰色#333;為超鏈結原本的顏色，以及拜訪過（visited）的超鏈結的顏色。
新增超鏈結的a:hover屬性，顏色為白色。為滑鼠移上去時會出現的顏色。
注意：div#banner li（li前面有個空白）代表id為banner的這個<div>中的<li>元素；div#banner li a（li和a前面都有空白）即代表id為banner的這個<div>中的<li>的<a>元素。
注意：div#banner li a:link, div#banner li a:visited（中間有個逗號）代表前後這兩個項目所配合到的元素都要套用這種樣式，這樣可以避免程式碼過長。
上述兩個注意的內容為CSS selector的內容，之後再進行介紹。
此時應該會覺得為什麼上面的navigation bar和標題跑太下面了，這是因為<ul>和<h1>預設有約20px的margin，為了調整這樣的情形，你可使用chrome的檢查元素。選取<ul>元素後，觀察下方的box model發現上、下方都多了16px的margin。
此時你可以直接點擊下方box model的margin後方的數值，將其改為0，然後觀察一下有何改變之後，將這樣的改變直接寫到你的CSS中。結果是針對<ul>改margin-top與margin-bottom為0px；所以你需要做的事情是針對<ul>新增樣式。
<h1>也有同樣的問題，你可以用margin-top和margin-bottom控制<h1>的位置。
最後針對調整#banner內容位置的結果如下
此時我希望達到下面的效果，希望把banner上的navigation分成兩區。其中一種做法就是把前述HTML中的<ul>分成兩塊如下，並分別加上adjust-left與adjust-right class。若放在adjust-left中的表示要靠左，adjust-right表示要靠右。
接下來新增兩條CSS的class rule，分別為.adjust-left{float:left;}和.adjust-right{float:right;}。也就是利用float讓他們分別靠左靠右。
複習：選取class的方法是前面加個.，選取id的方法是前面加個#，選取某個tag的方法是前面什麼都不加。選取id為xxx的<div>語法為div#xxx。
但這時候由於兩邊分別靠左靠右排的關係，使得中間有塊空白空出來，因此<h1>的內容就嵌入兩個<ul>中間如下圖。
此時有一個暴力卻也常見的解決辦法是強制在<h1>前加一個空的<div>且指定class=”clear”。並且新增一條CSS規則為.clear{clear:both;}。還記得前面曾經講過clear:both會使得這個block左右兩邊不得有任何的內容。所以這個空的<div>會強制把<ul>和<h1>給隔開來。
下面若你仍對兩個<ul>的靠左靠右不滿意，請自行調整。
就HTML表格的設計，可以用下列的方法搭配:hover等變色標籤來視覺化表格的樣式。你的目標是把表格變得滑鼠移上去會變顏色，就td:hover。
<table>的樣式指定了表格的寬度需要橫跨整個<div>，並且框線（boarder）間要有1px的間隔。
<table><th>和<td>則設定了框線的顏色和這些欄位中的字需要距離框線5px（padding:5px）
td:hover則設定了當滑鼠移到<td>上方時，背景色變為darkorgange。
若資料內容並非以表格來呈現，而是以數個連續排列的<div>來呈現（請見【Step HTML-4. 】）
可用的CSS樣式如下。包含將<h2>展示為block，並改變背景顏色，當滑鼠移動到<h2>上時，再略微改變背景顏色。
若要產生相簿多半會以<div>包含著<img>來設計如下圖。概念是一張圖包含著圖像的內容和文字內容，然後用一個<div>包起來，把該<div>設定class為img以便後續CSS或jquery對應。
在HTML一節中定義的圖片和相簿內容，最主要的觀念是把包含圖案和說明的<div>設為float:left，讓它隨著版面大小排列，再一一設定樣式。
div.img適配的目標的是class為img的<div>，<div>間的距離margin:5px，<div>邊界和其內容距離為padding:5px，其他為邊界、高、寬、重點是設定為float:left讓它自動排列，最後調整文字的置中。
div.img img適配的目標是class為img的<div>中的img元素，以inline來設計，並且有margin和邊線為白色。注意：預設有border但設為白色的目的是，讓之後:hover若產生border時，版面不會跳來跳去，因為若沒設定border就直接:hover，那意味著圖的四周會增加1px的border。
最後設定滑鼠若移到超鏈結中的圖片上時，border顏色會變更。
前面提到好幾種不同的CSS combinator組合，我們做點整理
descendant selector (space) 中間有空白，代表底下所有階層的元素都會選到。
child selector (>) 中間為>，代表只選下一層的元素
adjacent sibling selector (+) 選出之後和我平行的下一個符合元素
general sibling selector (~) 選出之後和我平行的所有符合元素
最常見的pseudo class為超鏈結的變色
其次為偵測input box是否被勾選
再來是用來選出第n個子元素
逗號分隔表示這幾個都要這麼做
#content, #nav, #supporting, #banner{}
中間沒有分隔，代表就是那個。例如右邊所選定的就是class為img的那個div
div.img{}
中間有空白分隔，沒逗號，代表底下的那個。例如div.img這個div底下的img element。注意，前面的.img是class，後面的img是element。
div.img img {}
a為hover狀態底下的img element。a:hover為一個pseudo-class。
div.img a:hover img {}
另一種做法是直接改變圖片呈現的大小：
設定height和weidth為適當的等寬大小。這時候圖案應該會變形
此時加上object-fit: cover來防止圖案變形（如果你的圖案太長，也不適合用，自然建議就是用大概長寬差不多的圖案）
最後更改border-radius為50%。
在body或html中同時指定多個字型，這樣若不同的電腦上可能缺少某些字型的時候，瀏覽器會依序替代字型。
Google font beta也可以讓你直接套用CSS字型，不用做的那麼辛苦。
下面這個選取方法，選取#nav底下的<li>元素，中間是空白，不是逗號，要注意。這個可以看。
超鏈結顏色共可以分成:link、:visited、:active、:hover，可查詢w3schools上的說明
以下內容參考自w3school的CSS image gallery
網站截圖方法有很多種，但最好不要自己截，而採用網路上提供的網站thumbnail擷取工具，可以截出大小一樣的小圖。。你可以截取任意一個size，之後再用CSS調整就好。既然如此，當然是越大越好，但太大也會拖慢網頁載入速度。（這邊的練習你可以直接到google image找一些icon來練習）
請參閱
Pseudo class請見
如果你今天想要設計圓形的頭像要怎麼做？。有一種做法是把圖片作為background image載入，然後用外面包夾的<div>來限制其形狀，這樣的結果是，這個background image無法被下載。
提供了你可能需要的字型，你只要像是CSS一樣把你要的字型引入就好。, /
