css 基礎

什麼是css?
css選擇器:
 經常使用的選擇器:
 一、標記選擇器(簡單選擇器)
  標記的名稱{
   屬性名:屬性值
  }
  
  body{
   color:red;
  }
  
 二、class選擇器
  a、第一種形式 匿名的class選擇器
    .選擇器的名稱{
   屬性名:屬性值;
    }
   
    .s1{
   font-style:
    }
   
  b、第二種形式 有命的class選擇器
  標記的名稱  .選擇器的名稱{
   屬性名:屬性值
  }
  
    div .s1{
   font-style:
    } 
   
    三、id選擇器
  #選擇器的名稱{
   屬性名:屬性值
  }
  
     #s1{
   font-style:
    } 
   
    四、選擇器的分組
  h1,h2,h3{
   
   color:green;
  }
  
 五、選擇器的派生
  #d2 p{
   font-size :120px;
  }
  表示id爲d2的標記內部的全部p標記的字體爲120px
  
樣式的優先級:
 1) 默認樣式:瀏覽器默認的樣式
 2) 外部樣式:樣式寫在一個.csss文件裏
 3) 內部樣式:樣式寫在html文件裏
 4) 內聯樣式:樣式寫在標記裏
 從上到下,優先級愈來愈高
 
 
兩個關鍵屬性:
 一、display
   display的3個值
   none:不顯示該標記
   block:按塊標記的方式顯示
   inline:按行內標記的方式來顯示
 
 二、position
  position的3個值
   static(缺省值):瀏覽器在默認狀況下,會按從左到右,從上到下依次擺放各個標記
   absolute:先對父標記偏移
   relative:先按照默認的方式擺放,而後在偏移
   
快標記和行內標記
 一、塊標記(另起一行)
  常見的塊標記
  div
  p
  img
  form
  table
  h1...h6
  ul
  li
 二、行內標記(不用另起一行)
  行見的行內標記
  span
  strong
  a
  
一些常見的屬性:
 文本
 font-size:30px;             字體大小
 font-family : "宋體"         字體
 font-style:italic/normal 風格
 font-weight:100             粗細100~900
 text-align:center           對齊方式 left , right , center
 text-decoration:underline;  加下劃線
 cursor:pointer              光標的形狀
  
  
 背景
 background-color : red                       背景顏色
 background-image :url(images/b1.jpg)         背景圖片
 background-repeat:no-repeat                  平鋪方式 repeat-x repeat-y
 background-position: 20px 10px;              位置
 background-attachment : fixed                 依附方式 scroll(缺省)
 
 也能夠簡化爲:
 background : 背景顏色 背景圖片 平鋪方式 依附方式 水平位置 垂直位置
  
 邊框
 border : 1px solid red;
 border-left;
 border-right;
 border-bottom;
 border-top;
 
 定位
 width : 100px;
 height: 200px;
 margin:                                   //外邊距
   margin-left : 20px;
   margin-top  : 30px;
   margin-right: 40px;
   margin-bottom : 50 px;
 也能夠簡化爲:
 margin: 30px 40px 50px 20px     頂右底左
 
 此外,還有這樣一些形式
 margin : 0px;
 margin:20px auto;  //上下各20px,左右平均分配。通常用於居中
 
 padding:                                    //內邊距
  padding-left :  20px;
  padding-top  :  30px;
  padding-right:  40px;
  padding-bottom: 50px;
  
 也能夠簡化爲:
 padding:30px 40px 50px 20px;    頂右底左
 
 列表相關:list-style-type : none;
 
 浮動(即取消標記的獨佔一行的特性。浮動以後,其位置能夠被其餘標記使用)
 
 float:left;            //浮動 right
 clear:both;            //取消浮動的影響,指的是告訴瀏覽器,雖然浮動的標記讓出了位置,可是不可以使用
 
  
 連接的僞樣式:
 a : link {color : red } 沒有訪問時
 a : visited {color : blue} 訪問後
 a : active {color : lime} 鼠標立即但尚未放開時
 a : hover {color : aqua} 鼠標指向時
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
  css

相關文章
相關標籤/搜索