根據在這里 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;background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255)       100%) ;  # 漸變色opacity: 0.5; # 不透明度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;border-left: 10px solid black; # 下面三個的縮寫border-left-width: 10px;border-left-style: solid;  # 邊框可見。 如果未設置顏色，則默認使用黑色。取值：doubleborder-left-color:black;box-shadow: 5px 5px red;  # 不寫默認引用是黑色box-shadow: 5px 5px 5px green;  # 添加了模糊效果，值越大越模糊box-shadow: 0 0 0 5px blue; #  添加了擴大陰影范圍，值越大陰影越大 (除了0，必須帶單位，顏色可以使用rgba，設置不透明度)
}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兩個屬性不能同時使用；