CSS樣式簡介

weixin_33860722發表於2016-07-11
CSS

CSS：層疊樣式表，用來控制HTML標籤樣式

CSS的編寫格式是鍵值對形式的

如：color：red（冒號左邊是屬性名，冒號右邊是屬性值）
1>CSS的3中書寫格式
行內樣式：（內嵌樣式）直接在標籤style屬性中書寫
<body style="color:red;">

<!--設定背景顏色-->
<body style="background-color: #b3d4fc;">   
 <!--行內樣式-->
</body>
2014484-f5cebbd56c34a3b4.png
設定背景顏色
<body>    
<!--行內樣式--> 
 <div style="font-size: 30px; color:red; background-color: #b3d4fc">糖糖</div>   
 <p style="font-size: 24px; color:bisque; background-color: aqua">個人部落格</p>
</body>
2014484-0e8f920539bc92fa.png
介面展示

頁內樣式：在本網頁的style標籤中書寫

<html lang="en">
<head>    
     <meta charset="UTF-8">   
     <title>頁內樣式</title>  
      <!--頁內樣式:符合統一樣式的應用-->
      <style>       
       div{       
             font-size: 30px;   
             color: red;       
             background-color: #b3d4fc;  
        }   
      
       p{           
             font-size: 24px;   
             color:rebeccapurple;  
              background-color: red;   
       }    
      </style>
</head>
<body>   
         <div>糖糖</div>   
         <p>個人部落格</p>
</body>
</html>
2014484-97fab0b3da0e27c5.png
介面展示

外部樣式：在單獨的CSS檔案中書寫，然後在網頁中用link標籤引用

新建一個檔案：index.css(固定名稱)，新建的時候你是找不到css字尾的，選擇第一個新建file然後自己寫上css字尾就可以了
div{    
      color: darkred;    
      /*字型樣式*/   
       font-family: "Apple Braille"; 
       font-size: 30px;
  }

p{    
        color: #b3d4fc;  
        font-size: 24px;
 }


需要用到的地方運用外部樣式進行引用
<html lang="en">
<head>   
       <meta charset="UTF-8"> 
       <title>外部樣式</title>  
       <link rel="stylesheet" href="dist/css/index.css">
</head>
<body>    
    <div>111111111111111111</div>    
    <p>2222222222222222222</p>
</body>
</html>
2014484-293910e6d6dd104c.png
新建檔案
2014484-a49022352946e34f.png
介面效果

CSS樣式後兩者運用最多，頁內樣式就像我們在本類中寫一個方法，本類呼叫，而外部樣式就像是我們在寫一個類物件出來，通過匯入標頭檔案進行呼叫裡面的方法，而行內樣式就像是最傻的辦法，在一個方法裡面寫的東西，雖然它傻，但是還是有特殊的地方要這樣寫，如果你想知道三個樣式或者同時運用兩個樣式的結果。

-----------無情的分隔線------------

CSS樣式遵循的規律：

1.就近原則
2.疊加原則

也就是說它會先選擇離它最近的，然後疊加相對於它選擇的那個沒有的效果

相關文章