1.3 Adding CSS style and HTML structure

CSS Summary and Reference

內容摘要

複習 selector,property,value 的觀念
1. 跟 HTML 的 Element,attribute 用的名稱不太一樣
HTML element是指有 opening tag 和 closing tag ，中間有 content
HTML attribute說明
HTML elementscan haveattributes;Attributesprovide additional information about anelement;Attributesare always specified in the starttag

How do I include CSS Styling in my web page?

有三個方法

1.在head 裡面加一個style element，內寫CSS

2.用link tag連結你的CSS，<link rel="stylesheet" href="main.css">

3.較糟糕的方法，Write your style inline with your HTML

Code Comments

In HTML, code comments begin with. Everything in between is ignored.
In CSS, code comments begin with/*and end with*/.

The Box Model(邊框的概念)

The padding is around the content, it’s affected by the back-ground color of the box. The border is inherited from the color property of the box.Margin doesn’t have the background color and it’s completely transparent.

The size of your actual element is equal to the sum of the border ,padding ,content width

Total actual element width = 10+30+200+30+10 = 280pixels

Box sizing

http://zh-tw.learnlayout.com/box-sizing.html

補充教材解釋了實際的用法，加上 box-sizing 的 property，設定 border-box，可以讓padding和border的增加，不會算進整個box的寬

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

This calculation includes both the border , margin and padding.

Box Sizing and Positioning Summary

Alt attribute:alternate information to the screen 讀不到的時候用來替代的

1.3 Adding CSS style and HTML Structure