根據在這里 Freecodecamp 實踐，調整順序后做的總結。

css 樣式

 body {background-color: red;  # 跟background-image 不同時使用background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);font-family: sans-serif;padding: 20px;
}h1 {font-family: Impact, serif;font-size: 40px;margin-top:0;  # 清除默認的上邊距margin-bottom:15px;  # 修改默認的下邊距text-align: center;  # left/right
}div {width: 300px;  # width: 80%;max-width: 500px;background-color: burlywood;margin-top: auto;  # margin: auto;   #margin: 5px;  margin-bottom: auto;margin-left: auto;margin-right: auto;padding-left: 20px;  # padding: 20px; # 效果等同于下面四個加起來padding-right: 20px;padding-top:20px;padding-bottom: 20px;
}hr {height: 2px;border-width: 1px; border-color: brown;  # 邊框顏色background-color: red;margin-top: 25px;
}p {font-family: sans-serif;  # 字體  # font-family: Impact, serif;  # 字體font-style: italic;  # 斜體font-size: 40px;  # 字體大小text-align: center;width: 75%;display: inline-block;margin-top: 5px;margin-bottom: 5px;}	img {display: block;  # 使圖片成為行元素display: inline-block;   # inline-block 元素只會占用其內容的寬度。margin-left:auto;margin-right:auto;
}a {color: black;  # 超鏈接的顏色
}a:visited {  # 超鏈接被訪問后的顏色color: grey;
}a:hover {  # 鼠標經過超鏈接時的顏色color: brown;
}a:active {  # 超鏈接被點擊的時候的顏色color: white;
}footer {font-size: 14px;
}

特殊說明

1. h 標題
   標題元素（如 h1、h2）的排版是由用戶瀏覽器的默認值設置的。可以對他們字體大小進行設置。
   瀏覽器為h1元素設置了一些默認的上邊距和下邊距。

2. P 元素
   當兩個p元素顯示為行內元素，并且需要顯示到一行時，需要把兩個p元素之間的空格去掉，兩個元素緊緊挨著。

3. hr 分割線
   總的線條的寬度=自身的寬度+上下邊框的寬度

4. img 圖片
   圖片是內聯因素，不會單獨占據一行，使用display:block 可以使它變成行元素。

5. 其他
   背景顏色background-color和背景圖片background-image兩個屬性不能同時使用；