CSS 基础4（超链接状态、隐藏、css文件、优先级）

• CSS调整超链状态
  
  1.伪类，所谓的伪类即被选中的元素处于某种状态的时候 
  
  超链状态有4种 
  link - 初始状态，从未被访问过 
  visited - 已访问过 
  hover - 鼠标悬停于超链的上方 
  active - 鼠标左键点击下去，但是尚未弹起的时候
  

  <style>
  a:link {color: #FF0000}
  a:visited {color: #00FF00}
  a:hover {color: #FF00FF}
  a:active {color: #0000FF}
  </style>
    
  <a href="http://www.12306.com">超链的不同状态</a>

  
  2.去除超链的下划线
  默认状态下，超链是有下划线的，但是现在网站上的超链普遍采用无下划线风格。
  
  使用 text-decoration: none 文本修饰的样式来解决
  

  <style>
  a.no_underline {text-decoration: none}
  </style>
     
  <a href="http://www.12306.com">默认的超链</a>
  <br>
  <a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>

• CSS 隐藏元素的两种方式DISPLAY:NONE; 和 VISIBILITY:HIDDEN;
  
  隐藏元素有两种方式 
  display:none; 
  visibility:hidden;
  
  使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
  使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”
  
  

  <style>
  div.d{
    display:none;
  }
   
  div.v{
    visibility:hidden;
  }
  </style>
   
  <div>可见的div1</div>
  <div class="d">隐藏的div2,使用display:none隐藏</div>
  <div>可见的div3</div>
  <div class="v">隐藏的div4,使用visibility:hidden隐藏</div>
  <div>可见的div5</div>

• CSS 把样式写在一个外部文件中
  
  如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护 
  这个时候就会选择把所有的css内容，放在一个独立文件里 
  然后在html中引用该文件 
  通常这个文件会被命名为style.css
  
  1.直接在html里面写样式
  样式代码写在style标签里
  

  <style>
  .p1{
    color:red;
  }
   
  .span1{
    color:blue;
  }
  </style>
   
  <p class="p1">红色</p>
   
  <span class="span1">蓝色</span>

  
  2.把样式代码写在style.css，并在html中包含它
  创建一个文件叫style.css
  其内容为
  

  .p1{
    color:red;
  }
  .span1{
    color:blue;
  }

  然后在html中包含该文件
  注：style.css文件里，就不要再使用style标签了
  

  <link rel="stylesheet" type="text/css" href="/study/style.css" />

  
  

  <link rel="stylesheet" type="text/css" href="http://how2j.cn/study/style.css" />
   
  <p class="p1">红色</p>
   
  <span class="span1">蓝色</span>

  
  3.css是本地文件 如何包含
   在测试的时候，大家写的css文件都是放在本地的，比如d:/style.css 
  这时就应该写成 
  href="file://d:/style.css"
  
  
  
• CSS 样式的优先级
  如果style.css中，<style>标签中，style属性上有冲突的样式，那么谁的优先级更高？
  
  1.style标签与外部文件style.css样式重复
  外部文件style.css的内容是
  

  .p1{
    color:red;
  }
  .span1{
    color:blue;
  }

  同时style标签中也有一个.p1
  那么优先使用： 最后出现的一个
  

  <link rel="stylesheet" type="text/css" href="http://how2j.cn/study/style.css" />
   
  <style>
  .p1{
    color:green;
  }
  </style>
   
  <p class="p1">p1 颜色是绿色，优先使用靠的最后出现的</p>

  
  2.style标签上的与style属性冲突
  style标签上的与style属性冲突 
  优先使用style属性
  

  <style>
  .p1{
    color:green;
  }
  </style>
   
  <p class="p1" style="color:red">p1 颜色是红色，优先使用style属性</p>

  
  3.!important
  如果样式上增加了!important，则优先级最高，甚至高于style属性
  

  <style>
  .p1{
    color:green !important;
  }
   
  </style>
   
  <p class="p1" style="color:red">p1 颜色是绿色，优先使用!important样式</p>