css學習筆記一

來源:互聯網
上載者:User

1.  css作用

   將文檔與格式分離 ;    更好地控制網頁布局;     網頁體積更小

   css通過規則控制頁面,規則分選擇和說明兩部分。選擇可以是任何html標籤,說明包括屬性和屬性值兩部分,說明被符號“{ }”包含。

2.  css使用

  2.1 植入式

     直接將樣式表添加在網頁的<body>之前

    <style type="text/css">

   <--

      樣式規則

  -->

 2.2 連結式

    將外部css檔案連結進文檔

   <LINK  rel=stylesheet url="mycss.css" type="text/css">

 2.3 輸入式

    與連結式相似,但可以與其他方法同用

    <style type="text/css">

   <--

      @import  url("mycss.css");

      其他樣式規則

  -->

 2.4 行內式

   <p style="font-family:">

 

 

   <--

      @import  url("mycss.css");

      其他樣式規則

  -->

 2.4 行內式

   <p style="font-family:">

 

 

   <--

      @import  url("mycss.css");

      其他樣式規則

  -->

 2.4 行內式

   <p style="font-family:">

3. css技巧

   分類:將一個選擇分為不同類別,可對不同類別實施不同的控制。如:

   p.first {color: green}

   p.second {color: red}

   p.third {color: gray}

   <p class = first>this is the first class</p>

  或直接用類別名:.first {color: green} 這樣所有此類別的內容顏色都為綠色,而不止局限在<p>標籤內

4.css定位控制

4.1 絕對位置

   p <position: absolute; left: 100px;  top: 40px>

4.2 相對定位

  p <position: relative; left: 100px;  top: 40px>

  相對於元素應該出現的位置進行定位

4.3 可視性

  p <visibility: hidden>

4.4 重疊要素

  p <z-index: 1>

  多個要素共占同一地區時,z-index值最大的要素在最上方,最小的在最下方

 5.css字型控制

5.1  字模系列:字型名稱    即屬性font-family的值

5.2  字型大小:即屬性font-size的值。

    字型大小單位:Points (pt)、Ems(em)、Pixels(px)

           in (英寸) cm (厘米) mm (毫米)

          pc (打字機字型尺寸單位) ex (x-height)

   字型大小關鍵字:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • 5.3 字型風格: font-style

        參數值:italic   Oblique    normal

    5.4 字重:  font-weight

        參數值:bold  normal

           或 100  200 .......900


    相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.