5-CSS-Best-Practice.md

动手 - 修改更多CSS样式

1. 在 css 文件夹中添加一个新文件 custom.css, 并在 index.html 文件中的元素引用，如下图

   

2. 使用 类选择器、 id选择器 、 派生选择器 给 index.html 中的元素添加样式。
   观察 index.html中的文章预览元素(仅截取<div class="post-preview">标签中的内容)：

   <div class="post-preview">
       <a href="post.html">
           <h2 class="post-title">
               Man must explore, and this is exploration at its greatest
           </h2>
           <h3 class="post-subtitle">
               Problems look mighty small from 150 miles up
           </h3>
       </a>
       <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 24, 2014</p>
   </div>

   • 把 <div class="post-preview">改为 <div class="container" id="post">
   • 请在 custom.css中添加下列内容并保存，然后我们来看看CSS中如何使用选择器（注意阅读注释内容）：

   /*这里的“*”是通配符，意思是该页面中所有的元素都会被加上*后面大括号里的样式，
   对应图中页面中所有的标签都有红色的上边框*/
   *{
       border:1px solid red;
   }
   /*类选择器：这里使用.post-title的方式选中所有具有类名为post-title的元素，这里的样式使他们大小一样，都有绿色的边框*/
   .post-title{
       background-color: #777;
       border: 10px solid green;
   }
   
   /*id选择器：这里使用#post的方式选中具有id属性值为post的元素，添加样式，改变它的背景色为白色, 边框为绿色点线*/
   #post{
       border: 5px dotted green;
       background-color: #FFF;
   }
   
   /*派生选择器：这里的空格代表元素层级关系，选中了class属性值为“post-meta”的元素包含链接的元素，使用派生选择器会使得你的css代码层次更清晰，更有可读性”*/
   .post-meta a {
       background-color: blue
   }

3. 自己练习更多CSS属性