#CSS#基礎語法之二_學習札記

1.元素選擇器

<style>
        p{
          color:pink;
        }
        </style>         
        <p>p元素</p>
        <p>p元素</p>
        <p>p元素</p>

2. id選擇器

 <style>
        p{
          color:red;
        }
        #p1{
          color:blue;
        }
        #p2{
          color:green;
        }
        </style>
         
        <p>無id的p</p>
        <p id="p1">id=p1的p</p>
        <p id="p2">id=p2的p</p>

3. 類選擇器

  <style>
        .pre{
          color:blue;
        }
        .after{
          color:green;
        }
        </style>
         <!-- pre類css -->
        <p class="pre">前3個</p>
        <p class="pre">前3個</p>
        <p class="pre">前3個</p>
         <!-- after類css -->
        <p class="after">後3個</p>
        <p class="after">後3個</p>
        <p class="after">後3個</p>

4.精確選擇元素

<style>
        <!--id爲blue的p-->
        p.blue{
          color:blue;
        }  
        <!--id爲blue的span-->
        span.blue{
            color:pink;
        }
        </style>
         
        <p class="blue">class=blue的p</p>
         
        <span class="blue">class=blue的span</span>

 5.尺寸設置

 <style>
        p#percentage{
          width:50%;
          height:50%;
          background-color:pink;
        }
        p#pix{
          width:180px;
          height:50px;
          background-color:green;
        }
        </style>
         
        <p id="percentage"> 按比例設置尺寸50%寬 50%高</p>
         
        <p id="pix"> 按象素設置尺寸 180px寬 50px高</p>
</body>

6. 背景顏色

<style>
        p.gray {background-color: gray;}
        h1 {background-color: transparent}
        h2 {background-color: rgb(250,0,255)}
        h3 {background-color: #00ff00}
        p.kobe{background-color: blueviolet;}
        </style>s
         
        <p class="gray">灰色</p>
        <p class="kobe">科比</p>
        <h1>透明背景，默認即透明背景</h1>
        <h2>紫色</h2>
        <h3>綠色背景</h3>

7.圖片做背景

<style>
        div#test
          {
            background-image:url(kobe.jpg);
            width:1200px;
            height:520px;
          }
        </style>
         
        <div id="test">
          kobe bgp
        </div>

 

8.背景重複

background-repeat屬性
值可以選
repeat; 水平垂直方向都重複
repeat-x; 只有水平方向重複
repeat-y; 只有垂直方向重複
no-repeat; 無重複 

<style>
div#norepeat
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: no-repeat;
  }
 
div#repeat-x
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: repeat-x;
  }
</style>
 
<div id="norepeat">
  背景不重複
</div>
 
<div id="repeat-x">
  背景水平重複
</div>

9.背景平鋪

屬性：background-size
值：contain

<style>
div#contain
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-size: contain;
  }
</style>
  
<div id="contain">
   背景平鋪，通過拉伸實現，會有失真
</div>

 

10.文字顏色

 <style>
        div#kobe{
          color:pink
        }       
        </style>        
        <div id="kobe">
          KobeInPink
        </div>

11.對齊

屬性:text-align
值：left,right,center
div是塊級元素，其默認寬度是100%，所以文本有對齊的空間前提。
但是，span卻看不出右對齊效果，爲什麼呢？
因爲span是內聯元素其默認寬度就是其文本內容的寬度
簡單說就是文本已經粑在其邊框上了，對齊是看不出效果來的

 <style>
        /* 左側對齊 */
        div#left{
          text-align:left;
        }
        /*使div span元素的邊框顯露出來*/
        div,span{
          border: 1px gray solid;
          margin:10px;
        }
        /* 右側對齊 */
        div#right{
          text-align:right;
        }
        /* 居中 */
        div#center{
          text-align:center;
        }
        /* 對齊對span無效 */ 
        span#right{
          text-align:right;
        }
         
        </style>
         
        <div id="left">
        左對齊
        </div>
         
        <div id="right">
        右對齊
        </div>
         
        <div id="center">
        居中
        </div>
         
        <span id="right">
        span看不出右對齊效果
         
        </span>

 

12.文本修飾

text-decoration屬性

