0%

20170101 深入淺出 HTML & CSS

Posted on Edited on In Disqus:

hackmd.io 移轉到 blog

Ch03 網頁架構

將內容架構和視覺呈現分開
選用意義和內容架構最接近的 HTML 元件, 可以給瀏覽器和開發者最好的能力和彈性

inline element VS block element

q vs blockquote

空元件 void element( emty element )

設計成沒有內容的元件稱為空元件

目前空元件有這幾種:
<br>
<img>

<br> 縮寫的由來

1
2
3
<br>(沒內容)</br>
<br></br>
<br>

需要用到空元件時, 只用到起始標籤
這是種方便的縮寫, 減少 html 當中的標記量

除非要相容 xhtml, 否則不要用<br/>

建立清單

  1. 將項目用 li 元件包起來
  2. 根據清單種類選用 ol( order list 有序), ul( unorder list 無序) 元件

巢狀清單

1
2
3
4
5
6
7
8
9
<ol>
    <li> 1 </li>
    <li> 2
        <ul>
            <li>A</li>
            <li>B</li>
        </ul>
    </li>    
</ol>

Ch04

a 元件

可透過 id 連結到某個元件
內容可以包其他元件, 以產生連結的功能

Ch07

element > 喜歡他的解釋, 容易記憶

1
<link type="text/css" rel="stylesheet" href="lounge.css">

  • Use the link element to “link in” external information.

  • The type of this information is “text/css”— in other words, a CSS stylesheet.

    As of HTML5, you don’t need this anymore (it’s optional), but you may see it on older pages.

  • the stylesheet is located at this href

  • The rel attribute specifies the relationship between the HTML file and the thing you’re linking to.

    We’re linking to a stylesheet, so we use the value “stylesheet”.

  • is a void element. It has no closing tag.

inheritance !!

Q：並非所有屬性都會被繼承 > 怎麼判斷？

This is where a good reference really comes in handy, like O’Reilly’s CSS Pocket Reference.

In general, all of the styles that will be inherited.

  • affect the way your text looks

    font color (the color property),
    font-family
    font-size
    font-weight (for bold text)
    font-style (for italics)

Overriding inheritance

用權重來覆寫

elements can be in more than one class

The world’s smallest and fastest guide to how styles are applied

  • do any selectors select your element?

  • What about inheritance?

    問題：因為我們被種在別的網頁, 會有哪些屬性被繼承, 這個我們無從得知

  • Struck out again? Then use the default
    以上都沒有？用瀏覽器預設值

  • What if multiple selectors select an element? > 比較權重

  • If we still don’t have a clear winner? > 比較順序
    If you can’t resolve a conflict because two selectors are equally specific, you use the ordering of the rules in your stylesheet file; that is, you use the rule listed last in the CSS file (nearest the bottom).

CSS 驗證：http://jigsaw.w3.org/css-validator/

Ch08 CSS 屬性

字體設定

font-family
font-size
color(text color)
font-weight

lighter normal bold bolder

text-decoration

none underline overline line-through

font-family

Each font-family contains a set of fonts that share common characteristics. There are five font families: sans-serif, serif, monospace, cursive, and fantasy. Each family includes a large set of fonts, so on this page you’ll see only a few examples of each.

  • Serif family
    Serifs are the decorative barbs and hooks on the ends of the letters.
    The serif family includes fonts with serifs. A lot of people associate the look of these fonts with newspaper print.

  • Sans-serif family
    Sans-serif means “without serifs.”
    The sans-serif family includes fonts without serifs.
    These fonts are usually considered more readable on computer screens than serif fonts.

  • Monospace family
    The monospace family is made up of fonts that have constant- width characters. For instance, the horizontal space an “i” takes up will be the same width that an “m” takes up. These fonts are primarily used to show software code examples.

  • Cursive family
    The cursive family includes fonts that
    look handwritten. You’ll sometimes see these fonts used in headings.

  • Fantasy font family
    stylized decorative fonts.

字體名稱包含空白, 用引號刮起來

sans-serif 和 serif 是一組代稱, 由瀏覽器根據他可以用的字體去做選擇, 看那些字體算做 sans-serif 或者 serif

字體來源:
電腦本身有的字型
網路字型 @font-face

使用自訂的字型: @font-face

字型檔格式:
.ttf, .otf, .eot, .svg, .woff(web open font format)

Step1: 加入自訂字型

1
2
3
4
5
@font-face{
    font-family: "Zone Test"
    src: url("http://.../zone.woff"),
    src: url("http://.../zone.ttf");
}

Step2: 使用自訂字型

1
2
3
h1 {
    font-family: "Zone Test", serif
}

fon-size 單位

絕對

px

相對

相對於繼承到的字體大小, 表示方式不同而已
%: 150%
em: 1.5em

瀏覽器定義的關鍵字

xx-small(約當 12px, 視實際實作情形而定)

x-small(約 xx-small 1.2 倍, 以此類推)

注意事項: 使用 px, 舊版 IE 不支援文字縮放

color 設定方式

%: 相對於 255 #: 16 進位表示法

1
2
3
4
5
6
7
8
9
10
11
h1{
    font-color: rgb(80%, 40%, 0);
}

h1{
    font-color: rgb(204, 102, 0);
}

h1{
    font-color: #cc6600;
}

text-decoration

可同時設定多組
under-line
over-line
line-through
none

color 控制的是前景色(foreground color)

包含文字和框線
框線色彩可用 border-color 另外設定