CSS 引入方式，選擇器

weixin_34050427發表於2016-12-12
CSS

CSS引入方式(三種)

  • 1.內聯屬性
    對於想要設定樣式的HTML元素，直接修改他的style屬性，將css程式碼直接寫在style屬性裡
<div style="font-size:30px">
     apple
</div>
  • 2.寫在style標籤裡
<style>
    #head{
        font-size:20px;
    }
</style>
  • 3.寫在link標籤裡引用外部檔案
   <link rel="stylesheet" href="styles.css" />  //styles.css是自己寫在外部的檔案

CSS選擇器

  • 元素選擇器：用HTML中的標籤作為選擇器，將所有相同的標記應用同一種樣式
    下面程式碼中的div中所包含的兩個單詞的字型顏色都被改變
    <style>    
        div{        
             font-size:50px;        
             color: #00B7FF;    
           }
    </style>
    <body>
      <div><h1>apple</h1></div>
      <div>orange</div>
    </body>
  • 全域性選擇器：使用 * 選擇所有的標記，表示適用於所有的
    加星號與不加的效果一樣
 *.app{        
        font-size:50px;        
        color: #00B7FF;    
  }

*#app{
        font-size:50px;        
        color: #00B7FF;
  }
  • class選擇器：使用.class屬性名{樣式...}
    下面的舉例同一樣可以修改apple這個單詞的顏色和字型
<style>    
     .app{        
        font-size:50px;        
        color: #00B7FF;    
      }
</style>
<body>    
    <div class="app">apple</div>
</body>
  • 類選擇器可以與其他選擇器搭配使用，css我們需要修改
  div.app{        
        font-size:50px;        
        color: #00B7FF;    
      }
  • ID選擇器：使用 #id屬性名{樣式...}
    下面的舉例同一樣可以修改apple這個單詞的顏色和字型
 <style>    
      #app{        
          font-size:50px;        
          color: #00B7FF;    
      }
</style>                
<body>    
      <div id="app">apple</div>
 </body>

相關文章