重学前端002 --响应式网页设计 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;
  
   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两个属性不能同时使用；