CSS - Object Decoration

建置一般所看到的瀏覽列的第一步是讓列表變成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。

CSS Layout - 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.

下面這個選取方法，選取#nav底下的<li>元素，中間是空白，不是逗號，要注意。這個可以看CSS Combinator。

改display: block且增加#nav li的背景色，
改list的margin讓list間有點距離
改padding讓文字不要太切邊

#nav li{
    display:block;
    background-color: coral;
    padding: 2px;
    margin: 5px;  
}

此時覺得左邊空太多很醜，這是因為<ul>和<ol>預設離左方與上方有段預設padding故，所以可以把<ul>和<ol>的padding設為0px。

請留心觀察此時的邊界，<li>和<li>間的margin就是5px，連續兩個<li>只會有5px而不是10px。至於左右與上下兩測，總共是15px，原因是.container那邊就10px，而<li>本身又有5px。
這個就應該用瀏覽器的檢查元素來算。
此時你看到的差不多是左邊這個樣子了。

#nav ul{
    padding-left: 0px; 
}

<Practice> nav decoration

請問要怎麼讓超鏈結看起來不要像上面那麼醜？至少像下面這張圖一樣？你要改的有，陰影、文字置中、超鏈結的底線、顏色，下面的程式碼可給你一些基本的提示。其中，超鏈結的裝飾要怎麼去除、陰影要怎麼上，你可能需要查一下google。

#nav li{
    display:block;
    background-color:darkorange;
    margin-top: 5px;
    padding: 5px;
/*add two lines here*/
}
#nav li a{
/*add two lines here*/
}

(Option) Grouped links on banner

接下來做放在banner中的Hyperlink bar，上面那兩組超鏈結也是<li>但要排版到剛好，還有一些小訣竅。

先解決hyperlink的問題，你發現後三個網頁會開啟在這個視窗，除非你點選回到前一頁才可以回到這個頁面，最好的做法是在<a>中使用target=”_blank”屬性，強制在「新的一頁打開連結」，修改程式碼如下圖（請自行決定哪一些要開在新的視窗）

href若後面連結到的並非http://開頭，代表是鏈結到自己的網頁，你可以自行決定要開啟哪一個網頁。

<ul>
    <li><a href="main.html">Back</a></li>
    <li><a href="mybootstrap.html" target="_blank">bootstrap-ex</a></li>
    <li><a href="http://www.w3schools.com/" target="_blank">w3school</a></li>
    <li><a href="http://www.codecademy.com" target="_blank">codecademy</a></li>
    <li><a href="http://goo.gl/Jbg11x" target="_blank">my diigo</a></li>
</ul>

Pseudo-class :hover

超鏈結顏色共可以分成:link、:visited、:active、:hover，可查詢w3schools上的說明http://www.w3schools.com/css/css_link.asp

此時依序修改上述<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的內容，之後再進行介紹。

div#banner li{
    display:inline;
    font-size: 70%;
}
div#banner li a:link,
div#banner li a:visited{
    color: #333;
}
div#banner li a:hover{
    color: white;
}

此時應該會覺得為什麼上面的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 h1{
    margin-top: 10px;
}
#banner ul{
    margin-top: 10px;
    margin-bottom: 10px;
}

此時我希望達到下面的效果，希望把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。

<ul class="adjust-left">
    <li><a href="#">Back</a></li>
    <li><a href="#" target="_blank">bootstrap</a></li>
</ul>
<ul class="adjust-right">
    <li><a href="#" target="_blank">w3school</a></li>
    <li><a href="#" target="_blank">codecademy</a></li>
    <li><a href="#" target="_blank">my diigo</a></li>
</ul>

.adjust-left{
    float:left;
    margin-bottom: 0px;
    padding: 5px
}
.adjust-right{
    float:right;
    margin-bottom: 0px;
    padding: 5px
}

但這時候由於兩邊分別靠左靠右排的關係，使得中間有塊空白空出來，因此<h1>的內容就嵌入兩個<ul>中間如下圖。

此時有一個暴力卻也常見的解決辦法是強制在<h1>前加一個空的<div>且指定class=”clear”。並且新增一條CSS規則為.clear{clear:both;}。還記得前面曾經講過clear:both會使得這個block左右兩邊不得有任何的內容。所以這個空的<div>會強制把<ul>和<h1>給隔開來。

下面若你仍對兩個<ul>的靠左靠右不滿意，請自行調整。