<style type="text/css">
        h1 {text-decoration: overline}
        h2 {text-decoration: line-through}
        h3 {text-decoration: underline}
        h4 {text-decoration:blink}
        .a {text-decoration: none}
        </style>
         
        <h1>上劃線</h1>
        <h2>刪除效果</h2>
        <h3>下劃線</h3>
        <h4>閃爍效果，大部分瀏覽器已經取消該效果</h4>
        <a href="https://how2j.cn/">默認的超鏈</a>
        <a class="a" href="https://how2j.cn/">去掉了下劃線的超鏈</a>

13. 行間距

屬性：line-height
值：數字或者百分比

<style>
        p{
          width:200px;
        }
        /* class p間距200% */ 
        .p{
          line-height:200%;
        }
        </style>
         
        <p>
        默認行間距
        默認行間距
        默認行間距
        默認行間距
        默認行間距
        默認行間距
        默認行間距
        默認行間距
        </p>
         
        <p class="p">
        200%行間距
        200%行間距
        200%行間距
        200%行間距
        200%行間距
        200%行間距
        200%行間距
        </p>

14.字符間距

 屬性：letter-spacing
  值： 數字

<style>
        p{
          width:200px;
        }
         
        .p{
          letter-spacing:3;
        }
        </style>
         
        <p>
        默認字符間距 默認字符間距 默認字符間距 
        默認字符間距 默認字符間距 默認字符間距 
        默認字符間距 默認字符間距 默認字符間距 
        </p>
         
        <p class="p">
        字符間距爲3  字符間距爲3  字符間距爲3  
        字符間距爲3  字符間距爲3  字符間距爲3  
        字符間距爲3  字符間距爲3  字符間距爲3  
        </p>

15.首行縮進

text-indent屬性，值數字

<style>
        p{
          width:200px;
        }
         
        .p{
          text-indent:50;
        }
        </style>
         
        <p>
        沒有縮進效果的一段文字沒有縮進效果的一段文字沒有縮進效果的一段文字沒有縮進效果的一段文字
        </p>
         
        <p class="p">
        有縮進效果的一段文字有縮進效果的一段文字有縮進效果的一段文字有縮進效果的一段文字有縮進效果的一段
         
        文字
        </p>

16.大小寫

屬性：text-transform
值：
uppercase 全部大寫
capitalize 首字母大寫
lowercase 全部小寫

<style>
p.u {text-transform:uppercase}
p.c {text-transform:capitalize}
p.l {text-transform:lowercase}
 
</style>
 
<p class="u">
abcD
</p>
 
<p class="c">
abcD
</p>
 
<p class="l">
abcD
</p>

17. 尺寸

屬性：font-size
值：數字或者百分比

<style>
p.big{
  font-size:30px;
}
 
p.small{
  font-size:50%;
}
   
p.small2{
  font-size:0.5em;
} 
</style>
 
<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同於 50%比例的文字</p>

18.風格

font-style:
normal 標準字體
italic 斜體 

<style>
p.n{
  font-style:normal;
}
 
p.i{
  font-style:italic;
}
</style>
 
<p class="n">標準字體</p>
<p class="i">斜體</p>

19.粗細

屬性 font-weight
normal 標準粗細
bold 粗一點

<style>
p.n{
  font-weight:normal;
}
p.b{
  font-weight:bold;
}
</style>
 
<p >標準字體</p>
<p class="n">標準字體</p>
<p class="b">粗一點</p>

 

 20.字庫

<style>
p.f1{
  font-family:"Times New Roman";
}
 
p.f2{
  font-family:Arial;
}
p.f3{
  font-family:宋體;
}
p.f4{
  font-family:黑體;
}
p.f5{
  font-family:楷體;
}
p.f6{
  font-family:微軟雅黑;
}
</style>
 
<p >默認字庫 font family:default </p>
<p class="f1">設置字庫 font-family: Times New Roman</p>
<p class="f2">設置字庫 font-family: Arial</p>
<p class="f3">設置字庫 font-family: 宋體, 這種字體是IE默認字體</p>
<p class="f4">設置字庫 font-family: 黑體</p>
<p class="f5">設置字庫 font-family: 楷體</p>
<p class="f6">設置字庫 font-family: 微軟雅黑, 這個字體是火狐默認字體</p>

 21.聲明在一起

<style>
p.all{
   font:italic bold 30px "Times New Roman";
}
 
</style>
 
<p>默認字體</p>
 
<p class="all">斜體的 粗體的 大小是30px的 "Times New Roman" </p>

 22.鼠標樣式

<style>
  span{
    cursor:crosshair;
  }
</style>
  
<span>鼠標移動到這段文字上，就看到鼠標樣式變成了十字架</span>