文章目錄
- css 樣式
- 特殊說明
根據在這里 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;
}
特殊說明
-
h 標題
標題元素(如 h1、h2)的排版是由用戶瀏覽器的默認值設置的。可以對他們字體大小進行設置。
瀏覽器為h1元素設置了一些默認的上邊距和下邊距。 -
P 元素
當兩個p元素顯示為行內元素,并且需要顯示到一行時,需要把兩個p元素之間的空格去掉,兩個元素緊緊挨著。 -
hr 分割線
總的線條的寬度=自身的寬度+上下邊框的寬度 -
img 圖片
圖片是內聯因素,不會單獨占據一行,使用display:block 可以使它變成行元素。 -
其他
背景顏色background-color和背景圖片background-image兩個屬性不能同時使用;