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;
}