Css學習

什麼是CSS

• 怎麼學習

  1. css是什麼
  2. css怎麼用
  3. Css選擇器（重點+難點）
  4. 美化網頁（文字，陰影，超連結，清單，漸變）
  5. 盒子模型
  6. 浮動
  7. 定位
  8. 網頁動畫（特效）

1. 什麼是Css

   • 層疊樣式表
   • CSS：表現（美化網頁）
   • 字型、顔色、邊框、高度、寬度、背景圖檔、網頁定位、網頁浮動

2. 快速入門

   • 内聯樣式規範，

     <style>

     可以編寫css的代碼，每一個聲明最好用分号結尾
     • 文法：選擇器{ 聲明1； }
   • 外聯樣式：使用link外聯建議使用

     • <link rel="stylesheet" href="css/style.css">

     • 優勢：
       1. 内容和表現分離
       2. 網頁結構表現統一，可以實作複用
       3. 樣式十分的豐富
       4. 建議使用獨立于html的css檔案
       5. 利用SEO，容易被搜尋引擎收錄！

3. CSS的導入方式

   • 行内樣式：

     <h1 style="color: skyblue">标題</h1>

   • 内部樣式style标簽：

     <style>
         h1{
             color: skyblue;
         }
     </style>
                

   • 外部樣式：

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

     ，屬于HTML标簽
   • 優先級：行内樣式>内部樣式>外部樣式，遵循就近原則
   • 擴充：CSS2.0用導入式，作用是引入CSS樣式

     <style>
         @import "css/style.css";
     </style>
                

1. 選擇器

   作用：選擇葉敏上的某一個或者某一些元素

   • 基本選擇器

     1. 标簽選擇器
        • 标簽選擇器會選擇到頁面上所有的此标簽

          <style>
                  h1{
                      color: skyblue;
                  }
              </style>
                     

     2. 類選擇器
        • 選擇所有class屬性一緻的标簽，跨标簽
        • 格式：.class的名稱{}
        • 好處：可以多個标簽歸類，是同一個class，可以複用

          <style>
            .a{
              color: skyblue;
            }
            .b{
              color: greenyellow;
            }
            .c{
              color: pink;
            }
            </style>
          
          <h1 class="a">1</h1>
          <h1 class="b">2</h1>
          <h1 class="c">3</h1>
                     

     3. id選擇器

        • <style>
              #a{
                color: pink;
              }
              #b{
                color: greenyellow;
              }
              #c{
                color: skyblue;
              }
            </style>
          
          <h1 id="a">1</h1>
          <h1 id="b">2</h1>
          <h1 id="c">3</h1>
                     

   • 層次選擇器