<div id="banner">
    <ul class="adjust-left">...</ul>
    <ul class="adjust-right">...</ul>
    <div class="clear"></div>
    <div class="container">
        <h1>Data Practice Team</h1>
    </div>
</div>

.clear{
    clear:both;
}

Table and List styling

就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>上時，再略微改變背景顏色。

CSS Image Gallery

以下內容參考自w3school的CSS image gallery http://www.w3schools.com/css/css_image_gallery.asp

若要產生相簿多半會以<div>包含著<img>來設計如下圖。概念是一張圖包含著圖像的內容和文字內容，然後用一個<div>包起來，把該<div>設定class為img以便後續CSS或jquery對應。

網站截圖方法有很多種，但最好不要自己截，而採用網路上提供的網站thumbnail擷取工具，可以截出大小一樣的小圖。http://www.shrinktheweb.com/。你可以截取任意一個size，之後再用CSS調整就好。既然如此，當然是越大越好，但太大也會拖慢網頁載入速度。（這邊的練習你可以直接到google image找一些icon來練習）

在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顏色會變更。

div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}

div.img img {
    display: inline;
    margin: 5px;
    width: 180px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border:1px solid darkgray;
}

CSS combinator and pseudo class

請參閱http://www.w3schools.com/css/css_combinators.asp

前面提到好幾種不同的CSS combinator組合，我們做點整理

descendant selector (space) 中間有空白，代表底下所有階層的元素都會選到。
child selector (>) 中間為>，代表只選下一層的元素
adjacent sibling selector (+) 選出之後和我平行的下一個符合元素
general sibling selector (~) 選出之後和我平行的所有符合元素

Pseudo class請見http://www.w3schools.com/css/css_pseudo_classes.asp

最常見的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 {}

Circular portraits

如果你今天想要設計圓形的頭像要怎麼做？https://bavotasan.com/2011/circular-images-with-css3/。有一種做法是把圖片作為background image載入，然後用外面包夾的<div>來限制其形狀，這樣的結果是，這個background image無法被下載。

另一種做法是直接改變圖片呈現的大小：

設定height和weidth為適當的等寬大小。這時候圖案應該會變形
此時加上object-fit: cover來防止圖案變形（如果你的圖案太長，也不適合用，自然建議就是用大概長寬差不多的圖案）
最後更改border-radius為50%。

div.img img {
    display: inline;
    margin: 5px;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    object-fit: cover;
}

Font Decoration

在body或html中同時指定多個字型，這樣若不同的電腦上可能缺少某些字型的時候，瀏覽器會依序替代字型。

body {
    margin: 0;
    padding: 0;
    font-family: 
        "Lucida Grande",
        Helvetica,
        "Helvetica Neue",
        "HelveticaNeue-Light",
        "Helvetica Neue Light",
        Arial,
        sans-serif;
    font-size: 90%;
}

Google font

Google font 提供了你可能需要的字型，你只要像是CSS一樣把你要的字型引入就好。https://developers.google.com/fonts/docs/getting_started, /

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">

body {font-family: 'Tangerine', serif;
      font-size: 48px;
}

Using google font to decorate words

.enjoy-css {
    color: #777;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;
    border: none;
    font: normal 72px/normal "Passero One", Helvetica, sans-serif;
    color: #777;
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1), 0 2px 0 rgba(255, 255, 255, 1), 0 3px 0 rgba(255, 255, 255, 1), 0 4px 0 rgba(255, 255, 255, 1), 0 5px 0 rgba(255, 255, 255, 1), 0 6px 1px rgba(0, 0, 0, 0.0980392), 0 0 5px rgba(0, 0, 0, 0.0980392), 0 1px 3px rgba(0, 0, 0, 0.298039), 0 3px 5px rgba(0, 0, 0, 0.2), 0 -5px 10px rgba(0, 0, 0, 0.247059), 0 -7px 10px rgba(0, 0, 0, 0.2), 0 -15px 20px rgba(0, 0, 0, 0.14902);
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

<link href="https://fonts.googleapis.com/css?family=Passero+One" rel="stylesheet">

Google font example II

Google font beta也可以讓你直接套用CSS字型，不用做的那麼辛苦。

<link rel="stylesheet" type="text/css" href="
https://fonts.googleapis.com/css?family=Rancho&effect=3d-float
|3d">

<p class="font-effect-3d">Made By ji-lung</p>

footer p{
    font: normal 72px/normal "Passero One", Helvetica, sans-serif;
}

PreviousCSS - basic NextCSS - Media Query

Last updated 4 years ago

Was this helpful?

建置瀏覽列Building navigation bar